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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +1 -1
  2. package/dist/845.app.js +1 -1
  3. package/dist/app.css +1 -1
  4. package/dist/app.css.map +1 -1
  5. package/dist/app.js +1 -1
  6. package/lib/form-elements/component-label.js +20 -7
  7. package/lib/form-elements/custom-element.js +5 -4
  8. package/lib/form-elements/date-picker.js +3 -2
  9. package/lib/form-elements/index.js +424 -107
  10. package/lib/form-elements-edit.js +229 -105
  11. package/lib/form-validator.js +3 -3
  12. package/lib/form.js +1 -1
  13. package/lib/language-provider/locales/en-us.json +10 -11
  14. package/lib/language-provider/locales/fa-ir.json +10 -3
  15. package/lib/language-provider/locales/it-it.json +10 -3
  16. package/lib/language-provider/locales/vi-vn.json +28 -8
  17. package/lib/multi-column/dustbin.js +3 -1
  18. package/lib/preview.js +120 -6
  19. package/lib/sortable-element.js +8 -7
  20. package/lib/toolbar.js +6 -2
  21. package/package.json +3 -3
package/lib/form-elements/index.js CHANGED
@@ -1,35 +1,124 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports["default"] = void 0;
8
9
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
9
10
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
12
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
13
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
14
14
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
15
15
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
16
16
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
18
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
20
  var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
18
21
  var _fileSaver = require("file-saver");
19
- var _react = _interopRequireDefault(require("react"));
22
+ var _react = _interopRequireWildcard(require("react"));
20
23
  var _reactSelect = _interopRequireDefault(require("react-select"));
21
24
  var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
22
- var _reactBootstrapSlider = _interopRequireDefault(require("react-bootstrap-slider"));
25
+ var _reactBootstrapSlider = _interopRequireDefault(require("@goldenpine/react-bootstrap-slider"));
23
26
  var _starRating = _interopRequireDefault(require("./star-rating"));
24
27
  var _datePicker = _interopRequireDefault(require("./date-picker"));
25
28
  var _componentHeader = _interopRequireDefault(require("./component-header"));
26
29
  var _componentLabel = _interopRequireDefault(require("./component-label"));
27
30
  var _myxss = _interopRequireDefault(require("./myxss"));
31
+ var _excluded = ["placeholder"];
32
+ /* eslint-disable quote-props */
33
+ // eslint-disable-next-line max-classes-per-file
34
+ 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); }
28
35
  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; }
29
36
  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; }
30
37
  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)); }
31
- 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
38
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
39
+ // This component is used for text inputs (text, email, tel, number) and textarea
40
+ // to provide a floating placeholder that moves above the input
41
+ // when the user focuses on the input or when there is a value in the input.
42
+ // It accepts the following props:
43
+ // - Tag: the HTML tag to use for the input (default is 'input', can be 'textarea' for multiline input)
44
+ var FloatingPlaceholderInput = function FloatingPlaceholderInput(_ref) {
45
+ var _ref$Tag = _ref.Tag,
46
+ Tag = _ref$Tag === void 0 ? 'input' : _ref$Tag,
47
+ _ref$inputProps = _ref.inputProps,
48
+ inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
49
+ _ref$placeholder = _ref.placeholder,
50
+ placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
51
+ _ref$defaultValue = _ref.defaultValue,
52
+ defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
53
+ _ref$mutable = _ref.mutable,
54
+ mutable = _ref$mutable === void 0 ? false : _ref$mutable;
55
+ var _useState = (0, _react.useState)(!!(defaultValue && String(defaultValue).length > 0)),
56
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
57
+ hasValue = _useState2[0],
58
+ setHasValue = _useState2[1];
59
+ var _useState3 = (0, _react.useState)(false),
60
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
61
+ focused = _useState4[0],
62
+ setFocused = _useState4[1];
63
+ var ref = (0, _react.useRef)(null);
64
+ (0, _react.useEffect)(function () {
65
+ setHasValue(!!(defaultValue && String(defaultValue).length > 0));
66
+ }, [defaultValue]);
67
+ var handleChange = function handleChange(e) {
68
+ var val = e.target.value;
69
+ setHasValue(val !== '' && val !== undefined && val !== null);
70
+ if (typeof inputProps.onChange === 'function') {
71
+ inputProps.onChange(e);
72
+ }
73
+ };
74
+ var handleFocus = function handleFocus(e) {
75
+ setFocused(true);
76
+ if (typeof inputProps.onFocus === 'function') {
77
+ inputProps.onFocus(e);
78
+ }
79
+ };
80
+ var handleBlur = function handleBlur(e) {
81
+ setFocused(false);
82
+ // If no value, ensure placeholder returns to original position
83
+ if (!ref.current || !ref.current.value) {
84
+ setHasValue(false);
85
+ }
86
+ if (typeof inputProps.onBlur === 'function') {
87
+ inputProps.onBlur(e);
88
+ }
89
+ };
90
+
91
+ // remove placeholder attribute from actual input to avoid duplicate text
92
+ var _ph = inputProps.placeholder,
93
+ restProps = (0, _objectWithoutProperties2["default"])(inputProps, _excluded);
94
+ var shrunken = hasValue || focused;
95
+ return /*#__PURE__*/_react["default"].createElement("div", {
96
+ className: "floating-input-wrapper".concat(placeholder ? ' has-placeholder' : ''),
97
+ onClick: function onClick() {
98
+ if (ref.current) ref.current.focus();
99
+ }
100
+ }, /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, restProps, {
101
+ ref: ref,
102
+ onChange: handleChange,
103
+ onFocus: handleFocus,
104
+ onBlur: handleBlur,
105
+ defaultValue: mutable ? defaultValue : undefined
106
+ })), placeholder && /*#__PURE__*/_react["default"].createElement("span", {
107
+ className: "fb-placeholder ".concat(shrunken ? 'shrunken' : '')
108
+ }, placeholder));
109
+ };
32
110
  var FormElements = {};
111
+
112
+ // Helper function to format placeholder with asterisk if the field is required and label is hidden.
113
+ // The function checks if the field has a required label, if the label is hidden, and if the placeholder is not empty.
114
+ // If all conditions are met, it appends an asterisk to the placeholder.
115
+ function formatPlaceholder(placeholder, hasRequiredLabel, labelHidden) {
116
+ var result = placeholder || '';
117
+ if (hasRequiredLabel && labelHidden && result.trim() !== '' && !result.endsWith('*')) {
118
+ result += ' *';
119
+ }
120
+ return result;
121
+ }
33
122
  var Header = /*#__PURE__*/function (_React$Component) {
34
123
  function Header() {
35
124
  (0, _classCallCheck2["default"])(this, Header);
@@ -86,7 +175,7 @@ var Paragraph = /*#__PURE__*/function (_React$Component2) {
86
175
  return /*#__PURE__*/_react["default"].createElement("div", {
87
176
  style: _objectSpread({}, this.props.style),
88
177
  className: baseClasses
89
- }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("p", {
178
+ }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
90
179
  className: classNames,
91
180
  dangerouslySetInnerHTML: {
92
181
  __html: _myxss["default"].process(this.props.data.content)
@@ -163,6 +252,9 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
163
252
  props.type = 'text';
164
253
  props.className = 'form-control';
165
254
  props.name = this.props.data.field_name;
255
+ var labelHidden = this.props.data.labelHidden || false;
256
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
257
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
166
258
  if (this.props.mutable) {
167
259
  props.defaultValue = this.props.defaultValue;
168
260
  props.ref = this.inputField;
@@ -178,8 +270,17 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
178
270
  style: _objectSpread({}, this.props.style),
179
271
  className: baseClasses
180
272
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
181
- className: "form-group"
182
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
273
+ className: "mb-3"
274
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
275
+ className: ["form-label",
276
+ // In app, it's leveraged to identify element labels. Additionally removed !important of its specificity in scss to make it work with labelHidden.
277
+ this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
278
+ })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
279
+ inputProps: props,
280
+ placeholder: props.placeholder,
281
+ defaultValue: props.defaultValue,
282
+ mutable: this.props.mutable
283
+ })));
183
284
  }
184
285
  }]);
185
286
  }(_react["default"].Component);
@@ -199,6 +300,9 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
199
300
  props.type = 'text';
200
301
  props.className = 'form-control';
201
302
  props.name = this.props.data.field_name;
303
+ var labelHidden = this.props.data.labelHidden || false;
304
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
305
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
202
306
  if (this.props.mutable) {
203
307
  props.defaultValue = this.props.defaultValue;
204
308
  props.ref = this.inputField;
@@ -214,8 +318,15 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
214
318
  style: _objectSpread({}, this.props.style),
215
319
  className: baseClasses
216
320
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
217
- className: "form-group"
218
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
321
+ className: "mb-3"
322
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
323
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
324
+ })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
325
+ inputProps: props,
326
+ placeholder: props.placeholder,
327
+ defaultValue: props.defaultValue,
328
+ mutable: this.props.mutable
329
+ })));
219
330
  }
220
331
  }]);
221
332
  }(_react["default"].Component);
@@ -235,6 +346,15 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
235
346
  props.type = 'tel';
236
347
  props.className = 'form-control';
237
348
  props.name = this.props.data.field_name;
349
+ var labelHidden = this.props.data.labelHidden || false;
350
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
351
+ var placeholder; // For phone number input, if placeholder is not set, we will set a default placeholder with an asterisk if it's required, to give users a hint about the expected format and the requirement. The default placeholder is "+12345678900" which is in E.164 format without spaces or dashes, as it's the most widely accepted format for international phone numbers and works well with the pattern validation we have in place. Merchants can customize this placeholder or even disable it by leaving it blank in the form builder.
352
+ if (this.props.data.placeholder !== undefined && this.props.data.placeholder !== null) {
353
+ placeholder = this.props.data.placeholder;
354
+ } else {
355
+ placeholder = '+12345678900';
356
+ }
357
+ props.placeholder = formatPlaceholder(placeholder, hasRequiredLabel, labelHidden);
238
358
  if (this.props.mutable) {
239
359
  props.defaultValue = this.props.defaultValue;
240
360
  props.ref = this.inputField;
@@ -250,8 +370,15 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
250
370
  style: _objectSpread({}, this.props.style),
251
371
  className: baseClasses
252
372
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
253
- className: "form-group"
254
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
373
+ className: "mb-3"
374
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
375
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
376
+ })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
377
+ inputProps: props,
378
+ placeholder: props.placeholder,
379
+ defaultValue: props.defaultValue,
380
+ mutable: this.props.mutable
381
+ })));
255
382
  }
256
383
  }]);
257
384
  }(_react["default"].Component);
@@ -271,6 +398,9 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
271
398
  props.type = 'number';
272
399
  props.className = 'form-control';
273
400
  props.name = this.props.data.field_name;
401
+ var labelHidden = this.props.data.labelHidden || false;
402
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
403
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
274
404
  if (this.props.mutable) {
275
405
  props.defaultValue = this.props.defaultValue;
276
406
  props.ref = this.inputField;
@@ -286,8 +416,15 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
286
416
  style: _objectSpread({}, this.props.style),
287
417
  className: baseClasses
288
418
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
289
- className: "form-group"
290
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
419
+ className: "mb-3"
420
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
421
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
422
+ })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
423
+ inputProps: props,
424
+ placeholder: props.placeholder,
425
+ defaultValue: props.defaultValue,
426
+ mutable: this.props.mutable
427
+ })));
291
428
  }
292
429
  }]);
293
430
  }(_react["default"].Component);
@@ -306,6 +443,9 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
306
443
  var props = {};
307
444
  props.className = 'form-control';
308
445
  props.name = this.props.data.field_name;
446
+ var labelHidden = this.props.data.labelHidden || false;
447
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
448
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
309
449
  if (this.props.read_only) {
310
450
  props.disabled = 'disabled';
311
451
  }
@@ -321,8 +461,16 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
321
461
  style: _objectSpread({}, this.props.style),
322
462
  className: baseClasses
323
463
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
324
- className: "form-group"
325
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
464
+ className: "mb-3"
465
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
466
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
467
+ })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
468
+ Tag: "textarea",
469
+ inputProps: props,
470
+ placeholder: props.placeholder,
471
+ defaultValue: props.defaultValue,
472
+ mutable: this.props.mutable
473
+ })));
326
474
  }
327
475
  }]);
328
476
  }(_react["default"].Component);
@@ -341,6 +489,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
341
489
  var props = {};
342
490
  props.className = 'form-control';
343
491
  props.name = this.props.data.field_name;
492
+ var labelHidden = this.props.data.labelHidden || false;
344
493
  if (this.props.mutable) {
345
494
  props.defaultValue = this.props.defaultValue;
346
495
  props.ref = this.inputField;
@@ -356,8 +505,10 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
356
505
  style: _objectSpread({}, this.props.style),
357
506
  className: baseClasses
358
507
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
359
- className: "form-group"
360
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
508
+ className: "mb-3"
509
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
510
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
511
+ })), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
361
512
  var this_key = "preview_".concat(option.key);
362
513
  return /*#__PURE__*/_react["default"].createElement("option", {
363
514
  value: option.value,
@@ -397,6 +548,7 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
397
548
  var props = {};
398
549
  props.type = 'hidden';
399
550
  props.name = this.props.data.field_name;
551
+ var labelHidden = this.props.data.labelHidden || false;
400
552
  if (this.props.mutable) {
401
553
  props.defaultValue = defaultValue;
402
554
  props.ref = this.inputField;
@@ -421,8 +573,10 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
421
573
  style: _objectSpread({}, this.props.style),
422
574
  className: baseClasses
423
575
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
424
- className: "form-group"
425
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
576
+ className: "mb-3"
577
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
578
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
579
+ })), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
426
580
  src: sourceDataURL
427
581
  }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement("i", {
428
582
  className: "fas fa-times clear-signature",
@@ -481,6 +635,7 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
481
635
  props.isMulti = true;
482
636
  props.name = this.props.data.field_name;
483
637
  props.onChange = this.handleChange;
638
+ var labelHidden = this.props.data.labelHidden || false;
484
639
  props.options = options;
485
640
  if (!this.props.mutable) {
486
641
  props.value = options[0].text;
@@ -498,8 +653,10 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
498
653
  style: _objectSpread({}, this.props.style),
499
654
  className: baseClasses
500
655
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
501
- className: "form-group"
502
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
656
+ className: "mb-3"
657
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
658
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
659
+ })), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
503
660
  }
504
661
  }]);
505
662
  }(_react["default"].Component);
@@ -517,9 +674,10 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
517
674
  value: function render() {
518
675
  var _this0 = this;
519
676
  var self = this;
520
- var classNames = 'custom-control custom-checkbox';
677
+ var labelHidden = this.props.data.labelHidden || false;
678
+ var classNames = 'form-check';
521
679
  if (this.props.data.inline) {
522
- classNames += ' option-inline';
680
+ classNames += ' form-check-inline';
523
681
  }
524
682
  var baseClasses = 'SortableItem rfb-item';
525
683
  if (this.props.data.pageBreakBefore) {
@@ -529,8 +687,10 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
529
687
  style: _objectSpread({}, this.props.style),
530
688
  className: baseClasses
531
689
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
532
- className: "form-group"
533
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
690
+ className: "mb-3"
691
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
692
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
693
+ })), this.props.data.options.map(function (option) {
534
694
  var this_key = "preview_".concat(option.key);
535
695
  var props = {};
536
696
  props.name = "option_".concat(option.key);
@@ -547,14 +707,15 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
547
707
  key: this_key
548
708
  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
549
709
  id: "fid_".concat(this_key),
550
- className: "custom-control-input",
710
+ className: "form-check-input",
551
711
  ref: function ref(c) {
552
712
  if (c && self.props.mutable) {
553
713
  self.options["child_ref_".concat(option.key)] = c;
554
714
  }
555
- }
715
+ },
716
+ "data-required-checks": _this0.props.data.checkbox_required_checks ? _this0.props.data.checkbox_required_checks : '1'
556
717
  }, props)), /*#__PURE__*/_react["default"].createElement("label", {
557
- className: "custom-control-label",
718
+ className: "form-check-label",
558
719
  htmlFor: "fid_".concat(this_key)
559
720
  }, option.text));
560
721
  })));
@@ -575,9 +736,10 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
575
736
  value: function render() {
576
737
  var _this10 = this;
577
738
  var self = this;
578
- var classNames = 'custom-control custom-radio';
739
+ var labelHidden = this.props.data.labelHidden || false;
740
+ var classNames = 'form-check';
579
741
  if (this.props.data.inline) {
580
- classNames += ' option-inline';
742
+ classNames += ' form-check-inline';
581
743
  }
582
744
  var baseClasses = 'SortableItem rfb-item';
583
745
  if (this.props.data.pageBreakBefore) {
@@ -587,8 +749,10 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
587
749
  style: _objectSpread({}, this.props.style),
588
750
  className: baseClasses
589
751
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
590
- className: "form-group"
591
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
752
+ className: "mb-3"
753
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
754
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
755
+ })), this.props.data.options.map(function (option) {
592
756
  var this_key = "preview_".concat(option.key);
593
757
  var props = {};
594
758
  props.name = self.props.data.field_name;
@@ -605,14 +769,14 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
605
769
  key: this_key
606
770
  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
607
771
  id: "fid_".concat(this_key),
608
- className: "custom-control-input",
772
+ className: "form-check-input",
609
773
  ref: function ref(c) {
610
774
  if (c && self.props.mutable) {
611
775
  self.options["child_ref_".concat(option.key)] = c;
612
776
  }
613
777
  }
614
778
  }, props)), /*#__PURE__*/_react["default"].createElement("label", {
615
- className: "custom-control-label",
779
+ className: "form-check-label",
616
780
  htmlFor: "fid_".concat(this_key)
617
781
  }, option.text));
618
782
  })));
@@ -640,8 +804,11 @@ var Image = /*#__PURE__*/function (_React$Component13) {
640
804
  className: baseClasses
641
805
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.data.src && /*#__PURE__*/_react["default"].createElement("img", {
642
806
  src: this.props.data.src,
643
- width: this.props.data.width,
644
- height: this.props.data.height
807
+ style: {
808
+ height: this.props.data.height,
809
+ width: this.props.data.width,
810
+ display: 'inline'
811
+ }
645
812
  }), !this.props.data.src && /*#__PURE__*/_react["default"].createElement("div", {
646
813
  className: "no-image"
647
814
  }, "No Image"));
@@ -662,6 +829,7 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
662
829
  value: function render() {
663
830
  var props = {};
664
831
  props.name = this.props.data.field_name;
832
+ var labelHidden = this.props.data.labelHidden || false;
665
833
  props.ratingAmount = 5;
666
834
  if (this.props.mutable) {
667
835
  props.rating = this.props.defaultValue !== undefined ? parseFloat(this.props.defaultValue, 10) : 0;
@@ -677,8 +845,10 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
677
845
  style: _objectSpread({}, this.props.style),
678
846
  className: baseClasses
679
847
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
680
- className: "form-group"
681
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
848
+ className: "mb-3"
849
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
850
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
851
+ })), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
682
852
  }
683
853
  }]);
684
854
  }(_react["default"].Component);
@@ -699,7 +869,7 @@ var HyperLink = /*#__PURE__*/function (_React$Component15) {
699
869
  style: _objectSpread({}, this.props.style),
700
870
  className: baseClasses
701
871
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
702
- className: "form-group"
872
+ className: "mb-3"
703
873
  }, /*#__PURE__*/_react["default"].createElement("label", {
704
874
  className: 'form-label'
705
875
  }, /*#__PURE__*/_react["default"].createElement("a", {
@@ -729,7 +899,7 @@ var Download = /*#__PURE__*/function (_React$Component16) {
729
899
  style: _objectSpread({}, this.props.style),
730
900
  className: baseClasses
731
901
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
732
- className: "form-group"
902
+ className: "mb-3"
733
903
  }, /*#__PURE__*/_react["default"].createElement("a", {
734
904
  href: "".concat(this.props.download_path, "?id=").concat(this.props.data.file_path)
735
905
  }, this.props.data.content)));
@@ -766,9 +936,9 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
766
936
  (0, _inherits2["default"])(Camera, _React$Component17);
767
937
  return (0, _createClass2["default"])(Camera, [{
768
938
  key: "getImageSizeProps",
769
- value: function getImageSizeProps(_ref) {
770
- var width = _ref.width,
771
- height = _ref.height;
939
+ value: function getImageSizeProps(_ref2) {
940
+ var width = _ref2.width,
941
+ height = _ref2.height;
772
942
  var imgProps = {
773
943
  width: '100%'
774
944
  };
@@ -780,16 +950,33 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
780
950
  }
781
951
  return imgProps;
782
952
  }
953
+
954
+ /*
955
+ Originally Image/File upload elments don't count the heights of all visible controls which is layered on top of <input>,
956
+ which makes the element possibly overlaps on the next element on a narrow screen.
957
+ It's caused by "position: absolue" of .image-upload-control.
958
+ The fix is to add inline style "position: relative" to the container div of .image-upload-control, and use <label> tag
959
+ and "for"/"id" to trigger to the file input dialog.
960
+ */
783
961
  }, {
784
962
  key: "render",
785
963
  value: function render() {
786
964
  var _this13 = this;
787
965
  var imageStyle = {
788
- objectFit: 'scale-down',
789
- objectPosition: this.props.data.center ? 'center' : 'left'
966
+ // 2025/11/11
967
+ // 'scale-down' looks to keep the original size of image on form-builder-generator.
968
+ // and sometimes the image is too small. Supposeing admin want to show the image in bigger size,
969
+ // so adjust it "contain" to make it bigger if possible.
970
+ // "contain" is supposed to "Preserves the aspect ratio, and fits the image inside the container, without cutting"
971
+ objectFit: 'contain',
972
+ objectPosition: this.props.data.center ? 'center' : 'left',
973
+ // Move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
974
+ width: this.props.data.width,
975
+ height: this.props.data.height
790
976
  };
791
977
  var baseClasses = 'SortableItem rfb-item';
792
978
  var name = this.props.data.field_name;
979
+ var labelHidden = this.props.data.labelHidden || false;
793
980
  var fileInputStyle = this.state.img ? {
794
981
  display: 'none'
795
982
  } : null;
@@ -804,46 +991,105 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
804
991
  sourceDataURL = "data:image/png;base64,".concat(this.props.defaultValue);
805
992
  }
806
993
  }
807
- return /*#__PURE__*/_react["default"].createElement("div", {
808
- style: _objectSpread({}, this.props.style),
809
- className: baseClasses
810
- }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
811
- className: "form-group"
812
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
813
- style: imageStyle,
814
- src: sourceDataURL
815
- }, this.getImageSizeProps(this.props.data)))) : /*#__PURE__*/_react["default"].createElement("div", {
816
- className: "image-upload-container"
817
- }, /*#__PURE__*/_react["default"].createElement("div", {
818
- style: fileInputStyle
819
- }, /*#__PURE__*/_react["default"].createElement("input", {
820
- name: name,
821
- type: "file",
822
- accept: "image/*",
823
- capture: "camera",
824
- className: "image-upload",
825
- onChange: this.displayImage,
826
- "data-clearlabel": this.props.data.label_after_photo_clear_icon,
827
- disabled: this.props.read_only
828
- }), /*#__PURE__*/_react["default"].createElement("div", {
829
- className: "image-upload-control"
830
- }, /*#__PURE__*/_react["default"].createElement("div", {
831
- className: "btn btn-default"
832
- }, /*#__PURE__*/_react["default"].createElement("i", {
833
- className: "fas fa-camera"
834
- }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("p", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
835
- onLoad: function onLoad() {
836
- return URL.revokeObjectURL(_this13.state.previewImg);
837
- },
838
- src: this.state.previewImg,
839
- height: "100",
840
- className: "image-upload-preview"
841
- }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
842
- className: "btn btn-image-clear",
843
- onClick: this.clearImage
844
- }, /*#__PURE__*/_react["default"].createElement("i", {
845
- className: "fas fa-times"
846
- }), " ", this.props.data.label_after_photo_clear_icon)))));
994
+ if (this.props.data.upload_layout !== "dropzone") {
995
+ return /*#__PURE__*/_react["default"].createElement("div", {
996
+ style: _objectSpread({}, this.props.style),
997
+ className: baseClasses
998
+ }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
999
+ className: "mb-3"
1000
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1001
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1002
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
1003
+ style: imageStyle,
1004
+ src: sourceDataURL
1005
+ // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
1006
+ })) : /*#__PURE__*/_react["default"].createElement("div", {
1007
+ className: "image-upload-container"
1008
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1009
+ style: fileInputStyle
1010
+ }, /*#__PURE__*/_react["default"].createElement("input", {
1011
+ name: name,
1012
+ type: "file",
1013
+ accept: "image/*"
1014
+ //capture="camera" // With this property, users on most mobiles can only take photo but no options to pick up a photo from gallery
1015
+ ,
1016
+ className: "image-upload visually-hidden",
1017
+ onChange: this.displayImage,
1018
+ "data-clearlabel": this.props.data.label_after_photo_clear_icon,
1019
+ disabled: this.props.read_only,
1020
+ id: name
1021
+ }), /*#__PURE__*/_react["default"].createElement("div", {
1022
+ className: "image-upload-control",
1023
+ style: {
1024
+ position: 'relative'
1025
+ }
1026
+ }, /*#__PURE__*/_react["default"].createElement("label", {
1027
+ className: "btn btn-outline-secondary",
1028
+ htmlFor: name
1029
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1030
+ className: "fas fa-camera"
1031
+ }), " ", 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", {
1032
+ onLoad: function onLoad() {
1033
+ return URL.revokeObjectURL(_this13.state.previewImg);
1034
+ },
1035
+ src: this.state.previewImg,
1036
+ height: "100",
1037
+ className: "image-upload-preview"
1038
+ }), /*#__PURE__*/_react["default"].createElement("button", {
1039
+ className: "btn btn-image-clear",
1040
+ onClick: this.clearImage
1041
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1042
+ className: "fas fa-times"
1043
+ }), " ", this.props.data.label_after_photo_clear_icon)))));
1044
+ } else {
1045
+ return /*#__PURE__*/_react["default"].createElement("div", {
1046
+ style: _objectSpread({}, this.props.style),
1047
+ className: baseClasses
1048
+ }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1049
+ className: "mb-3"
1050
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1051
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1052
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
1053
+ style: imageStyle,
1054
+ src: sourceDataURL
1055
+ })) : /*#__PURE__*/_react["default"].createElement("div", {
1056
+ className: "image-upload-container"
1057
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1058
+ style: fileInputStyle,
1059
+ className: "upload-card"
1060
+ }, /*#__PURE__*/_react["default"].createElement("input", {
1061
+ name: name,
1062
+ type: "file",
1063
+ accept: "image/*",
1064
+ className: "visually-hidden",
1065
+ onChange: this.displayImage,
1066
+ "data-clearlabel": this.props.data.label_after_photo_clear_icon,
1067
+ disabled: this.props.read_only,
1068
+ id: name
1069
+ }), /*#__PURE__*/_react["default"].createElement("label", {
1070
+ htmlFor: name,
1071
+ className: "upload-card-content"
1072
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1073
+ className: "fas fa-cloud-upload-alt upload-icon"
1074
+ }), /*#__PURE__*/_react["default"].createElement("span", {
1075
+ className: "upload-text"
1076
+ }, this.props.data.message_under_camera_icon), /*#__PURE__*/_react["default"].createElement("div", {
1077
+ className: "btn-browse"
1078
+ }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
1079
+ onLoad: function onLoad() {
1080
+ return URL.revokeObjectURL(_this13.state.previewImg);
1081
+ },
1082
+ src: this.state.previewImg,
1083
+ className: "image-upload-preview",
1084
+ alt: "Preview",
1085
+ height: "100"
1086
+ }), /*#__PURE__*/_react["default"].createElement("button", {
1087
+ className: "btn btn-image-clear",
1088
+ onClick: this.clearImage
1089
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1090
+ className: "fas fa-times"
1091
+ }), " ", this.props.data.label_after_photo_clear_icon)))));
1092
+ }
847
1093
  }
848
1094
  }]);
849
1095
  }(_react["default"].Component);
@@ -869,7 +1115,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
869
1115
  });
870
1116
  });
871
1117
  (0, _defineProperty2["default"])(_this14, "saveFile", /*#__PURE__*/function () {
872
- var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
1118
+ var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
873
1119
  var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
874
1120
  return _regenerator["default"].wrap(function (_context) {
875
1121
  while (1) switch (_context.prev = _context.next) {
@@ -910,7 +1156,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
910
1156
  }, _callee);
911
1157
  }));
912
1158
  return function (_x) {
913
- return _ref2.apply(this, arguments);
1159
+ return _ref3.apply(this, arguments);
914
1160
  };
915
1161
  }());
916
1162
  _this14.state = {
@@ -924,41 +1170,106 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
924
1170
  value: function render() {
925
1171
  var baseClasses = 'SortableItem rfb-item';
926
1172
  var name = this.props.data.field_name;
1173
+ var labelHidden = this.props.data.labelHidden || false;
927
1174
  var fileInputStyle = this.state.fileUpload ? {
928
1175
  display: 'none'
929
1176
  } : null;
930
1177
  if (this.props.data.pageBreakBefore) {
931
1178
  baseClasses += ' alwaysbreak';
932
1179
  }
1180
+ if (this.props.data.upload_layout !== 'dropzone') {
1181
+ return /*#__PURE__*/_react["default"].createElement("div", {
1182
+ style: _objectSpread({}, this.props.style),
1183
+ className: baseClasses
1184
+ }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1185
+ className: "mb-3"
1186
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1187
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1188
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1189
+ className: "btn btn-outline-secondary",
1190
+ onClick: this.saveFile
1191
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1192
+ className: "fas fa-download"
1193
+ }), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
1194
+ className: "image-upload-container"
1195
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1196
+ style: fileInputStyle
1197
+ }, /*#__PURE__*/_react["default"].createElement("input", {
1198
+ name: name,
1199
+ type: "file",
1200
+ accept: this.props.data.fileType || '*',
1201
+ className: "image-upload visually-hidden",
1202
+ onChange: this.displayFileUpload,
1203
+ "data-clearlabel": this.props.data.label_after_file_clear_icon,
1204
+ disabled: this.props.read_only,
1205
+ id: name
1206
+ }), /*#__PURE__*/_react["default"].createElement("div", {
1207
+ className: "image-upload-control",
1208
+ style: {
1209
+ position: 'relative'
1210
+ }
1211
+ }, /*#__PURE__*/_react["default"].createElement("label", {
1212
+ className: "btn btn-outline-secondary",
1213
+ htmlFor: name
1214
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1215
+ className: "fas fa-file"
1216
+ }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
1217
+ className: "file-upload-preview"
1218
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1219
+ style: {
1220
+ display: 'inline-block',
1221
+ marginRight: '5px'
1222
+ }
1223
+ }, this.state.fileUpload.name), /*#__PURE__*/_react["default"].createElement("div", {
1224
+ style: {
1225
+ display: 'inline-block',
1226
+ marginLeft: '5px'
1227
+ }
1228
+ }, this.state.fileUpload.size.length > 6 ? " ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : " ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
1229
+ className: "btn btn-file-upload-clear",
1230
+ onClick: this.clearFileUpload
1231
+ }, /*#__PURE__*/_react["default"].createElement("i", {
1232
+ className: "fas fa-times"
1233
+ }), " ", this.props.data.label_after_file_clear_icon)))));
1234
+ }
1235
+
1236
+ // non-standard layout: use "upload-card" style like Camera
933
1237
  return /*#__PURE__*/_react["default"].createElement("div", {
934
1238
  style: _objectSpread({}, this.props.style),
935
1239
  className: baseClasses
936
1240
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
937
- className: "form-group"
938
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
939
- className: "btn btn-default",
1241
+ className: "mb-3"
1242
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1243
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1244
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1245
+ className: "btn btn-outline-secondary",
940
1246
  onClick: this.saveFile
941
1247
  }, /*#__PURE__*/_react["default"].createElement("i", {
942
1248
  className: "fas fa-download"
943
1249
  }), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
944
1250
  className: "image-upload-container"
945
1251
  }, /*#__PURE__*/_react["default"].createElement("div", {
946
- style: fileInputStyle
1252
+ style: fileInputStyle,
1253
+ className: "upload-card"
947
1254
  }, /*#__PURE__*/_react["default"].createElement("input", {
948
1255
  name: name,
949
1256
  type: "file",
950
1257
  accept: this.props.data.fileType || '*',
951
- className: "image-upload",
1258
+ className: "visually-hidden",
952
1259
  onChange: this.displayFileUpload,
953
1260
  "data-clearlabel": this.props.data.label_after_file_clear_icon,
954
- disabled: this.props.read_only
955
- }), /*#__PURE__*/_react["default"].createElement("div", {
956
- className: "image-upload-control"
957
- }, /*#__PURE__*/_react["default"].createElement("div", {
958
- className: "btn btn-default"
1261
+ disabled: this.props.read_only,
1262
+ id: name
1263
+ }), /*#__PURE__*/_react["default"].createElement("label", {
1264
+ htmlFor: name,
1265
+ className: "upload-card-content"
959
1266
  }, /*#__PURE__*/_react["default"].createElement("i", {
960
- className: "fas fa-file"
961
- }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("p", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
1267
+ className: "fas fa-file-upload upload-icon"
1268
+ }), /*#__PURE__*/_react["default"].createElement("span", {
1269
+ className: "upload-text"
1270
+ }, this.props.data.message_under_file_icon), /*#__PURE__*/_react["default"].createElement("div", {
1271
+ className: "btn-browse"
1272
+ }, this.props.data.label_after_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
962
1273
  className: "file-upload-preview"
963
1274
  }, /*#__PURE__*/_react["default"].createElement("div", {
964
1275
  style: {
@@ -1002,11 +1313,12 @@ var Range = /*#__PURE__*/function (_React$Component19) {
1002
1313
  value: function render() {
1003
1314
  var props = {};
1004
1315
  var name = this.props.data.field_name;
1316
+ var labelHidden = this.props.data.labelHidden || false;
1005
1317
  props.type = 'range';
1006
1318
  props.list = "tickmarks_".concat(name);
1007
- props.min = this.props.data.min_value;
1008
- props.max = this.props.data.max_value;
1009
- props.step = this.props.data.step;
1319
+ props.min = Number(this.props.data.min_value);
1320
+ props.max = Number(this.props.data.max_value);
1321
+ props.step = Number(this.props.data.step) || 1;
1010
1322
  props.value = this.state.value;
1011
1323
  props.change = this.changeValue;
1012
1324
  if (this.props.mutable) {
@@ -1051,21 +1363,26 @@ var Range = /*#__PURE__*/function (_React$Component19) {
1051
1363
  style: _objectSpread({}, this.props.style),
1052
1364
  className: baseClasses
1053
1365
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1054
- className: "form-group"
1055
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1366
+ className: "mb-3"
1367
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1368
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1369
+ })), /*#__PURE__*/_react["default"].createElement("div", {
1056
1370
  className: "range"
1057
1371
  }, /*#__PURE__*/_react["default"].createElement("div", {
1058
1372
  className: "clearfix"
1059
1373
  }, /*#__PURE__*/_react["default"].createElement("span", {
1060
- className: "float-left"
1374
+ className: "float-start"
1061
1375
  }, this.props.data.min_label), /*#__PURE__*/_react["default"].createElement("span", {
1062
- className: "float-right"
1376
+ className: "float-end"
1063
1377
  }, this.props.data.max_label)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
1064
1378
  className: "visible_marks"
1065
1379
  }, visible_marks), /*#__PURE__*/_react["default"].createElement("input", {
1066
1380
  name: name,
1067
1381
  value: this.state.value,
1068
- type: "hidden"
1382
+ type: "hidden",
1383
+ "data-min-value": props.min,
1384
+ "data-max-value": props.max,
1385
+ "data-step": props.step
1069
1386
  }), /*#__PURE__*/_react["default"].createElement("datalist", {
1070
1387
  id: props.list
1071
1388
  }, _datalist)));