@goldenpine/react-form-builder2 0.20.3-build.30 → 0.20.3-build.32

package/lib/form-elements/index.js

@@ -1,22 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
 var _fileSaver = require("file-saver");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
 var _reactBootstrapSlider = _interopRequireDefault(require("@goldenpine/react-bootstrap-slider"));
@@ -25,10 +28,86 @@ var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireDefault(require("./myxss"));
+var _excluded = ["placeholder"],
+  _excluded2 = ["placeholder"];
+/* eslint-disable quote-props */
+// eslint-disable-next-line max-classes-per-file
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable quote-props */ // eslint-disable-next-line max-classes-per-file
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// This component is used for text inputs (text, email, tel, number) and textarea 
+// to provide a floating placeholder that moves above the input 
+// when the user focuses on the input or when there is a value in the input. 
+// It accepts the following props:
+// - Tag: the HTML tag to use for the input (default is 'input', can be 'textarea' for multiline input)
+var FloatingPlaceholderInput = function FloatingPlaceholderInput(_ref) {
+  var _ref$Tag = _ref.Tag,
+    Tag = _ref$Tag === void 0 ? 'input' : _ref$Tag,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$mutable = _ref.mutable,
+    mutable = _ref$mutable === void 0 ? false : _ref$mutable;
+  var _useState = (0, _react.useState)(!!(defaultValue && String(defaultValue).length > 0)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hasValue = _useState2[0],
+    setHasValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setHasValue(!!(defaultValue && String(defaultValue).length > 0));
+  }, [defaultValue]);
+  var handleChange = function handleChange(e) {
+    var val = e.target.value;
+    setHasValue(val !== '' && val !== undefined && val !== null);
+    if (typeof inputProps.onChange === 'function') {
+      inputProps.onChange(e);
+    }
+  };
+  var handleFocus = function handleFocus(e) {
+    setFocused(true);
+    if (typeof inputProps.onFocus === 'function') {
+      inputProps.onFocus(e);
+    }
+  };
+  var handleBlur = function handleBlur(e) {
+    setFocused(false);
+    // If no value, ensure placeholder returns to original position
+    if (!ref.current || !ref.current.value) {
+      setHasValue(false);
+    }
+    if (typeof inputProps.onBlur === 'function') {
+      inputProps.onBlur(e);
+    }
+  };
+
+  // remove placeholder attribute from actual input to avoid duplicate text
+  var _ph = inputProps.placeholder,
+    restProps = (0, _objectWithoutProperties2["default"])(inputProps, _excluded);
+  var shrunken = hasValue || focused;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "floating-input-wrapper".concat(placeholder ? ' has-placeholder' : ''),
+    onClick: function onClick() {
+      if (ref.current) ref.current.focus();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, restProps, {
+    ref: ref,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    defaultValue: mutable ? defaultValue : undefined
+  })), placeholder && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "fb-placeholder ".concat(shrunken ? 'shrunken' : '')
+  }, placeholder));
+};
 var FormElements = {};
 
 // Helper function to format placeholder with asterisk if the field is required and label is hidden. 
@@ -197,19 +276,122 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         className: ["form-label",
         // In app, it's leveraged to identify element labels. Additionally removed !important of its specificity in scss to make it work with labelHidden.
         this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
-var EmailInput = /*#__PURE__*/function (_React$Component6) {
-  function EmailInput(props) {
+var SensitiveInput = /*#__PURE__*/function (_React$Component6) {
+  function SensitiveInput(props) {
     var _this2;
-    (0, _classCallCheck2["default"])(this, EmailInput);
-    _this2 = _callSuper(this, EmailInput, [props]);
+    (0, _classCallCheck2["default"])(this, SensitiveInput);
+    _this2 = _callSuper(this, SensitiveInput, [props]);
+    (0, _defineProperty2["default"])(_this2, "handleChange", function (e) {
+      var val = e.target.value;
+      _this2.setState({
+        value: val
+      });
+    });
+    (0, _defineProperty2["default"])(_this2, "handleFocus", function () {
+      _this2.setState({
+        focused: true
+      });
+    });
+    (0, _defineProperty2["default"])(_this2, "handleBlur", function () {
+      _this2.setState({
+        focused: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this2, "toggleShow", function (e) {
+      if (e) e.stopPropagation();
+      var next = !_this2.state.show;
+      _this2.setState({
+        show: next
+      }, function () {
+        if (_this2.inputField && _this2.inputField.current) {
+          try {
+            _this2.inputField.current.type = next ? 'text' : 'password';
+          } catch (err) {
+            // ignore if cannot change type
+          }
+        }
+      });
+    });
     _this2.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this2.state = {
+      value: props.defaultValue !== undefined ? props.defaultValue : '',
+      focused: false,
+      show: false
+    };
     return _this2;
   }
-  (0, _inherits2["default"])(EmailInput, _React$Component6);
+  (0, _inherits2["default"])(SensitiveInput, _React$Component6);
+  return (0, _createClass2["default"])(SensitiveInput, [{
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var props = {};
+      props.type = 'password';
+      props.className = 'form-control';
+      props.name = this.props.data.field_name;
+      var labelHidden = this.props.data.labelHidden || false;
+      var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
+      props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
+      if (this.props.mutable) {
+        props.defaultValue = this.props.defaultValue;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.data.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
+      if (this.props.read_only) {
+        props.disabled = 'disabled';
+      }
+
+      // remove placeholder attribute from actual input to avoid duplicate text
+      var _ph = props.placeholder,
+        restProps = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+      var shrunken = this.state.value && String(this.state.value).length > 0 || this.state.focused;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: _objectSpread({}, this.props.style),
+        className: baseClasses
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "floating-input-wrapper".concat(props.placeholder ? ' has-placeholder' : '', " sensitive-wrapper"),
+        onClick: function onClick() {
+          if (_this3.inputField.current) _this3.inputField.current.focus();
+        }
+      }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, restProps, {
+        ref: this.inputField,
+        onChange: this.handleChange,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      })), props.placeholder && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "fb-placeholder ".concat(shrunken ? 'shrunken' : '')
+      }, props.placeholder), /*#__PURE__*/_react["default"].createElement("i", {
+        className: "fas ".concat(this.state.show ? 'fa-eye-slash' : 'fa-eye', " toggle-password"),
+        onClick: this.toggleShow
+        // title={this.state.show ? 'Hide' : 'Show'}
+      }))));
+    }
+  }]);
+}(_react["default"].Component);
+var EmailInput = /*#__PURE__*/function (_React$Component7) {
+  function EmailInput(props) {
+    var _this4;
+    (0, _classCallCheck2["default"])(this, EmailInput);
+    _this4 = _callSuper(this, EmailInput, [props]);
+    _this4.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this4;
+  }
+  (0, _inherits2["default"])(EmailInput, _React$Component7);
   return (0, _createClass2["default"])(EmailInput, [{
     key: "render",
     value: function render() {
@@ -238,19 +420,24 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
-var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
+var PhoneNumber = /*#__PURE__*/function (_React$Component8) {
   function PhoneNumber(props) {
-    var _this3;
+    var _this5;
     (0, _classCallCheck2["default"])(this, PhoneNumber);
-    _this3 = _callSuper(this, PhoneNumber, [props]);
-    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this3;
+    _this5 = _callSuper(this, PhoneNumber, [props]);
+    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this5;
   }
-  (0, _inherits2["default"])(PhoneNumber, _React$Component7);
+  (0, _inherits2["default"])(PhoneNumber, _React$Component8);
   return (0, _createClass2["default"])(PhoneNumber, [{
     key: "render",
     value: function render() {
@@ -285,19 +472,24 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
-var NumberInput = /*#__PURE__*/function (_React$Component8) {
+var NumberInput = /*#__PURE__*/function (_React$Component9) {
   function NumberInput(props) {
-    var _this4;
+    var _this6;
     (0, _classCallCheck2["default"])(this, NumberInput);
-    _this4 = _callSuper(this, NumberInput, [props]);
-    _this4.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this4;
+    _this6 = _callSuper(this, NumberInput, [props]);
+    _this6.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this6;
   }
-  (0, _inherits2["default"])(NumberInput, _React$Component8);
+  (0, _inherits2["default"])(NumberInput, _React$Component9);
   return (0, _createClass2["default"])(NumberInput, [{
     key: "render",
     value: function render() {
@@ -326,19 +518,24 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
-var TextArea = /*#__PURE__*/function (_React$Component9) {
+var TextArea = /*#__PURE__*/function (_React$Component0) {
   function TextArea(props) {
-    var _this5;
+    var _this7;
     (0, _classCallCheck2["default"])(this, TextArea);
-    _this5 = _callSuper(this, TextArea, [props]);
-    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this5;
+    _this7 = _callSuper(this, TextArea, [props]);
+    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this7;
   }
-  (0, _inherits2["default"])(TextArea, _React$Component9);
+  (0, _inherits2["default"])(TextArea, _React$Component0);
   return (0, _createClass2["default"])(TextArea, [{
     key: "render",
     value: function render() {
@@ -366,19 +563,25 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("textarea", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        Tag: "textarea",
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
-var Dropdown = /*#__PURE__*/function (_React$Component0) {
+var Dropdown = /*#__PURE__*/function (_React$Component1) {
   function Dropdown(props) {
-    var _this6;
+    var _this8;
     (0, _classCallCheck2["default"])(this, Dropdown);
-    _this6 = _callSuper(this, Dropdown, [props]);
-    _this6.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this6;
+    _this8 = _callSuper(this, Dropdown, [props]);
+    _this8.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this8;
   }
-  (0, _inherits2["default"])(Dropdown, _React$Component0);
+  (0, _inherits2["default"])(Dropdown, _React$Component1);
   return (0, _createClass2["default"])(Dropdown, [{
     key: "render",
     value: function render() {
@@ -414,28 +617,28 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
     }
   }]);
 }(_react["default"].Component);
-var Signature = /*#__PURE__*/function (_React$Component1) {
+var Signature = /*#__PURE__*/function (_React$Component10) {
   function Signature(props) {
-    var _this7;
+    var _this9;
     (0, _classCallCheck2["default"])(this, Signature);
-    _this7 = _callSuper(this, Signature, [props]);
-    (0, _defineProperty2["default"])(_this7, "clear", function () {
-      if (_this7.state.defaultValue) {
-        _this7.setState({
+    _this9 = _callSuper(this, Signature, [props]);
+    (0, _defineProperty2["default"])(_this9, "clear", function () {
+      if (_this9.state.defaultValue) {
+        _this9.setState({
           defaultValue: ''
         });
-      } else if (_this7.canvas.current) {
-        _this7.canvas.current.clear();
+      } else if (_this9.canvas.current) {
+        _this9.canvas.current.clear();
       }
     });
-    _this7.state = {
+    _this9.state = {
       defaultValue: props.defaultValue
     };
-    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this7.canvas = /*#__PURE__*/_react["default"].createRef();
-    return _this7;
+    _this9.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this9.canvas = /*#__PURE__*/_react["default"].createRef();
+    return _this9;
   }
-  (0, _inherits2["default"])(Signature, _React$Component1);
+  (0, _inherits2["default"])(Signature, _React$Component10);
   return (0, _createClass2["default"])(Signature, [{
     key: "render",
     value: function render() {
@@ -482,26 +685,26 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
     }
   }]);
 }(_react["default"].Component);
-var Tags = /*#__PURE__*/function (_React$Component10) {
+var Tags = /*#__PURE__*/function (_React$Component11) {
   function Tags(props) {
-    var _this8;
+    var _this0;
     (0, _classCallCheck2["default"])(this, Tags);
-    _this8 = _callSuper(this, Tags, [props]);
+    _this0 = _callSuper(this, Tags, [props]);
     // state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
-    (0, _defineProperty2["default"])(_this8, "handleChange", function (e) {
-      _this8.setState({
+    (0, _defineProperty2["default"])(_this0, "handleChange", function (e) {
+      _this0.setState({
         value: e || []
       });
     });
-    _this8.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this0.inputField = /*#__PURE__*/_react["default"].createRef();
     var defaultValue = props.defaultValue,
       data = props.data;
-    _this8.state = {
-      value: _this8.getDefaultValue(defaultValue, data.options)
+    _this0.state = {
+      value: _this0.getDefaultValue(defaultValue, data.options)
     };
-    return _this8;
+    return _this0;
   }
-  (0, _inherits2["default"])(Tags, _React$Component10);
+  (0, _inherits2["default"])(Tags, _React$Component11);
   return (0, _createClass2["default"])(Tags, [{
     key: "getDefaultValue",
     value: function getDefaultValue(defaultValue, options) {
@@ -556,19 +759,19 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
     }
   }]);
 }(_react["default"].Component);
-var Checkboxes = /*#__PURE__*/function (_React$Component11) {
+var Checkboxes = /*#__PURE__*/function (_React$Component12) {
   function Checkboxes(props) {
-    var _this9;
+    var _this1;
     (0, _classCallCheck2["default"])(this, Checkboxes);
-    _this9 = _callSuper(this, Checkboxes, [props]);
-    _this9.options = {};
-    return _this9;
+    _this1 = _callSuper(this, Checkboxes, [props]);
+    _this1.options = {};
+    return _this1;
   }
-  (0, _inherits2["default"])(Checkboxes, _React$Component11);
+  (0, _inherits2["default"])(Checkboxes, _React$Component12);
   return (0, _createClass2["default"])(Checkboxes, [{
     key: "render",
     value: function render() {
-      var _this0 = this;
+      var _this10 = this;
       var self = this;
       var labelHidden = this.props.data.labelHidden || false;
       var classNames = 'form-check';
@@ -595,7 +798,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
         if (self.props.mutable) {
           props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
         }
-        if (_this0.props.read_only) {
+        if (_this10.props.read_only) {
           props.disabled = 'disabled';
         }
         return /*#__PURE__*/_react["default"].createElement("div", {
@@ -609,7 +812,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           },
-          "data-required-checks": _this0.props.data.checkbox_required_checks ? _this0.props.data.checkbox_required_checks : '1'
+          "data-required-checks": _this10.props.data.checkbox_required_checks ? _this10.props.data.checkbox_required_checks : '1'
         }, props)), /*#__PURE__*/_react["default"].createElement("label", {
           className: "form-check-label",
           htmlFor: "fid_".concat(this_key)
@@ -618,19 +821,19 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
     }
   }]);
 }(_react["default"].Component);
-var RadioButtons = /*#__PURE__*/function (_React$Component12) {
+var RadioButtons = /*#__PURE__*/function (_React$Component13) {
   function RadioButtons(props) {
-    var _this1;
+    var _this11;
     (0, _classCallCheck2["default"])(this, RadioButtons);
-    _this1 = _callSuper(this, RadioButtons, [props]);
-    _this1.options = {};
-    return _this1;
+    _this11 = _callSuper(this, RadioButtons, [props]);
+    _this11.options = {};
+    return _this11;
   }
-  (0, _inherits2["default"])(RadioButtons, _React$Component12);
+  (0, _inherits2["default"])(RadioButtons, _React$Component13);
   return (0, _createClass2["default"])(RadioButtons, [{
     key: "render",
     value: function render() {
-      var _this10 = this;
+      var _this12 = this;
       var self = this;
       var labelHidden = this.props.data.labelHidden || false;
       var classNames = 'form-check';
@@ -657,7 +860,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
         if (self.props.mutable) {
           props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
         }
-        if (_this10.props.read_only) {
+        if (_this12.props.read_only) {
           props.disabled = 'disabled';
         }
         return /*#__PURE__*/_react["default"].createElement("div", {
@@ -679,12 +882,12 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
     }
   }]);
 }(_react["default"].Component);
-var Image = /*#__PURE__*/function (_React$Component13) {
+var Image = /*#__PURE__*/function (_React$Component14) {
   function Image() {
     (0, _classCallCheck2["default"])(this, Image);
     return _callSuper(this, Image, arguments);
   }
-  (0, _inherits2["default"])(Image, _React$Component13);
+  (0, _inherits2["default"])(Image, _React$Component14);
   return (0, _createClass2["default"])(Image, [{
     key: "render",
     value: function render() {
@@ -711,15 +914,15 @@ var Image = /*#__PURE__*/function (_React$Component13) {
     }
   }]);
 }(_react["default"].Component);
-var Rating = /*#__PURE__*/function (_React$Component14) {
+var Rating = /*#__PURE__*/function (_React$Component15) {
   function Rating(props) {
-    var _this11;
+    var _this13;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this11 = _callSuper(this, Rating, [props]);
-    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this11;
+    _this13 = _callSuper(this, Rating, [props]);
+    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this13;
   }
-  (0, _inherits2["default"])(Rating, _React$Component14);
+  (0, _inherits2["default"])(Rating, _React$Component15);
   return (0, _createClass2["default"])(Rating, [{
     key: "render",
     value: function render() {
@@ -748,12 +951,12 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
     }
   }]);
 }(_react["default"].Component);
-var HyperLink = /*#__PURE__*/function (_React$Component15) {
+var HyperLink = /*#__PURE__*/function (_React$Component16) {
   function HyperLink() {
     (0, _classCallCheck2["default"])(this, HyperLink);
     return _callSuper(this, HyperLink, arguments);
   }
-  (0, _inherits2["default"])(HyperLink, _React$Component15);
+  (0, _inherits2["default"])(HyperLink, _React$Component16);
   return (0, _createClass2["default"])(HyperLink, [{
     key: "render",
     value: function render() {
@@ -778,12 +981,12 @@ var HyperLink = /*#__PURE__*/function (_React$Component15) {
     }
   }]);
 }(_react["default"].Component);
-var Download = /*#__PURE__*/function (_React$Component16) {
+var Download = /*#__PURE__*/function (_React$Component17) {
   function Download() {
     (0, _classCallCheck2["default"])(this, Download);
     return _callSuper(this, Download, arguments);
   }
-  (0, _inherits2["default"])(Download, _React$Component16);
+  (0, _inherits2["default"])(Download, _React$Component17);
   return (0, _createClass2["default"])(Download, [{
     key: "render",
     value: function render() {
@@ -802,13 +1005,13 @@ var Download = /*#__PURE__*/function (_React$Component16) {
     }
   }]);
 }(_react["default"].Component);
-var Camera = /*#__PURE__*/function (_React$Component17) {
+var Camera = /*#__PURE__*/function (_React$Component18) {
   function Camera(props) {
-    var _this12;
+    var _this14;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this12 = _callSuper(this, Camera, [props]);
-    (0, _defineProperty2["default"])(_this12, "displayImage", function (e) {
-      var self = _this12;
+    _this14 = _callSuper(this, Camera, [props]);
+    (0, _defineProperty2["default"])(_this14, "displayImage", function (e) {
+      var self = _this14;
       var target = e.target;
       if (target.files && target.files.length) {
         self.setState({
@@ -817,24 +1020,24 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
         });
       }
     });
-    (0, _defineProperty2["default"])(_this12, "clearImage", function () {
-      _this12.setState({
+    (0, _defineProperty2["default"])(_this14, "clearImage", function () {
+      _this14.setState({
         img: null,
         previewImg: null
       });
     });
-    _this12.state = {
+    _this14.state = {
       img: null,
       previewImg: null
     };
-    return _this12;
+    return _this14;
   }
-  (0, _inherits2["default"])(Camera, _React$Component17);
+  (0, _inherits2["default"])(Camera, _React$Component18);
   return (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref) {
-      var width = _ref.width,
-        height = _ref.height;
+    value: function getImageSizeProps(_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
       var imgProps = {
         width: '100%'
       };
@@ -857,7 +1060,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
   }, {
     key: "render",
     value: function render() {
-      var _this13 = this;
+      var _this15 = this;
       var imageStyle = {
         // 2025/11/11
         // 'scale-down' looks to keep the original size of image on form-builder-generator.
@@ -926,7 +1129,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           className: "fas fa-camera"
         }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
           onLoad: function onLoad() {
-            return URL.revokeObjectURL(_this13.state.previewImg);
+            return URL.revokeObjectURL(_this15.state.previewImg);
           },
           src: this.state.previewImg,
           height: "100",
@@ -973,7 +1176,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           className: "btn-browse"
         }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
           onLoad: function onLoad() {
-            return URL.revokeObjectURL(_this13.state.previewImg);
+            return URL.revokeObjectURL(_this15.state.previewImg);
           },
           src: this.state.previewImg,
           className: "image-upload-preview",
@@ -989,13 +1192,13 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
     }
   }]);
 }(_react["default"].Component);
-var FileUpload = /*#__PURE__*/function (_React$Component18) {
+var FileUpload = /*#__PURE__*/function (_React$Component19) {
   function FileUpload(props) {
-    var _this14;
+    var _this16;
     (0, _classCallCheck2["default"])(this, FileUpload);
-    _this14 = _callSuper(this, FileUpload, [props]);
-    (0, _defineProperty2["default"])(_this14, "displayFileUpload", function (e) {
-      var self = _this14;
+    _this16 = _callSuper(this, FileUpload, [props]);
+    (0, _defineProperty2["default"])(_this16, "displayFileUpload", function (e) {
+      var self = _this16;
       var target = e.target;
       var file;
       if (target.files && target.files.length > 0) {
@@ -1005,19 +1208,19 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
         });
       }
     });
-    (0, _defineProperty2["default"])(_this14, "clearFileUpload", function () {
-      _this14.setState({
+    (0, _defineProperty2["default"])(_this16, "clearFileUpload", function () {
+      _this16.setState({
         fileUpload: null
       });
     });
-    (0, _defineProperty2["default"])(_this14, "saveFile", /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+    (0, _defineProperty2["default"])(_this16, "saveFile", /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               e.preventDefault();
-              sourceUrl = _this14.props.defaultValue;
+              sourceUrl = _this16.props.defaultValue;
               _context.next = 1;
               return (0, _isomorphicFetch["default"])(sourceUrl, {
                 method: 'GET',
@@ -1036,7 +1239,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
               resBlob = _context.sent;
               // eslint-disable-next-line no-undef
               blob = new Blob([resBlob], {
-                type: _this14.props.data.fileType || response.headers.get('Content-Type')
+                type: _this16.props.data.fileType || response.headers.get('Content-Type')
               });
               if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
                 fileName = dispositionHeader.split(';filename=')[1];
@@ -1052,15 +1255,15 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
         }, _callee);
       }));
       return function (_x) {
-        return _ref2.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
-    _this14.state = {
+    _this16.state = {
       fileUpload: null
     };
-    return _this14;
+    return _this16;
   }
-  (0, _inherits2["default"])(FileUpload, _React$Component18);
+  (0, _inherits2["default"])(FileUpload, _React$Component19);
   return (0, _createClass2["default"])(FileUpload, [{
     key: "render",
     value: function render() {
@@ -1186,24 +1389,24 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
     }
   }]);
 }(_react["default"].Component);
-var Range = /*#__PURE__*/function (_React$Component19) {
+var Range = /*#__PURE__*/function (_React$Component20) {
   function Range(props) {
-    var _this15;
+    var _this17;
     (0, _classCallCheck2["default"])(this, Range);
-    _this15 = _callSuper(this, Range, [props]);
-    (0, _defineProperty2["default"])(_this15, "changeValue", function (e) {
+    _this17 = _callSuper(this, Range, [props]);
+    (0, _defineProperty2["default"])(_this17, "changeValue", function (e) {
       var target = e.target;
-      _this15.setState({
+      _this17.setState({
         value: target.value
       });
     });
-    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this15.state = {
+    _this17.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this17.state = {
       value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.default_value, 10)
     };
-    return _this15;
+    return _this17;
   }
-  (0, _inherits2["default"])(Range, _React$Component19);
+  (0, _inherits2["default"])(Range, _React$Component20);
   return (0, _createClass2["default"])(Range, [{
     key: "render",
     value: function render() {
@@ -1290,6 +1493,7 @@ FormElements.Paragraph = Paragraph;
 FormElements.Label = Label;
 FormElements.LineBreak = LineBreak;
 FormElements.TextInput = TextInput;
+FormElements.SensitiveInput = SensitiveInput;
 FormElements.EmailInput = EmailInput;
 FormElements.PhoneNumber = PhoneNumber;
 FormElements.NumberInput = NumberInput;