gd-bs 5.6.6 → 5.6.7

package/dist/gd-bs.d.ts

@@ -1504,6 +1504,9 @@ declare module 'gd-bs/components/inputGroup/types' {
             /** The input group element. */
             el: HTMLElement;
     
+            /** Reference to the textbox input/textarea element. */
+            elTextbox: HTMLInputElement | HTMLTextAreaElement;
+    
             /** Method to get the value. */
             getValue: () => string;
     
@@ -1515,9 +1518,6 @@ declare module 'gd-bs/components/inputGroup/types' {
     
             /** Shows the input group. */
             show: () => void;
-    
-            /** Reference to the textbox input/textarea element. */
-            textbox: HTMLInputElement | HTMLTextAreaElement;
     }
     
     /**

package/dist/gd-bs.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.disabled = 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.disabled = 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/./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.disabled = 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.disabled = 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.elTextbox.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.elTextbox.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, \"elTextbox\", {\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?");
 
 /***/ }),