@agilemotion/oui-react-js 1.7.1 → 1.7.3

package/dist/components/form/FieldSet.js

@@ -60,6 +60,11 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
     _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
   }, []);
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.disabled)) {
+      setDisabled(props.disabled);
+    }
+  }, [props.disabled]);
   function fireChangeEvent() {
     let event = new _Event.default(props.handle, props.viewId);
     _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
@@ -82,6 +87,15 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     if (!component.fieldType) {
       console.error('ERROR RENDING COMPONENT : ' + component.id + ' - NO FIELD TYPE SPECIFIED');
     }
+    let isDisabled = false;
+    if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.disabled)) {
+      isDisabled = _Utils.default.evaluateBooleanExpression(props.config.disabled, props.config.id);
+    }
+    if (isDisabled) {
+      if (_Utils.default.isNull(component.disabled)) {
+        component.disabled = true;
+      }
+    }
     switch (component.fieldType) {
       case 'LOOKUP':
         return /*#__PURE__*/_react.default.createElement(_LookupField.default, {
@@ -484,17 +498,19 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           }
         }
         width = colspan / fieldGrid.maxColPerRow * 100;
+        let columnStyle = {
+          paddingLeft: '0',
+          paddingRight: '0',
+          marginLeft: '0',
+          marginRight: '0',
+          minWidth: '320px',
+          width: width + '%'
+        };
+        let style = field.attributes?.columnStyle ? _Utils.default.mergeObjects(field.attributes?.columnStyle, columnStyle) : columnStyle;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
           className: "col-*-*",
-          style: _Utils.default.mergeStyles({
-            paddingLeft: '0',
-            paddingRight: '0',
-            marginLeft: '0',
-            marginRight: '0',
-            width: width + '%',
-            minWidth: '320px'
-          }, field)
+          style: style
         }, renderComponent(field, index));
       }));
     }));

package/dist/components/form/Form.js

@@ -219,9 +219,9 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       if (service.type === 'rpc') {
         (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
           try {
-            if (!_Utils.default.isNull(result.data)) {
-              parseValues(transformDataObject(result.data));
-              setMasterValues(result.data);
+            if (!_Utils.default.isNull(result)) {
+              parseValues(transformDataObject(result));
+              setMasterValues(result);
               loadingRef.current = false;
             }
           } catch (e) {
@@ -587,6 +587,7 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       }, /*#__PURE__*/_react.default.createElement(_Section.default, {
         keyHandler: props.keyHandler,
         config: section,
+        disabled: props.disabled,
         handle: createSectionHandle(section),
         ref: /*#__PURE__*/_react.default.createRef(),
         form: () => {

package/dist/components/form/GridField.js

@@ -28,22 +28,16 @@ function createRecord(row, gridConfig, inbound) {
   for (const column of gridConfig.columns) {
     let property = !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id;
     let val = row[property];
-    if (!inbound) {
-      let editorType = getEditorType(property, gridConfig);
-      if (!_Utils.default.isNull(val) && (editorType === 'LOOKUP' || editorType === 'SELECT')) {
-        let objectReference = {};
-        objectReference.id = val.id;
-        val = objectReference;
-      }
-    }
     record[property] = val;
   }
-  record.id = row.id >= 0 ? row.id : null;
+
+  //record.id = row.id >= 0 ? row.id : null;
+  record.id = row.id;
   return record;
 }
 const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
-  const [newRowIdCounter, setNewRowIdCounter] = _react.default.useState(-1);
+  const newRowIdCounter = _react.default.useRef(-1);
   const [selection, setSelection] = _react.default.useState([]);
   const [rows, setRows] = _react.default.useState([]);
   const [crudToolstripWidth, setCrudToolstripWidth] = _react.default.useState(null);
@@ -63,29 +57,14 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   }, []);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(base.value) && !props.initialValueSet) {
-      let initValue = [];
-      for (const item of base.value) {
-        if (!_Utils.default.isNull(item.map)) {
-          initValue.push(item.map);
-        } else {
-          let properties = Object.getOwnPropertyNames(item);
-          for (const property of properties) {
-            let val = item[property];
-            if (!_Utils.default.isNull(val) && !_Utils.default.isNull(val.map)) {
-              item[property] = val.map;
-            }
-          }
-          initValue.push(item);
-        }
-      }
-      setRows(initValue);
+      setRows(base.value);
       props.loadCallback();
     }
   }, [base.value]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "MuiFormControl-root MuiTextField-root MuiFormControl-marginDense",
     style: _Utils.default.mergeStyles({}, props.config)
-  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+  }, label && label.trim().length > 0 && /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
     required: base.required,
     error: base.hasError
   }, label), /*#__PURE__*/_react.default.createElement("div", {
@@ -121,9 +100,8 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     "aria-haspopup": "true",
     onClick: () => {
       props.gridHandle.api.addRows([{
-        id: newRowIdCounter
+        id: newRowIdCounter.current--
       }]);
-      setNewRowIdCounter(newRowIdCounter - 1);
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'ADD'
@@ -206,15 +184,13 @@ const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.
           let type = objectArray[0].type;
           let nullIdRecords = 1;
           for (const objectArrayElement of objectArray) {
-            if (type === 'MapEntityDto' || !_Utils.default.isNull(objectArrayElement.map)) {
-              let record = createRecord(objectArrayElement.map, props.config.grid, inbound);
-              if (_Utils.default.isNull(record.id)) {
-                record.id = -1 * nullIdRecords++;
-              }
-              val.push(record);
-            } else {
-              val.push(objectArrayElement);
+            if (inbound && _Utils.default.isNull(objectArrayElement.id)) {
+              objectArrayElement.id = -1 * nullIdRecords++;
+            }
+            if (!inbound && objectArrayElement.id < 0) {
+              objectArrayElement.id = null;
             }
+            val.push(objectArrayElement);
           }
         }
         setInitialValueSet(false);

package/dist/components/form/LookupField.js

@@ -21,8 +21,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [currentSelection, setCurrentSelection] = _react.default.useState(null);
   const [open, setOpen] = _react.default.useState(false);
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
-  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
+  const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
+  const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value;
   const base = props.base;
   const handleClose = () => {
@@ -37,24 +37,28 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
       }
       props.config.grid.attributes['margin'] = _Utils.default.getComponentAttribute(props.config.grid, 'margin', '16px');
     }
-  });
+  }, []);
+  function setupVal() {
+    let val = {};
+    let row = currentSelection[0];
+    let properties = Object.getOwnPropertyNames(row);
+    let label = _Utils.default.getComponentAttribute(props.config, 'displayTemplate', 'Please specify a display template');
+    for (let i = 0; i < properties.length; i++) {
+      let property = properties[i];
+      label = label.replace('@{' + property + "}", row[property]);
+      if (property !== 'label') {
+        val[property] = row[property];
+      }
+    }
+    val.__oui_label = label;
+    val.toString = () => {
+      return label;
+    };
+    return val;
+  }
   const setSelectionAsValue = () => {
     if (currentSelection.length > 0) {
-      let row = currentSelection[0];
-      let properties = Object.getOwnPropertyNames(row);
-      let label = _Utils.default.getComponentAttribute(props.config, 'displayTemplate', 'Please specify a display template');
-      let val = {};
-      for (let i = 0; i < properties.length; i++) {
-        let property = properties[i];
-        label = label.replace('@{' + property + "}", row[property]);
-        if (property !== 'label') {
-          val[property] = row[property];
-        }
-      }
-      val.label = label;
-      val.toString = () => {
-        return label;
-      };
+      let val = setupVal();
       base.handleValueChange(val);
       handleClose();
     }
@@ -77,7 +81,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     required: base.required,
     disabled: base.disabled,
     label: !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null,
-    value: base.value || defaultValue,
+    value: base.value?.__oui_label || base.value?.dataRecordDescription || defaultValue,
     className: props.className,
     error: base.hasError,
     helperText: base.errorMessage,
@@ -160,10 +164,6 @@ const LookupField = exports.LookupField = /*#__PURE__*/_react.default.memo( /*#_
             return initVal.dataRecordDescription;
           };
           return initVal;
-        } else {
-          let objectReference = {};
-          objectReference.id = value.id;
-          return objectReference;
         }
       }
       return value;

package/dist/components/form/RadioGroup.js

@@ -33,7 +33,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.
   }, label) : null, /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
     row: true,
     defaultValue: props.defaultValue,
-    "aria-label": "gender",
+    "aria-label": "",
     name: "radios",
     required: base.required,
     helperText: base.errorMessage,
@@ -46,6 +46,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.
       key: index,
       value: option.value,
       control: /*#__PURE__*/_react.default.createElement(_Radio.default, {
+        disabled: base.disabled,
         checked: option.value === value
       }),
       label: option.label

package/dist/components/form/Section.js

@@ -43,6 +43,7 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
     return component.type === 'fieldSet' ? /*#__PURE__*/_react.default.createElement(_FieldSet.default, {
       keyHandler: props.keyHandler,
       config: component,
+      disabled: props.disabled,
       form: props.form,
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
@@ -53,6 +54,7 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
     }) : component.type === 'tab' ? /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
       keyHandler: props.keyHandler,
       config: component,
+      disabled: props.disabled,
       form: props.form,
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
@@ -61,6 +63,7 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
       key: componentKey++
     }) : component.type === 'videoPlayer' ? /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
       config: component,
+      disabled: props.disabled,
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
       key: componentKey++,
@@ -68,6 +71,7 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
     }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
       config: component,
       handle: createComponentHandle(component),
+      disabled: props.disabled,
       ref: /*#__PURE__*/_react.default.createRef(),
       viewId: props.viewId,
       key: componentKey++,

package/dist/components/form/SelectItem.js

@@ -32,15 +32,14 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
       let method = props.config.dataService.type === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
       method(props.config.dataService, props.handle, props.viewId, result => {
-        let data = props.config.dataService.type === 'rpc' ? result.data : result;
         let options = [];
         if (_Utils.default.isNull(props.validator) || props.validator.nullable) {
           options.push({
             id: '_EMPTY_VALUE'
           });
         }
-        for (let i = 0; i < data.records.length; i++) {
-          let record = data.records[i];
+        for (let i = 0; i < result.records.length; i++) {
+          let record = result.records[i];
           options.push(record);
         }
         base.setSelectOptions(options);

package/dist/components/form/TextField.js

@@ -15,10 +15,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const [multiline] = _react.default.useState(props.multiline);
-  const height = _Utils.default.getComponentStyleAttribute(props.config, 'height', multiline ? '200px' : null);
-  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-  const maxWidth = _Utils.default.getComponentAttribute(props.config, 'maxWidth', null);
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
+  const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
+  const maxWidth = props.config.attributes?.style?.maxWidth ? props.config.attributes.style.maxWidth : null;
+  const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
+  const height = props.config.attributes?.style?.height ? props.config.attributes.style.height : multiline ? '200px' : null;
   const rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
   const ThemedTextField = (0, _styles.withStyles)({
@@ -57,13 +57,13 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     rows: rows,
     disabled: base.disabled,
     size: "small",
-    style: _Utils.default.mergeStyles({
+    style: {
       minWidth: minWidth,
       width: width,
       maxWidth: maxWidth,
       height: height,
       color: 'secondary'
-    }, props.config),
+    },
     variant: "outlined"
   });
 }));

package/dist/components/layout/Layout.js

@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [componentHandles] = _react.default.useState({});
   const [loadedComponents] = _react.default.useState([]);
-  const [visible, setVisible] = _react.default.useState(false);
+  const [visible, setVisible] = _react.default.useState(true);
   let keyCounter = 0;
   _react.default.useEffect(() => {
     props.handle.api = api();
@@ -331,33 +331,42 @@ const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, r
   }
   function render(layout) {
     setMissingComponentIds();
-    let counter = 10000;
     return _Utils.default.isNull(layout.components) || layout.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, "I am a dum empty Layout") : layout.orientation === 'VERTICAL' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, layout.components.map((component, index) => {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: index
       }, renderComponent(component, null));
-    })) : /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        display: 'table',
-        width: '100%',
-        height: '100%'
-      }
-    }, layout.components.map((component, index) => {
+    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, layout.components.map((component, index) => {
       let className = _Utils.default.getComponentAttribute(component, 'className', '');
+      let style = _Utils.default.getComponentAttribute(component, 'style', null);
+      let width;
+      let height;
+      if (style) {
+        width = style.width ? style.width : 100 / (index + 1) + '%';
+        height = style.height ? style.height : '100%';
+      } else {
+        width = 100 / (index + 1) + '%';
+        height = '100%';
+        if (!component.attributes) {
+          component.attributes = {};
+        }
+        component.attributes.style = {};
+      }
+      if (component.type !== 'layout') {
+        component.attributes.style.width = '100%;';
+      }
       return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component, index)) : /*#__PURE__*/_react.default.createElement("div", {
         key: index,
         style: {
-          display: 'table-cell',
-          height: '100%',
-          verticalAlign: 'middle'
+          height: height,
+          width: width
         },
-        className: `${className}`
+        className: `${className} col-*-* no-margin no-spacing`
       }, renderComponent(component, null));
     }));
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
     style: getLayoutStyle(props.config, 'transparent'),
-    className: `${_Utils.default.getComponentAttribute(props.config, 'className', null)}`
+    className: `${_Utils.default.getComponentAttribute(props.config, 'className', '') + (props.config.orientation === 'HORIZONTAL' ? ' row' : '')}`
   }, render(props.config));
 });

package/dist/components/menu/MenuButton.js

@@ -41,7 +41,7 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const anchorRef = _react.default.useRef(null);
   let width = !_Utils.default.isNull(props.config.attributes['width']) ? parseInt(props.config.attributes['width'].toString().replace('px', '')) : null;
   const [disabled, setDisabled] = _react.default.useState(false);
-  const [itemRefs] = _react.default.useState([]);
+  const [itemHandles] = _react.default.useState({});
   const [config, setConfig] = _react.default.useState(null);
   _react.default.useEffect(() => {
     props.handle.api = api();
@@ -70,10 +70,10 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
     setOpen(false);
   };
-  function createItemRef() {
-    let ref = /*#__PURE__*/_react.default.createRef();
-    itemRefs.push(ref);
-    return ref;
+  function createItemHandle(item) {
+    let handle = {};
+    itemHandles[item.id] = handle;
+    return handle;
   }
   const api = () => {
     return {
@@ -84,7 +84,12 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         return props.tableRow;
       },
       getChildren: () => {
-        return itemRefs;
+        let children = [];
+        let properties = Object.getOwnPropertyNames(itemHandles);
+        for (const property of properties) {
+          children.push(itemHandles[property]);
+        }
+        return children;
       },
       set disabled(disabled) {
         setDisabled(disabled);
@@ -158,7 +163,7 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       config: item,
       viewId: props.viewId,
       key: item.id,
-      ref: createItemRef()
+      handle: createItemHandle(item)
     }))))));
   })));
 });

package/dist/components/menu/MenuLink.js

@@ -20,6 +20,7 @@ const MenuLink = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   _react.default.useEffect(() => {
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     if (!_Utils.default.isNull(parsedConfig)) {
+      _Observable.default.clearComponentEventListeners(handle);
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, handle, props.viewId);
       if (props.autoClick) {
         if (!_Utils.default.isNull(props.clickCallback)) {
@@ -33,6 +34,11 @@ const MenuLink = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       }
     }
   }, [props.config]);
+  _react.default.useEffect(() => {
+    return () => {
+      _Observable.default.clearComponentEventListeners(handle);
+    };
+  }, []);
   const handleClick = e => {
     e.preventDefault();
     let event = new _Event.default(handle, props.viewId);

package/dist/components/signatures/AgilitySignaturePanel.js

@@ -35,29 +35,44 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
   const [open, setOpen] = _react.default.useState(false);
   const [signing, setSigning] = _react.default.useState(false);
   const [signatureImage, setSignatureImage] = _react.default.useState(null);
+  const [refresher, setRefresher] = _react.default.useState(false);
   const [initialImage, setInitialImage] = _react.default.useState(null);
   const [systemSignatures, setSystemSignatures] = _react.default.useState(null);
   _react.default.useEffect(() => {
     fetchImages();
   }, []);
+  const validate = () => {
+    let signers = props.config.documents[0].signers;
+    for (const signer of signers) {
+      if (signer.email === props.config.signatoryId) {
+        let signingInputs = signer.signatureInputs;
+        for (const signingInput of signingInputs) {
+          if (!signingInput.value) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  };
   _react.default.useEffect(() => {
-    if (!_Utils.default.isNull(initialImage) && !_Utils.default.isNull(signatureImage)) {
-      let signers = props.config.documents[0].signers;
-      for (const signer of signers) {
-        if (signer.email === props.config.signatoryId) {
-          let signingInputs = signer.signatureInputs;
-          for (const signingInput of signingInputs) {
-            if ('SIGN' === signingInput.inputType) {
-              signingInput.value = signatureImage;
-            } else if ('INITIAL' === signingInput.inputType) {
-              signingInput.value = initialImage;
-            }
+    let signers = props.config.documents[0].signers;
+    for (const signer of signers) {
+      if (signer.email === props.config.signatoryId) {
+        let signingInputs = signer.signatureInputs;
+        for (const signingInput of signingInputs) {
+          if ('SIGN' === signingInput.inputType) {
+            signingInput.value = signatureImage;
+          } else if ('INITIAL' === signingInput.inputType) {
+            signingInput.value = initialImage;
           }
         }
       }
+    }
+    if (validate()) {
       props.valueChangeHandler(signers);
     }
-  }, [initialImage, signatureImage]);
+  }, [initialImage, signatureImage, refresher]);
   const showInput = mode => {
     setInputMode(mode);
     setOpen(true);
@@ -125,7 +140,7 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: 'template',
     style: {
-      font: 'italic 64px Brush Script MT, Brush Script Std, cursive',
+      font: 'italic 32px Brush Script MT, Brush Script Std, cursive',
       background: 'transparent',
       padding: '8px'
     }
@@ -202,8 +217,12 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     }
   }, /*#__PURE__*/_react.default.createElement(_DocumentContainer.default, {
     config: props.config,
+    onInputValueChange: sig => {
+      setRefresher(!refresher);
+    },
     signatureImage: signatureImage,
-    initialImage: initialImage
+    initialImage: initialImage,
+    refresher: refresher
   })));
 }));
 var _default = exports.default = AgilitySignaturePanel;

package/dist/components/signatures/DocumentContainer.css

@@ -3,8 +3,33 @@
     outline: none !important;
 }
 
+.signature-doc-container .dropTarget{
+    margin-top: 8px;
+}
+
+.signature-doc-container {
+    margin-top: 8px;
+    border-radius: 4px;
+    background-color: rgb(241, 241, 241);
+    display: flex;
+    justify-content: center;
+}
+
+.signature-doc-container .dropTarget {
+}
+
+.signature-doc-container ._draggable_ {
+    position: absolute;
+    border-radius: 2px;
+    display: inline-block;
+    margin-left: 4px;
+    font-style: italic;
+    font-weight: 600;
+    font-size: 12px;
+}
+
 .container {
-    padding: 16px;
+    padding: 1px 0 8px 0;
 }
 
 .container .row {