gd-bs 5.6.1 → 5.6.2

package/dist/gd-bs.js

@@ -928,7 +928,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__(/*! . */ \"./build/components/checkboxGroup/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/checkboxGroup/templates.js\");\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.readOnly = 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/./build/components/checkboxGroup/item.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.CheckboxItem = void 0;\n\nvar _1 = __webpack_require__(/*! . */ \"./build/components/checkboxGroup/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/checkboxGroup/templates.js\");\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/./build/components/checkboxGroup/item.js?");
 
 /***/ }),
 
@@ -1126,7 +1126,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 */ \"./build/components/base.js\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./build/components/button/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/inputGroup/templates.js\");\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.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.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/./build/components/inputGroup/index.js?");
+eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.InputGroup = exports.InputGroupTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./build/components/button/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/inputGroup/templates.js\");\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/./build/components/inputGroup/index.js?");
 
 /***/ }),