@jotforminc/dnd-builder 1.0.2 → 2.0.0-beta.4

package/lib/cjs/components/Print/PrintModeWithoutContext.js

@@ -25,7 +25,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var availableFormats = ['A4', 'A5'];
+var availableFormats = ['A4', 'A5', 'Custom', 'Web'];
 
 var PrintModeWithoutContext = function PrintModeWithoutContext(_ref) {
   var additionalPageItems = _ref.additionalPageItems,
@@ -33,7 +33,8 @@ var PrintModeWithoutContext = function PrintModeWithoutContext(_ref) {
       itemAccessor = _ref.itemAccessor,
       mode = _ref.mode,
       pages = _ref.pages,
-      settings = _ref.settings;
+      settings = _ref.settings,
+      theme = _ref.theme;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -53,6 +54,7 @@ var PrintModeWithoutContext = function PrintModeWithoutContext(_ref) {
       }
     }), /*#__PURE__*/jsxRuntime.jsx(ReportWrapper, {
       mode: "print",
+      theme: theme,
       children: /*#__PURE__*/jsxRuntime.jsx(StaticScene, {
         additionalPageItems: additionalPageItems,
         hashCode: hashCode,
@@ -75,7 +77,8 @@ PrintModeWithoutContext.propTypes = {
     reportLayout: PropTypes__default['default'].string,
     reportLayoutHeight: PropTypes__default['default'].string,
     reportLayoutWidth: PropTypes__default['default'].string
-  })
+  }),
+  theme: PropTypes__default['default'].string
 };
 PrintModeWithoutContext.defaultProps = {
   additionalPageItems: [],
@@ -83,7 +86,8 @@ PrintModeWithoutContext.defaultProps = {
   itemAccessor: function itemAccessor() {},
   mode: 'print',
   pages: [],
-  settings: {}
+  settings: {},
+  theme: 'lightMode'
 };
 
 module.exports = PrintModeWithoutContext;

package/lib/cjs/components/Print/PrintModeWithoutContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrintModeWithoutContext.js","sources":["../../../../src/components/Print/PrintModeWithoutContext.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ReportWrapper from '../ReportWrapper';\nimport StaticScene from '../Preview/StaticScene';\nimport { pageSize } from '../../utils/print';\n\nconst availableFormats = ['A4', 'A5'];\n\nconst PrintModeWithoutContext = ({\n  additionalPageItems,\n  hashCode,\n  itemAccessor,\n  mode,\n  pages,\n  settings,\n}) => {\n  const [manipulatePageSize, setManipulatePageSize] = useState(false);\n  const reportLayout = settings.reportLayout ? settings.reportLayout : 'A4 Landscape';\n  if (availableFormats.indexOf(reportLayout.split(' ')[0]) > -1 && !manipulatePageSize) {\n    setManipulatePageSize(true);\n  }\n\n  return (\n    <>\n      {manipulatePageSize && (\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n            @page {\n              size: ${pageSize(settings)}; margin:0;\n            }`,\n          }}\n        />\n      )}\n      <ReportWrapper\n        mode=\"print\"\n      >\n        <StaticScene\n          additionalPageItems={additionalPageItems}\n          hashCode={hashCode}\n          hideZoom={true}\n          itemAccessor={itemAccessor}\n          mode={mode}\n          pages={pages}\n        />\n      </ReportWrapper>\n    </>\n  );\n};\n\nPrintModeWithoutContext.propTypes = {\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  hashCode: PropTypes.string,\n  itemAccessor: PropTypes.func,\n  mode: PropTypes.string,\n  pages: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  settings: PropTypes.shape({\n    reportLayout: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n  }),\n};\n\nPrintModeWithoutContext.defaultProps = {\n  additionalPageItems: [],\n  hashCode: '',\n  itemAccessor: () => {},\n  mode: 'print',\n  pages: [],\n  settings: {},\n};\n\nexport default PrintModeWithoutContext;\n"],"names":["availableFormats","PrintModeWithoutContext","additionalPageItems","hashCode","itemAccessor","mode","pages","settings","useState","manipulatePageSize","setManipulatePageSize","reportLayout","indexOf","split","_jsxs","_jsx","__html","pageSize","propTypes","PropTypes","arrayOf","node","string","func","shape","reportLayoutHeight","reportLayoutWidth","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,gBAAgB,GAAG,CAAC,IAAD,EAAO,IAAP,CAAzB;;IAEMC,uBAAuB,GAAG,SAA1BA,uBAA0B,OAO1B;AAAA,MANJC,mBAMI,QANJA,mBAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,YAII,QAJJA,YAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,QACI,QADJA,QACI;;AAAA,kBACgDC,cAAQ,CAAC,KAAD,CADxD;AAAA;AAAA,MACGC,kBADH;AAAA,MACuBC,qBADvB;;AAEJ,MAAMC,YAAY,GAAGJ,QAAQ,CAACI,YAAT,GAAwBJ,QAAQ,CAACI,YAAjC,GAAgD,cAArE;;AACA,MAAIX,gBAAgB,CAACY,OAAjB,CAAyBD,YAAY,CAACE,KAAb,CAAmB,GAAnB,EAAwB,CAAxB,CAAzB,IAAuD,CAAC,CAAxD,IAA6D,CAACJ,kBAAlE,EAAsF;AACpFC,IAAAA,qBAAqB,CAAC,IAAD,CAArB;AACD;;AAED,sBACEI;AAAA,eACGL,kBAAkB,iBACjBM;AACE,MAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,uDAEIC,cAAQ,CAACV,QAAD,CAFZ;AADiB;AAD3B,MAFJ,eAWEQ,eAAC,aAAD;AACE,MAAA,IAAI,EAAC,OADP;AAAA,6BAGEA,eAAC,WAAD;AACE,QAAA,mBAAmB,EAAEb,mBADvB;AAEE,QAAA,QAAQ,EAAEC,QAFZ;AAGE,QAAA,QAAQ,EAAE,IAHZ;AAIE,QAAA,YAAY,EAAEC,YAJhB;AAKE,QAAA,IAAI,EAAEC,IALR;AAME,QAAA,KAAK,EAAEC;AANT;AAHF,MAXF;AAAA,IADF;AA0BD;;AAEDL,uBAAuB,CAACiB,SAAxB,GAAoC;AAClChB,EAAAA,mBAAmB,EAAEiB,6BAAS,CAACC,OAAV,CAAkBD,6BAAS,CAACE,IAA5B,CADa;AAElClB,EAAAA,QAAQ,EAAEgB,6BAAS,CAACG,MAFc;AAGlClB,EAAAA,YAAY,EAAEe,6BAAS,CAACI,IAHU;AAIlClB,EAAAA,IAAI,EAAEc,6BAAS,CAACG,MAJkB;AAKlChB,EAAAA,KAAK,EAAEa,6BAAS,CAACC,OAAV,CACLD,6BAAS,CAACK,KAAV,CAAgB,EAAhB,CADK,CAL2B;AAQlCjB,EAAAA,QAAQ,EAAEY,6BAAS,CAACK,KAAV,CAAgB;AACxBb,IAAAA,YAAY,EAAEQ,6BAAS,CAACG,MADA;AAExBG,IAAAA,kBAAkB,EAAEN,6BAAS,CAACG,MAFN;AAGxBI,IAAAA,iBAAiB,EAAEP,6BAAS,CAACG;AAHL,GAAhB;AARwB,CAApC;AAeArB,uBAAuB,CAAC0B,YAAxB,GAAuC;AACrCzB,EAAAA,mBAAmB,EAAE,EADgB;AAErCC,EAAAA,QAAQ,EAAE,EAF2B;AAGrCC,EAAAA,YAAY,EAAE,wBAAM,EAHiB;AAIrCC,EAAAA,IAAI,EAAE,OAJ+B;AAKrCC,EAAAA,KAAK,EAAE,EAL8B;AAMrCC,EAAAA,QAAQ,EAAE;AAN2B,CAAvC;;;;"}
+{"version":3,"file":"PrintModeWithoutContext.js","sources":["../../../../src/components/Print/PrintModeWithoutContext.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ReportWrapper from '../ReportWrapper';\nimport StaticScene from '../Preview/StaticScene';\nimport { pageSize } from '../../utils/print';\n\nconst availableFormats = ['A4', 'A5', 'Custom', 'Web'];\n\nconst PrintModeWithoutContext = ({\n  additionalPageItems,\n  hashCode,\n  itemAccessor,\n  mode,\n  pages,\n  settings,\n  theme,\n}) => {\n  const [manipulatePageSize, setManipulatePageSize] = useState(false);\n  const reportLayout = settings.reportLayout ? settings.reportLayout : 'A4 Landscape';\n  if (availableFormats.indexOf(reportLayout.split(' ')[0]) > -1 && !manipulatePageSize) {\n    setManipulatePageSize(true);\n  }\n\n  return (\n    <>\n      {manipulatePageSize && (\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n            @page {\n              size: ${pageSize(settings)}; margin:0;\n            }`,\n          }}\n        />\n      )}\n      <ReportWrapper\n        mode=\"print\"\n        theme={theme}\n      >\n        <StaticScene\n          additionalPageItems={additionalPageItems}\n          hashCode={hashCode}\n          hideZoom={true}\n          itemAccessor={itemAccessor}\n          mode={mode}\n          pages={pages}\n        />\n      </ReportWrapper>\n    </>\n  );\n};\n\nPrintModeWithoutContext.propTypes = {\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  hashCode: PropTypes.string,\n  itemAccessor: PropTypes.func,\n  mode: PropTypes.string,\n  pages: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  settings: PropTypes.shape({\n    reportLayout: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n  }),\n  theme: PropTypes.string,\n};\n\nPrintModeWithoutContext.defaultProps = {\n  additionalPageItems: [],\n  hashCode: '',\n  itemAccessor: () => {},\n  mode: 'print',\n  pages: [],\n  settings: {},\n  theme: 'lightMode',\n};\n\nexport default PrintModeWithoutContext;\n"],"names":["availableFormats","PrintModeWithoutContext","additionalPageItems","hashCode","itemAccessor","mode","pages","settings","theme","useState","manipulatePageSize","setManipulatePageSize","reportLayout","indexOf","split","_jsxs","_jsx","__html","pageSize","propTypes","PropTypes","arrayOf","node","string","func","shape","reportLayoutHeight","reportLayoutWidth","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,gBAAgB,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,QAAb,EAAuB,KAAvB,CAAzB;;IAEMC,uBAAuB,GAAG,SAA1BA,uBAA0B,OAQ1B;AAAA,MAPJC,mBAOI,QAPJA,mBAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,KACI,QADJA,KACI;;AAAA,kBACgDC,cAAQ,CAAC,KAAD,CADxD;AAAA;AAAA,MACGC,kBADH;AAAA,MACuBC,qBADvB;;AAEJ,MAAMC,YAAY,GAAGL,QAAQ,CAACK,YAAT,GAAwBL,QAAQ,CAACK,YAAjC,GAAgD,cAArE;;AACA,MAAIZ,gBAAgB,CAACa,OAAjB,CAAyBD,YAAY,CAACE,KAAb,CAAmB,GAAnB,EAAwB,CAAxB,CAAzB,IAAuD,CAAC,CAAxD,IAA6D,CAACJ,kBAAlE,EAAsF;AACpFC,IAAAA,qBAAqB,CAAC,IAAD,CAArB;AACD;;AAED,sBACEI;AAAA,eACGL,kBAAkB,iBACjBM;AACE,MAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,uDAEIC,cAAQ,CAACX,QAAD,CAFZ;AADiB;AAD3B,MAFJ,eAWES,eAAC,aAAD;AACE,MAAA,IAAI,EAAC,OADP;AAEE,MAAA,KAAK,EAAER,KAFT;AAAA,6BAIEQ,eAAC,WAAD;AACE,QAAA,mBAAmB,EAAEd,mBADvB;AAEE,QAAA,QAAQ,EAAEC,QAFZ;AAGE,QAAA,QAAQ,EAAE,IAHZ;AAIE,QAAA,YAAY,EAAEC,YAJhB;AAKE,QAAA,IAAI,EAAEC,IALR;AAME,QAAA,KAAK,EAAEC;AANT;AAJF,MAXF;AAAA,IADF;AA2BD;;AAEDL,uBAAuB,CAACkB,SAAxB,GAAoC;AAClCjB,EAAAA,mBAAmB,EAAEkB,6BAAS,CAACC,OAAV,CAAkBD,6BAAS,CAACE,IAA5B,CADa;AAElCnB,EAAAA,QAAQ,EAAEiB,6BAAS,CAACG,MAFc;AAGlCnB,EAAAA,YAAY,EAAEgB,6BAAS,CAACI,IAHU;AAIlCnB,EAAAA,IAAI,EAAEe,6BAAS,CAACG,MAJkB;AAKlCjB,EAAAA,KAAK,EAAEc,6BAAS,CAACC,OAAV,CACLD,6BAAS,CAACK,KAAV,CAAgB,EAAhB,CADK,CAL2B;AAQlClB,EAAAA,QAAQ,EAAEa,6BAAS,CAACK,KAAV,CAAgB;AACxBb,IAAAA,YAAY,EAAEQ,6BAAS,CAACG,MADA;AAExBG,IAAAA,kBAAkB,EAAEN,6BAAS,CAACG,MAFN;AAGxBI,IAAAA,iBAAiB,EAAEP,6BAAS,CAACG;AAHL,GAAhB,CARwB;AAalCf,EAAAA,KAAK,EAAEY,6BAAS,CAACG;AAbiB,CAApC;AAgBAtB,uBAAuB,CAAC2B,YAAxB,GAAuC;AACrC1B,EAAAA,mBAAmB,EAAE,EADgB;AAErCC,EAAAA,QAAQ,EAAE,EAF2B;AAGrCC,EAAAA,YAAY,EAAE,wBAAM,EAHiB;AAIrCC,EAAAA,IAAI,EAAE,OAJ+B;AAKrCC,EAAAA,KAAK,EAAE,EAL8B;AAMrCC,EAAAA,QAAQ,EAAE,EAN2B;AAOrCC,EAAAA,KAAK,EAAE;AAP8B,CAAvC;;;;"}

package/lib/cjs/components/ReportWrapper.js

@@ -20,7 +20,8 @@ var getModeClass = function getModeClass(mode) {
 var ReportWrapper = function ReportWrapper(_ref) {
   var children = _ref.children,
       mode = _ref.mode,
-      pageCount = _ref.pageCount;
+      pageCount = _ref.pageCount,
+      theme = _ref.theme;
 
   var _useBuilderContext = builderContext.useBuilderContext(),
       isAllSlidesPanelOpen = _useBuilderContext.isAllSlidesPanelOpen,
@@ -61,7 +62,7 @@ var ReportWrapper = function ReportWrapper(_ref) {
 
     decidedWhichPanelToOpen.current = true;
   }, [mode, pageCount]);
-  var wrapperClass = classNames__default['default']('jfReport', 'f-height', 'd-flex', getModeClass(mode), isLeftPanelOpen === true ? 'leftPaneIsActive' : '', isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '', isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '', isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '');
+  var wrapperClass = classNames__default['default']('jfReport', 'f-height', 'd-flex', getModeClass(mode), isLeftPanelOpen === true ? 'leftPaneIsActive' : '', isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '', isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '', isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '', theme);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: wrapperClass,
     children: children
@@ -71,7 +72,8 @@ var ReportWrapper = function ReportWrapper(_ref) {
 ReportWrapper.propTypes = {
   children: PropTypes__default['default'].any,
   mode: PropTypes__default['default'].string,
-  pageCount: PropTypes__default['default'].number
+  pageCount: PropTypes__default['default'].number,
+  theme: PropTypes__default['default'].string.isRequired
 };
 ReportWrapper.defaultProps = {
   children: null,

package/lib/cjs/components/ReportWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAIhB;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJF,IAEI,QAFJA,IAEI;AAAA,MADJG,SACI,QADJA,SACI;;AAAA,2BASAC,gCAAiB,EATjB;AAAA,MAEFC,oBAFE,sBAEFA,oBAFE;AAAA,MAGFC,eAHE,sBAGFA,eAHE;AAAA,MAIFC,gBAJE,sBAIFA,gBAJE;AAAA,MAKFC,iBALE,sBAKFA,iBALE;AAAA,MAMFC,kBANE,sBAMFA,kBANE;AAAA,MAOFC,oBAPE,sBAOFA,oBAPE;AAAA,MAQFC,OARE,sBAQFA,OARE;;AAAA,wBAUiBC,0BAAc,EAV/B;AAAA,MAUIC,QAVJ,mBAUIA,QAVJ;;AAWJ,MAAMC,uBAAuB,GAAGC,YAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,gBAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAElB,IAAI,KAAK,WAFjB;AAGTa,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,eAAS,CAAC,YAAM;AACd,QAAInB,IAAI,KAAK,WAAT,IAAwBc,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIjB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAIG,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACpB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMkB,YAAY,GAAGC,8BAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BvB,YAAY,CAACC,IAAD,CAJiB,EAK7BM,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,CAA/B;AAUA,sBACEkB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGnB;AAHH,IADF;AAOD,CA5DD;;AA8DAD,aAAa,CAACuB,SAAd,GAA0B;AACxBtB,EAAAA,QAAQ,EAAEuB,6BAAS,CAACC,GADI;AAExB1B,EAAAA,IAAI,EAAEyB,6BAAS,CAACE,MAFQ;AAGxBxB,EAAAA,SAAS,EAAEsB,6BAAS,CAACG;AAHG,CAA1B;AAMA3B,aAAa,CAAC4B,YAAd,GAA6B;AAC3B3B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE;AAHgB,CAA7B;AAMA,mCAAe2B,UAAI,CAAC7B,aAAD,CAAnB;;;;"}
+{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n  theme,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n    theme,\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n  theme: PropTypes.string.isRequired,\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","theme","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","isRequired","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKhB;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJF,IAGI,QAHJA,IAGI;AAAA,MAFJG,SAEI,QAFJA,SAEI;AAAA,MADJC,KACI,QADJA,KACI;;AAAA,2BASAC,gCAAiB,EATjB;AAAA,MAEFC,oBAFE,sBAEFA,oBAFE;AAAA,MAGFC,eAHE,sBAGFA,eAHE;AAAA,MAIFC,gBAJE,sBAIFA,gBAJE;AAAA,MAKFC,iBALE,sBAKFA,iBALE;AAAA,MAMFC,kBANE,sBAMFA,kBANE;AAAA,MAOFC,oBAPE,sBAOFA,oBAPE;AAAA,MAQFC,OARE,sBAQFA,OARE;;AAAA,wBAUiBC,0BAAc,EAV/B;AAAA,MAUIC,QAVJ,mBAUIA,QAVJ;;AAWJ,MAAMC,uBAAuB,GAAGC,YAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,gBAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAEnB,IAAI,KAAK,WAFjB;AAGTc,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,eAAS,CAAC,YAAM;AACd,QAAIpB,IAAI,KAAK,WAAT,IAAwBe,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIlB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAII,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACrB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMmB,YAAY,GAAGC,8BAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BxB,YAAY,CAACC,IAAD,CAJiB,EAK7BO,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,EAS7BF,KAT6B,CAA/B;AAWA,sBACEoB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGpB;AAHH,IADF;AAOD,CA9DD;;AAgEAD,aAAa,CAACwB,SAAd,GAA0B;AACxBvB,EAAAA,QAAQ,EAAEwB,6BAAS,CAACC,GADI;AAExB3B,EAAAA,IAAI,EAAE0B,6BAAS,CAACE,MAFQ;AAGxBzB,EAAAA,SAAS,EAAEuB,6BAAS,CAACG,MAHG;AAIxBzB,EAAAA,KAAK,EAAEsB,6BAAS,CAACE,MAAV,CAAiBE;AAJA,CAA1B;AAOA7B,aAAa,CAAC8B,YAAd,GAA6B;AAC3B7B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE;AAHgB,CAA7B;AAMA,mCAAe6B,UAAI,CAAC/B,aAAD,CAAnB;;;;"}

package/lib/cjs/components/Settings/ColorPicker.js

@@ -105,16 +105,16 @@ var ColorPicker = function ColorPicker(_ref) {
       "data-key": config.key,
       onClick: setPickerVisibility(!isPickerVisible),
       onKeyPress: function onKeyPress() {},
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "colorPicker-preview",
-        style: {
-          backgroundColor: colorValue
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(Textbox, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Textbox, {
         config: config,
         item: item,
         onItemChange: handleInputChange,
         value: colorValue
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "colorPicker-preview",
+        style: {
+          backgroundColor: colorValue
+        }
       })]
     }), isPickerVisible && /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: pickerRef,

package/lib/cjs/components/Settings/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/Settings/ColorPicker.js"],"sourcesContent":["import { useState, memo, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { SketchPicker } from 'react-color';\nimport withClickOutside from '../withClickOutside';\nimport { useEventListener } from '../../utils/hooks';\nimport Textbox from './Textbox';\n\nexport const COLOR_PRESETS = [\n  '#D0021B',\n  '#F5A623',\n  '#F8E71C',\n  '#8B572A',\n  '#7ED321',\n  '#417505',\n  '#BD10E0',\n  '#9013FE',\n  '#4A90E2',\n  '#50E3C2',\n  '#B8E986',\n  '#000000',\n  '#4A4A4A',\n  '#9B9B9B',\n  '#FFF',\n  '#FFFFFF',\n];\n\nexport const ColorPickerWithClickOutside = withClickOutside(SketchPicker);\n\nconst ColorPicker = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const { defaultValue = '#FFFFFF' } = config;\n  const [isPickerVisible, setIsPickerVisible] = useState(false);\n  const [colorValue, setColorValue] = useState(value || defaultValue);\n  const pickerRef = useRef(null);\n\n  const handleInputChange = (_item, _config) => {\n    const newValue = _config[Object.keys(_config)[0]];\n    setColorValue(newValue);\n    onItemChange(_item, _config);\n  };\n\n  const checkPickerVisibility = () => isPickerVisible && setIsPickerVisible(false);\n  useEventListener('resize', checkPickerVisibility);\n\n  const handleOnChange = ({ hex }) => {\n    if (hex !== colorValue) {\n      setColorValue(hex);\n    }\n  };\n\n  const handleColorPick = ({ hex }) => {\n    if (hex !== value) {\n      onItemChange(\n        { id: item.id },\n        { [config.key]: hex },\n      );\n    }\n  };\n\n  const setPickerVisibility = visibility => event => {\n    if (visibility && window.innerHeight - event.clientY < 327) {\n      setTimeout(() => {\n        if (\n          pickerRef.current\n          && pickerRef.current.firstChild\n          && pickerRef.current.firstChild.firstChild\n        ) {\n          pickerRef.current.firstChild.firstChild.scrollIntoView({\n            behavior: 'smooth',\n            block: 'end',\n          });\n        }\n      }, 0);\n    }\n    setIsPickerVisible(visibility);\n  };\n\n  return (\n    <>\n      <div\n        className={`colorPicker-wrapper p-relative d-flex a-center${\n          isPickerVisible ? ' pickerVisible' : ''\n        }`}\n        data-key={config.key}\n        onClick={setPickerVisibility(!isPickerVisible)}\n        onKeyPress={() => {}}\n      >\n        <div\n          className=\"colorPicker-preview\"\n          style={{ backgroundColor: colorValue }}\n        />\n        <Textbox\n          config={config}\n          item={item}\n          onItemChange={handleInputChange}\n          value={colorValue}\n        />\n      </div>\n      {isPickerVisible\n        && (\n          <div\n            ref={pickerRef}\n            onKeyDown={e => e.stopPropagation()}\n          >\n            <ColorPickerWithClickOutside\n              color={colorValue}\n              disableAlpha={true}\n              exceptionalClasses={[`colorPicker-wrapper[data-key='${config.key}']`]}\n              onChange={handleOnChange}\n              onChangeComplete={handleColorPick}\n              onClickOutside={setPickerVisibility(false)}\n              presetColors={COLOR_PRESETS}\n              withClickOutsideWrapperClass=\"colorPicker-holder\"\n            />\n          </div>\n        )}\n    </>\n  );\n};\n\nColorPicker.propTypes = {\n  config: PropTypes.shape({\n    defaultValue: PropTypes.string,\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nColorPicker.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(ColorPicker);\n"],"names":["COLOR_PRESETS","ColorPickerWithClickOutside","withClickOutside","SketchPicker","ColorPicker","config","item","onItemChange","value","defaultValue","useState","isPickerVisible","setIsPickerVisible","colorValue","setColorValue","pickerRef","useRef","handleInputChange","_item","_config","newValue","Object","keys","checkPickerVisibility","useEventListener","handleOnChange","hex","handleColorPick","id","key","setPickerVisibility","visibility","event","window","innerHeight","clientY","setTimeout","current","firstChild","scrollIntoView","behavior","block","_jsxs","_jsx","backgroundColor","e","stopPropagation","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOaA,aAAa,GAAG,CAC3B,SAD2B,EAE3B,SAF2B,EAG3B,SAH2B,EAI3B,SAJ2B,EAK3B,SAL2B,EAM3B,SAN2B,EAO3B,SAP2B,EAQ3B,SAR2B,EAS3B,SAT2B,EAU3B,SAV2B,EAW3B,SAX2B,EAY3B,SAZ2B,EAa3B,SAb2B,EAc3B,SAd2B,EAe3B,MAf2B,EAgB3B,SAhB2B;IAmBhBC,2BAA2B,GAAGC,gBAAgB,CAACC,uBAAD;;AAE3D,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAKd;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;AAAA,6BACiCH,MADjC,CACII,YADJ;AAAA,MACIA,YADJ,qCACmB,SADnB;;AAAA,kBAE0CC,cAAQ,CAAC,KAAD,CAFlD;AAAA;AAAA,MAEGC,eAFH;AAAA,MAEoBC,kBAFpB;;AAAA,mBAGgCF,cAAQ,CAACF,KAAK,IAAIC,YAAV,CAHxC;AAAA;AAAA,MAGGI,UAHH;AAAA,MAGeC,aAHf;;AAIJ,MAAMC,SAAS,GAAGC,YAAM,CAAC,IAAD,CAAxB;;AAEA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAQC,OAAR,EAAoB;AAC5C,QAAMC,QAAQ,GAAGD,OAAO,CAACE,MAAM,CAACC,IAAP,CAAYH,OAAZ,EAAqB,CAArB,CAAD,CAAxB;;AACAL,IAAAA,aAAa,CAACM,QAAD,CAAb;AACAb,IAAAA,YAAY,CAACW,KAAD,EAAQC,OAAR,CAAZ;AACD,GAJD;;AAMA,MAAMI,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,WAAMZ,eAAe,IAAIC,kBAAkB,CAAC,KAAD,CAA3C;AAAA,GAA9B;;AACAY,EAAAA,sBAAgB,CAAC,QAAD,EAAWD,qBAAX,CAAhB;;AAEA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,QAAa;AAAA,QAAVC,GAAU,SAAVA,GAAU;;AAClC,QAAIA,GAAG,KAAKb,UAAZ,EAAwB;AACtBC,MAAAA,aAAa,CAACY,GAAD,CAAb;AACD;AACF,GAJD;;AAMA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,QAAa;AAAA,QAAVD,GAAU,SAAVA,GAAU;;AACnC,QAAIA,GAAG,KAAKlB,KAAZ,EAAmB;AACjBD,MAAAA,YAAY,CACV;AAAEqB,QAAAA,EAAE,EAAEtB,IAAI,CAACsB;AAAX,OADU,sBAEPvB,MAAM,CAACwB,GAFA,EAEMH,GAFN,EAAZ;AAID;AACF,GAPD;;AASA,MAAMI,mBAAmB,GAAG,SAAtBA,mBAAsB,CAAAC,UAAU;AAAA,WAAI,UAAAC,KAAK,EAAI;AACjD,UAAID,UAAU,IAAIE,MAAM,CAACC,WAAP,GAAqBF,KAAK,CAACG,OAA3B,GAAqC,GAAvD,EAA4D;AAC1DC,QAAAA,UAAU,CAAC,YAAM;AACf,cACErB,SAAS,CAACsB,OAAV,IACGtB,SAAS,CAACsB,OAAV,CAAkBC,UADrB,IAEGvB,SAAS,CAACsB,OAAV,CAAkBC,UAAlB,CAA6BA,UAHlC,EAIE;AACAvB,YAAAA,SAAS,CAACsB,OAAV,CAAkBC,UAAlB,CAA6BA,UAA7B,CAAwCC,cAAxC,CAAuD;AACrDC,cAAAA,QAAQ,EAAE,QAD2C;AAErDC,cAAAA,KAAK,EAAE;AAF8C,aAAvD;AAID;AACF,SAXS,EAWP,CAXO,CAAV;AAYD;;AACD7B,MAAAA,kBAAkB,CAACmB,UAAD,CAAlB;AACD,KAhBqC;AAAA,GAAtC;;AAkBA,sBACEW;AAAA,4BACEA;AACE,MAAA,SAAS,0DACP/B,eAAe,GAAG,gBAAH,GAAsB,EAD9B,CADX;AAIE,kBAAUN,MAAM,CAACwB,GAJnB;AAKE,MAAA,OAAO,EAAEC,mBAAmB,CAAC,CAACnB,eAAF,CAL9B;AAME,MAAA,UAAU,EAAE,sBAAM,EANpB;AAAA,8BAQEgC;AACE,QAAA,SAAS,EAAC,qBADZ;AAEE,QAAA,KAAK,EAAE;AAAEC,UAAAA,eAAe,EAAE/B;AAAnB;AAFT,QARF,eAYE8B,eAAC,OAAD;AACE,QAAA,MAAM,EAAEtC,MADV;AAEE,QAAA,IAAI,EAAEC,IAFR;AAGE,QAAA,YAAY,EAAEW,iBAHhB;AAIE,QAAA,KAAK,EAAEJ;AAJT,QAZF;AAAA,MADF,EAoBGF,eAAe,iBAEZgC;AACE,MAAA,GAAG,EAAE5B,SADP;AAEE,MAAA,SAAS,EAAE,mBAAA8B,CAAC;AAAA,eAAIA,CAAC,CAACC,eAAF,EAAJ;AAAA,OAFd;AAAA,6BAIEH,eAAC,2BAAD;AACE,QAAA,KAAK,EAAE9B,UADT;AAEE,QAAA,YAAY,EAAE,IAFhB;AAGE,QAAA,kBAAkB,EAAE,yCAAkCR,MAAM,CAACwB,GAAzC,QAHtB;AAIE,QAAA,QAAQ,EAAEJ,cAJZ;AAKE,QAAA,gBAAgB,EAAEE,eALpB;AAME,QAAA,cAAc,EAAEG,mBAAmB,CAAC,KAAD,CANrC;AAOE,QAAA,YAAY,EAAE9B,aAPhB;AAQE,QAAA,4BAA4B,EAAC;AAR/B;AAJF,MAtBN;AAAA,IADF;AAyCD,CA9FD;;AAgGAI,WAAW,CAAC2C,SAAZ,GAAwB;AACtB1C,EAAAA,MAAM,EAAE2C,6BAAS,CAACC,KAAV,CAAgB;AACtBxC,IAAAA,YAAY,EAAEuC,6BAAS,CAACE,MADF;AAEtBrB,IAAAA,GAAG,EAAEmB,6BAAS,CAACE,MAFO;AAGtBC,IAAAA,OAAO,EAAEH,6BAAS,CAACI,OAAV,CAAkBJ,6BAAS,CAACK,GAA5B;AAHa,GAAhB,CADc;AAMtB/C,EAAAA,IAAI,EAAE0C,6BAAS,CAACC,KAAV,CAAgB;AACpBrB,IAAAA,EAAE,EAAEoB,6BAAS,CAACE;AADM,GAAhB,CANgB;AAStB3C,EAAAA,YAAY,EAAEyC,6BAAS,CAACM,IATF;AAUtB9C,EAAAA,KAAK,EAAEwC,6BAAS,CAACE;AAVK,CAAxB;AAaA9C,WAAW,CAACmD,YAAZ,GAA2B;AACzBlD,EAAAA,MAAM,EAAE,EADiB;AAEzBC,EAAAA,IAAI,EAAE,EAFmB;AAGzBC,EAAAA,YAAY,EAAE,wBAAM,EAHK;AAIzBC,EAAAA,KAAK,EAAE;AAJkB,CAA3B;AAOA,iCAAegD,UAAI,CAACpD,WAAD,CAAnB;;;;;;"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/Settings/ColorPicker.js"],"sourcesContent":["import { useState, memo, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { SketchPicker } from 'react-color';\nimport withClickOutside from '../withClickOutside';\nimport { useEventListener } from '../../utils/hooks';\nimport Textbox from './Textbox';\n\nexport const COLOR_PRESETS = [\n  '#D0021B',\n  '#F5A623',\n  '#F8E71C',\n  '#8B572A',\n  '#7ED321',\n  '#417505',\n  '#BD10E0',\n  '#9013FE',\n  '#4A90E2',\n  '#50E3C2',\n  '#B8E986',\n  '#000000',\n  '#4A4A4A',\n  '#9B9B9B',\n  '#FFF',\n  '#FFFFFF',\n];\n\nexport const ColorPickerWithClickOutside = withClickOutside(SketchPicker);\n\nconst ColorPicker = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const { defaultValue = '#FFFFFF' } = config;\n  const [isPickerVisible, setIsPickerVisible] = useState(false);\n  const [colorValue, setColorValue] = useState(value || defaultValue);\n  const pickerRef = useRef(null);\n\n  const handleInputChange = (_item, _config) => {\n    const newValue = _config[Object.keys(_config)[0]];\n    setColorValue(newValue);\n    onItemChange(_item, _config);\n  };\n\n  const checkPickerVisibility = () => isPickerVisible && setIsPickerVisible(false);\n  useEventListener('resize', checkPickerVisibility);\n\n  const handleOnChange = ({ hex }) => {\n    if (hex !== colorValue) {\n      setColorValue(hex);\n    }\n  };\n\n  const handleColorPick = ({ hex }) => {\n    if (hex !== value) {\n      onItemChange(\n        { id: item.id },\n        { [config.key]: hex },\n      );\n    }\n  };\n\n  const setPickerVisibility = visibility => event => {\n    if (visibility && window.innerHeight - event.clientY < 327) {\n      setTimeout(() => {\n        if (\n          pickerRef.current\n          && pickerRef.current.firstChild\n          && pickerRef.current.firstChild.firstChild\n        ) {\n          pickerRef.current.firstChild.firstChild.scrollIntoView({\n            behavior: 'smooth',\n            block: 'end',\n          });\n        }\n      }, 0);\n    }\n    setIsPickerVisible(visibility);\n  };\n\n  return (\n    <>\n      <div\n        className={`colorPicker-wrapper p-relative d-flex a-center${\n          isPickerVisible ? ' pickerVisible' : ''\n        }`}\n        data-key={config.key}\n        onClick={setPickerVisibility(!isPickerVisible)}\n        onKeyPress={() => {}}\n      >\n        <Textbox\n          config={config}\n          item={item}\n          onItemChange={handleInputChange}\n          value={colorValue}\n        />\n        <div\n          className=\"colorPicker-preview\"\n          style={{ backgroundColor: colorValue }}\n        />\n      </div>\n      {isPickerVisible\n        && (\n          <div\n            ref={pickerRef}\n            onKeyDown={e => e.stopPropagation()}\n          >\n            <ColorPickerWithClickOutside\n              color={colorValue}\n              disableAlpha={true}\n              exceptionalClasses={[`colorPicker-wrapper[data-key='${config.key}']`]}\n              onChange={handleOnChange}\n              onChangeComplete={handleColorPick}\n              onClickOutside={setPickerVisibility(false)}\n              presetColors={COLOR_PRESETS}\n              withClickOutsideWrapperClass=\"colorPicker-holder\"\n            />\n          </div>\n        )}\n    </>\n  );\n};\n\nColorPicker.propTypes = {\n  config: PropTypes.shape({\n    defaultValue: PropTypes.string,\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nColorPicker.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(ColorPicker);\n"],"names":["COLOR_PRESETS","ColorPickerWithClickOutside","withClickOutside","SketchPicker","ColorPicker","config","item","onItemChange","value","defaultValue","useState","isPickerVisible","setIsPickerVisible","colorValue","setColorValue","pickerRef","useRef","handleInputChange","_item","_config","newValue","Object","keys","checkPickerVisibility","useEventListener","handleOnChange","hex","handleColorPick","id","key","setPickerVisibility","visibility","event","window","innerHeight","clientY","setTimeout","current","firstChild","scrollIntoView","behavior","block","_jsxs","_jsx","backgroundColor","e","stopPropagation","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps","memo"],"mappings":"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"}

package/lib/cjs/components/Settings/ImagePicker/EnterURL.js

@@ -45,7 +45,10 @@ var EnterURL = function EnterURL(_ref) {
       ADD_LINK = _useTranslatedTexts.ADD_LINK;
 
   var onURLChange = function onURLChange(_, v) {
-    setIsErrored(false);
+    if (isErrored) {
+      setIsErrored(false);
+    }
+
     setUrl(v.url);
   };
 

package/lib/cjs/components/Settings/ImagePicker/EnterURL.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnterURL.js","sources":["../../../../../src/components/Settings/ImagePicker/EnterURL.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Textbox from '../Textbox';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst imageRegex = new RegExp('jpg|jpeg|png|gif', 'i');\n\nconst EnterURL = ({ item, onItemChange }) => {\n  const [url, setUrl] = useState('');\n  const [isErrored, setIsErrored] = useState(false);\n  const { ADD_LINK } = useTranslatedTexts();\n\n  const onURLChange = (_, v) => {\n    setIsErrored(false);\n    setUrl(v.url);\n  };\n\n  const onSubmitURL = () => {\n    setIsErrored(false);\n    const extension = url.split('.').pop();\n    if (imageRegex.test(extension)) {\n      setIsErrored(false);\n      onItemChange(\n        { id: item.id },\n        { url },\n      );\n    } else {\n      setIsErrored(true);\n    }\n  };\n\n  return (\n    <div className=\"fileUploader-url\">\n      <Textbox\n        config={{ key: 'url' }}\n        itemID={item.id}\n        onItemChange={onURLChange}\n        placeholder=\"https://\"\n        value={url}\n      />\n      <button\n        className=\"jfReportButton isSuccess\"\n        disabled={!url}\n        onClick={onSubmitURL}\n        type=\"button\"\n      >\n        {ADD_LINK}\n      </button>\n      {isErrored && (\n        <div\n          className=\"uploadInfo isError\"\n          style={{\n            color: '#ff0000',\n            marginTop: '10px',\n            textAlign: 'center',\n          }}\n        >\n          Only jpg, jpeg, png and gif images are supported\n        </div>\n      )}\n    </div>\n  );\n};\n\nEnterURL.propTypes = {\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nEnterURL.defaultProps = {\n  item: '',\n  onItemChange: () => {},\n};\n\nexport default EnterURL;\n"],"names":["imageRegex","RegExp","EnterURL","item","onItemChange","useState","url","setUrl","isErrored","setIsErrored","useTranslatedTexts","ADD_LINK","onURLChange","_","v","onSubmitURL","extension","split","pop","test","id","_jsxs","_jsx","key","color","marginTop","textAlign","propTypes","PropTypes","shape","string","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,UAAU,GAAG,IAAIC,MAAJ,CAAW,kBAAX,EAA+B,GAA/B,CAAnB;;IAEMC,QAAQ,GAAG,SAAXA,QAAW,OAA4B;AAAA,MAAzBC,IAAyB,QAAzBA,IAAyB;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;;AAAA,kBACrBC,cAAQ,CAAC,EAAD,CADa;AAAA;AAAA,MACpCC,GADoC;AAAA,MAC/BC,MAD+B;;AAAA,mBAETF,cAAQ,CAAC,KAAD,CAFC;AAAA;AAAA,MAEpCG,SAFoC;AAAA,MAEzBC,YAFyB;;AAAA,4BAGtBC,wBAAkB,EAHI;AAAA,MAGnCC,QAHmC,uBAGnCA,QAHmC;;AAK3C,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAIC,CAAJ,EAAU;AAC5BL,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACAF,IAAAA,MAAM,CAACO,CAAC,CAACR,GAAH,CAAN;AACD,GAHD;;AAKA,MAAMS,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBN,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACA,QAAMO,SAAS,GAAGV,GAAG,CAACW,KAAJ,CAAU,GAAV,EAAeC,GAAf,EAAlB;;AACA,QAAIlB,UAAU,CAACmB,IAAX,CAAgBH,SAAhB,CAAJ,EAAgC;AAC9BP,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACAL,MAAAA,YAAY,CACV;AAAEgB,QAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,OADU,EAEV;AAAEd,QAAAA,GAAG,EAAHA;AAAF,OAFU,CAAZ;AAID,KAND,MAMO;AACLG,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACD;AACF,GAZD;;AAcA,sBACEY;AAAK,IAAA,SAAS,EAAC,kBAAf;AAAA,4BACEC,eAAC,OAAD;AACE,MAAA,MAAM,EAAE;AAAEC,QAAAA,GAAG,EAAE;AAAP,OADV;AAEE,MAAA,MAAM,EAAEpB,IAAI,CAACiB,EAFf;AAGE,MAAA,YAAY,EAAER,WAHhB;AAIE,MAAA,WAAW,EAAC,UAJd;AAKE,MAAA,KAAK,EAAEN;AALT,MADF,eAQEgB;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,QAAQ,EAAE,CAAChB,GAFb;AAGE,MAAA,OAAO,EAAES,WAHX;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,gBAMGJ;AANH,MARF,EAgBGH,SAAS,iBACRc;AACE,MAAA,SAAS,EAAC,oBADZ;AAEE,MAAA,KAAK,EAAE;AACLE,QAAAA,KAAK,EAAE,SADF;AAELC,QAAAA,SAAS,EAAE,MAFN;AAGLC,QAAAA,SAAS,EAAE;AAHN,OAFT;AAAA;AAAA,MAjBJ;AAAA,IADF;AA+BD;;AAEDxB,QAAQ,CAACyB,SAAT,GAAqB;AACnBxB,EAAAA,IAAI,EAAEyB,6BAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,EAAE,EAAEQ,6BAAS,CAACE;AADM,GAAhB,CADa;AAInB1B,EAAAA,YAAY,EAAEwB,6BAAS,CAACG;AAJL,CAArB;AAOA7B,QAAQ,CAAC8B,YAAT,GAAwB;AACtB7B,EAAAA,IAAI,EAAE,EADgB;AAEtBC,EAAAA,YAAY,EAAE,wBAAM;AAFE,CAAxB;;;;"}
+{"version":3,"file":"EnterURL.js","sources":["../../../../../src/components/Settings/ImagePicker/EnterURL.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Textbox from '../Textbox';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst imageRegex = new RegExp('jpg|jpeg|png|gif', 'i');\n\nconst EnterURL = ({ item, onItemChange }) => {\n  const [url, setUrl] = useState('');\n  const [isErrored, setIsErrored] = useState(false);\n  const { ADD_LINK } = useTranslatedTexts();\n\n  const onURLChange = (_, v) => {\n    if (isErrored) {\n      setIsErrored(false);\n    }\n    setUrl(v.url);\n  };\n\n  const onSubmitURL = () => {\n    setIsErrored(false);\n    const extension = url.split('.').pop();\n    if (imageRegex.test(extension)) {\n      setIsErrored(false);\n      onItemChange(\n        { id: item.id },\n        { url },\n      );\n    } else {\n      setIsErrored(true);\n    }\n  };\n\n  return (\n    <div className=\"fileUploader-url\">\n      <Textbox\n        config={{ key: 'url' }}\n        itemID={item.id}\n        onItemChange={onURLChange}\n        placeholder=\"https://\"\n        value={url}\n      />\n      <button\n        className=\"jfReportButton isSuccess\"\n        disabled={!url}\n        onClick={onSubmitURL}\n        type=\"button\"\n      >\n        {ADD_LINK}\n      </button>\n      {isErrored && (\n        <div\n          className=\"uploadInfo isError\"\n          style={{\n            color: '#ff0000',\n            marginTop: '10px',\n            textAlign: 'center',\n          }}\n        >\n          Only jpg, jpeg, png and gif images are supported\n        </div>\n      )}\n    </div>\n  );\n};\n\nEnterURL.propTypes = {\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nEnterURL.defaultProps = {\n  item: '',\n  onItemChange: () => {},\n};\n\nexport default EnterURL;\n"],"names":["imageRegex","RegExp","EnterURL","item","onItemChange","useState","url","setUrl","isErrored","setIsErrored","useTranslatedTexts","ADD_LINK","onURLChange","_","v","onSubmitURL","extension","split","pop","test","id","_jsxs","_jsx","key","color","marginTop","textAlign","propTypes","PropTypes","shape","string","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,UAAU,GAAG,IAAIC,MAAJ,CAAW,kBAAX,EAA+B,GAA/B,CAAnB;;IAEMC,QAAQ,GAAG,SAAXA,QAAW,OAA4B;AAAA,MAAzBC,IAAyB,QAAzBA,IAAyB;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;;AAAA,kBACrBC,cAAQ,CAAC,EAAD,CADa;AAAA;AAAA,MACpCC,GADoC;AAAA,MAC/BC,MAD+B;;AAAA,mBAETF,cAAQ,CAAC,KAAD,CAFC;AAAA;AAAA,MAEpCG,SAFoC;AAAA,MAEzBC,YAFyB;;AAAA,4BAGtBC,wBAAkB,EAHI;AAAA,MAGnCC,QAHmC,uBAGnCA,QAHmC;;AAK3C,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAIC,CAAJ,EAAU;AAC5B,QAAIN,SAAJ,EAAe;AACbC,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACD;;AACDF,IAAAA,MAAM,CAACO,CAAC,CAACR,GAAH,CAAN;AACD,GALD;;AAOA,MAAMS,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBN,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACA,QAAMO,SAAS,GAAGV,GAAG,CAACW,KAAJ,CAAU,GAAV,EAAeC,GAAf,EAAlB;;AACA,QAAIlB,UAAU,CAACmB,IAAX,CAAgBH,SAAhB,CAAJ,EAAgC;AAC9BP,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACAL,MAAAA,YAAY,CACV;AAAEgB,QAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,OADU,EAEV;AAAEd,QAAAA,GAAG,EAAHA;AAAF,OAFU,CAAZ;AAID,KAND,MAMO;AACLG,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACD;AACF,GAZD;;AAcA,sBACEY;AAAK,IAAA,SAAS,EAAC,kBAAf;AAAA,4BACEC,eAAC,OAAD;AACE,MAAA,MAAM,EAAE;AAAEC,QAAAA,GAAG,EAAE;AAAP,OADV;AAEE,MAAA,MAAM,EAAEpB,IAAI,CAACiB,EAFf;AAGE,MAAA,YAAY,EAAER,WAHhB;AAIE,MAAA,WAAW,EAAC,UAJd;AAKE,MAAA,KAAK,EAAEN;AALT,MADF,eAQEgB;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,QAAQ,EAAE,CAAChB,GAFb;AAGE,MAAA,OAAO,EAAES,WAHX;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,gBAMGJ;AANH,MARF,EAgBGH,SAAS,iBACRc;AACE,MAAA,SAAS,EAAC,oBADZ;AAEE,MAAA,KAAK,EAAE;AACLE,QAAAA,KAAK,EAAE,SADF;AAELC,QAAAA,SAAS,EAAE,MAFN;AAGLC,QAAAA,SAAS,EAAE;AAHN,OAFT;AAAA;AAAA,MAjBJ;AAAA,IADF;AA+BD;;AAEDxB,QAAQ,CAACyB,SAAT,GAAqB;AACnBxB,EAAAA,IAAI,EAAEyB,6BAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,EAAE,EAAEQ,6BAAS,CAACE;AADM,GAAhB,CADa;AAInB1B,EAAAA,YAAY,EAAEwB,6BAAS,CAACG;AAJL,CAArB;AAOA7B,QAAQ,CAAC8B,YAAT,GAAwB;AACtB7B,EAAAA,IAAI,EAAE,EADgB;AAEtBC,EAAAA,YAAY,EAAE,wBAAM;AAFE,CAAxB;;;;"}

package/lib/cjs/components/Settings/ImagePicker/ImageThumbnailWithDelete.js

@@ -15,7 +15,7 @@ var ImageSettings = function ImageSettings(_ref) {
       item = _ref.item,
       onItemChange = _ref.onItemChange;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "imageUpload-wrapper d-flex a-center",
+    className: "imageUpload-wrapper d-flex",
     children: [/*#__PURE__*/jsxRuntime.jsx("img", {
       alt: "Thumbnail",
       src: item.url

package/lib/cjs/components/Settings/ImagePicker/ImageThumbnailWithDelete.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageThumbnailWithDelete.js","sources":["../../../../../src/components/Settings/ImagePicker/ImageThumbnailWithDelete.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {\n  getFileName,\n} from '../../../utils/functions';\n\nconst ImageSettings = ({\n  config,\n  item,\n  onItemChange,\n}) => {\n  return (\n    <div className=\"imageUpload-wrapper d-flex a-center\">\n      <img\n        alt=\"Thumbnail\"\n        src={item.url}\n      />\n      <div className=\"imageUpload-info\">\n        <span>{getFileName(item.url)}</span>\n        <button\n          className=\"isDanger\"\n          onClick={() => onItemChange(\n            { id: item.id },\n            { [config.key]: '' },\n          )}\n          type=\"button\"\n        >\n          Remove Image\n        </button>\n      </div>\n    </div>\n  );\n};\n\nImageSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    url: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nImageSettings.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default ImageSettings;\n"],"names":["ImageSettings","config","item","onItemChange","_jsxs","_jsx","url","getFileName","id","key","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps"],"mappings":";;;;;;;;;;;;IAKMA,aAAa,GAAG,SAAhBA,aAAgB,OAIhB;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,YACI,QADJA,YACI;AACJ,sBACEC;AAAK,IAAA,SAAS,EAAC,qCAAf;AAAA,4BACEC;AACE,MAAA,GAAG,EAAC,WADN;AAEE,MAAA,GAAG,EAAEH,IAAI,CAACI;AAFZ,MADF,eAKEF;AAAK,MAAA,SAAS,EAAC,kBAAf;AAAA,8BACEC;AAAA,kBAAOE,qBAAW,CAACL,IAAI,CAACI,GAAN;AAAlB,QADF,eAEED;AACE,QAAA,SAAS,EAAC,UADZ;AAEE,QAAA,OAAO,EAAE;AAAA,iBAAMF,YAAY,CACzB;AAAEK,YAAAA,EAAE,EAAEN,IAAI,CAACM;AAAX,WADyB,sBAEtBP,MAAM,CAACQ,GAFe,EAET,EAFS,EAAlB;AAAA,SAFX;AAME,QAAA,IAAI,EAAC,QANP;AAAA;AAAA,QAFF;AAAA,MALF;AAAA,IADF;AAqBD;;AAEDT,aAAa,CAACU,SAAd,GAA0B;AACxBT,EAAAA,MAAM,EAAEU,6BAAS,CAACC,KAAV,CAAgB;AACtBH,IAAAA,GAAG,EAAEE,6BAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,6BAAS,CAACI,OAAV,CAAkBJ,6BAAS,CAACK,GAA5B;AAFa,GAAhB,CADgB;AAKxBd,EAAAA,IAAI,EAAES,6BAAS,CAACC,KAAV,CAAgB;AACpBJ,IAAAA,EAAE,EAAEG,6BAAS,CAACE,MADM;AAEpBP,IAAAA,GAAG,EAAEK,6BAAS,CAACE;AAFK,GAAhB,CALkB;AASxBV,EAAAA,YAAY,EAAEQ,6BAAS,CAACM;AATA,CAA1B;AAYAjB,aAAa,CAACkB,YAAd,GAA6B;AAC3BjB,EAAAA,MAAM,EAAE,EADmB;AAE3BC,EAAAA,IAAI,EAAE,EAFqB;AAG3BC,EAAAA,YAAY,EAAE,wBAAM;AAHO,CAA7B;;;;"}
+{"version":3,"file":"ImageThumbnailWithDelete.js","sources":["../../../../../src/components/Settings/ImagePicker/ImageThumbnailWithDelete.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {\n  getFileName,\n} from '../../../utils/functions';\n\nconst ImageSettings = ({\n  config,\n  item,\n  onItemChange,\n}) => {\n  return (\n    <div className=\"imageUpload-wrapper d-flex\">\n      <img\n        alt=\"Thumbnail\"\n        src={item.url}\n      />\n      <div className=\"imageUpload-info\">\n        <span>{getFileName(item.url)}</span>\n        <button\n          className=\"isDanger\"\n          onClick={() => onItemChange(\n            { id: item.id },\n            { [config.key]: '' },\n          )}\n          type=\"button\"\n        >\n          Remove Image\n        </button>\n      </div>\n    </div>\n  );\n};\n\nImageSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    url: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nImageSettings.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default ImageSettings;\n"],"names":["ImageSettings","config","item","onItemChange","_jsxs","_jsx","url","getFileName","id","key","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps"],"mappings":";;;;;;;;;;;;IAKMA,aAAa,GAAG,SAAhBA,aAAgB,OAIhB;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,YACI,QADJA,YACI;AACJ,sBACEC;AAAK,IAAA,SAAS,EAAC,4BAAf;AAAA,4BACEC;AACE,MAAA,GAAG,EAAC,WADN;AAEE,MAAA,GAAG,EAAEH,IAAI,CAACI;AAFZ,MADF,eAKEF;AAAK,MAAA,SAAS,EAAC,kBAAf;AAAA,8BACEC;AAAA,kBAAOE,qBAAW,CAACL,IAAI,CAACI,GAAN;AAAlB,QADF,eAEED;AACE,QAAA,SAAS,EAAC,UADZ;AAEE,QAAA,OAAO,EAAE;AAAA,iBAAMF,YAAY,CACzB;AAAEK,YAAAA,EAAE,EAAEN,IAAI,CAACM;AAAX,WADyB,sBAEtBP,MAAM,CAACQ,GAFe,EAET,EAFS,EAAlB;AAAA,SAFX;AAME,QAAA,IAAI,EAAC,QANP;AAAA;AAAA,QAFF;AAAA,MALF;AAAA,IADF;AAqBD;;AAEDT,aAAa,CAACU,SAAd,GAA0B;AACxBT,EAAAA,MAAM,EAAEU,6BAAS,CAACC,KAAV,CAAgB;AACtBH,IAAAA,GAAG,EAAEE,6BAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,6BAAS,CAACI,OAAV,CAAkBJ,6BAAS,CAACK,GAA5B;AAFa,GAAhB,CADgB;AAKxBd,EAAAA,IAAI,EAAES,6BAAS,CAACC,KAAV,CAAgB;AACpBJ,IAAAA,EAAE,EAAEG,6BAAS,CAACE,MADM;AAEpBP,IAAAA,GAAG,EAAEK,6BAAS,CAACE;AAFK,GAAhB,CALkB;AASxBV,EAAAA,YAAY,EAAEQ,6BAAS,CAACM;AATA,CAA1B;AAYAjB,aAAa,CAACkB,YAAd,GAA6B;AAC3BjB,EAAAA,MAAM,EAAE,EADmB;AAE3BC,EAAAA,IAAI,EAAE,EAFqB;AAG3BC,EAAAA,YAAY,EAAE,wBAAM;AAHO,CAA7B;;;;"}

package/lib/cjs/components/Settings/SelectBox.js

@@ -34,7 +34,7 @@ var SelectBox = function SelectBox(_ref) {
 
   var options = config.options;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "toolSection-list withIcons",
+    className: "toolSection-list withIcons bigList forShapes d-flex dir-row f-wrap",
     children: options.map(function (option) {
       var OptionIcon = option.icon ? option.icon : icons[option.name] || shapes;
       return /*#__PURE__*/jsxRuntime.jsxs("button", {

package/lib/cjs/components/Settings/SelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBox.js","sources":["../../../../src/components/Settings/SelectBox.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport * as icons from '../../utils/icons';\n\nconst SelectBox = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const handleSelection = newValue => () => {\n    if (value !== newValue) {\n      onItemChange(\n        { id: item.id },\n        { [config.key]: newValue },\n      );\n    }\n  };\n  const { options } = config;\n\n  return (\n    <div className=\"toolSection-list withIcons\">\n      {options.map(option => {\n        const OptionIcon = option.icon\n          ? option.icon\n          : icons[option.name] || icons.shapes;\n\n        return (\n          <button\n            key={option.name}\n            className={classNames(\n              'toolSection-listItem',\n              'd-flex a-center',\n              'f-width',\n              { isSelected: option.name === value },\n            )}\n            onClick={handleSelection(option.name)}\n            type=\"button\"\n          >\n            <span className=\"d-flex j-center a-center\">\n              <OptionIcon className=\"jfReportSVG\" />\n            </span>\n            <span className=\"toolSection-listItemName d-flex j-between a-center\">\n              <span>{option.title}</span>\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nSelectBox.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nSelectBox.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(SelectBox);\n"],"names":["SelectBox","config","item","onItemChange","value","handleSelection","newValue","id","key","options","_jsx","map","option","OptionIcon","icon","icons","name","_jsxs","classNames","isSelected","title","propTypes","PropTypes","shape","string","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAKZ;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,QAAQ;AAAA,WAAI,YAAM;AACxC,UAAIF,KAAK,KAAKE,QAAd,EAAwB;AACtBH,QAAAA,YAAY,CACV;AAAEI,UAAAA,EAAE,EAAEL,IAAI,CAACK;AAAX,SADU,sBAEPN,MAAM,CAACO,GAFA,EAEMF,QAFN,EAAZ;AAID;AACF,KAP+B;AAAA,GAAhC;;AADI,MASIG,OATJ,GASgBR,MAThB,CASIQ,OATJ;AAWJ,sBACEC;AAAK,IAAA,SAAS,EAAC,4BAAf;AAAA,cACGD,OAAO,CAACE,GAAR,CAAY,UAAAC,MAAM,EAAI;AACrB,UAAMC,UAAU,GAAGD,MAAM,CAACE,IAAP,GACfF,MAAM,CAACE,IADQ,GAEfC,KAAK,CAACH,MAAM,CAACI,IAAR,CAAL,IAAsBD,MAF1B;AAIA,0BACEE;AAEE,QAAA,SAAS,EAAEC,8BAAU,CACnB,sBADmB,EAEnB,iBAFmB,EAGnB,SAHmB,EAInB;AAAEC,UAAAA,UAAU,EAAEP,MAAM,CAACI,IAAP,KAAgBZ;AAA9B,SAJmB,CAFvB;AAQE,QAAA,OAAO,EAAEC,eAAe,CAACO,MAAM,CAACI,IAAR,CAR1B;AASE,QAAA,IAAI,EAAC,QATP;AAAA,gCAWEN;AAAM,UAAA,SAAS,EAAC,0BAAhB;AAAA,iCACEA,eAAC,UAAD;AAAY,YAAA,SAAS,EAAC;AAAtB;AADF,UAXF,eAcEA;AAAM,UAAA,SAAS,EAAC,oDAAhB;AAAA,iCACEA;AAAA,sBAAOE,MAAM,CAACQ;AAAd;AADF,UAdF;AAAA,SACOR,MAAM,CAACI,IADd,CADF;AAoBD,KAzBA;AADH,IADF;AA8BD,CA9CD;;AAgDAhB,SAAS,CAACqB,SAAV,GAAsB;AACpBpB,EAAAA,MAAM,EAAEqB,6BAAS,CAACC,KAAV,CAAgB;AACtBf,IAAAA,GAAG,EAAEc,6BAAS,CAACE,MADO;AAEtBf,IAAAA,OAAO,EAAEa,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACI,GAA5B;AAFa,GAAhB,CADY;AAKpBxB,EAAAA,IAAI,EAAEoB,6BAAS,CAACC,KAAV,CAAgB;AACpBhB,IAAAA,EAAE,EAAEe,6BAAS,CAACE;AADM,GAAhB,CALc;AAQpBrB,EAAAA,YAAY,EAAEmB,6BAAS,CAACK,IARJ;AASpBvB,EAAAA,KAAK,EAAEkB,6BAAS,CAACE;AATG,CAAtB;AAYAxB,SAAS,CAAC4B,YAAV,GAAyB;AACvB3B,EAAAA,MAAM,EAAE,EADe;AAEvBC,EAAAA,IAAI,EAAE,EAFiB;AAGvBC,EAAAA,YAAY,EAAE,wBAAM,EAHG;AAIvBC,EAAAA,KAAK,EAAE;AAJgB,CAAzB;AAOA,+BAAeyB,UAAI,CAAC7B,SAAD,CAAnB;;;;"}
+{"version":3,"file":"SelectBox.js","sources":["../../../../src/components/Settings/SelectBox.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport * as icons from '../../utils/icons';\n\nconst SelectBox = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const handleSelection = newValue => () => {\n    if (value !== newValue) {\n      onItemChange(\n        { id: item.id },\n        { [config.key]: newValue },\n      );\n    }\n  };\n  const { options } = config;\n\n  return (\n    <div className=\"toolSection-list withIcons bigList forShapes d-flex dir-row f-wrap\">\n      {options.map(option => {\n        const OptionIcon = option.icon\n          ? option.icon\n          : icons[option.name] || icons.shapes;\n\n        return (\n          <button\n            key={option.name}\n            className={classNames(\n              'toolSection-listItem',\n              'd-flex a-center',\n              'f-width',\n              { isSelected: option.name === value },\n            )}\n            onClick={handleSelection(option.name)}\n            type=\"button\"\n          >\n            <span className=\"d-flex j-center a-center\">\n              <OptionIcon className=\"jfReportSVG\" />\n            </span>\n            <span className=\"toolSection-listItemName d-flex j-between a-center\">\n              <span>{option.title}</span>\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nSelectBox.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nSelectBox.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(SelectBox);\n"],"names":["SelectBox","config","item","onItemChange","value","handleSelection","newValue","id","key","options","_jsx","map","option","OptionIcon","icon","icons","name","_jsxs","classNames","isSelected","title","propTypes","PropTypes","shape","string","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAKZ;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,QAAQ;AAAA,WAAI,YAAM;AACxC,UAAIF,KAAK,KAAKE,QAAd,EAAwB;AACtBH,QAAAA,YAAY,CACV;AAAEI,UAAAA,EAAE,EAAEL,IAAI,CAACK;AAAX,SADU,sBAEPN,MAAM,CAACO,GAFA,EAEMF,QAFN,EAAZ;AAID;AACF,KAP+B;AAAA,GAAhC;;AADI,MASIG,OATJ,GASgBR,MAThB,CASIQ,OATJ;AAWJ,sBACEC;AAAK,IAAA,SAAS,EAAC,oEAAf;AAAA,cACGD,OAAO,CAACE,GAAR,CAAY,UAAAC,MAAM,EAAI;AACrB,UAAMC,UAAU,GAAGD,MAAM,CAACE,IAAP,GACfF,MAAM,CAACE,IADQ,GAEfC,KAAK,CAACH,MAAM,CAACI,IAAR,CAAL,IAAsBD,MAF1B;AAIA,0BACEE;AAEE,QAAA,SAAS,EAAEC,8BAAU,CACnB,sBADmB,EAEnB,iBAFmB,EAGnB,SAHmB,EAInB;AAAEC,UAAAA,UAAU,EAAEP,MAAM,CAACI,IAAP,KAAgBZ;AAA9B,SAJmB,CAFvB;AAQE,QAAA,OAAO,EAAEC,eAAe,CAACO,MAAM,CAACI,IAAR,CAR1B;AASE,QAAA,IAAI,EAAC,QATP;AAAA,gCAWEN;AAAM,UAAA,SAAS,EAAC,0BAAhB;AAAA,iCACEA,eAAC,UAAD;AAAY,YAAA,SAAS,EAAC;AAAtB;AADF,UAXF,eAcEA;AAAM,UAAA,SAAS,EAAC,oDAAhB;AAAA,iCACEA;AAAA,sBAAOE,MAAM,CAACQ;AAAd;AADF,UAdF;AAAA,SACOR,MAAM,CAACI,IADd,CADF;AAoBD,KAzBA;AADH,IADF;AA8BD,CA9CD;;AAgDAhB,SAAS,CAACqB,SAAV,GAAsB;AACpBpB,EAAAA,MAAM,EAAEqB,6BAAS,CAACC,KAAV,CAAgB;AACtBf,IAAAA,GAAG,EAAEc,6BAAS,CAACE,MADO;AAEtBf,IAAAA,OAAO,EAAEa,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACI,GAA5B;AAFa,GAAhB,CADY;AAKpBxB,EAAAA,IAAI,EAAEoB,6BAAS,CAACC,KAAV,CAAgB;AACpBhB,IAAAA,EAAE,EAAEe,6BAAS,CAACE;AADM,GAAhB,CALc;AAQpBrB,EAAAA,YAAY,EAAEmB,6BAAS,CAACK,IARJ;AASpBvB,EAAAA,KAAK,EAAEkB,6BAAS,CAACE;AATG,CAAtB;AAYAxB,SAAS,CAAC4B,YAAV,GAAyB;AACvB3B,EAAAA,MAAM,EAAE,EADe;AAEvBC,EAAAA,IAAI,EAAE,EAFiB;AAGvBC,EAAAA,YAAY,EAAE,wBAAM,EAHG;AAIvBC,EAAAA,KAAK,EAAE;AAJgB,CAAzB;AAOA,+BAAeyB,UAAI,CAAC7B,SAAD,CAAnB;;;;"}

package/lib/cjs/components/Settings/SizeSettings.js

@@ -232,7 +232,7 @@ var SizeSettings = function SizeSettings(_ref) {
     }), (item.url || item.shapeType) && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "toolSection-wrapper",
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
-        className: "jfReportButton isOutline forDimension f-width",
+        className: "jfReportButton forOptions forDimension f-width",
         onClick: setOriginalSizes,
         type: "button",
         children: ORIGINAL_SIZE

package/lib/cjs/components/Settings/SizeSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"SizeSettings.js","sources":["../../../../src/components/Settings/SizeSettings.js"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { getImageSizes, roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\nimport * as icons from '../../utils/icons';\n\nconst SizeSettings = ({ item, onItemChange }) => {\n  const initialAspect = useRef();\n  const [stackSize, setStackSize] = useState({ height: item.height, width: item.width });\n  const [aspectLock, setAspectLock] = useState(true);\n  const imageRefForMeta = useRef(null);\n  const { HEIGHT, ORIGINAL_SIZE, WIDTH } = useTranslatedTexts();\n\n  useEffect(() => {\n    setStackSize({ height: item.height, width: item.width });\n  }, [item.height, item.width]);\n\n  useEffect(() => {\n    if (aspectLock) {\n      initialAspect.current = stackSize.width / stackSize.height;\n    }\n  }, [aspectLock]);\n\n  const sizeSetter = ({ height, width }) => {\n    const sizes = { height: Number(height), width: Number(width) };\n    setStackSize(sizes);\n    onItemChange({ id: item.id }, sizes);\n  };\n\n  const sizeSetterHelper = ({ height, width }) => {\n    let exactWidth = Number(width);\n    let exactHeight = Number(height);\n    if (aspectLock) {\n      if (item.width !== stackSize.width) {\n        exactHeight = stackSize.width / initialAspect.current;\n      } else {\n        exactWidth = stackSize.height * initialAspect.current;\n      }\n    }\n\n    sizeSetter({ height: Math.max(exactHeight, 5), width: Math.max(exactWidth, 5) });\n  };\n\n  const handleBlur = () => {\n    sizeSetterHelper(stackSize);\n  };\n\n  const handleChangeSize = (type = 'width', prevValue) => e => {\n    if (e.stopPropagation) e.stopPropagation();\n\n    const { value } = e.target;\n    if (Number(value) !== Number(prevValue)) {\n      setStackSize({ ...stackSize, [type]: Number(value) || 0 });\n    }\n  };\n\n  const setOriginalSizes = () => {\n    // For Shapes\n    if (item.shapeType) {\n      return sizeSetter({\n        height: 200,\n        width: 200,\n      });\n    }\n    // For Images\n    if (!imageRefForMeta.current) {\n      getImageSizes(item.url, (imageWidth, imageHeight) => {\n        imageRefForMeta.current = {\n          imageHeight,\n          imageWidth,\n        };\n        sizeSetter({\n          height: imageHeight,\n          width: imageWidth,\n        });\n      });\n    } else {\n      const { imageHeight, imageWidth } = imageRefForMeta.current;\n      sizeSetter({\n        height: imageHeight,\n        width: imageWidth,\n      });\n    }\n  };\n\n  const handleKeyDown = (type, currValue) => event => {\n    event.stopPropagation();\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      const ref = event.shiftKey ? 10 : 1;\n      const diff = event.key === 'ArrowUp' ? ref : -ref;\n      handleChangeSize(type, currValue)({\n        target: {\n          value: Number(currValue) + diff,\n        },\n      });\n    } else if (event.key === 'Tab') {\n      event.preventDefault();\n      const input = type === 'width' ? 'height-input' : 'width-input';\n      document.getElementById(input).focus();\n      document.getElementById(input).select();\n    } else if (event.key === 'Enter') {\n      sizeSetterHelper(stackSize);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('width', stackSize.width)}\n              onKeyDown={handleKeyDown('width', stackSize.width)}\n              pattern=\"[0-9]*\"\n              tabIndex={0}\n              value={roundForDecimalPart(stackSize.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('height', stackSize.height)}\n              onKeyDown={handleKeyDown('height', stackSize.height)}\n              pattern=\"[0-9]*\"\n              value={roundForDecimalPart(stackSize.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n      {(item.url || item.shapeType)\n        && (\n          <div className=\"toolSection-wrapper\">\n            <button\n              className=\"jfReportButton isOutline forDimension f-width\"\n              onClick={setOriginalSizes}\n              type=\"button\"\n            >\n              {ORIGINAL_SIZE}\n            </button>\n          </div>\n        )}\n    </>\n  );\n};\n\nSizeSettings.propTypes = {\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nSizeSettings.defaultProps = {\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default SizeSettings;\n"],"names":["SizeSettings","item","onItemChange","initialAspect","useRef","useState","height","width","stackSize","setStackSize","aspectLock","setAspectLock","imageRefForMeta","useTranslatedTexts","HEIGHT","ORIGINAL_SIZE","WIDTH","useEffect","current","sizeSetter","sizes","Number","id","sizeSetterHelper","exactWidth","exactHeight","Math","max","handleBlur","handleChangeSize","type","prevValue","e","stopPropagation","value","target","setOriginalSizes","shapeType","getImageSizes","url","imageWidth","imageHeight","handleKeyDown","currValue","event","key","preventDefault","ref","shiftKey","diff","input","document","getElementById","focus","select","_jsxs","_jsx","roundForDecimalPart","icons.lock","icons.unlock","propTypes","PropTypes","shape","number","string","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"SizeSettings.js","sources":["../../../../src/components/Settings/SizeSettings.js"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { getImageSizes, roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\nimport * as icons from '../../utils/icons';\n\nconst SizeSettings = ({ item, onItemChange }) => {\n  const initialAspect = useRef();\n  const [stackSize, setStackSize] = useState({ height: item.height, width: item.width });\n  const [aspectLock, setAspectLock] = useState(true);\n  const imageRefForMeta = useRef(null);\n  const { HEIGHT, ORIGINAL_SIZE, WIDTH } = useTranslatedTexts();\n\n  useEffect(() => {\n    setStackSize({ height: item.height, width: item.width });\n  }, [item.height, item.width]);\n\n  useEffect(() => {\n    if (aspectLock) {\n      initialAspect.current = stackSize.width / stackSize.height;\n    }\n  }, [aspectLock]);\n\n  const sizeSetter = ({ height, width }) => {\n    const sizes = { height: Number(height), width: Number(width) };\n    setStackSize(sizes);\n    onItemChange({ id: item.id }, sizes);\n  };\n\n  const sizeSetterHelper = ({ height, width }) => {\n    let exactWidth = Number(width);\n    let exactHeight = Number(height);\n    if (aspectLock) {\n      if (item.width !== stackSize.width) {\n        exactHeight = stackSize.width / initialAspect.current;\n      } else {\n        exactWidth = stackSize.height * initialAspect.current;\n      }\n    }\n\n    sizeSetter({ height: Math.max(exactHeight, 5), width: Math.max(exactWidth, 5) });\n  };\n\n  const handleBlur = () => {\n    sizeSetterHelper(stackSize);\n  };\n\n  const handleChangeSize = (type = 'width', prevValue) => e => {\n    if (e.stopPropagation) e.stopPropagation();\n\n    const { value } = e.target;\n    if (Number(value) !== Number(prevValue)) {\n      setStackSize({ ...stackSize, [type]: Number(value) || 0 });\n    }\n  };\n\n  const setOriginalSizes = () => {\n    // For Shapes\n    if (item.shapeType) {\n      return sizeSetter({\n        height: 200,\n        width: 200,\n      });\n    }\n    // For Images\n    if (!imageRefForMeta.current) {\n      getImageSizes(item.url, (imageWidth, imageHeight) => {\n        imageRefForMeta.current = {\n          imageHeight,\n          imageWidth,\n        };\n        sizeSetter({\n          height: imageHeight,\n          width: imageWidth,\n        });\n      });\n    } else {\n      const { imageHeight, imageWidth } = imageRefForMeta.current;\n      sizeSetter({\n        height: imageHeight,\n        width: imageWidth,\n      });\n    }\n  };\n\n  const handleKeyDown = (type, currValue) => event => {\n    event.stopPropagation();\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      const ref = event.shiftKey ? 10 : 1;\n      const diff = event.key === 'ArrowUp' ? ref : -ref;\n      handleChangeSize(type, currValue)({\n        target: {\n          value: Number(currValue) + diff,\n        },\n      });\n    } else if (event.key === 'Tab') {\n      event.preventDefault();\n      const input = type === 'width' ? 'height-input' : 'width-input';\n      document.getElementById(input).focus();\n      document.getElementById(input).select();\n    } else if (event.key === 'Enter') {\n      sizeSetterHelper(stackSize);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('width', stackSize.width)}\n              onKeyDown={handleKeyDown('width', stackSize.width)}\n              pattern=\"[0-9]*\"\n              tabIndex={0}\n              value={roundForDecimalPart(stackSize.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              onBlur={handleBlur}\n              onChange={handleChangeSize('height', stackSize.height)}\n              onKeyDown={handleKeyDown('height', stackSize.height)}\n              pattern=\"[0-9]*\"\n              value={roundForDecimalPart(stackSize.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n      {(item.url || item.shapeType)\n        && (\n          <div className=\"toolSection-wrapper\">\n            <button\n              className=\"jfReportButton forOptions forDimension f-width\"\n              onClick={setOriginalSizes}\n              type=\"button\"\n            >\n              {ORIGINAL_SIZE}\n            </button>\n          </div>\n        )}\n    </>\n  );\n};\n\nSizeSettings.propTypes = {\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nSizeSettings.defaultProps = {\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default SizeSettings;\n"],"names":["SizeSettings","item","onItemChange","initialAspect","useRef","useState","height","width","stackSize","setStackSize","aspectLock","setAspectLock","imageRefForMeta","useTranslatedTexts","HEIGHT","ORIGINAL_SIZE","WIDTH","useEffect","current","sizeSetter","sizes","Number","id","sizeSetterHelper","exactWidth","exactHeight","Math","max","handleBlur","handleChangeSize","type","prevValue","e","stopPropagation","value","target","setOriginalSizes","shapeType","getImageSizes","url","imageWidth","imageHeight","handleKeyDown","currValue","event","key","preventDefault","ref","shiftKey","diff","input","document","getElementById","focus","select","_jsxs","_jsx","roundForDecimalPart","icons.lock","icons.unlock","propTypes","PropTypes","shape","number","string","func","defaultProps"],"mappings":"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"}

package/lib/cjs/components/Settings/Switch.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Switch = function Switch(_ref) {
+  var config = _ref.config,
+      item = _ref.item,
+      onItemChange = _ref.onItemChange,
+      value = _ref.value;
+
+  var onChange = function onChange(e) {
+    var status = e.target.checked ? 'on' : 'off';
+    onItemChange({
+      id: item.id
+    }, _defineProperty({}, config.key, status));
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: classNames__default['default']('toolToggle', {
+      toggled: value === 'on'
+    }),
+    htmlFor: config.key,
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      checked: value === 'on',
+      className: "toolToggle-input",
+      id: config.key,
+      onChange: onChange,
+      type: "checkbox"
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "toolToggle-custom"
+    })]
+  });
+};
+
+Switch.propTypes = {
+  config: PropTypes__default['default'].shape({
+    key: PropTypes__default['default'].string,
+    options: PropTypes__default['default'].arrayOf(PropTypes__default['default'].any)
+  }),
+  item: PropTypes__default['default'].shape({
+    id: PropTypes__default['default'].string
+  }),
+  onItemChange: PropTypes__default['default'].func,
+  value: PropTypes__default['default'].string
+};
+Switch.defaultProps = {
+  config: {},
+  item: {},
+  onItemChange: function onItemChange() {},
+  value: ''
+};
+var Switch$1 = /*#__PURE__*/React.memo(Switch);
+
+module.exports = Switch$1;
+//# sourceMappingURL=Switch.js.map

package/lib/cjs/components/Settings/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Settings/Switch.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst Switch = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const onChange = e => {\n    const status = e.target.checked ? 'on' : 'off';\n    onItemChange(\n      { id: item.id },\n      { [config.key]: status },\n    );\n  };\n  return (\n    <label\n      className={classNames(\n        'toolToggle',\n        { toggled: value === 'on' },\n      )}\n      htmlFor={config.key}\n    >\n      <input\n        checked={value === 'on'}\n        className=\"toolToggle-input\"\n        id={config.key}\n        onChange={onChange}\n        type=\"checkbox\"\n      />\n      <span className=\"toolToggle-custom\" />\n    </label>\n  );\n};\n\nSwitch.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nSwitch.defaultProps = {\n  config: {},\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(Switch);\n"],"names":["Switch","config","item","onItemChange","value","onChange","e","status","target","checked","id","key","_jsxs","classNames","toggled","_jsx","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAAAC,CAAC,EAAI;AACpB,QAAMC,MAAM,GAAGD,CAAC,CAACE,MAAF,CAASC,OAAT,GAAmB,IAAnB,GAA0B,KAAzC;AACAN,IAAAA,YAAY,CACV;AAAEO,MAAAA,EAAE,EAAER,IAAI,CAACQ;AAAX,KADU,sBAEPT,MAAM,CAACU,GAFA,EAEMJ,MAFN,EAAZ;AAID,GAND;;AAOA,sBACEK;AACE,IAAA,SAAS,EAAEC,8BAAU,CACnB,YADmB,EAEnB;AAAEC,MAAAA,OAAO,EAAEV,KAAK,KAAK;AAArB,KAFmB,CADvB;AAKE,IAAA,OAAO,EAAEH,MAAM,CAACU,GALlB;AAAA,4BAOEI;AACE,MAAA,OAAO,EAAEX,KAAK,KAAK,IADrB;AAEE,MAAA,SAAS,EAAC,kBAFZ;AAGE,MAAA,EAAE,EAAEH,MAAM,CAACU,GAHb;AAIE,MAAA,QAAQ,EAAEN,QAJZ;AAKE,MAAA,IAAI,EAAC;AALP,MAPF,eAcEU;AAAM,MAAA,SAAS,EAAC;AAAhB,MAdF;AAAA,IADF;AAkBD,CA/BD;;AAiCAf,MAAM,CAACgB,SAAP,GAAmB;AACjBf,EAAAA,MAAM,EAAEgB,6BAAS,CAACC,KAAV,CAAgB;AACtBP,IAAAA,GAAG,EAAEM,6BAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,6BAAS,CAACI,OAAV,CAAkBJ,6BAAS,CAACK,GAA5B;AAFa,GAAhB,CADS;AAKjBpB,EAAAA,IAAI,EAAEe,6BAAS,CAACC,KAAV,CAAgB;AACpBR,IAAAA,EAAE,EAAEO,6BAAS,CAACE;AADM,GAAhB,CALW;AAQjBhB,EAAAA,YAAY,EAAEc,6BAAS,CAACM,IARP;AASjBnB,EAAAA,KAAK,EAAEa,6BAAS,CAACE;AATA,CAAnB;AAYAnB,MAAM,CAACwB,YAAP,GAAsB;AACpBvB,EAAAA,MAAM,EAAE,EADY;AAEpBC,EAAAA,IAAI,EAAE,EAFc;AAGpBC,EAAAA,YAAY,EAAE,wBAAM,EAHA;AAIpBC,EAAAA,KAAK,EAAE;AAJa,CAAtB;AAOA,4BAAeqB,UAAI,CAACzB,MAAD,CAAnB;;;;"}

package/lib/cjs/components/Settings/Toggle.js

@@ -2,13 +2,12 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var classNames = require('classnames');
+var hooks = require('../../utils/hooks.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -25,19 +24,26 @@ var Toggle = function Toggle(_ref) {
     }, _defineProperty({}, config.key, status));
   };
 
+  var _useTranslatedTexts = hooks.useTranslatedTexts(),
+      TOGGLE_OFF = _useTranslatedTexts.TOGGLE_OFF,
+      TOGGLE_ON = _useTranslatedTexts.TOGGLE_ON;
+
   return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: classNames__default['default']('toolToggle', {
-      toggled: value === 'on'
-    }),
+    className: "reportToolToggle",
     htmlFor: config.key,
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
       checked: value === 'on',
-      className: "toolToggle-input",
       id: config.key,
       onChange: onChange,
       type: "checkbox"
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "toolToggle-custom"
+      className: "reportToolToggle-knob"
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "reportToolToggle-on reportToolToggle-text",
+      children: TOGGLE_ON
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "reportToolToggle-off reportToolToggle-text",
+      children: TOGGLE_OFF
     })]
   });
 };

package/lib/cjs/components/Settings/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/components/Settings/Toggle.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst Toggle = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const onChange = e => {\n    const status = e.target.checked ? 'on' : 'off';\n    onItemChange(\n      { id: item.id },\n      { [config.key]: status },\n    );\n  };\n  return (\n    <label\n      className={classNames(\n        'toolToggle',\n        { toggled: value === 'on' },\n      )}\n      htmlFor={config.key}\n    >\n      <input\n        checked={value === 'on'}\n        className=\"toolToggle-input\"\n        id={config.key}\n        onChange={onChange}\n        type=\"checkbox\"\n      />\n      <span className=\"toolToggle-custom\" />\n    </label>\n  );\n};\n\nToggle.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nToggle.defaultProps = {\n  config: {},\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(Toggle);\n"],"names":["Toggle","config","item","onItemChange","value","onChange","e","status","target","checked","id","key","_jsxs","classNames","toggled","_jsx","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAAAC,CAAC,EAAI;AACpB,QAAMC,MAAM,GAAGD,CAAC,CAACE,MAAF,CAASC,OAAT,GAAmB,IAAnB,GAA0B,KAAzC;AACAN,IAAAA,YAAY,CACV;AAAEO,MAAAA,EAAE,EAAER,IAAI,CAACQ;AAAX,KADU,sBAEPT,MAAM,CAACU,GAFA,EAEMJ,MAFN,EAAZ;AAID,GAND;;AAOA,sBACEK;AACE,IAAA,SAAS,EAAEC,8BAAU,CACnB,YADmB,EAEnB;AAAEC,MAAAA,OAAO,EAAEV,KAAK,KAAK;AAArB,KAFmB,CADvB;AAKE,IAAA,OAAO,EAAEH,MAAM,CAACU,GALlB;AAAA,4BAOEI;AACE,MAAA,OAAO,EAAEX,KAAK,KAAK,IADrB;AAEE,MAAA,SAAS,EAAC,kBAFZ;AAGE,MAAA,EAAE,EAAEH,MAAM,CAACU,GAHb;AAIE,MAAA,QAAQ,EAAEN,QAJZ;AAKE,MAAA,IAAI,EAAC;AALP,MAPF,eAcEU;AAAM,MAAA,SAAS,EAAC;AAAhB,MAdF;AAAA,IADF;AAkBD,CA/BD;;AAiCAf,MAAM,CAACgB,SAAP,GAAmB;AACjBf,EAAAA,MAAM,EAAEgB,6BAAS,CAACC,KAAV,CAAgB;AACtBP,IAAAA,GAAG,EAAEM,6BAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,6BAAS,CAACI,OAAV,CAAkBJ,6BAAS,CAACK,GAA5B;AAFa,GAAhB,CADS;AAKjBpB,EAAAA,IAAI,EAAEe,6BAAS,CAACC,KAAV,CAAgB;AACpBR,IAAAA,EAAE,EAAEO,6BAAS,CAACE;AADM,GAAhB,CALW;AAQjBhB,EAAAA,YAAY,EAAEc,6BAAS,CAACM,IARP;AASjBnB,EAAAA,KAAK,EAAEa,6BAAS,CAACE;AATA,CAAnB;AAYAnB,MAAM,CAACwB,YAAP,GAAsB;AACpBvB,EAAAA,MAAM,EAAE,EADY;AAEpBC,EAAAA,IAAI,EAAE,EAFc;AAGpBC,EAAAA,YAAY,EAAE,wBAAM,EAHA;AAIpBC,EAAAA,KAAK,EAAE;AAJa,CAAtB;AAOA,4BAAeqB,UAAI,CAACzB,MAAD,CAAnB;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/Settings/Toggle.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst Toggle = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const onChange = e => {\n    const status = e.target.checked ? 'on' : 'off';\n    onItemChange(\n      { id: item.id },\n      { [config.key]: status },\n    );\n  };\n\n  const { TOGGLE_OFF, TOGGLE_ON } = useTranslatedTexts();\n\n  return (\n    <label\n      className=\"reportToolToggle\"\n      htmlFor={config.key}\n    >\n      <input\n        checked={value === 'on'}\n        id={config.key}\n        onChange={onChange}\n        type=\"checkbox\"\n      />\n      <span className=\"reportToolToggle-knob\" />\n      <span className=\"reportToolToggle-on reportToolToggle-text\">{TOGGLE_ON}</span>\n      <span className=\"reportToolToggle-off reportToolToggle-text\">{TOGGLE_OFF}</span>\n    </label>\n  );\n};\n\nToggle.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nToggle.defaultProps = {\n  config: {},\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(Toggle);\n"],"names":["Toggle","config","item","onItemChange","value","onChange","e","status","target","checked","id","key","useTranslatedTexts","TOGGLE_OFF","TOGGLE_ON","_jsxs","_jsx","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAAAC,CAAC,EAAI;AACpB,QAAMC,MAAM,GAAGD,CAAC,CAACE,MAAF,CAASC,OAAT,GAAmB,IAAnB,GAA0B,KAAzC;AACAN,IAAAA,YAAY,CACV;AAAEO,MAAAA,EAAE,EAAER,IAAI,CAACQ;AAAX,KADU,sBAEPT,MAAM,CAACU,GAFA,EAEMJ,MAFN,EAAZ;AAID,GAND;;AADI,4BAS8BK,wBAAkB,EAThD;AAAA,MASIC,UATJ,uBASIA,UATJ;AAAA,MASgBC,SAThB,uBASgBA,SAThB;;AAWJ,sBACEC;AACE,IAAA,SAAS,EAAC,kBADZ;AAEE,IAAA,OAAO,EAAEd,MAAM,CAACU,GAFlB;AAAA,4BAIEK;AACE,MAAA,OAAO,EAAEZ,KAAK,KAAK,IADrB;AAEE,MAAA,EAAE,EAAEH,MAAM,CAACU,GAFb;AAGE,MAAA,QAAQ,EAAEN,QAHZ;AAIE,MAAA,IAAI,EAAC;AAJP,MAJF,eAUEW;AAAM,MAAA,SAAS,EAAC;AAAhB,MAVF,eAWEA;AAAM,MAAA,SAAS,EAAC,2CAAhB;AAAA,gBAA6DF;AAA7D,MAXF,eAYEE;AAAM,MAAA,SAAS,EAAC,4CAAhB;AAAA,gBAA8DH;AAA9D,MAZF;AAAA,IADF;AAgBD,CAhCD;;AAkCAb,MAAM,CAACiB,SAAP,GAAmB;AACjBhB,EAAAA,MAAM,EAAEiB,6BAAS,CAACC,KAAV,CAAgB;AACtBR,IAAAA,GAAG,EAAEO,6BAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,6BAAS,CAACI,OAAV,CAAkBJ,6BAAS,CAACK,GAA5B;AAFa,GAAhB,CADS;AAKjBrB,EAAAA,IAAI,EAAEgB,6BAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,EAAE,EAAEQ,6BAAS,CAACE;AADM,GAAhB,CALW;AAQjBjB,EAAAA,YAAY,EAAEe,6BAAS,CAACM,IARP;AASjBpB,EAAAA,KAAK,EAAEc,6BAAS,CAACE;AATA,CAAnB;AAYApB,MAAM,CAACyB,YAAP,GAAsB;AACpBxB,EAAAA,MAAM,EAAE,EADY;AAEpBC,EAAAA,IAAI,EAAE,EAFc;AAGpBC,EAAAA,YAAY,EAAE,wBAAM,EAHA;AAIpBC,EAAAA,KAAK,EAAE;AAJa,CAAtB;AAOA,4BAAesB,UAAI,CAAC1B,MAAD,CAAnB;;;;"}

package/lib/cjs/components/Settings/index.js

@@ -18,6 +18,7 @@ var Textbox = require('./Textbox.js');
 var Toggle = require('./Toggle.js');
 var LayoutSizeSettings = require('./LayoutSizeSettings.js');
 var IconSelectBox = require('./IconSelectBox.js');
+var Switch = require('./Switch.js');
 
 var Settings = {
   checkboxGroup: CheckboxGroup,
@@ -36,6 +37,7 @@ var Settings = {
   selectBox: SelectBox,
   sizeSettings: SizeSettings,
   slider: Slider,
+  switch: Switch,
   textbox: Textbox,
   toggle: Toggle
 };

package/lib/cjs/components/Settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Settings/index.js"],"sourcesContent":["import CheckboxGroup from './CheckboxGroup';\nimport ColorPicker from './ColorPicker';\nimport Divider from './Divider';\nimport Dropdown from './Dropdown';\nimport EnterURL from './ImagePicker/EnterURL';\nimport FieldSet from './FieldSet';\nimport ImageThumbnailWithDelete from './ImagePicker/ImageThumbnailWithDelete';\nimport ImageUrl from './ImageUrl';\nimport Orientation from './Orientation';\nimport PageLayer from './PageLayer/PageLayer';\nimport SegmentControl from './SegmentControl';\nimport SelectBox from './SelectBox';\nimport SizeSettings from './SizeSettings';\nimport Slider from './Slider';\nimport Textbox from './Textbox';\nimport Toggle from './Toggle';\nimport LayoutSizeSettings from './LayoutSizeSettings';\nimport IconSelectBox from './IconSelectBox';\n\nexport default {\n  checkboxGroup: CheckboxGroup,\n  colorPicker: ColorPicker,\n  divider: Divider,\n  dropdown: Dropdown,\n  enterImageURL: EnterURL,\n  fieldSet: FieldSet,\n  iconSelectBox: IconSelectBox,\n  imageThumbnailWithDelete: ImageThumbnailWithDelete,\n  imageUrl: ImageUrl,\n  layoutSizeSettings: LayoutSizeSettings,\n  orientation: Orientation,\n  pageLayer: PageLayer,\n  segmentControl: SegmentControl,\n  selectBox: SelectBox,\n  sizeSettings: SizeSettings,\n  slider: Slider,\n  textbox: Textbox,\n  toggle: Toggle,\n};\n"],"names":["checkboxGroup","CheckboxGroup","colorPicker","ColorPicker","divider","Divider","dropdown","Dropdown","enterImageURL","EnterURL","fieldSet","FieldSet","iconSelectBox","IconSelectBox","imageThumbnailWithDelete","ImageThumbnailWithDelete","imageUrl","ImageUrl","layoutSizeSettings","LayoutSizeSettings","orientation","Orientation","pageLayer","PageLayer","segmentControl","SegmentControl","selectBox","SelectBox","sizeSettings","SizeSettings","slider","Slider","textbox","Textbox","toggle","Toggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,eAAe;AACbA,EAAAA,aAAa,EAAEC,aADF;AAEbC,EAAAA,WAAW,EAAEC,sBAFA;AAGbC,EAAAA,OAAO,EAAEC,OAHI;AAIbC,EAAAA,QAAQ,EAAEC,QAJG;AAKbC,EAAAA,aAAa,EAAEC,QALF;AAMbC,EAAAA,QAAQ,EAAEC,QANG;AAObC,EAAAA,aAAa,EAAEC,aAPF;AAQbC,EAAAA,wBAAwB,EAAEC,wBARb;AASbC,EAAAA,QAAQ,EAAEC,QATG;AAUbC,EAAAA,kBAAkB,EAAEC,kBAVP;AAWbC,EAAAA,WAAW,EAAEC,WAXA;AAYbC,EAAAA,SAAS,EAAEC,SAZE;AAabC,EAAAA,cAAc,EAAEC,cAbH;AAcbC,EAAAA,SAAS,EAAEC,SAdE;AAebC,EAAAA,YAAY,EAAEC,YAfD;AAgBbC,EAAAA,MAAM,EAAEC,MAhBK;AAiBbC,EAAAA,OAAO,EAAEC,OAjBI;AAkBbC,EAAAA,MAAM,EAAEC;AAlBK,CAAf;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Settings/index.js"],"sourcesContent":["import CheckboxGroup from './CheckboxGroup';\nimport ColorPicker from './ColorPicker';\nimport Divider from './Divider';\nimport Dropdown from './Dropdown';\nimport EnterURL from './ImagePicker/EnterURL';\nimport FieldSet from './FieldSet';\nimport ImageThumbnailWithDelete from './ImagePicker/ImageThumbnailWithDelete';\nimport ImageUrl from './ImageUrl';\nimport Orientation from './Orientation';\nimport PageLayer from './PageLayer/PageLayer';\nimport SegmentControl from './SegmentControl';\nimport SelectBox from './SelectBox';\nimport SizeSettings from './SizeSettings';\nimport Slider from './Slider';\nimport Textbox from './Textbox';\nimport Toggle from './Toggle';\nimport LayoutSizeSettings from './LayoutSizeSettings';\nimport IconSelectBox from './IconSelectBox';\nimport Switch from './Switch';\n\nexport default {\n  checkboxGroup: CheckboxGroup,\n  colorPicker: ColorPicker,\n  divider: Divider,\n  dropdown: Dropdown,\n  enterImageURL: EnterURL,\n  fieldSet: FieldSet,\n  iconSelectBox: IconSelectBox,\n  imageThumbnailWithDelete: ImageThumbnailWithDelete,\n  imageUrl: ImageUrl,\n  layoutSizeSettings: LayoutSizeSettings,\n  orientation: Orientation,\n  pageLayer: PageLayer,\n  segmentControl: SegmentControl,\n  selectBox: SelectBox,\n  sizeSettings: SizeSettings,\n  slider: Slider,\n  switch: Switch,\n  textbox: Textbox,\n  toggle: Toggle,\n};\n"],"names":["checkboxGroup","CheckboxGroup","colorPicker","ColorPicker","divider","Divider","dropdown","Dropdown","enterImageURL","EnterURL","fieldSet","FieldSet","iconSelectBox","IconSelectBox","imageThumbnailWithDelete","ImageThumbnailWithDelete","imageUrl","ImageUrl","layoutSizeSettings","LayoutSizeSettings","orientation","Orientation","pageLayer","PageLayer","segmentControl","SegmentControl","selectBox","SelectBox","sizeSettings","SizeSettings","slider","Slider","switch","Switch","textbox","Textbox","toggle","Toggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBA,eAAe;AACbA,EAAAA,aAAa,EAAEC,aADF;AAEbC,EAAAA,WAAW,EAAEC,sBAFA;AAGbC,EAAAA,OAAO,EAAEC,OAHI;AAIbC,EAAAA,QAAQ,EAAEC,QAJG;AAKbC,EAAAA,aAAa,EAAEC,QALF;AAMbC,EAAAA,QAAQ,EAAEC,QANG;AAObC,EAAAA,aAAa,EAAEC,aAPF;AAQbC,EAAAA,wBAAwB,EAAEC,wBARb;AASbC,EAAAA,QAAQ,EAAEC,QATG;AAUbC,EAAAA,kBAAkB,EAAEC,kBAVP;AAWbC,EAAAA,WAAW,EAAEC,WAXA;AAYbC,EAAAA,SAAS,EAAEC,SAZE;AAabC,EAAAA,cAAc,EAAEC,cAbH;AAcbC,EAAAA,SAAS,EAAEC,SAdE;AAebC,EAAAA,YAAY,EAAEC,YAfD;AAgBbC,EAAAA,MAAM,EAAEC,MAhBK;AAiBbC,EAAAA,MAAM,EAAEC,MAjBK;AAkBbC,EAAAA,OAAO,EAAEC,OAlBI;AAmBbC,EAAAA,MAAM,EAAEC;AAnBK,CAAf;;;;"}

package/lib/cjs/components/StaticElements/StaticRichText.js

@@ -60,13 +60,13 @@ var settings = [{
   key: 'fontFamily',
   label: 'Font Family',
   options: fonts.fontTypes.fonts,
-  section: 'General',
+  section: 'GENERAL',
   type: 'dropdown'
 }, {
   key: 'opacity',
   label: 'Opacity',
   range: [0, 100],
-  section: 'General',
+  section: 'GENERAL',
   type: 'slider'
 }];
 var StaticRichText = {

package/lib/cjs/components/StaticElements/StaticRichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticRichText.js","sources":["../../../../src/components/StaticElements/StaticRichText.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport domPurify from 'dompurify';\nimport 'react-quill/dist/quill.snow.css';\nimport { fontTypes } from '../../constants/fonts';\n\nconst ITEM_TYPE = 'text';\n\nconst StaticRichTextElement = ({\n  item: {\n    fontFamily,\n    opacity,\n    value,\n  },\n}) => (\n  <div\n    className=\"reportItemInner f-height\"\n    style={{ fontFamily, opacity }}\n  >\n    <div\n      className=\"f-all ql-editor\"\n      dangerouslySetInnerHTML={{ __html: domPurify.sanitize(value) }}\n    />\n  </div>\n);\n\nStaticRichTextElement.propTypes = {\n  item: PropTypes.shape({\n    fontFamily: PropTypes.string,\n    opacity: PropTypes.number,\n    value: PropTypes.string,\n  }),\n};\n\nStaticRichTextElement.defaultProps = {\n  item: {\n    value: '',\n  },\n};\n\nconst details = {\n  height: 65,\n  itemType: ITEM_TYPE,\n  width: 350,\n};\n\nconst defaultItem = {\n  fontFamily: 'Circular Std',\n  opacity: 1,\n  value: '',\n};\n\nconst settings = [\n  {\n    key: 'fontFamily',\n    label: 'Font Family',\n    options: fontTypes.fonts,\n    section: 'General',\n    type: 'dropdown',\n  },\n  {\n    key: 'opacity',\n    label: 'Opacity',\n    range: [0, 100],\n    section: 'General',\n    type: 'slider',\n  },\n];\n\nexport default {\n  Component: memo(StaticRichTextElement),\n  defaultItem,\n  details,\n  itemType: ITEM_TYPE,\n  settings,\n};\n"],"names":["ITEM_TYPE","StaticRichTextElement","item","fontFamily","opacity","value","_jsx","__html","domPurify","sanitize","propTypes","PropTypes","shape","string","number","defaultProps","details","height","itemType","width","defaultItem","settings","key","label","options","fontTypes","fonts","section","type","range","Component","memo"],"mappings":";;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,MAAlB;;AAEA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,uBAC5BC,IAD4B;AAAA,MAE1BC,UAF0B,aAE1BA,UAF0B;AAAA,MAG1BC,OAH0B,aAG1BA,OAH0B;AAAA,MAI1BC,KAJ0B,aAI1BA,KAJ0B;AAAA,sBAO5BC;AACE,IAAA,SAAS,EAAC,0BADZ;AAEE,IAAA,KAAK,EAAE;AAAEH,MAAAA,UAAU,EAAVA,UAAF;AAAcC,MAAAA,OAAO,EAAPA;AAAd,KAFT;AAAA,2BAIEE;AACE,MAAA,SAAS,EAAC,iBADZ;AAEE,MAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEC,6BAAS,CAACC,QAAV,CAAmBJ,KAAnB;AAAV;AAF3B;AAJF,IAP4B;AAAA,CAA9B;;AAkBAJ,qBAAqB,CAACS,SAAtB,GAAkC;AAChCR,EAAAA,IAAI,EAAES,6BAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,UAAU,EAAEQ,6BAAS,CAACE,MADF;AAEpBT,IAAAA,OAAO,EAAEO,6BAAS,CAACG,MAFC;AAGpBT,IAAAA,KAAK,EAAEM,6BAAS,CAACE;AAHG,GAAhB;AAD0B,CAAlC;AAQAZ,qBAAqB,CAACc,YAAtB,GAAqC;AACnCb,EAAAA,IAAI,EAAE;AACJG,IAAAA,KAAK,EAAE;AADH;AAD6B,CAArC;AAMA,IAAMW,OAAO,GAAG;AACdC,EAAAA,MAAM,EAAE,EADM;AAEdC,EAAAA,QAAQ,EAAElB,SAFI;AAGdmB,EAAAA,KAAK,EAAE;AAHO,CAAhB;AAMA,IAAMC,WAAW,GAAG;AAClBjB,EAAAA,UAAU,EAAE,cADM;AAElBC,EAAAA,OAAO,EAAE,CAFS;AAGlBC,EAAAA,KAAK,EAAE;AAHW,CAApB;AAMA,IAAMgB,QAAQ,GAAG,CACf;AACEC,EAAAA,GAAG,EAAE,YADP;AAEEC,EAAAA,KAAK,EAAE,aAFT;AAGEC,EAAAA,OAAO,EAAEC,eAAS,CAACC,KAHrB;AAIEC,EAAAA,OAAO,EAAE,SAJX;AAKEC,EAAAA,IAAI,EAAE;AALR,CADe,EAQf;AACEN,EAAAA,GAAG,EAAE,SADP;AAEEC,EAAAA,KAAK,EAAE,SAFT;AAGEM,EAAAA,KAAK,EAAE,CAAC,CAAD,EAAI,GAAJ,CAHT;AAIEF,EAAAA,OAAO,EAAE,SAJX;AAKEC,EAAAA,IAAI,EAAE;AALR,CARe,CAAjB;AAiBA,qBAAe;AACbE,EAAAA,SAAS,eAAEC,UAAI,CAAC9B,qBAAD,CADF;AAEbmB,EAAAA,WAAW,EAAXA,WAFa;AAGbJ,EAAAA,OAAO,EAAPA,OAHa;AAIbE,EAAAA,QAAQ,EAAElB,SAJG;AAKbqB,EAAAA,QAAQ,EAARA;AALa,CAAf;;;;"}
+{"version":3,"file":"StaticRichText.js","sources":["../../../../src/components/StaticElements/StaticRichText.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport domPurify from 'dompurify';\nimport 'react-quill/dist/quill.snow.css';\nimport { fontTypes } from '../../constants/fonts';\n\nconst ITEM_TYPE = 'text';\n\nconst StaticRichTextElement = ({\n  item: {\n    fontFamily,\n    opacity,\n    value,\n  },\n}) => (\n  <div\n    className=\"reportItemInner f-height\"\n    style={{ fontFamily, opacity }}\n  >\n    <div\n      className=\"f-all ql-editor\"\n      dangerouslySetInnerHTML={{ __html: domPurify.sanitize(value) }}\n    />\n  </div>\n);\n\nStaticRichTextElement.propTypes = {\n  item: PropTypes.shape({\n    fontFamily: PropTypes.string,\n    opacity: PropTypes.number,\n    value: PropTypes.string,\n  }),\n};\n\nStaticRichTextElement.defaultProps = {\n  item: {\n    value: '',\n  },\n};\n\nconst details = {\n  height: 65,\n  itemType: ITEM_TYPE,\n  width: 350,\n};\n\nconst defaultItem = {\n  fontFamily: 'Circular Std',\n  opacity: 1,\n  value: '',\n};\n\nconst settings = [\n  {\n    key: 'fontFamily',\n    label: 'Font Family',\n    options: fontTypes.fonts,\n    section: 'GENERAL',\n    type: 'dropdown',\n  },\n  {\n    key: 'opacity',\n    label: 'Opacity',\n    range: [0, 100],\n    section: 'GENERAL',\n    type: 'slider',\n  },\n];\n\nexport default {\n  Component: memo(StaticRichTextElement),\n  defaultItem,\n  details,\n  itemType: ITEM_TYPE,\n  settings,\n};\n"],"names":["ITEM_TYPE","StaticRichTextElement","item","fontFamily","opacity","value","_jsx","__html","domPurify","sanitize","propTypes","PropTypes","shape","string","number","defaultProps","details","height","itemType","width","defaultItem","settings","key","label","options","fontTypes","fonts","section","type","range","Component","memo"],"mappings":";;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,MAAlB;;AAEA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,uBAC5BC,IAD4B;AAAA,MAE1BC,UAF0B,aAE1BA,UAF0B;AAAA,MAG1BC,OAH0B,aAG1BA,OAH0B;AAAA,MAI1BC,KAJ0B,aAI1BA,KAJ0B;AAAA,sBAO5BC;AACE,IAAA,SAAS,EAAC,0BADZ;AAEE,IAAA,KAAK,EAAE;AAAEH,MAAAA,UAAU,EAAVA,UAAF;AAAcC,MAAAA,OAAO,EAAPA;AAAd,KAFT;AAAA,2BAIEE;AACE,MAAA,SAAS,EAAC,iBADZ;AAEE,MAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEC,6BAAS,CAACC,QAAV,CAAmBJ,KAAnB;AAAV;AAF3B;AAJF,IAP4B;AAAA,CAA9B;;AAkBAJ,qBAAqB,CAACS,SAAtB,GAAkC;AAChCR,EAAAA,IAAI,EAAES,6BAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,UAAU,EAAEQ,6BAAS,CAACE,MADF;AAEpBT,IAAAA,OAAO,EAAEO,6BAAS,CAACG,MAFC;AAGpBT,IAAAA,KAAK,EAAEM,6BAAS,CAACE;AAHG,GAAhB;AAD0B,CAAlC;AAQAZ,qBAAqB,CAACc,YAAtB,GAAqC;AACnCb,EAAAA,IAAI,EAAE;AACJG,IAAAA,KAAK,EAAE;AADH;AAD6B,CAArC;AAMA,IAAMW,OAAO,GAAG;AACdC,EAAAA,MAAM,EAAE,EADM;AAEdC,EAAAA,QAAQ,EAAElB,SAFI;AAGdmB,EAAAA,KAAK,EAAE;AAHO,CAAhB;AAMA,IAAMC,WAAW,GAAG;AAClBjB,EAAAA,UAAU,EAAE,cADM;AAElBC,EAAAA,OAAO,EAAE,CAFS;AAGlBC,EAAAA,KAAK,EAAE;AAHW,CAApB;AAMA,IAAMgB,QAAQ,GAAG,CACf;AACEC,EAAAA,GAAG,EAAE,YADP;AAEEC,EAAAA,KAAK,EAAE,aAFT;AAGEC,EAAAA,OAAO,EAAEC,eAAS,CAACC,KAHrB;AAIEC,EAAAA,OAAO,EAAE,SAJX;AAKEC,EAAAA,IAAI,EAAE;AALR,CADe,EAQf;AACEN,EAAAA,GAAG,EAAE,SADP;AAEEC,EAAAA,KAAK,EAAE,SAFT;AAGEM,EAAAA,KAAK,EAAE,CAAC,CAAD,EAAI,GAAJ,CAHT;AAIEF,EAAAA,OAAO,EAAE,SAJX;AAKEC,EAAAA,IAAI,EAAE;AALR,CARe,CAAjB;AAiBA,qBAAe;AACbE,EAAAA,SAAS,eAAEC,UAAI,CAAC9B,qBAAD,CADF;AAEbmB,EAAAA,WAAW,EAAXA,WAFa;AAGbJ,EAAAA,OAAO,EAAPA,OAHa;AAIbE,EAAAA,QAAQ,EAAElB,SAJG;AAKbqB,EAAAA,QAAQ,EAARA;AALa,CAAf;;;;"}