directual-web-components-v2 3.11.337 → 3.11.339

package/dist/index.css

@@ -1963,6 +1963,32 @@ a._IMG1h {
 ._1Ewcw ._271Bk:hover {
   opacity: 1;
 }
+._3bMpu ._34tIu {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+._3bMpu ._1Yv6j:hover ._34tIu {
+  opacity: 1;
+}
+._3bMpu ._Sxnoe {
+  cursor: pointer;
+  opacity: 0.4;
+  padding: 4px;
+  border-radius: var(--border-radius);
+  font-size: var(--text-very-small-size);
+  line-height: 1;
+  -webkit-user-select: none;
+          user-select: none;
+  transition: opacity 0.15s;
+}
+._3bMpu ._Sxnoe:hover {
+  opacity: 0.9;
+}
 .react-tooltip {
   z-index: 1000;
 }

package/dist/index.js

@@ -1257,7 +1257,7 @@ function _objectWithoutPropertiesLoose(r, e) {
 
 var styles$3 = {"spacingWrapper":"_304HY","margin":"_1SqPJ","padding":"_6BebN","spacingTitle":"_31Oiv","label":"_1SA5-","input":"_1hinn","marginTop":"_70d7V","paddingTop":"_2UkZi","marginBottom":"_e8TuC","paddingBottom":"_30kaH","marginRight":"_2p5k-","paddingRight":"_WRztC","marginLeft":"_16ulN","paddingLeft":"_2yRNg","disabled":"_E8UOy","inputMarginWrapper":"_20AEO","spaceWrapper":"_1UV7S","hor":"_Aav1B","space":"_2lVa9","block":"_1fgLs","vert":"_3phN1"};
 
-var styles$4 = {"input_wrapper":"_3bMpu","field_wrapper":"_1Yv6j","field_wrapper_additional":"_2B-KO","hor":"_2UlKm","input_icon_wrapper":"_2oMSY","field":"_2Q8VF","clear":"_1LMpi","plus":"_3IGqs","minus":"_jR7St","disabled":"_2xfws","ok":"_13tTH","error":"_2Tk7C","warning":"_2R_GP","code":"_3e2YR","addonAfter":"_3G71r","addonBefore":"_1W5zA","preSelect":"_1n5eL","addonAfterInput":"_Y4qJ8","addonBeforeInput":"_3uvz4","icon":"_vQGcE","description":"_34_if","status":"_2emj2","slider_field_wrapper":"_1fvXO","slider_values":"_3QTWu","input_group":"_3iO5y","input_row":"_25ABj","column":"_245Qh","fieldUnitsWrapper":"_3R0U6","unitName":"_12RC6","checkbox_wrapper":"_1RGf_","checkbox_clearOption":"_IMG1h","input_label_tooltip":"_1Ewcw","tooltip":"_271Bk"};
+var styles$4 = {"input_wrapper":"_3bMpu","field_wrapper":"_1Yv6j","field_wrapper_additional":"_2B-KO","hor":"_2UlKm","input_icon_wrapper":"_2oMSY","field":"_2Q8VF","clear":"_1LMpi","plus":"_3IGqs","minus":"_jR7St","disabled":"_2xfws","ok":"_13tTH","error":"_2Tk7C","warning":"_2R_GP","code":"_3e2YR","addonAfter":"_3G71r","addonBefore":"_1W5zA","preSelect":"_1n5eL","addonAfterInput":"_Y4qJ8","addonBeforeInput":"_3uvz4","icon":"_vQGcE","description":"_34_if","status":"_2emj2","slider_field_wrapper":"_1fvXO","slider_values":"_3QTWu","input_group":"_3iO5y","input_row":"_25ABj","column":"_245Qh","fieldUnitsWrapper":"_3R0U6","unitName":"_12RC6","checkbox_wrapper":"_1RGf_","checkbox_clearOption":"_IMG1h","input_label_tooltip":"_1Ewcw","tooltip":"_271Bk","json_toolbar":"_34tIu","json_toolbar_btn":"_Sxnoe"};
 
 var styles$5 = {"radio":"_3ox_j","radio_flex":"_1-TJR","horizontal":"_2OJkg","disabled":"_3711f","radioImages":"_XxAUB","small":"_EFI2F","label":"_3CT1_","noOptions":"_1kxNM"};
 
@@ -5281,6 +5281,237 @@ function removeItem(groups, groupId, conditionId) {
   }).filter(Boolean);
 }
 
+function JsonInput(_ref) {
+  let {
+    defaultValue,
+    onChange,
+    disabled,
+    rows,
+    placeholder,
+    autoFocus,
+    isValid,
+    copy,
+    warning: externalWarning
+  } = _ref;
+  const [value, setValue] = React.useState(formatIfValid(defaultValue) || defaultValue || '');
+  const [warningMsg, setWarningMsg] = React.useState({});
+  const textareaRef = React.useRef(null);
+  const isTyping = React.useRef(false);
+  const isFocused = React.useRef(false);
+  const prevDefaultValue = React.useRef(defaultValue);
+  const adjustHeight = React.useCallback(() => {
+    const el = textareaRef.current;
+    if (!el || rows !== 'auto') return;
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+  }, [rows]);
+  React.useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+  React.useEffect(() => {
+    if (defaultValue === prevDefaultValue.current) return;
+    prevDefaultValue.current = defaultValue;
+    if (isFocused.current || isTyping.current) return;
+    const formatted = formatIfValid(defaultValue) || defaultValue || '';
+    setValue(formatted);
+    if (formatted && formatted !== defaultValue) {
+      setWarningMsg({
+        type: 'ok',
+        msg: 'Valid JSON'
+      });
+      isValid && isValid(true);
+    } else if (defaultValue) {
+      validateJson(defaultValue);
+    } else {
+      setWarningMsg({});
+    }
+  }, [defaultValue]);
+  React.useEffect(() => {
+    if (externalWarning && externalWarning.type) {
+      setWarningMsg(externalWarning);
+    }
+  }, [externalWarning]);
+  React.useEffect(() => {
+    if (autoFocus && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [autoFocus]);
+  function validateJson(str) {
+    if (!str) {
+      setWarningMsg({});
+      isValid && isValid(true);
+      return {
+        valid: false,
+        parsed: null
+      };
+    }
+    try {
+      const parsed = JSON.parse(str);
+      setWarningMsg({
+        type: 'ok',
+        msg: 'Valid JSON'
+      });
+      isValid && isValid(true);
+      return {
+        valid: true,
+        parsed
+      };
+    } catch (e) {
+      const errorMsg = e.message || 'Invalid JSON';
+      setWarningMsg({
+        type: 'error',
+        msg: errorMsg
+      });
+      isValid && isValid(false);
+      return {
+        valid: false,
+        parsed: null
+      };
+    }
+  }
+  function handleChange(e) {
+    const val = e.target.value;
+    isTyping.current = true;
+    setValue(val);
+    onChange && onChange(val);
+  }
+  function handleBlur() {
+    isFocused.current = false;
+    isTyping.current = false;
+    if (!value) {
+      setWarningMsg({});
+      isValid && isValid(true);
+      prevDefaultValue.current = value;
+      return;
+    }
+    const {
+      valid,
+      parsed
+    } = validateJson(value);
+    if (valid) {
+      const formatted = JSON.stringify(parsed, null, 2);
+      setValue(formatted);
+      onChange && onChange(formatted);
+      prevDefaultValue.current = formatted;
+    } else {
+      prevDefaultValue.current = value;
+    }
+  }
+  function handleFocus() {
+    isFocused.current = true;
+    setWarningMsg({});
+  }
+  function handleKeyDown(e) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const el = e.target;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      if (e.shiftKey) {
+        const before = value.substring(0, start);
+        const lineStart = before.lastIndexOf('\n') + 1;
+        const linePrefix = value.substring(lineStart, start);
+        if (linePrefix.startsWith('  ')) {
+          const newValue = value.substring(0, lineStart) + value.substring(lineStart + 2);
+          setValue(newValue);
+          onChange && onChange(newValue);
+          requestAnimationFrame(() => {
+            el.selectionStart = Math.max(lineStart, start - 2);
+            el.selectionEnd = Math.max(lineStart, end - 2);
+          });
+        }
+      } else {
+        const newValue = value.substring(0, start) + '  ' + value.substring(end);
+        setValue(newValue);
+        onChange && onChange(newValue);
+        requestAnimationFrame(() => {
+          el.selectionStart = start + 2;
+          el.selectionEnd = start + 2;
+        });
+      }
+    }
+  }
+  function handleFormat() {
+    if (!value) return;
+    try {
+      const parsed = JSON.parse(value);
+      const formatted = JSON.stringify(parsed, null, 2);
+      setValue(formatted);
+      onChange && onChange(formatted);
+      setWarningMsg({
+        type: 'ok',
+        msg: 'Valid JSON'
+      });
+      isValid && isValid(true);
+      prevDefaultValue.current = formatted;
+    } catch (e) {
+      setWarningMsg({
+        type: 'error',
+        msg: e.message || 'Invalid JSON'
+      });
+      isValid && isValid(false);
+    }
+  }
+  function handleClear() {
+    setValue('');
+    onChange && onChange('');
+    setWarningMsg({});
+    isValid && isValid(true);
+    prevDefaultValue.current = '';
+  }
+  function handleCopy() {
+    if (textareaRef.current) {
+      textareaRef.current.select();
+      try {
+        document.execCommand('copy');
+      } catch (err) {
+        console.log('Unable to copy');
+      }
+    }
+  }
+  const autoRows = rows === 'auto';
+  const rowCount = autoRows ? undefined : rows || 1;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.field_wrapper
+  }, /*#__PURE__*/React__default.createElement("textarea", {
+    autoFocus: autoFocus,
+    ref: textareaRef,
+    disabled: disabled,
+    className: "\n                    " + styles$4.field + "\n                    " + (disabled && styles$4.disabled) + "\n                    " + styles$4.code + "\n                    " + (warningMsg.type && styles$4[warningMsg.type]),
+    rows: autoRows ? undefined : rowCount,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    value: value,
+    placeholder: placeholder || ''
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar
+  }, value && !disabled && !copy && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar_btn + " icon icon-close",
+    title: "Clear",
+    onClick: handleClear
+  }), value && copy && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar_btn + " icon icon-copy",
+    title: "Copy",
+    onClick: handleCopy
+  }), value && !disabled && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar_btn + " icon icon-code",
+    title: "Format JSON",
+    onClick: handleFormat
+  })), warningMsg.msg && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.status + " " + styles$4[warningMsg.type]
+  }, warningMsg.msg));
+}
+function formatIfValid(str) {
+  if (!str) return null;
+  try {
+    return JSON.stringify(JSON.parse(str), null, 2);
+  } catch (_unused) {
+    return null;
+  }
+}
+
 function InputGroup(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.input_group,
@@ -5858,6 +6089,10 @@ function Input(props) {
   const [showColor, setShowColor] = React.useState(false);
   const lang = props.locale ? props.locale.length == 3 ? props.locale : 'ENG' : 'ENG';
   const pickerRef = React.useRef(null);
+  const debouncedTypingReset = React.useRef(_$1.debounce(val => {
+    isTyping.current = false;
+    setDefVal(val);
+  }, 800)).current;
   const tooltipId = "tooltip_" + Math.floor(Math.random() * 1000000000);
   React.useEffect(() => {
     if (props.forceReset) {
@@ -5882,31 +6117,6 @@ function Input(props) {
     }
   }, [props.type]);
   const checkValue = () => {};
-  const checkJsonValue = (e, v) => {
-    let parseJSON = {};
-    const val = v || value;
-    if (val) {
-      try {
-        parseJSON = JSON.parse(val);
-        setValue(JSON.stringify(parseJSON, null, 3));
-        e && setLines(countLines(e.target || e, JSON.stringify(parseJSON, null, 3)));
-        setWarningMesg({
-          type: 'ok',
-          msg: 'Valid JSON'
-        });
-        props.isValid && props.isValid(true);
-      } catch (_unused) {
-        console.log('Error in parsing JSON');
-        setWarningMesg({
-          type: 'error',
-          msg: 'Invalid JSON'
-        });
-        props.isValid && props.isValid(false);
-        e && setLines(val && typeof val == 'string' ? (val.match(/\n/g) || []).length + 1 : 1);
-      }
-    }
-    !val && setWarningMesg({});
-  };
   const copyValue = value => {
     inputEl.current.select();
     try {
@@ -5959,9 +6169,6 @@ function Input(props) {
       setDefVal(props.defaultValue);
       setLines(countLines(inputEl.current, props.defaultValue));
     }
-    if (props.type == 'json' && inputEl.current) {
-      checkJsonValue(inputEl.current, props.defaultValue);
-    }
   }, [props.defaultValue, isControlled]);
   React.useEffect(() => {
     props.type == 'textarea' && setLines(countLines(inputEl.current, value));
@@ -6018,11 +6225,7 @@ function Input(props) {
     setValue(val);
     props.onChange && props.onChange(val);
     isTyping.current = true;
-    const debouncedUpdate = _$1.debounce(() => {
-      isTyping.current = false;
-      setDefVal(val);
-    }, 800);
-    debouncedUpdate();
+    debouncedTypingReset(val);
   }
   React.useEffect(() => {
     if (props.highlightEmpty && !value) {
@@ -6059,39 +6262,50 @@ function Input(props) {
   React.useEffect(() => {
     inputEl.current && (props.reFocus || props.reFocus === 0) && inputEl.current.focus();
   }, [props.reFocus]);
-  const textareaWidthCache = new WeakMap();
+  const textareaWidthCacheRef = React.useRef(new WeakMap());
+  const countLinesBufferRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (countLinesBufferRef.current && countLinesBufferRef.current.parentNode) {
+        countLinesBufferRef.current.parentNode.removeChild(countLinesBufferRef.current);
+        countLinesBufferRef.current = null;
+      }
+    };
+  }, []);
   function countLines(textarea, text) {
     if (!textarea || !textarea.constructor || textarea.constructor.name != 'HTMLTextAreaElement') {
       return;
     }
-    let _buffer;
-    if (_buffer == null) {
-      _buffer = document.createElement('textarea');
-      _buffer.style.border = 'none';
-      _buffer.style.height = '0';
-      _buffer.style.overflow = 'hidden';
-      _buffer.style.padding = '0';
-      _buffer.style.position = 'absolute';
-      _buffer.style.left = '0';
-      _buffer.style.top = '0';
-      _buffer.style.zIndex = '-1';
-      document.body.appendChild(_buffer);
-    }
+    if (!countLinesBufferRef.current) {
+      const buf = document.createElement('textarea');
+      buf.style.border = 'none';
+      buf.style.height = '0';
+      buf.style.overflow = 'hidden';
+      buf.style.padding = '0';
+      buf.style.position = 'absolute';
+      buf.style.left = '0';
+      buf.style.top = '0';
+      buf.style.zIndex = '-1';
+      document.body.appendChild(buf);
+      countLinesBufferRef.current = buf;
+    }
+    const _buffer = countLinesBufferRef.current;
     var cs = window.getComputedStyle(textarea);
     var pl = parseInt(cs.paddingLeft);
     var pr = parseInt(cs.paddingRight);
     var lh = parseInt(cs.lineHeight);
     if (isNaN(lh)) lh = parseInt(cs.fontSize) + 3;
     const currentContentWidth = textarea.clientWidth - pl - pr;
-    let cachedWidth = textareaWidthCache.get(textarea);
+    const widthCache = textareaWidthCacheRef.current;
+    let cachedWidth = widthCache.get(textarea);
     if (cachedWidth === undefined) {
       cachedWidth = currentContentWidth;
-      textareaWidthCache.set(textarea, cachedWidth);
+      widthCache.set(textarea, cachedWidth);
     } else {
       const widthDiff = Math.abs(currentContentWidth - cachedWidth);
       if (widthDiff >= 20) {
         cachedWidth = currentContentWidth;
-        textareaWidthCache.set(textarea, cachedWidth);
+        widthCache.set(textarea, cachedWidth);
       }
     }
     _buffer.style.width = cachedWidth + 'px';
@@ -6446,29 +6660,16 @@ function Input(props) {
   }), value && props.copy && /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.clear + " icon icon-copy",
     onClick: value => copyValue()
-  }))), props.type == 'json' && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.field_wrapper
-  }, /*#__PURE__*/React__default.createElement("textarea", {
-    autoFocus: props.autoFocus,
-    ref: inputEl,
+  }))), props.type == 'json' && /*#__PURE__*/React__default.createElement(JsonInput, {
+    defaultValue: props.defaultValue || props.value,
+    onChange: val => submit(val),
     disabled: props.disabled,
-    className: "\n                        " + styles$4.field + "\n                        " + (props.disabled && styles$4.disabled) + "\n                        " + styles$4.code + "\n                        " + (warningMsg.type && styles$4[warningMsg.type]),
-    type: "text",
-    rows: props.rows == 'auto' ? lines : props.rows || 1,
-    onChange: e => {
-      setLines(countLines(e.target));
-      handleChange(e.target.value);
-    },
-    value: value,
-    onBlur: e => checkJsonValue(e),
-    placeholder: "" + (props.placeholder ? props.placeholder : '')
-  }), value && !props.copy && !props.disabled && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.clear + " icon icon-close",
-    onClick: clearValue
-  }), value && props.copy && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.clear + " icon icon-copy",
-    onClick: value => copyValue()
-  })), props.type == 'textarea' && /*#__PURE__*/React__default.createElement("div", {
+    rows: props.rows,
+    placeholder: props.placeholder,
+    autoFocus: props.autoFocus,
+    isValid: props.isValid,
+    copy: props.copy
+  }), props.type == 'textarea' && /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.field_wrapper
   }, /*#__PURE__*/React__default.createElement("textarea", {
     autoFocus: props.autoFocus,
@@ -17094,27 +17295,69 @@ const iconHtml = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu
 const iconMkd = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDkgMTA5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDkgMTA5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0JDM0Y4Qjt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8ZyBpZD0iZnBzLXJpY2gtdGV4dCI+Cgk8ZyBpZD0iRkVCX3gyRl9jb21wb25lbnRfeDJGX2NhcmRzIj4KCQk8ZyBpZD0iR3JvdXAtMiI+CgkJCTxnIGlkPSJHcm91cCI+CgkJCQk8cGF0aCBpZD0iUmVjdGFuZ2xlXzFfIiBjbGFzcz0ic3QwIiBkPSJNMCwxOUMwLDguNSw4LjUsMCwxOSwwaDcxYzEwLjUsMCwxOSw4LjUsMTksMTl2NzFjMCwxMC41LTguNSwxOS0xOSwxOUgxOQoJCQkJCWMtMTAuNSwwLTE5LTguNS0xOS0xOSIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE3LjYsNTYuOWgxMy43djIuOUgxNy42VjU2Ljl6IE0xOC4yLDUwLjZIMzJ2Mi45SDE4LjJWNTAuNnogTTIxLjcsNDUuNWgyLjZsLTIuNCwyMC4xaC0yLjdMMjEuNyw0NS41egoJCSBNMjcuNiw0NS41aDIuNmwtMi40LDIwLjFIMjVMMjcuNiw0NS41eiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTM1LjgsNDUuNGg0LjhsMiw3LjFsMC43LDIuOGgwLjJsMC43LTIuOGwyLTcuMWg0Ljh2MjAuMkg0N3YtNi4zYzAtMi4zLDAuNC03LjIsMC42LTkuM2gtMC4xTDQ2LDU1LjQKCQlsLTEuNiw0LjloLTIuMmwtMS42LTQuOUwzOS4zLDUwaC0wLjFjMC4yLDIuMiwwLjYsNy4xLDAuNiw5LjN2Ni4zSDM2VjQ1LjRIMzUuOHoiLz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01NSw0My45aDQuNnYxMi41aDAuMmw1LjctNi4yaDQuOUw1OS41LDYxLjd2My44SDU1VjQzLjl6IE02MS4zLDU4LjZsMi42LTIuOGw2LjgsOS44aC00LjlMNjEuMyw1OC42eiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTcyLjcsNTcuOWMwLTUsMy4yLTguMSw2LjYtOC4xYzEuNiwwLDIuOCwwLjYsMy44LDEuNmgwLjFsLTAuMi0yLjR2LTUuM2g0LjZ2MjEuN2gtMy43bC0wLjMtMS42aC0wLjEKCQljLTEuMSwxLjEtMi43LDItNC4yLDJDNzUuMiw2Niw3Mi43LDYyLjksNzIuNyw1Ny45eiBNODMsNjAuOHYtNi4yYy0wLjktMC44LTEuNi0xLTIuNi0xYy0xLjYsMC0zLjEsMS4zLTMuMSw0LjJjMCwzLDEuMSw0LjQsMyw0LjQKCQlDODEuNCw2Mi4yLDgyLjIsNjEuOCw4Myw2MC44eiIvPgo8L2c+Cjwvc3ZnPgo=";
 function FpsHtml(props) {
   const {
-    socket
+    socket,
+    id,
+    callEndpoint
   } = props;
   const [data, setData] = React.useState(props.data);
   const [renderKey, setRenderKey] = React.useState(0);
+  const [hidden, setHidden] = React.useState(false);
+  const wrapperRef = React.useRef(null);
+  const dataRef = React.useRef(data);
+  const htmlRef = React.useRef((props.data || {}).html || '');
   React.useEffect(() => {
     if (JSON.stringify(props.data) !== JSON.stringify(data)) {
       setData(props.data);
     }
   }, [props]);
+  React.useEffect(() => {
+    dataRef.current = data;
+    htmlRef.current = (data || {}).html || '';
+  }, [data]);
   React.useEffect(() => {
     setRenderKey(prev => prev + 1);
   }, [socket]);
+  React.useEffect(() => {
+    const componentId = data && data.comp_ID || id;
+    if (!componentId) return;
+    if (!window.FpsHtml_API) {
+      window.FpsHtml_API = {};
+    }
+    window.FpsHtml_API[componentId] = {
+      getHtml: () => htmlRef.current,
+      setHtml: newHtml => {
+        setData(prev => _extends({}, prev || {}, {
+          html: newHtml
+        }));
+      },
+      rerender: () => setRenderKey(prev => prev + 1),
+      show: () => setHidden(false),
+      hide: () => setHidden(true),
+      getData: () => dataRef.current,
+      getElement: () => wrapperRef.current,
+      callEndpoint: (endpoint, method, body, params, finish) => {
+        if (callEndpoint) {
+          callEndpoint(endpoint, method, body, params, finish);
+        }
+      }
+    };
+    return () => {
+      if (window.FpsHtml_API && window.FpsHtml_API[componentId]) {
+        delete window.FpsHtml_API[componentId];
+      }
+    };
+  }, [data, id, callEndpoint]);
   const html = (data || {}).html || '';
-  if (data && data.isHidden == 'true') {
+  if (hidden || data && data.isHidden == 'true') {
     return /*#__PURE__*/React__default.createElement("div", null);
   }
-  return /*#__PURE__*/React__default.createElement(ComponentWrapper, null, /*#__PURE__*/React__default.createElement(Article, null, html && /*#__PURE__*/React__default.createElement(InnerHTML, {
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: wrapperRef
+  }, /*#__PURE__*/React__default.createElement(ComponentWrapper, null, /*#__PURE__*/React__default.createElement(Article, null, html && /*#__PURE__*/React__default.createElement(InnerHTML, {
     key: renderKey,
     allowRerender: true,
     html: html
-  })));
+  }))));
 }
 FpsHtml.settings = {
   icon: iconHtml,