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

package/lib/form-elements/index.js

@@ -28,7 +28,8 @@ 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"];
+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); }
@@ -284,15 +285,113 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
     }
   }]);
 }(_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() {
@@ -330,15 +429,15 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
     }
   }]);
 }(_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() {
@@ -382,15 +481,15 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
     }
   }]);
 }(_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() {
@@ -428,15 +527,15 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
     }
   }]);
 }(_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() {
@@ -474,15 +573,15 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
     }
   }]);
 }(_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() {
@@ -518,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() {
@@ -586,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) {
@@ -660,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';
@@ -699,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", {
@@ -713,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)
@@ -722,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';
@@ -761,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", {
@@ -783,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() {
@@ -815,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() {
@@ -852,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() {
@@ -882,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() {
@@ -906,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({
@@ -921,19 +1020,19 @@ 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(_ref2) {
@@ -961,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.
@@ -1030,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",
@@ -1077,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",
@@ -1093,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) {
@@ -1109,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 () {
+    (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',
@@ -1140,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];
@@ -1159,12 +1258,12 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
         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() {
@@ -1290,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() {
@@ -1394,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;

package/lib/form-elements-edit.js

@@ -173,7 +173,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
       var canHaveUploadLayout = this.state.element.element === 'Camera' || this.state.element.element === 'FileUpload';
-      var canHavePlaceholder = this.props.element.element === 'TextInput' || this.props.element.element === 'TextArea' || this.props.element.element === 'EmailInput' || this.props.element.element === 'NumberInput' || this.props.element.element === 'PhoneNumber';
+      var canHavePlaceholder = this.props.element.element === 'TextInput' || this.props.element.element === 'TextArea' || this.props.element.element === 'EmailInput' || this.props.element.element === 'NumberInput' || this.props.element.element === 'PhoneNumber' || this.props.element.element === 'SensitiveInput';
       var this_files = this.props.files.length ? this.props.files : [];
       if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
         this_files.unshift({

package/lib/language-provider/locales/en-us.json

@@ -79,6 +79,7 @@
   "checkboxes" : "Checkboxes",
   "multiple-choice":"Multiple Choice",
   "text-input":"Text Input",
+  "sensitive-input":"Sensitive Input",
   "email-input":"Email",
   "phone-input":"Phone Number",
   "number-input":"Number Input",

package/lib/language-provider/locales/fa-ir.json

@@ -79,6 +79,7 @@
   "checkboxes": "چک‌ باکس‌ها",
   "multiple-choice": "چند گزینه‌ای",
   "text-input": "ورودی متن",
+  "sensitive-input": "ورودی حساس",
   "email-input": "ایمیل",
   "phone-input": "شماره تلفن",
   "number-input": "ورودی عدد",

package/lib/language-provider/locales/it-it.json

@@ -79,6 +79,7 @@
   "checkboxes" : "Checkboxes",
   "multiple-choice":"Scelta multipla",
   "text-input":"Input testo",
+  "sensitive-input":"Input sensibile",
   "email-input":"Email",
   "phone-input":"Numero di telefono",
   "number-input":"Input numerico",

package/lib/language-provider/locales/vi-vn.json

@@ -79,6 +79,7 @@
   "checkboxes" : "Hộp chọn",
   "multiple-choice":"Nhiều lựa chọn",
   "text-input":"Nhập chữ",
+  "sensitive-input":"Nhập dữ liệu nhạy cảm",
   "email-input": "Email",
   "phone-input": "Số điện thoại",
   "number-input":"Nhập số",