@bigbinary/neeto-molecules 3.16.51 → 3.16.53

package/dist/SessionEnvironment.js

@@ -353,7 +353,7 @@ var DetailsBlock = function DetailsBlock(_ref) {
 };
 var DetailsBlock$1 = /*#__PURE__*/memo(DetailsBlock);
 
-var css = ".neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .ant-picker-suffix{display:none}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-input__prefix{margin:0;padding:0}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-date-input,.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-input>input{padding:.25rem 2.8125rem .25rem .25rem!important}.neeto-molecules-session-environment-editable-field__actions .neeto-ui-btn{background-color:transparent!important;min-height:0!important;padding:.125rem!important}.neeto-molecules-session-environment-editable-text{border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);transition:var(--neeto-ui-transition)}.neeto-molecules-session-environment-editable-text:hover{border:thin solid rgb(var(--neeto-ui-gray-400))}";
+var css = ".neeto-molecules-session-environment-editable-field>div:not([class]){align-items:center;display:flex;flex-grow:1}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .ant-picker-suffix{display:none}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-input__prefix{margin:0;padding:0}.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-date-input,.neeto-molecules-session-environment-editable-field .neeto-ui-input__wrapper .neeto-ui-input>input{padding:.25rem 2.8125rem .25rem .25rem!important}.neeto-molecules-session-environment-editable-field__actions .neeto-ui-btn{background-color:transparent!important;min-height:0!important;padding:.125rem!important}.neeto-molecules-session-environment-editable-text{border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);transition:var(--neeto-ui-transition)}.neeto-molecules-session-environment-editable-text:hover{border:thin solid rgb(var(--neeto-ui-gray-400))}";
 n(css,{});
 
 var SessionEnvironment = function SessionEnvironment(_ref) {

package/dist/cjs/ProductEmbed.js

@@ -109,14 +109,11 @@ var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
     id = _ref3.id,
     embedScriptLink = _ref3.embedScriptLink,
     extraArgs = _ref3.extraArgs,
-    inlineWrapperStyle = _ref3.inlineWrapperStyle;
+    inlineWrapperStyle = _ref3.inlineWrapperStyle,
+    iframeStyle = _ref3.iframeStyle;
   var elementSelector = customization.elementSelector,
-    _customization$width = customization.width,
-    width = _customization$width === void 0 ? 100 : _customization$width,
-    _customization$height = customization.height,
-    height = _customization$height === void 0 ? 100 : _customization$height,
     queryParams = customization.queryParams;
-  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(inlineWrapperStyle || "height: 90vh; width: 100%;", "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(inlineWrapperStyle, "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: \"").concat(iframeStyle, "\", ").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
 };
 var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -168,7 +165,7 @@ var parseExtraArgs = function parseExtraArgs(extraArgs) {
   });
 };
 var parseInlineStyle = function parseInlineStyle(styleString) {
-  return styleString ? styleString.split(";").map(function (rule) {
+  return styleString.split(";").map(function (rule) {
     var _rule$split$map = rule.split(":").map(function (s) {
         return s.trim();
       }),
@@ -176,21 +173,18 @@ var parseInlineStyle = function parseInlineStyle(styleString) {
       key = _rule$split$map2[0],
       value = _rule$split$map2[1];
     return key && value ? "".concat(key, ": \"").concat(value, "\"") : null;
-  }).filter(Boolean).join(", ") : 'height: "90vh", width: "100%"';
+  }).filter(Boolean).join(", ");
 };
 var inlineEmbedCode = function inlineEmbedCode(_ref3) {
   var customization = _ref3.customization,
     id = _ref3.id,
     embedScriptLink = _ref3.embedScriptLink,
     extraArgs = _ref3.extraArgs,
-    inlineWrapperStyle = _ref3.inlineWrapperStyle;
+    inlineWrapperStyle = _ref3.inlineWrapperStyle,
+    iframeStyle = _ref3.iframeStyle;
   var elementSelector = customization.elementSelector,
-    _customization$width = customization.width,
-    width = _customization$width === void 0 ? 100 : _customization$width,
-    _customization$height = customization.height,
-    height = _customization$height === void 0 ? 100 : _customization$height,
     queryParams = customization.queryParams;
-  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"inline\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",\n          styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\" },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(inlineWrapperStyle), " }}\n      />\n    );\n  };");
+  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"inline\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",\n          styles: \"").concat(iframeStyle, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(inlineWrapperStyle), " }}\n      />\n    );\n  };");
 };
 var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -204,7 +198,7 @@ var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
     btnColor = customization.btnColor,
     icon = customization.icon,
     queryParams = customization.queryParams;
-  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"floatingPopup\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          styles: {\n            btnTextColor: \"").concat(btnTextColor, "\",\n            btnPosition: \"").concat(btnPosition, "\",\n            btnColor: \"").concat(btnColor, "\",\n            btnText: \"").concat(btnText, "\",").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "  showIcon: ").concat(showIcon, ",") : "", "\n          },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <div />;\n  };");
+  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"floatingPopup\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          styles: {\n            btnTextColor: \"").concat(btnTextColor, "\",\n            btnPosition: \"").concat(btnPosition, "\",\n            btnColor: \"").concat(btnColor, "\",\n            btnText: \"").concat(btnText, "\",").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n          },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <div />;\n  };");
 };
 var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
   var customization = _ref5.customization,
@@ -494,9 +488,7 @@ var Inline$1 = function Inline(_ref) {
       };
     }, shallow.shallow),
     isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
-  var height = customization.height,
-    width = customization.width,
-    elementSelector = customization.elementSelector;
+  var elementSelector = customization.elementSelector;
   var handleInputChange = function handleInputChange(_ref2, attribute) {
     var value = _ref2.target.value;
     return updateCustomization(_defineProperty({}, attribute, value));
@@ -509,41 +501,6 @@ var Inline$1 = function Inline(_ref) {
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-        "data-cy": "window-size-text",
-        children: t("neetoMolecules.productEmbed.inline.sizeOfEmbedWindow")
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex justify-between gap-x-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
-          className: "neeto-molecules-product-embed-size-input",
-          "data-cy": "inline-width-input-field",
-          "data-testid": "inline-width-input-field",
-          max: 100,
-          min: 0,
-          prefix: "W",
-          suffix: "%",
-          type: "number",
-          value: width,
-          onChange: function onChange(e) {
-            return handleInputChange(e, "width");
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(Input, {
-          className: "neeto-molecules-product-embed-size-input",
-          "data-cy": "inline-height-input-field",
-          "data-testid": "inline-height-input-field",
-          max: 100,
-          min: 0,
-          prefix: "H",
-          suffix: "%",
-          type: "number",
-          value: height,
-          onChange: function onChange(e) {
-            return handleInputChange(e, "height");
-          }
-        })]
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
         "data-cy": "inline-element-id-input-label",
@@ -1111,6 +1068,7 @@ var Code = function Code(_ref) {
     embedScriptLink = _ref.embedScriptLink,
     extraArgs = _ref.extraArgs,
     inlineWrapperStyle = _ref.inlineWrapperStyle,
+    iframeStyle = _ref.iframeStyle,
     supportedLanguages = _ref.supportedLanguages,
     customization = _ref.customization;
   var _useTranslation = reactI18next.useTranslation(),
@@ -1131,7 +1089,8 @@ var Code = function Code(_ref) {
     customization: customization,
     embedScriptLink: embedScriptLink,
     extraArgs: extraArgs,
-    inlineWrapperStyle: inlineWrapperStyle
+    inlineWrapperStyle: inlineWrapperStyle,
+    iframeStyle: iframeStyle
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-3",
@@ -1433,6 +1392,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
     extraArgs = _ref.extraArgs,
     otherCustomizations = _ref.otherCustomizations,
     inlineWrapperStyle = _ref.inlineWrapperStyle,
+    iframeStyle = _ref.iframeStyle,
     supportedLanguages = _ref.supportedLanguages,
     selectedEmbed = _ref.selectedEmbed;
   var _useTranslation = reactI18next.useTranslation(),
@@ -1503,6 +1463,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
             embedScriptLink: embedScriptLink,
             extraArgs: extraArgs,
             id: id,
+            iframeStyle: iframeStyle,
             inlineWrapperStyle: inlineWrapperStyle,
             selectedEmbed: selectedEmbed,
             supportedLanguages: supportedLanguages
@@ -1621,7 +1582,9 @@ var ProductEmbed = function ProductEmbed(_ref) {
     _ref$otherCustomizati = _ref.otherCustomizations,
     otherCustomizations = _ref$otherCustomizati === void 0 ? neetoCist.noop : _ref$otherCustomizati,
     _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
-    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "" : _ref$inlineWrapperSty,
+    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "height: 90vh; width: 100%;" : _ref$inlineWrapperSty,
+    _ref$iframeStyle = _ref.iframeStyle,
+    iframeStyle = _ref$iframeStyle === void 0 ? "height: 100%; width: 100%;" : _ref$iframeStyle,
     _ref$supportedLanguag = _ref.supportedLanguages,
     supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
   var _useLocation = reactRouterDom.useLocation(),
@@ -1646,6 +1609,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
     customPreviewIframeUrl: customPreviewIframeUrl,
     extraArgs: extraArgs,
     id: id,
+    iframeStyle: iframeStyle,
     inlineWrapperStyle: inlineWrapperStyle,
     options: options,
     otherCustomizations: otherCustomizations,