@flozy/editor 5.1.5 → 5.1.6

package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Grid, Slider, Typography, Box } from "@mui/material";
+import { getBreakPointsValue } from "../../../helper/theme";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LineSpacing = props => {
+  const {
+    value: val,
+    data,
+    onChange
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const {
+    key
+  } = data;
+  const [size] = useWindowResize();
+  const pro_value = getBreakPointsValue(val, size?.device);
+  const [value, setValue] = useState(pro_value);
+  let breakpointValue = getBreakPointsValue(val, null);
+  breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
+  useState(() => {
+    setValue(pro_value);
+  }, [pro_value]);
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...breakpointValue,
+        [size?.device]: e.target.value
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      style: {
+        fontSize: "14px",
+        fontWeight: 500
+      },
+      children: data?.label
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      wrap: "nowrap",
+      className: "sld-wrpr",
+      children: [/*#__PURE__*/_jsx(Slider, {
+        className: "spacingSlider",
+        defaultValue: value || 1.43,
+        "aria-label": "Default",
+        valueLabelDisplay: "auto",
+        min: 0.5,
+        max: 3.0,
+        step: 0.1,
+        name: "lineHeight",
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "input",
+        sx: {
+          background: theme?.palette?.editor?.background,
+          color: theme?.palette?.editor?.textColor
+        },
+        name: "lineHeight",
+        value: pro_value,
+        className: "sliderInput",
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0",
+        disabled: true,
+        defaultValue: pro_value || 1.43
+      })]
+    })]
+  });
+};
+export default LineSpacing;

package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js

@@ -61,7 +61,7 @@ export const squreStyle = {
     margin: "auto",
     // borderTop: `2px solid #2563eb`,
     // borderLeft: `2px solid #2563eb`,
-    border: `none`,
+    // border: `1px solid transparent`,
     // borderBottom: `none`,
     fontSize: "14px",
     textAlign: "center"
@@ -76,8 +76,8 @@ export const squreStyle = {
     height: "30px",
     // borderTop: `2px solid #2563eb`,
     // borderRight: `2px solid #2563eb`,
-    border: `none`,
-    borderLeft: `none`,
+    // border: `none`,
+    // borderLeft: `none`,
     fontSize: "14px"
   },
   bottomLeft: {
@@ -90,8 +90,8 @@ export const squreStyle = {
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
     // borderLeft: `2px solid #2563eb`,
-    border: `none`,
-    borderTop: `none`,
+    // border: `none`,
+    // borderTop: `none`,
     fontSize: "14px"
   },
   bottomRight: {
@@ -104,8 +104,8 @@ export const squreStyle = {
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
     // borderRight: `2px solid #2563eb`,
-    border: "none",
-    borderLeft: "none",
+    // border: "none",
+    // borderLeft: "none",
     fontSize: "14px"
   }
 };

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -5,6 +5,8 @@ import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { useSlate } from "slate-react";
+
+// hideMetaDataOptions -- pass true to hide metadata option in select field 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,7 +28,8 @@ const TextOptions = props => {
     options,
     renderOption,
     width,
-    webFont = false
+    webFont = false,
+    hideMetaDataOptions = false
   } = data;
   const {
     fontFamilies
@@ -35,7 +38,7 @@ const TextOptions = props => {
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
-  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
+  const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -1,168 +1,287 @@
-import { fontOptions } from "../../utils/font";
+import { fontOptions, fontWeightOptions } from "../../utils/font";
 import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const formStyle = [{
-  tab: "General",
-  value: "general",
+export const formStyle = [{
+  tab: "Form Settings",
+  value: "FormSetting",
+  hasChildrenTabs: true,
   fields: [{
-    label: "Form Name",
-    key: "formName",
-    type: "text"
-  }, {
-    label: "Send Form to Email",
-    key: "email",
-    type: "text",
-    placeholder: "Enter Email to send the response..."
+    tab: "General",
+    value: "general",
+    fields: [{
+      label: "Form Name",
+      key: "formName",
+      type: "text"
+    }, {
+      label: "Send Form to Email",
+      key: "email",
+      type: "text",
+      placeholder: "Enter Email to send the response..."
+    }, {
+      label: "Save Response",
+      key: "saveResponse",
+      type: "selectBox",
+      placeholder: "Save Response"
+    }]
   }, {
-    label: "Save Response",
-    key: "saveResponse",
-    type: "selectBox",
-    placeholder: "Save Response"
-  }]
-}, {
-  tab: "Form Title",
-  value: "formTitle",
-  fields: [{
-    label: "Title",
-    key: "formTitle",
-    type: "text"
+    tab: "Form Title",
+    value: "formTitle",
+    fields: [{
+      label: "Title",
+      key: "formTitle",
+      type: "text"
+    }, {
+      label: "Font Family",
+      key: "fontFamily",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: fontOptions,
+      webFont: true,
+      width: 7,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: option.value
+          },
+          children: option.text
+        });
+      }
+    }, {
+      label: "Font Size",
+      key: "textSize",
+      type: "fontSize",
+      width: 5,
+      placeholder: "16px"
+    }, {
+      label: "Text Align",
+      key: "textAlign",
+      type: "textAlign",
+      placeholder: "16px or 1em"
+    }]
   }, {
-    label: "Font Family",
-    key: "fontFamily",
-    type: "textOptions",
-    options: fontOptions,
-    webFont: true,
-    width: 7,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
+    tab: "Banner Spacing",
+    value: "bannerSpacing",
+    fields: [{
+      label: "Banner Spacing",
+      key: "bannerSpacing",
+      type: "bannerSpacing"
+    }]
   }, {
-    label: "Font Size",
-    key: "textSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px"
+    tab: "Border",
+    value: "border",
+    fields: [{
+      label: "Border Radius",
+      key: "borderRadius",
+      type: "borderRadius"
+    }, {
+      label: "Border Width",
+      key: "borderWidth",
+      type: "text",
+      placeholder: "1px"
+    }, {
+      label: "Border Style",
+      key: "borderStyle",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: [{
+        text: "Solid",
+        value: "solid"
+      }, {
+        text: "Dotted",
+        value: "dotted"
+      }, {
+        text: "Dashed",
+        value: "dashed"
+      }],
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Text Align",
-    key: "textAlign",
-    type: "textAlign",
-    placeholder: "16px or 1em"
-  }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border",
-  value: "border",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
+    tab: "Colors",
+    value: "colors",
+    fields: [{
+      label: "Text Color",
+      key: "textColor",
+      type: "color",
+      needPreview: true
+    }, {
+      label: "Background Color",
+      key: "bgColor",
+      type: "color"
+    }, {
+      label: "Border Color",
+      key: "borderColor",
+      type: "color"
+    }]
   }, {
-    label: "Border Width",
-    key: "borderWidth",
-    type: "text",
-    placeholder: "1px"
+    tab: "Position",
+    value: "position",
+    fields: [{
+      label: "Set Postion (Vertical & Horizantal)",
+      key: "alignment",
+      type: "alignment"
+    }]
   }, {
-    label: "Border Style",
-    key: "borderStyle",
-    type: "textOptions",
-    options: [{
-      text: "Solid",
-      value: "solid"
+    tab: "Background",
+    value: "backgroundImage",
+    fields: [{
+      label: "URL",
+      key: "backgroundImage",
+      type: "text"
     }, {
-      text: "Dotted",
-      value: "dotted"
+      label: "Background Image",
+      key: "backgroundImage",
+      type: "backgroundImage"
+    }]
+  }, {
+    tab: "Add to Boards",
+    value: "metadatamapping",
+    fields: [{
+      label: "Add response to contacts board",
+      key: "metadatamapping",
+      type: "metadatamapping",
+      compType: "card",
+      content: "By default, form responses are added as separate cards on the default contact board.",
+      value: "mappingToContactBoard",
+      infoIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: "info"
+      })
     }, {
-      text: "Dashed",
-      value: "dashed"
-    }],
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        children: option.text
-      });
-    }
+      label: "Create a separate board",
+      key: "metadatamapping",
+      type: "metadatamapping",
+      compType: "card",
+      content: "By default, form responses are added as separate cards on a new board (Contact Us).",
+      value: "mappingToSeparateBoard",
+      infoIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: "info"
+      })
+    }]
+  }, {
+    tab: "Save As Template",
+    value: "saveAsTemplate",
+    needActions: false,
+    hideOnFGS: true,
+    fields: [{
+      label: "Template Image",
+      key: "saveAsTemplate",
+      type: "saveAsTemplate"
+    }]
   }]
 }, {
-  tab: "Colors",
-  value: "colors",
+  tab: "Field Settings",
+  value: "FieldSetting",
+  hasChildrenTabs: true,
   fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: true
+    tab: "Font Family",
+    value: "FontFamily",
+    fields: [{
+      label: "Font Family",
+      key: "fieldFontFamily",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: fontOptions,
+      webFont: true,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: option.value
+          },
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Background Color",
-    key: "bgColor",
-    type: "color"
+    tab: "Font Weight",
+    value: "FontWeight",
+    fields: [{
+      label: "Font Weight",
+      key: "fieldFontWeight",
+      type: "textOptions",
+      width: 5,
+      options: fontWeightOptions,
+      hideMetaDataOptions: true,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontWeight: option.value
+          },
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
-    key: "alignment",
-    type: "alignment"
-  }]
-}, {
-  tab: "Background",
-  value: "backgroundImage",
-  fields: [{
-    label: "URL",
-    key: "backgroundImage",
-    type: "text"
+    tab: "Font Size",
+    value: "FontSize",
+    fields: [{
+      label: "Font Size",
+      key: "fieldTextSize",
+      type: "fontSize",
+      width: 5,
+      placeholder: "16px"
+    }]
   }, {
-    label: "Background Image",
-    key: "backgroundImage",
-    type: "backgroundImage"
-  }]
-}, {
-  tab: "Add to Boards",
-  value: "metadatamapping",
-  fields: [{
-    label: "Add response to contacts board",
-    key: "metadatamapping",
-    type: "metadatamapping",
-    compType: "card",
-    content: "By default, form responses are added as separate cards on the default contact board.",
-    value: "mappingToContactBoard",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
+    tab: "Text Color",
+    value: "TextColor",
+    fields: [{
+      label: "Text Color",
+      key: "fieldTextColor",
+      type: "color",
+      needPreview: true
+    }]
   }, {
-    label: "Create a separate board",
-    key: "metadatamapping",
-    type: "metadatamapping",
-    compType: "card",
-    content: "By default, form responses are added as separate cards on a new board (Contact Us).",
-    value: "mappingToSeparateBoard",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
-  }]
-}, {
-  tab: "Save As Template",
-  value: "saveAsTemplate",
-  needActions: false,
-  hideOnFGS: true,
-  fields: [{
-    label: "Template Image",
-    key: "saveAsTemplate",
-    type: "saveAsTemplate"
+    tab: "Background Color",
+    value: "BackgroundColor",
+    fields: [{
+      label: "Background Color",
+      key: "fieldBgColor",
+      type: "color"
+    }]
+  }, {
+    tab: "Border Color",
+    value: "BorderColor",
+    fields: [{
+      label: "Border Color",
+      key: "fieldBorderColor",
+      type: "color"
+    }]
+  }, {
+    tab: "Border Width",
+    value: "BorderWidth",
+    fields: [{
+      label: "Border Width",
+      key: "fieldBorderWidth",
+      type: "text",
+      width: 5,
+      placeholder: "1px"
+    }]
+  }, {
+    tab: "Border Style",
+    value: "BorderStyle",
+    fields: [{
+      label: "Border Style",
+      key: "fieldBorderStyle",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      width: 5,
+      options: [{
+        text: "Solid",
+        value: "solid"
+      }, {
+        text: "Dotted",
+        value: "dotted"
+      }, {
+        text: "Dashed",
+        value: "dashed"
+      }],
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          children: option.text
+        });
+      }
+    }]
   }]
-}];
-export default formStyle;
+}];