gd-bs 5.6.2 → 5.6.3

package/build/components/checkboxGroup/item.js

@@ -31,7 +31,8 @@ var CheckboxItem = /** @class */ (function () {
         // Set the attributes
         this._elCheckbox = this._el.querySelector("input");
         if (this._elCheckbox) {
-            this._elCheckbox.disabled = this._parent.isReadonly || this._props.isDisabled ? true : false;
+            this._elCheckbox.disabled = this._parent.isDisabled ? true : false;
+            this._elCheckbox.readOnly = this._parent.isReadonly ? true : false;
             // Default the title property for the checkbox
             this._elCheckbox.title = this.props.label || this._parent.title || "";
         }

package/build/components/form/control.js

@@ -107,6 +107,7 @@ var FormControl = /** @class */ (function () {
                     colSize: cbProps.colSize,
                     hideLabel: true,
                     isInline: cbProps.isInline,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     items: cbProps.items,
                     onChange: cbProps.onChange,
@@ -121,6 +122,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     onChange: this._props.onChange,
                     placeholder: this._props.placeholder,
@@ -165,6 +167,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     onChange: this._props.onChange,
                     placeholder: this._props.placeholder,
@@ -179,6 +182,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     onChange: this._props.onChange,
                     placeholder: this._props.placeholder,
@@ -207,6 +211,7 @@ var FormControl = /** @class */ (function () {
                     className: className,
                     colSize: cbMultiProps.colSize,
                     hideLabel: true,
+                    isDisabled: this._props.isDisabled,
                     isInline: cbMultiProps.isInline,
                     isReadonly: this._props.isReadonly,
                     items: cbMultiProps.items,
@@ -253,6 +258,7 @@ var FormControl = /** @class */ (function () {
                     className: className,
                     colSize: this._props.colSize,
                     hideLabel: true,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     items: this._props.items,
                     multi: true,
@@ -269,6 +275,7 @@ var FormControl = /** @class */ (function () {
                     className: className,
                     colSize: this._props.colSize,
                     hideLabel: true,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     items: this._props.items,
                     multi: true,
@@ -284,6 +291,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     onChange: this._props.onChange,
                     placeholder: this._props.placeholder,
@@ -299,6 +307,7 @@ var FormControl = /** @class */ (function () {
                     className: className,
                     colSize: this._props.colSize,
                     hideLabel: true,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     items: this._props.items,
                     onChange: this._props.onChange,
@@ -313,6 +322,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     min: this._props.min || 0,
                     max: this._props.max || 100,
@@ -345,6 +355,7 @@ var FormControl = /** @class */ (function () {
                     className: className,
                     colSize: this._props.colSize,
                     hideLabel: true,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     items: this._props.items,
                     onChange: this._props.onChange,
@@ -359,6 +370,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     onChange: this._props.onChange,
                     placeholder: this._props.placeholder,
@@ -374,6 +386,7 @@ var FormControl = /** @class */ (function () {
                 this._tb = inputGroup_1.InputGroup({
                     className: className,
                     id: this._props.id,
+                    isDisabled: this._props.isDisabled,
                     isReadonly: this._props.isReadonly,
                     onChange: this._props.onChange,
                     placeholder: this._props.placeholder,

package/build/components/inputGroup/index.js

@@ -202,7 +202,8 @@ var _InputGroup = /** @class */ (function (_super) {
                 // Update the textbox
                 this.props.id ? textarea.id = this.props.id : null;
                 this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;
-                textarea.disable = this.props.isReadonly ? true : false;
+                textarea.disable = this.props.isDisabled ? true : false;
+                textarea.readOnly = this.props.isReadonly ? true : false;
                 textarea.rows = this.props.rows;
                 this.props.title ? textarea.title = this.props.title : null;
             }
@@ -215,7 +216,8 @@ var _InputGroup = /** @class */ (function (_super) {
                 // Update the textbox
                 this.props.id ? input.id = this.props.id : null;
                 this.props.placeholder ? input.placeholder = this.props.placeholder : null;
-                input.disable = this.props.isReadonly ? true : false;
+                input.disable = this.props.isDisabled ? true : false;
+                input.readOnly = this.props.isReadonly ? true : false;
                 this.props.title ? input.title = this.props.title : null;
                 typeof (this.props.min) === "number" ? input.min = this.props.min + "" : null;
                 typeof (this.props.max) === "number" ? input.max = this.props.max + "" : null;

package/dist/gd-bs-icons.js

@@ -918,7 +918,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.CheckboxItem = void 0;\n\nvar _1 = __webpack_require__(/*! . */ \"./src/components/checkboxGroup/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/checkboxGroup/templates.ts\");\n/**\r\n * Checkbox Item\r\n */\n\n\nvar CheckboxItem =\n/** @class */\nfunction () {\n  // Constructor\n  function CheckboxItem(props, parent, template) {\n    this._el = null;\n    this._elCheckbox = null;\n    this._isSelected = null;\n    this._parent = null;\n    this._props = null; // Save the properties\n\n    this._parent = parent;\n    this._props = props; // Create the element\n\n    var el = document.createElement(\"div\");\n    el.innerHTML = template || this.getHTML().trim();\n    this._el = el.firstChild; // Configure the item\n\n    this.configure(); // Configure the events\n\n    this.configureEvents();\n  } // Configure the item\n\n\n  CheckboxItem.prototype.configure = function () {\n    // Set the attributes\n    this._elCheckbox = this._el.querySelector(\"input\");\n\n    if (this._elCheckbox) {\n      this._elCheckbox.disabled = this._parent.isReadonly || this._props.isDisabled ? true : false; // Default the title property for the checkbox\n\n      this._elCheckbox.title = this.props.label || this._parent.title || \"\";\n    } // See if the title property is defined\n\n\n    if (this._parent.title) {\n      // Set the title\n      this._el.title = this._parent.title;\n    } // See if the inline flag is set\n\n\n    if (this._parent.isInline) {\n      this._el.classList.add(\"form-check-inline\");\n    } // Set the label\n\n\n    var label = this._el.querySelector(\"label\");\n\n    if (label) {\n      label.innerHTML = this._props.label || \"&nbsp;\";\n    } // Ensure the checkbox exists\n\n\n    if (this._elCheckbox) {\n      // See if the \"isSelected\" property is set\n      if (typeof this._props.isSelected === \"boolean\") {\n        // Set the selected property\n        this._isSelected = this._props.isSelected;\n        this._elCheckbox.checked = this._isSelected;\n      } // Else, see if a value exists for the group\n      else if (this._parent.value) {\n        // Parse the values\n        var values = typeof this._parent.value === \"string\" ? [this._parent.value] : this._parent.value;\n\n        for (var j = 0; j < values.length; j++) {\n          // See if this item is selected\n          if (values[j] == this._props.label) {\n            // Select this item\n            this._elCheckbox.checked = true;\n          }\n        } // Set the value\n\n\n        this._isSelected = this._elCheckbox.checked;\n      } else {\n        // Set the default value\n        this._isSelected = this._props.isSelected ? true : false;\n        this._elCheckbox.checked = this._isSelected;\n      }\n    }\n  }; // Configures the events\n\n\n  CheckboxItem.prototype.configureEvents = function () {\n    var _this = this; // Add a click event\n\n\n    this._elCheckbox.addEventListener(\"click\", function (ev) {\n      // Update the value\n      _this._isSelected = !_this._isSelected;\n      _this._elCheckbox.checked = _this._isSelected; // See if an event is defined\n\n      if (_this._props.onChange) {\n        // Call the event\n        _this._props.onChange(_this._isSelected ? _this._props : null, ev);\n      }\n    });\n  }; // Gets the HTML template\n\n\n  CheckboxItem.prototype.getHTML = function () {\n    // Return it based on the type\n    switch (this._props.type || this._parent.type) {\n      // Radio\n      case _1.CheckboxGroupTypes.Radio:\n        return templates_1.HTMLRadio;\n      // Switch\n\n      case _1.CheckboxGroupTypes.Switch:\n        return templates_1.HTMLSwitch;\n      // Default to a checkbox\n\n      default:\n        return templates_1.HTMLCheckbox;\n    }\n  };\n\n  Object.defineProperty(CheckboxItem.prototype, \"checkbox\", {\n    /**\r\n     * Public Properties\r\n     */\n    // The checkbox element\n    get: function get() {\n      return this._elCheckbox;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(CheckboxItem.prototype, \"el\", {\n    // The component HTML element\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(CheckboxItem.prototype, \"isChecked\", {\n    // Returns true if the checkbox is checked\n    get: function get() {\n      // Get the checkbox\n      var cb = this._el.querySelector(\"input\"); // Return the value\n\n\n      return cb ? cb.checked : null;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(CheckboxItem.prototype, \"props\", {\n    // The component properties\n    get: function get() {\n      return this._props;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Toggles the checkbox\n\n  CheckboxItem.prototype.toggle = function () {\n    // Update the value\n    this._isSelected = !this._isSelected; // Set the checkbox value\n\n    this._el.querySelector(\"input\").checked = this._isSelected;\n  };\n\n  return CheckboxItem;\n}();\n\nexports.CheckboxItem = CheckboxItem;\n\n//# sourceURL=webpack://gd-bs/./src/components/checkboxGroup/item.ts?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.CheckboxItem = void 0;\n\nvar _1 = __webpack_require__(/*! . */ \"./src/components/checkboxGroup/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/checkboxGroup/templates.ts\");\n/**\r\n * Checkbox Item\r\n */\n\n\nvar CheckboxItem =\n/** @class */\nfunction () {\n  // Constructor\n  function CheckboxItem(props, parent, template) {\n    this._el = null;\n    this._elCheckbox = null;\n    this._isSelected = null;\n    this._parent = null;\n    this._props = null; // Save the properties\n\n    this._parent = parent;\n    this._props = props; // Create the element\n\n    var el = document.createElement(\"div\");\n    el.innerHTML = template || this.getHTML().trim();\n    this._el = el.firstChild; // Configure the item\n\n    this.configure(); // Configure the events\n\n    this.configureEvents();\n  } // Configure the item\n\n\n  CheckboxItem.prototype.configure = function () {\n    // Set the attributes\n    this._elCheckbox = this._el.querySelector(\"input\");\n\n    if (this._elCheckbox) {\n      this._elCheckbox.disabled = this._parent.isDisabled ? true : false;\n      this._elCheckbox.readOnly = this._parent.isReadonly ? true : false; // Default the title property for the checkbox\n\n      this._elCheckbox.title = this.props.label || this._parent.title || \"\";\n    } // See if the title property is defined\n\n\n    if (this._parent.title) {\n      // Set the title\n      this._el.title = this._parent.title;\n    } // See if the inline flag is set\n\n\n    if (this._parent.isInline) {\n      this._el.classList.add(\"form-check-inline\");\n    } // Set the label\n\n\n    var label = this._el.querySelector(\"label\");\n\n    if (label) {\n      label.innerHTML = this._props.label || \"&nbsp;\";\n    } // Ensure the checkbox exists\n\n\n    if (this._elCheckbox) {\n      // See if the \"isSelected\" property is set\n      if (typeof this._props.isSelected === \"boolean\") {\n        // Set the selected property\n        this._isSelected = this._props.isSelected;\n        this._elCheckbox.checked = this._isSelected;\n      } // Else, see if a value exists for the group\n      else if (this._parent.value) {\n        // Parse the values\n        var values = typeof this._parent.value === \"string\" ? [this._parent.value] : this._parent.value;\n\n        for (var j = 0; j < values.length; j++) {\n          // See if this item is selected\n          if (values[j] == this._props.label) {\n            // Select this item\n            this._elCheckbox.checked = true;\n          }\n        } // Set the value\n\n\n        this._isSelected = this._elCheckbox.checked;\n      } else {\n        // Set the default value\n        this._isSelected = this._props.isSelected ? true : false;\n        this._elCheckbox.checked = this._isSelected;\n      }\n    }\n  }; // Configures the events\n\n\n  CheckboxItem.prototype.configureEvents = function () {\n    var _this = this; // Add a click event\n\n\n    this._elCheckbox.addEventListener(\"click\", function (ev) {\n      // Update the value\n      _this._isSelected = !_this._isSelected;\n      _this._elCheckbox.checked = _this._isSelected; // See if an event is defined\n\n      if (_this._props.onChange) {\n        // Call the event\n        _this._props.onChange(_this._isSelected ? _this._props : null, ev);\n      }\n    });\n  }; // Gets the HTML template\n\n\n  CheckboxItem.prototype.getHTML = function () {\n    // Return it based on the type\n    switch (this._props.type || this._parent.type) {\n      // Radio\n      case _1.CheckboxGroupTypes.Radio:\n        return templates_1.HTMLRadio;\n      // Switch\n\n      case _1.CheckboxGroupTypes.Switch:\n        return templates_1.HTMLSwitch;\n      // Default to a checkbox\n\n      default:\n        return templates_1.HTMLCheckbox;\n    }\n  };\n\n  Object.defineProperty(CheckboxItem.prototype, \"checkbox\", {\n    /**\r\n     * Public Properties\r\n     */\n    // The checkbox element\n    get: function get() {\n      return this._elCheckbox;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(CheckboxItem.prototype, \"el\", {\n    // The component HTML element\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(CheckboxItem.prototype, \"isChecked\", {\n    // Returns true if the checkbox is checked\n    get: function get() {\n      // Get the checkbox\n      var cb = this._el.querySelector(\"input\"); // Return the value\n\n\n      return cb ? cb.checked : null;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(CheckboxItem.prototype, \"props\", {\n    // The component properties\n    get: function get() {\n      return this._props;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Toggles the checkbox\n\n  CheckboxItem.prototype.toggle = function () {\n    // Update the value\n    this._isSelected = !this._isSelected; // Set the checkbox value\n\n    this._el.querySelector(\"input\").checked = this._isSelected;\n  };\n\n  return CheckboxItem;\n}();\n\nexports.CheckboxItem = CheckboxItem;\n\n//# sourceURL=webpack://gd-bs/./src/components/checkboxGroup/item.ts?");
 
 /***/ }),
 
@@ -1028,7 +1028,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar __assign = this && this.__assign || function () {\n  __assign = Object.assign || function (t) {\n    for (var s, i = 1, n = arguments.length; i < n; i++) {\n      s = arguments[i];\n\n      for (var p in s) {\n        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n      }\n    }\n\n    return t;\n  };\n\n  return __assign.apply(this, arguments);\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.FormControl = void 0;\n\nvar checkboxGroup_1 = __webpack_require__(/*! ../checkboxGroup */ \"./src/components/checkboxGroup/index.ts\");\n\nvar custom_1 = __webpack_require__(/*! ./custom */ \"./src/components/form/custom.ts\");\n\nvar dropdown_1 = __webpack_require__(/*! ../dropdown */ \"./src/components/dropdown/index.ts\");\n\nvar inputGroup_1 = __webpack_require__(/*! ../inputGroup */ \"./src/components/inputGroup/index.ts\");\n\nvar listBox_1 = __webpack_require__(/*! ../listBox */ \"./src/components/listBox/index.ts\");\n\nvar _1 = __webpack_require__(/*! . */ \"./src/components/form/index.ts\");\n/**\r\n * Form Control\r\n */\n\n\nvar FormControl =\n/** @class */\nfunction () {\n  // Constructor\n  function FormControl(props, formProps, elLabel) {\n    var _this = this;\n\n    this._cb = null;\n    this._custom = null;\n    this._el = null;\n    this._elLabel = null;\n    this._formProps = null;\n    this._ddl = null;\n    this._isRendered = false;\n    this._lb = null;\n    this._tb = null; // Save the parameters\n\n    this._formProps = formProps;\n    this._props = props;\n    this._elLabel = elLabel; // See if there is a rendering event\n\n    if (typeof this._props.onControlRendering === \"function\") {\n      // Call the event and see if a promise is returned\n      var returnVal = this._props.onControlRendering(Object.assign({}, this._props));\n\n      if (returnVal && typeof returnVal[\"then\"] === \"function\") {\n        // Wait for it to complete\n        returnVal[\"then\"](function (newProps) {\n          // Update the properties\n          _this._props = newProps || _this._props; // Create the control\n\n          _this.create();\n        });\n      } else {\n        // Create the control\n        this.create();\n      }\n    } else {\n      // Create the control\n      this.create();\n    }\n  } // Configure the control\n\n\n  FormControl.prototype.configure = function () {\n    // Ensure a control was created\n    if (this.control) {\n      // Set the element\n      this._el = this.control.el; // See if an error message exists\n\n      if (this._props.errorMessage) {\n        // Get the group\n        var elGroup = this._el.querySelector(\".input-group\") || this._el.querySelector(\".form-check:last-child\");\n\n        if (elGroup) {\n          // Add the error message\n          var elErrorMessage = document.createElement(\"div\");\n          elErrorMessage.className = \"invalid-feedback\";\n          elErrorMessage.innerHTML = this._props.errorMessage;\n          elGroup.appendChild(elErrorMessage);\n        }\n      } // See if an element was defined to render to\n\n\n      if (this._props.el) {\n        // Append the control to the element\n        this._props.el.appendChild(this._el);\n      } // See if the label is set\n\n\n      if (this._elLabel && this._formProps.isFloating && this._el.id) {\n        // Set the attributes\n        this._elLabel.setAttribute(\"for\", this._el.id);\n      }\n    }\n  }; // Creates the control\n\n\n  FormControl.prototype.create = function () {\n    var _this = this; // Parse the custom classes to add\n\n\n    var className = [this._props.className || \"\", this._props.controlClassName || \"\"].join(\" \").trim(); // Render the control based on the type\n\n    switch (this._props.type) {\n      // Checkbox\n      case _1.FormControlTypes.Checkbox:\n        var cbProps = this._props; // Add the checkbox group\n\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: cbProps.colSize,\n          hideLabel: true,\n          isInline: cbProps.isInline,\n          isReadonly: this._props.isReadonly,\n          items: cbProps.items,\n          onChange: cbProps.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n          value: this._props.value\n        });\n        break;\n      // Color Picker\n\n      case _1.FormControlTypes.ColorPicker:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.ColorPicker,\n          value: this._props.value\n        });\n        break;\n      // Datalist\n\n      case _1.FormControlTypes.Datalist:\n        // Add the dropdown\n        this._ddl = dropdown_1.Dropdown({\n          className: className,\n          formFl: true,\n          id: this._props.id,\n          isDatalist: true,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          value: this._props.value\n        });\n        break;\n      // Dropdown\n\n      case _1.FormControlTypes.Dropdown:\n        // Add the dropdown\n        this._ddl = dropdown_1.Dropdown({\n          className: className,\n          formFl: true,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          onMenuRendering: this._props.onMenuRendering,\n          title: this._props.title,\n          value: this._props.value\n        });\n        break;\n      // Email\n\n      case _1.FormControlTypes.Email:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.Email,\n          value: this._props.value\n        });\n        break;\n      // File\n\n      case _1.FormControlTypes.File:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.File,\n          value: this._props.value\n        });\n        break;\n      // List Box\n\n      case _1.FormControlTypes.ListBox:\n        // Add the list box\n        this._lb = listBox_1.ListBox({\n          id: this._props.name,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          value: this._props.value\n        });\n        break;\n      // Multi-Checkbox\n\n      case _1.FormControlTypes.MultiCheckbox:\n        var cbMultiProps = this._props; // Add the checkbox group\n\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: cbMultiProps.colSize,\n          hideLabel: true,\n          isInline: cbMultiProps.isInline,\n          isReadonly: this._props.isReadonly,\n          items: cbMultiProps.items,\n          multi: true,\n          onChange: cbMultiProps.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n          value: this._props.value\n        });\n        break;\n      // Multi-Dropdown\n\n      case _1.FormControlTypes.MultiDropdown:\n        // Add the dropdown\n        this._ddl = dropdown_1.Dropdown({\n          className: className,\n          formFl: true,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          onMenuRendering: this._props.onMenuRendering,\n          title: this._props.title,\n          value: this._props.value\n        });\n        break;\n      // Multi-List Box\n\n      case _1.FormControlTypes.MultiListBox:\n        // Add the list box\n        this._lb = listBox_1.ListBox({\n          id: this._props.name,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          value: this._props.value\n        });\n        break;\n      // Multi-Radio\n\n      case _1.FormControlTypes.MultiRadio:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n          value: this._props.value\n        });\n        break;\n      // Multi-Switch\n\n      case _1.FormControlTypes.MultiSwitch:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n          value: this._props.value\n        });\n        break;\n      // Password\n\n      case _1.FormControlTypes.Password:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.Password,\n          value: this._props.value\n        });\n        break;\n      // Radio\n\n      case _1.FormControlTypes.Radio:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n          value: this._props.value\n        });\n        break;\n      // Range\n\n      case _1.FormControlTypes.Range:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          min: this._props.min || 0,\n          max: this._props.max || 100,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          step: this._props.step,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.Range,\n          value: this._props.value\n        });\n        break;\n      // Read Only\n\n      case _1.FormControlTypes.Readonly:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: true,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.TextField,\n          value: this._props.value\n        });\n        break;\n      // Switch\n\n      case _1.FormControlTypes.Switch:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n          value: this._props.value\n        });\n        break;\n      // Text Area\n\n      case _1.FormControlTypes.TextArea:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          rows: this._props.rows,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.TextArea,\n          value: this._props.value\n        });\n        break;\n      // Text Field\n\n      case _1.FormControlTypes.TextField:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.TextField,\n          value: this._props.value\n        });\n        break;\n      // Custom Type\n\n      default:\n        // Create the default element\n        this._el = document.createElement(\"div\");\n        this._el.className = className; // See if there is a custom type\n\n        var custom = custom_1.CustomControls.getByType(this._props.type);\n\n        if (custom && typeof custom === \"function\") {\n          // Execute the event\n          this._custom = custom(this._props);\n        }\n\n        break;\n    } // See if a checkbox was rendered and an id was set\n\n\n    if (this.control && this._props.id) {\n      // Set the id\n      this.control.el.id = this._props.id;\n    } // Configure the control\n\n\n    this.configure(); // Wait before executing the rendered event, otherwise the controls will be null\n\n    setTimeout(function () {\n      // Execute the events\n      _this._props.onControlRendered ? _this._props.onControlRendered(_this) : null;\n      _this._formProps.onControlRendered ? _this._formProps.onControlRendered(_this) : null; // Set the flag\n\n      _this._isRendered = true;\n    }, 10);\n  };\n\n  Object.defineProperty(FormControl.prototype, \"el\", {\n    /**\r\n     * Public Interface\r\n     */\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"checkbox\", {\n    // The checkbox control\n    get: function get() {\n      return this._cb;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"dropdown\", {\n    // The dropdown control\n    get: function get() {\n      return this._ddl;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"control\", {\n    // The textbox control\n    get: function get() {\n      return this._cb || this._ddl || this._lb || this._tb || this._custom;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"label\", {\n    // The control label\n    get: function get() {\n      return this._elLabel;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"listbox\", {\n    // The listbox control\n    get: function get() {\n      return this._lb;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"textbox\", {\n    // The textbox control\n    get: function get() {\n      return this._tb;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Method to get the form control value\n\n  FormControl.prototype.getValue = function () {\n    // See if there is an override event\n    if (this._props.onGetValue) {\n      return this._props.onGetValue(this._props);\n    } // See if this is a checkbox\n\n\n    if (this._cb) {\n      // See if the items were defined\n      if (this._props.items) {\n        // Return the value(s)\n        return this._cb.getValue();\n      } // Return the value\n\n\n      return this._cb.getValue() ? true : false;\n    } // See if this is a dropdown\n\n\n    if (this._ddl) {\n      // Return the value\n      return this._ddl.getValue();\n    } // See if this is a list box\n\n\n    if (this._lb) {\n      // Return the value\n      return this._lb.getValue();\n    } // See if this is a textbox\n\n\n    if (this._tb) {\n      // Return the value\n      return this._tb.getValue();\n    }\n  }; // Is loaded\n\n\n  FormControl.prototype.isLoaded = function () {\n    var _this = this; // Return a promise\n\n\n    return new Promise(function (resolve) {\n      // Wait for the control to be created\n      var id = setInterval(function () {\n        // See if the control has been rendered\n        if (_this.isRendered) {\n          // Stop the loop\n          clearInterval(id); // Resolve the promise\n\n          resolve();\n        }\n      }, 10);\n    });\n  };\n\n  Object.defineProperty(FormControl.prototype, \"isRendered\", {\n    // Flag indicating the control is loaded\n    get: function get() {\n      return this._isRendered;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"isValid\", {\n    // Validates the control\n    get: function get() {\n      var validation = {\n        isValid: true\n      }; // Get the element and value\n\n      var elControl = this._cb || this._ddl || this._lb || this._tb ? (this._cb || this._ddl || this._lb || this._tb).el : this._el;\n      var value = this.getValue(); // See if this control is required\n\n      if (this._props.required) {\n        // See if a value doesn't exists\n        if (value == null) {\n          // Set the flag\n          validation.isValid = false;\n        } // Else, see if the value is an array\n        else if (typeof value.length === \"number\") {\n          // Set the flag\n          validation.isValid = value.length > 0;\n        }\n      } // See if an event exists\n\n\n      if (this._props.onValidate) {\n        // Call the event\n        var returnValue = this._props.onValidate(this._props, {\n          value: value\n        });\n\n        if (typeof returnValue === \"boolean\") {\n          // Set the flag\n          validation.isValid = returnValue;\n        } // Else, ensure it exists\n        else if (returnValue) {\n          // Set the validation\n          validation = __assign(__assign({}, validation), returnValue);\n        }\n      } // Update the validation\n\n\n      this.updateValidation(elControl, validation); // Return the flag\n\n      return validation.isValid;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"props\", {\n    // The form control properties\n    get: function get() {\n      return this._props;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Sets the form control label\n\n  FormControl.prototype.setLabel = function (value) {\n    // Update the label\n    this._elLabel ? this._elLabel.innerHTML = value || \"\" : null;\n  }; // Sets the custom control\n\n\n  FormControl.prototype.setControl = function (control) {\n    // Set the custom control\n    this._custom = control;\n  }; // Sets the form control value\n\n\n  FormControl.prototype.setValue = function (value) {\n    // Set the value\n    this.control ? this.control.setValue(value) : null;\n  }; // Updates the control validation\n\n\n  FormControl.prototype.updateValidation = function (elControl, validation) {\n    // Get the form control\n    var elFormControl = elControl.querySelector(\".form-control\") || elControl.querySelector(\".form-select\");\n\n    if (elFormControl) {\n      // Clear the invalid/valid classes\n      elFormControl.classList.remove(\"is-invalid\");\n      elFormControl.classList.remove(\"is-valid\"); // Set the class\n\n      elFormControl.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n    } else {\n      var validateControls = function validateControls(controls) {\n        // Parse the controls\n        for (var i = 0; i < controls.length; i++) {\n          var control = controls[i]; // Clear the invalid/valid classes\n\n          control.classList.remove(\"is-invalid\");\n          control.classList.remove(\"is-valid\"); // Set the class\n\n          control.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n        }\n      }; // Get the checkboxes\n\n\n      var elCheckboxes = elControl.querySelectorAll(\".form-check-input\");\n\n      if (elCheckboxes.length > 0) {\n        // Validate the controls\n        validateControls(elCheckboxes); // Set the form control\n\n        elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] : elFormControl;\n      } // Get the custom controls\n\n\n      var elCustomControls = elControl.querySelectorAll(\".custom-control-input\");\n\n      if (elCustomControls.length > 0) {\n        // Validate the controls\n        validateControls(elCustomControls); // Set the form control\n\n        elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] : elFormControl;\n      }\n    } // Ensure the form control exists\n\n\n    if (elFormControl) {\n      var useTooltip = this._formProps.validationType == _1.FormValidationTypes.Tooltip; // Clear the old valid message if it exists\n\n      var validClassName = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n      var elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName);\n\n      if (elMessage) {\n        // Clear the message\n        elMessage.innerHTML = \"\";\n        elMessage.style.display = \"\";\n      } // Clear the old valid message if it exists\n\n\n      var invalidClassName = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n      elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName);\n\n      if (elMessage) {\n        // Clear the message\n        elMessage.innerHTML = \"\";\n        elMessage.style.display = \"\";\n      } // See if there is invalid feedback\n\n\n      if (validation.invalidMessage || this._props.errorMessage) {\n        // Get the element\n        var invalidClassName_1 = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n        elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName_1);\n\n        if (elMessage == null) {\n          // Create the element\n          elMessage = document.createElement(\"div\");\n          elMessage.className = invalidClassName_1;\n          elFormControl.parentNode.appendChild(elMessage);\n        } // Set the message\n\n\n        elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage; // Update the display\n\n        elMessage.style.display = validation.isValid ? \"\" : \"block\";\n      } // See if there is valid feedback\n\n\n      if (validation.validMessage) {\n        // Get the element\n        var validClassName_1 = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n        elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName_1);\n\n        if (elMessage == null) {\n          // Create the element\n          elMessage = document.createElement(\"div\");\n          elMessage.className = validClassName_1;\n          elFormControl.parentNode.appendChild(elMessage);\n        } // Set the message\n\n\n        elMessage.innerHTML = validation.validMessage; // Update the display\n\n        elMessage.style.display = validation.isValid ? \"block\" : \"\";\n      }\n    }\n  };\n\n  return FormControl;\n}();\n\nexports.FormControl = FormControl;\n\n//# sourceURL=webpack://gd-bs/./src/components/form/control.ts?");
+eval("\n\nvar __assign = this && this.__assign || function () {\n  __assign = Object.assign || function (t) {\n    for (var s, i = 1, n = arguments.length; i < n; i++) {\n      s = arguments[i];\n\n      for (var p in s) {\n        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n      }\n    }\n\n    return t;\n  };\n\n  return __assign.apply(this, arguments);\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.FormControl = void 0;\n\nvar checkboxGroup_1 = __webpack_require__(/*! ../checkboxGroup */ \"./src/components/checkboxGroup/index.ts\");\n\nvar custom_1 = __webpack_require__(/*! ./custom */ \"./src/components/form/custom.ts\");\n\nvar dropdown_1 = __webpack_require__(/*! ../dropdown */ \"./src/components/dropdown/index.ts\");\n\nvar inputGroup_1 = __webpack_require__(/*! ../inputGroup */ \"./src/components/inputGroup/index.ts\");\n\nvar listBox_1 = __webpack_require__(/*! ../listBox */ \"./src/components/listBox/index.ts\");\n\nvar _1 = __webpack_require__(/*! . */ \"./src/components/form/index.ts\");\n/**\r\n * Form Control\r\n */\n\n\nvar FormControl =\n/** @class */\nfunction () {\n  // Constructor\n  function FormControl(props, formProps, elLabel) {\n    var _this = this;\n\n    this._cb = null;\n    this._custom = null;\n    this._el = null;\n    this._elLabel = null;\n    this._formProps = null;\n    this._ddl = null;\n    this._isRendered = false;\n    this._lb = null;\n    this._tb = null; // Save the parameters\n\n    this._formProps = formProps;\n    this._props = props;\n    this._elLabel = elLabel; // See if there is a rendering event\n\n    if (typeof this._props.onControlRendering === \"function\") {\n      // Call the event and see if a promise is returned\n      var returnVal = this._props.onControlRendering(Object.assign({}, this._props));\n\n      if (returnVal && typeof returnVal[\"then\"] === \"function\") {\n        // Wait for it to complete\n        returnVal[\"then\"](function (newProps) {\n          // Update the properties\n          _this._props = newProps || _this._props; // Create the control\n\n          _this.create();\n        });\n      } else {\n        // Create the control\n        this.create();\n      }\n    } else {\n      // Create the control\n      this.create();\n    }\n  } // Configure the control\n\n\n  FormControl.prototype.configure = function () {\n    // Ensure a control was created\n    if (this.control) {\n      // Set the element\n      this._el = this.control.el; // See if an error message exists\n\n      if (this._props.errorMessage) {\n        // Get the group\n        var elGroup = this._el.querySelector(\".input-group\") || this._el.querySelector(\".form-check:last-child\");\n\n        if (elGroup) {\n          // Add the error message\n          var elErrorMessage = document.createElement(\"div\");\n          elErrorMessage.className = \"invalid-feedback\";\n          elErrorMessage.innerHTML = this._props.errorMessage;\n          elGroup.appendChild(elErrorMessage);\n        }\n      } // See if an element was defined to render to\n\n\n      if (this._props.el) {\n        // Append the control to the element\n        this._props.el.appendChild(this._el);\n      } // See if the label is set\n\n\n      if (this._elLabel && this._formProps.isFloating && this._el.id) {\n        // Set the attributes\n        this._elLabel.setAttribute(\"for\", this._el.id);\n      }\n    }\n  }; // Creates the control\n\n\n  FormControl.prototype.create = function () {\n    var _this = this; // Parse the custom classes to add\n\n\n    var className = [this._props.className || \"\", this._props.controlClassName || \"\"].join(\" \").trim(); // Render the control based on the type\n\n    switch (this._props.type) {\n      // Checkbox\n      case _1.FormControlTypes.Checkbox:\n        var cbProps = this._props; // Add the checkbox group\n\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: cbProps.colSize,\n          hideLabel: true,\n          isInline: cbProps.isInline,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          items: cbProps.items,\n          onChange: cbProps.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n          value: this._props.value\n        });\n        break;\n      // Color Picker\n\n      case _1.FormControlTypes.ColorPicker:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.ColorPicker,\n          value: this._props.value\n        });\n        break;\n      // Datalist\n\n      case _1.FormControlTypes.Datalist:\n        // Add the dropdown\n        this._ddl = dropdown_1.Dropdown({\n          className: className,\n          formFl: true,\n          id: this._props.id,\n          isDatalist: true,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          value: this._props.value\n        });\n        break;\n      // Dropdown\n\n      case _1.FormControlTypes.Dropdown:\n        // Add the dropdown\n        this._ddl = dropdown_1.Dropdown({\n          className: className,\n          formFl: true,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          onMenuRendering: this._props.onMenuRendering,\n          title: this._props.title,\n          value: this._props.value\n        });\n        break;\n      // Email\n\n      case _1.FormControlTypes.Email:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.Email,\n          value: this._props.value\n        });\n        break;\n      // File\n\n      case _1.FormControlTypes.File:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.File,\n          value: this._props.value\n        });\n        break;\n      // List Box\n\n      case _1.FormControlTypes.ListBox:\n        // Add the list box\n        this._lb = listBox_1.ListBox({\n          id: this._props.name,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          value: this._props.value\n        });\n        break;\n      // Multi-Checkbox\n\n      case _1.FormControlTypes.MultiCheckbox:\n        var cbMultiProps = this._props; // Add the checkbox group\n\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: cbMultiProps.colSize,\n          hideLabel: true,\n          isDisabled: this._props.isDisabled,\n          isInline: cbMultiProps.isInline,\n          isReadonly: this._props.isReadonly,\n          items: cbMultiProps.items,\n          multi: true,\n          onChange: cbMultiProps.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n          value: this._props.value\n        });\n        break;\n      // Multi-Dropdown\n\n      case _1.FormControlTypes.MultiDropdown:\n        // Add the dropdown\n        this._ddl = dropdown_1.Dropdown({\n          className: className,\n          formFl: true,\n          id: this._props.id,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          onMenuRendering: this._props.onMenuRendering,\n          title: this._props.title,\n          value: this._props.value\n        });\n        break;\n      // Multi-List Box\n\n      case _1.FormControlTypes.MultiListBox:\n        // Add the list box\n        this._lb = listBox_1.ListBox({\n          id: this._props.name,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          value: this._props.value\n        });\n        break;\n      // Multi-Radio\n\n      case _1.FormControlTypes.MultiRadio:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n          value: this._props.value\n        });\n        break;\n      // Multi-Switch\n\n      case _1.FormControlTypes.MultiSwitch:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          multi: true,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n          value: this._props.value\n        });\n        break;\n      // Password\n\n      case _1.FormControlTypes.Password:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.Password,\n          value: this._props.value\n        });\n        break;\n      // Radio\n\n      case _1.FormControlTypes.Radio:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n          value: this._props.value\n        });\n        break;\n      // Range\n\n      case _1.FormControlTypes.Range:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          min: this._props.min || 0,\n          max: this._props.max || 100,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          step: this._props.step,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.Range,\n          value: this._props.value\n        });\n        break;\n      // Read Only\n\n      case _1.FormControlTypes.Readonly:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isReadonly: true,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.TextField,\n          value: this._props.value\n        });\n        break;\n      // Switch\n\n      case _1.FormControlTypes.Switch:\n        // Add the checkbox group\n        this._cb = checkboxGroup_1.CheckboxGroup({\n          className: className,\n          colSize: this._props.colSize,\n          hideLabel: true,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          items: this._props.items,\n          onChange: this._props.onChange,\n          title: this._props.title,\n          type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n          value: this._props.value\n        });\n        break;\n      // Text Area\n\n      case _1.FormControlTypes.TextArea:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          rows: this._props.rows,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.TextArea,\n          value: this._props.value\n        });\n        break;\n      // Text Field\n\n      case _1.FormControlTypes.TextField:\n        // Add the input\n        this._tb = inputGroup_1.InputGroup({\n          className: className,\n          id: this._props.id,\n          isDisabled: this._props.isDisabled,\n          isReadonly: this._props.isReadonly,\n          onChange: this._props.onChange,\n          placeholder: this._props.placeholder,\n          title: this._props.title,\n          type: inputGroup_1.InputGroupTypes.TextField,\n          value: this._props.value\n        });\n        break;\n      // Custom Type\n\n      default:\n        // Create the default element\n        this._el = document.createElement(\"div\");\n        this._el.className = className; // See if there is a custom type\n\n        var custom = custom_1.CustomControls.getByType(this._props.type);\n\n        if (custom && typeof custom === \"function\") {\n          // Execute the event\n          this._custom = custom(this._props);\n        }\n\n        break;\n    } // See if a checkbox was rendered and an id was set\n\n\n    if (this.control && this._props.id) {\n      // Set the id\n      this.control.el.id = this._props.id;\n    } // Configure the control\n\n\n    this.configure(); // Wait before executing the rendered event, otherwise the controls will be null\n\n    setTimeout(function () {\n      // Execute the events\n      _this._props.onControlRendered ? _this._props.onControlRendered(_this) : null;\n      _this._formProps.onControlRendered ? _this._formProps.onControlRendered(_this) : null; // Set the flag\n\n      _this._isRendered = true;\n    }, 10);\n  };\n\n  Object.defineProperty(FormControl.prototype, \"el\", {\n    /**\r\n     * Public Interface\r\n     */\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"checkbox\", {\n    // The checkbox control\n    get: function get() {\n      return this._cb;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"dropdown\", {\n    // The dropdown control\n    get: function get() {\n      return this._ddl;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"control\", {\n    // The textbox control\n    get: function get() {\n      return this._cb || this._ddl || this._lb || this._tb || this._custom;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"label\", {\n    // The control label\n    get: function get() {\n      return this._elLabel;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"listbox\", {\n    // The listbox control\n    get: function get() {\n      return this._lb;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"textbox\", {\n    // The textbox control\n    get: function get() {\n      return this._tb;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Method to get the form control value\n\n  FormControl.prototype.getValue = function () {\n    // See if there is an override event\n    if (this._props.onGetValue) {\n      return this._props.onGetValue(this._props);\n    } // See if this is a checkbox\n\n\n    if (this._cb) {\n      // See if the items were defined\n      if (this._props.items) {\n        // Return the value(s)\n        return this._cb.getValue();\n      } // Return the value\n\n\n      return this._cb.getValue() ? true : false;\n    } // See if this is a dropdown\n\n\n    if (this._ddl) {\n      // Return the value\n      return this._ddl.getValue();\n    } // See if this is a list box\n\n\n    if (this._lb) {\n      // Return the value\n      return this._lb.getValue();\n    } // See if this is a textbox\n\n\n    if (this._tb) {\n      // Return the value\n      return this._tb.getValue();\n    }\n  }; // Is loaded\n\n\n  FormControl.prototype.isLoaded = function () {\n    var _this = this; // Return a promise\n\n\n    return new Promise(function (resolve) {\n      // Wait for the control to be created\n      var id = setInterval(function () {\n        // See if the control has been rendered\n        if (_this.isRendered) {\n          // Stop the loop\n          clearInterval(id); // Resolve the promise\n\n          resolve();\n        }\n      }, 10);\n    });\n  };\n\n  Object.defineProperty(FormControl.prototype, \"isRendered\", {\n    // Flag indicating the control is loaded\n    get: function get() {\n      return this._isRendered;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"isValid\", {\n    // Validates the control\n    get: function get() {\n      var validation = {\n        isValid: true\n      }; // Get the element and value\n\n      var elControl = this._cb || this._ddl || this._lb || this._tb ? (this._cb || this._ddl || this._lb || this._tb).el : this._el;\n      var value = this.getValue(); // See if this control is required\n\n      if (this._props.required) {\n        // See if a value doesn't exists\n        if (value == null) {\n          // Set the flag\n          validation.isValid = false;\n        } // Else, see if the value is an array\n        else if (typeof value.length === \"number\") {\n          // Set the flag\n          validation.isValid = value.length > 0;\n        }\n      } // See if an event exists\n\n\n      if (this._props.onValidate) {\n        // Call the event\n        var returnValue = this._props.onValidate(this._props, {\n          value: value\n        });\n\n        if (typeof returnValue === \"boolean\") {\n          // Set the flag\n          validation.isValid = returnValue;\n        } // Else, ensure it exists\n        else if (returnValue) {\n          // Set the validation\n          validation = __assign(__assign({}, validation), returnValue);\n        }\n      } // Update the validation\n\n\n      this.updateValidation(elControl, validation); // Return the flag\n\n      return validation.isValid;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(FormControl.prototype, \"props\", {\n    // The form control properties\n    get: function get() {\n      return this._props;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Sets the form control label\n\n  FormControl.prototype.setLabel = function (value) {\n    // Update the label\n    this._elLabel ? this._elLabel.innerHTML = value || \"\" : null;\n  }; // Sets the custom control\n\n\n  FormControl.prototype.setControl = function (control) {\n    // Set the custom control\n    this._custom = control;\n  }; // Sets the form control value\n\n\n  FormControl.prototype.setValue = function (value) {\n    // Set the value\n    this.control ? this.control.setValue(value) : null;\n  }; // Updates the control validation\n\n\n  FormControl.prototype.updateValidation = function (elControl, validation) {\n    // Get the form control\n    var elFormControl = elControl.querySelector(\".form-control\") || elControl.querySelector(\".form-select\");\n\n    if (elFormControl) {\n      // Clear the invalid/valid classes\n      elFormControl.classList.remove(\"is-invalid\");\n      elFormControl.classList.remove(\"is-valid\"); // Set the class\n\n      elFormControl.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n    } else {\n      var validateControls = function validateControls(controls) {\n        // Parse the controls\n        for (var i = 0; i < controls.length; i++) {\n          var control = controls[i]; // Clear the invalid/valid classes\n\n          control.classList.remove(\"is-invalid\");\n          control.classList.remove(\"is-valid\"); // Set the class\n\n          control.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n        }\n      }; // Get the checkboxes\n\n\n      var elCheckboxes = elControl.querySelectorAll(\".form-check-input\");\n\n      if (elCheckboxes.length > 0) {\n        // Validate the controls\n        validateControls(elCheckboxes); // Set the form control\n\n        elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] : elFormControl;\n      } // Get the custom controls\n\n\n      var elCustomControls = elControl.querySelectorAll(\".custom-control-input\");\n\n      if (elCustomControls.length > 0) {\n        // Validate the controls\n        validateControls(elCustomControls); // Set the form control\n\n        elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] : elFormControl;\n      }\n    } // Ensure the form control exists\n\n\n    if (elFormControl) {\n      var useTooltip = this._formProps.validationType == _1.FormValidationTypes.Tooltip; // Clear the old valid message if it exists\n\n      var validClassName = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n      var elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName);\n\n      if (elMessage) {\n        // Clear the message\n        elMessage.innerHTML = \"\";\n        elMessage.style.display = \"\";\n      } // Clear the old valid message if it exists\n\n\n      var invalidClassName = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n      elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName);\n\n      if (elMessage) {\n        // Clear the message\n        elMessage.innerHTML = \"\";\n        elMessage.style.display = \"\";\n      } // See if there is invalid feedback\n\n\n      if (validation.invalidMessage || this._props.errorMessage) {\n        // Get the element\n        var invalidClassName_1 = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n        elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName_1);\n\n        if (elMessage == null) {\n          // Create the element\n          elMessage = document.createElement(\"div\");\n          elMessage.className = invalidClassName_1;\n          elFormControl.parentNode.appendChild(elMessage);\n        } // Set the message\n\n\n        elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage; // Update the display\n\n        elMessage.style.display = validation.isValid ? \"\" : \"block\";\n      } // See if there is valid feedback\n\n\n      if (validation.validMessage) {\n        // Get the element\n        var validClassName_1 = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n        elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName_1);\n\n        if (elMessage == null) {\n          // Create the element\n          elMessage = document.createElement(\"div\");\n          elMessage.className = validClassName_1;\n          elFormControl.parentNode.appendChild(elMessage);\n        } // Set the message\n\n\n        elMessage.innerHTML = validation.validMessage; // Update the display\n\n        elMessage.style.display = validation.isValid ? \"block\" : \"\";\n      }\n    }\n  };\n\n  return FormControl;\n}();\n\nexports.FormControl = FormControl;\n\n//# sourceURL=webpack://gd-bs/./src/components/form/control.ts?");
 
 /***/ }),
 
@@ -1116,7 +1116,7 @@ eval("\n\nvar __createBinding = this && this.__createBinding || (Object.create ?
 /***/ (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.InputGroup = exports.InputGroupTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./src/components/base.ts\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./src/components/button/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/inputGroup/templates.ts\");\n/**\r\n * Input Group Types\r\n */\n\n\nvar InputGroupTypes;\n\n(function (InputGroupTypes) {\n  InputGroupTypes[InputGroupTypes[\"ColorPicker\"] = 1] = \"ColorPicker\";\n  InputGroupTypes[InputGroupTypes[\"Email\"] = 2] = \"Email\";\n  InputGroupTypes[InputGroupTypes[\"File\"] = 3] = \"File\";\n  InputGroupTypes[InputGroupTypes[\"Password\"] = 4] = \"Password\";\n  InputGroupTypes[InputGroupTypes[\"Range\"] = 5] = \"Range\";\n  InputGroupTypes[InputGroupTypes[\"Search\"] = 6] = \"Search\";\n  InputGroupTypes[InputGroupTypes[\"TextArea\"] = 7] = \"TextArea\";\n  InputGroupTypes[InputGroupTypes[\"TextField\"] = 8] = \"TextField\";\n})(InputGroupTypes = exports.InputGroupTypes || (exports.InputGroupTypes = {}));\n/**\r\n * Input Group\r\n * @param props The input group properties.\r\n */\n\n\nvar _InputGroup =\n/** @class */\nfunction (_super) {\n  __extends(_InputGroup, _super); // Constructor\n\n\n  function _InputGroup(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._initFl = false; // Configure the collapse\n\n    _this.configure(); // Configure the textbox\n\n\n    _this.configureTextbox(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent(); // Set the flag\n\n\n    _this._initFl = true;\n    return _this;\n  } // Configure the card group\n\n\n  _InputGroup.prototype.configure = function () {\n    var elInput = this.el.querySelector(\"input\");\n\n    if (elInput) {\n      // Set the class names\n      this.props.isLarge ? this.el.classList.add(\"input-group-lg\") : null;\n      this.props.isSmall ? this.el.classList.add(\"input-group-sm\") : null; // Update the label\n\n      var label = this.el.querySelector(\"label\");\n\n      if (label) {\n        this.props.id ? label.setAttribute(\"for\", this.props.id) : null; // See if this is a file\n\n        if (this.props.type == InputGroupTypes.File) {\n          // Set the class\n          label.classList.add(\"form-file-label\"); // Set the text\n\n          var spanText = document.createElement(\"span\");\n          spanText.classList.add(\"form-file-text\");\n          spanText.innerHTML = this.props.label || \"Choose a file...\";\n          label.appendChild(spanText); // Set the button\n\n          var spanButton = document.createElement(\"span\");\n          spanButton.classList.add(\"form-file-button\");\n          spanButton.innerHTML = \"Browse\";\n          label.appendChild(spanButton);\n        } else {\n          // Set the label if it exists\n          if (this.props.label) {\n            label.innerHTML = this.props.label;\n          } // Else, remove it\n          else {\n            this.el.removeChild(label);\n          }\n        }\n      } // See if the label exists\n\n\n      if (this.props.prependedLabel) {\n        // Add the label\n        var label_1 = document.createElement(\"span\");\n        label_1.classList.add(\"input-group-text\");\n        label_1.innerHTML = this.props.prependedLabel;\n        this.el.insertBefore(label_1, elInput);\n      } // Parse the buttons\n\n\n      var buttons = this.props.prependedButtons || [];\n\n      for (var i = 0; i < buttons.length; i++) {\n        // Add the button\n        this.el.insertBefore(button_1.Button(buttons[i]).el, elInput);\n      } // Default the appended buttons\n\n\n      var appendedButtons = this.props.appendedButtons || [];\n\n      if (this.props.type == InputGroupTypes.Range) {\n        // Add the button\n        appendedButtons.push({\n          id: \"range-value\",\n          text: this.props.value == null ? \"\" : this.props.value\n        });\n      } // See if the label exists\n\n\n      if (this.props.appendedLabel) {\n        // Add the label\n        var label_2 = document.createElement(\"span\");\n        label_2.classList.add(\"input-group-text\");\n        label_2.innerHTML = this.props.appendedLabel;\n        this.el.appendChild(label_2);\n      } // Parse the buttons\n\n\n      for (var i = 0; i < appendedButtons.length; i++) {\n        // Add the button\n        this.el.appendChild(button_1.Button(appendedButtons[i]).el);\n      }\n    }\n  }; // Configure the events\n\n\n  _InputGroup.prototype.configureEvents = function () {\n    var _this = this;\n\n    var isMultiLine = this.props.type == InputGroupTypes.TextArea;\n    var elInput = this.el.querySelector(\"input\") || this.el.querySelector(\"textarea\");\n\n    if (elInput) {\n      // See if a change event exists\n      var callbackValue_1 = null;\n\n      if (this.props.onChange) {\n        // Add an input event\n        elInput.addEventListener(\"input\", function (ev) {\n          // See if we have already executed the change event\n          if (callbackValue_1 != elInput.value) {\n            // Set the value\n            callbackValue_1 = elInput.value; // Call the change event\n\n            _this.props.onChange(callbackValue_1, ev);\n          }\n        });\n      } // See if this is a range\n\n\n      if (this.props.type == InputGroupTypes.Range) {\n        // Add a change event\n        elInput.addEventListener(\"input\", function () {\n          // Get the button\n          var btn = _this.el.querySelector(\"#range-value\");\n\n          if (btn) {\n            // Update the value\n            btn.innerHTML = elInput.value;\n          }\n        });\n      } // See if this is not a multi-line\n\n\n      if (!isMultiLine) {\n        // Add a mouse up event to detect the clear event\n        elInput.addEventListener(\"mouseup\", function (ev) {\n          // Get the current value\n          var el = ev.currentTarget;\n          var oldValue = el.value; // Wait for the user to stop updating the value\n\n          setTimeout(function () {\n            // Get the current value\n            var currentValue = el.value; // See if the values have changed\n\n            if (currentValue != oldValue) {\n              // See if we have already executed the change event\n              if (callbackValue_1 != currentValue) {\n                // Set the value\n                callbackValue_1 = currentValue; // Call the events\n\n                _this.props.onChange ? _this.props.onChange(callbackValue_1, ev) : null;\n                _this.props.onClear && callbackValue_1 == \"\" ? _this.props.onClear() : null;\n              }\n            }\n          }, 1);\n        });\n      }\n    }\n  }; // Configures the text box\n\n\n  _InputGroup.prototype.configureTextbox = function () {\n    var isTextArea = this.props.type == InputGroupTypes.TextArea;\n    var input = this.el.querySelector(\"input\");\n    var textarea = this.el.querySelector(\"textarea\"); // See if this is a text area\n\n    if (isTextArea) {\n      // Remove the input\n      input ? this.el.removeChild(input) : null; // Ensure the textarea exists\n\n      if (textarea) {\n        // Update the textbox\n        this.props.id ? textarea.id = this.props.id : null;\n        this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;\n        textarea.disable = this.props.isReadonly ? true : false;\n        textarea.rows = this.props.rows;\n        this.props.title ? textarea.title = this.props.title : null;\n      }\n    } else {\n      // Remove the textarea\n      textarea ? this.el.removeChild(textarea) : null; // Ensure the input exists\n\n      if (input) {\n        // Update the textbox\n        this.props.id ? input.id = this.props.id : null;\n        this.props.placeholder ? input.placeholder = this.props.placeholder : null;\n        input.disable = this.props.isReadonly ? true : false;\n        this.props.title ? input.title = this.props.title : null;\n        typeof this.props.min === \"number\" ? input.min = this.props.min + \"\" : null;\n        typeof this.props.max === \"number\" ? input.max = this.props.max + \"\" : null;\n        typeof this.props.step === \"number\" ? input.step = this.props.step + \"\" : null; // Update the type\n\n        switch (this.props.type) {\n          // Color Picker\n          case InputGroupTypes.ColorPicker:\n            input.classList.add(\"form-control-color\");\n            input.type = \"color\";\n            break;\n          // Email\n\n          case InputGroupTypes.Email:\n            input.classList.add(\"form-email\");\n            input.type = \"email\";\n            break;\n          // File\n\n          case InputGroupTypes.File:\n            this.el.classList.add(\"form-file\");\n            input.classList.remove(\"form-control\");\n            input.classList.add(\"form-file-input\");\n            input.type = \"file\";\n            break;\n          // Password\n\n          case InputGroupTypes.Password:\n            input.classList.add(\"form-password\");\n            input.type = \"password\";\n            break;\n          // Range\n\n          case InputGroupTypes.Range:\n            input.classList.add(\"form-range\");\n            input.type = \"range\";\n            break;\n          // Search\n\n          case InputGroupTypes.Search:\n            input.classList.add(\"form-search\");\n            input.type = \"search\";\n            input.setAttribute(\"aria-label\", \"Search\");\n            break;\n        }\n      }\n    } // Set the default value\n\n\n    this.setValue(this.props.value);\n  };\n  /**\r\n   * Public Interface\r\n   */\n\n\n  _InputGroup.prototype.getValue = function () {\n    return this.textbox.value;\n  }; // Sets the textbox value\n\n\n  _InputGroup.prototype.setValue = function (value) {\n    if (value === void 0) {\n      value = \"\";\n    } // Set the textbox value\n\n\n    this.textbox.value = value; // See if a change event exists\n\n    if (this._initFl && this.props.onChange) {\n      // Execute the change event\n      this.props.onChange(value);\n    }\n  };\n\n  Object.defineProperty(_InputGroup.prototype, \"textbox\", {\n    // Returns the textbox\n    get: function get() {\n      return this.el.querySelector(\"input\") || this.el.querySelector(\"textarea\");\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return _InputGroup;\n}(base_1.Base);\n\nexports.InputGroup = function (props, template) {\n  return new _InputGroup(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./src/components/inputGroup/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.InputGroup = exports.InputGroupTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./src/components/base.ts\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./src/components/button/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/inputGroup/templates.ts\");\n/**\r\n * Input Group Types\r\n */\n\n\nvar InputGroupTypes;\n\n(function (InputGroupTypes) {\n  InputGroupTypes[InputGroupTypes[\"ColorPicker\"] = 1] = \"ColorPicker\";\n  InputGroupTypes[InputGroupTypes[\"Email\"] = 2] = \"Email\";\n  InputGroupTypes[InputGroupTypes[\"File\"] = 3] = \"File\";\n  InputGroupTypes[InputGroupTypes[\"Password\"] = 4] = \"Password\";\n  InputGroupTypes[InputGroupTypes[\"Range\"] = 5] = \"Range\";\n  InputGroupTypes[InputGroupTypes[\"Search\"] = 6] = \"Search\";\n  InputGroupTypes[InputGroupTypes[\"TextArea\"] = 7] = \"TextArea\";\n  InputGroupTypes[InputGroupTypes[\"TextField\"] = 8] = \"TextField\";\n})(InputGroupTypes = exports.InputGroupTypes || (exports.InputGroupTypes = {}));\n/**\r\n * Input Group\r\n * @param props The input group properties.\r\n */\n\n\nvar _InputGroup =\n/** @class */\nfunction (_super) {\n  __extends(_InputGroup, _super); // Constructor\n\n\n  function _InputGroup(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._initFl = false; // Configure the collapse\n\n    _this.configure(); // Configure the textbox\n\n\n    _this.configureTextbox(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent(); // Set the flag\n\n\n    _this._initFl = true;\n    return _this;\n  } // Configure the card group\n\n\n  _InputGroup.prototype.configure = function () {\n    var elInput = this.el.querySelector(\"input\");\n\n    if (elInput) {\n      // Set the class names\n      this.props.isLarge ? this.el.classList.add(\"input-group-lg\") : null;\n      this.props.isSmall ? this.el.classList.add(\"input-group-sm\") : null; // Update the label\n\n      var label = this.el.querySelector(\"label\");\n\n      if (label) {\n        this.props.id ? label.setAttribute(\"for\", this.props.id) : null; // See if this is a file\n\n        if (this.props.type == InputGroupTypes.File) {\n          // Set the class\n          label.classList.add(\"form-file-label\"); // Set the text\n\n          var spanText = document.createElement(\"span\");\n          spanText.classList.add(\"form-file-text\");\n          spanText.innerHTML = this.props.label || \"Choose a file...\";\n          label.appendChild(spanText); // Set the button\n\n          var spanButton = document.createElement(\"span\");\n          spanButton.classList.add(\"form-file-button\");\n          spanButton.innerHTML = \"Browse\";\n          label.appendChild(spanButton);\n        } else {\n          // Set the label if it exists\n          if (this.props.label) {\n            label.innerHTML = this.props.label;\n          } // Else, remove it\n          else {\n            this.el.removeChild(label);\n          }\n        }\n      } // See if the label exists\n\n\n      if (this.props.prependedLabel) {\n        // Add the label\n        var label_1 = document.createElement(\"span\");\n        label_1.classList.add(\"input-group-text\");\n        label_1.innerHTML = this.props.prependedLabel;\n        this.el.insertBefore(label_1, elInput);\n      } // Parse the buttons\n\n\n      var buttons = this.props.prependedButtons || [];\n\n      for (var i = 0; i < buttons.length; i++) {\n        // Add the button\n        this.el.insertBefore(button_1.Button(buttons[i]).el, elInput);\n      } // Default the appended buttons\n\n\n      var appendedButtons = this.props.appendedButtons || [];\n\n      if (this.props.type == InputGroupTypes.Range) {\n        // Add the button\n        appendedButtons.push({\n          id: \"range-value\",\n          text: this.props.value == null ? \"\" : this.props.value\n        });\n      } // See if the label exists\n\n\n      if (this.props.appendedLabel) {\n        // Add the label\n        var label_2 = document.createElement(\"span\");\n        label_2.classList.add(\"input-group-text\");\n        label_2.innerHTML = this.props.appendedLabel;\n        this.el.appendChild(label_2);\n      } // Parse the buttons\n\n\n      for (var i = 0; i < appendedButtons.length; i++) {\n        // Add the button\n        this.el.appendChild(button_1.Button(appendedButtons[i]).el);\n      }\n    }\n  }; // Configure the events\n\n\n  _InputGroup.prototype.configureEvents = function () {\n    var _this = this;\n\n    var isMultiLine = this.props.type == InputGroupTypes.TextArea;\n    var elInput = this.el.querySelector(\"input\") || this.el.querySelector(\"textarea\");\n\n    if (elInput) {\n      // See if a change event exists\n      var callbackValue_1 = null;\n\n      if (this.props.onChange) {\n        // Add an input event\n        elInput.addEventListener(\"input\", function (ev) {\n          // See if we have already executed the change event\n          if (callbackValue_1 != elInput.value) {\n            // Set the value\n            callbackValue_1 = elInput.value; // Call the change event\n\n            _this.props.onChange(callbackValue_1, ev);\n          }\n        });\n      } // See if this is a range\n\n\n      if (this.props.type == InputGroupTypes.Range) {\n        // Add a change event\n        elInput.addEventListener(\"input\", function () {\n          // Get the button\n          var btn = _this.el.querySelector(\"#range-value\");\n\n          if (btn) {\n            // Update the value\n            btn.innerHTML = elInput.value;\n          }\n        });\n      } // See if this is not a multi-line\n\n\n      if (!isMultiLine) {\n        // Add a mouse up event to detect the clear event\n        elInput.addEventListener(\"mouseup\", function (ev) {\n          // Get the current value\n          var el = ev.currentTarget;\n          var oldValue = el.value; // Wait for the user to stop updating the value\n\n          setTimeout(function () {\n            // Get the current value\n            var currentValue = el.value; // See if the values have changed\n\n            if (currentValue != oldValue) {\n              // See if we have already executed the change event\n              if (callbackValue_1 != currentValue) {\n                // Set the value\n                callbackValue_1 = currentValue; // Call the events\n\n                _this.props.onChange ? _this.props.onChange(callbackValue_1, ev) : null;\n                _this.props.onClear && callbackValue_1 == \"\" ? _this.props.onClear() : null;\n              }\n            }\n          }, 1);\n        });\n      }\n    }\n  }; // Configures the text box\n\n\n  _InputGroup.prototype.configureTextbox = function () {\n    var isTextArea = this.props.type == InputGroupTypes.TextArea;\n    var input = this.el.querySelector(\"input\");\n    var textarea = this.el.querySelector(\"textarea\"); // See if this is a text area\n\n    if (isTextArea) {\n      // Remove the input\n      input ? this.el.removeChild(input) : null; // Ensure the textarea exists\n\n      if (textarea) {\n        // Update the textbox\n        this.props.id ? textarea.id = this.props.id : null;\n        this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;\n        textarea.disable = this.props.isDisabled ? true : false;\n        textarea.readOnly = this.props.isReadonly ? true : false;\n        textarea.rows = this.props.rows;\n        this.props.title ? textarea.title = this.props.title : null;\n      }\n    } else {\n      // Remove the textarea\n      textarea ? this.el.removeChild(textarea) : null; // Ensure the input exists\n\n      if (input) {\n        // Update the textbox\n        this.props.id ? input.id = this.props.id : null;\n        this.props.placeholder ? input.placeholder = this.props.placeholder : null;\n        input.disable = this.props.isDisabled ? true : false;\n        input.readOnly = this.props.isReadonly ? true : false;\n        this.props.title ? input.title = this.props.title : null;\n        typeof this.props.min === \"number\" ? input.min = this.props.min + \"\" : null;\n        typeof this.props.max === \"number\" ? input.max = this.props.max + \"\" : null;\n        typeof this.props.step === \"number\" ? input.step = this.props.step + \"\" : null; // Update the type\n\n        switch (this.props.type) {\n          // Color Picker\n          case InputGroupTypes.ColorPicker:\n            input.classList.add(\"form-control-color\");\n            input.type = \"color\";\n            break;\n          // Email\n\n          case InputGroupTypes.Email:\n            input.classList.add(\"form-email\");\n            input.type = \"email\";\n            break;\n          // File\n\n          case InputGroupTypes.File:\n            this.el.classList.add(\"form-file\");\n            input.classList.remove(\"form-control\");\n            input.classList.add(\"form-file-input\");\n            input.type = \"file\";\n            break;\n          // Password\n\n          case InputGroupTypes.Password:\n            input.classList.add(\"form-password\");\n            input.type = \"password\";\n            break;\n          // Range\n\n          case InputGroupTypes.Range:\n            input.classList.add(\"form-range\");\n            input.type = \"range\";\n            break;\n          // Search\n\n          case InputGroupTypes.Search:\n            input.classList.add(\"form-search\");\n            input.type = \"search\";\n            input.setAttribute(\"aria-label\", \"Search\");\n            break;\n        }\n      }\n    } // Set the default value\n\n\n    this.setValue(this.props.value);\n  };\n  /**\r\n   * Public Interface\r\n   */\n\n\n  _InputGroup.prototype.getValue = function () {\n    return this.textbox.value;\n  }; // Sets the textbox value\n\n\n  _InputGroup.prototype.setValue = function (value) {\n    if (value === void 0) {\n      value = \"\";\n    } // Set the textbox value\n\n\n    this.textbox.value = value; // See if a change event exists\n\n    if (this._initFl && this.props.onChange) {\n      // Execute the change event\n      this.props.onChange(value);\n    }\n  };\n\n  Object.defineProperty(_InputGroup.prototype, \"textbox\", {\n    // Returns the textbox\n    get: function get() {\n      return this.el.querySelector(\"input\") || this.el.querySelector(\"textarea\");\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return _InputGroup;\n}(base_1.Base);\n\nexports.InputGroup = function (props, template) {\n  return new _InputGroup(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./src/components/inputGroup/index.ts?");
 
 /***/ }),