@bigbinary/neeto-themes-frontend 1.2.2 → 1.2.3

package/app/javascript/src/translations/en.json

@@ -53,7 +53,7 @@
             "primary": "Primary",
             "secondary": "Secondary"
           },
-          "notAppliedYet": "This theme is <bold>not yet applied</bold> to this {{entityType, anyCase}}.",
+          "notAppliedYet": "This theme is <bold>not yet applied</bold> to this {{entityType}}.",
           "editTheme": {
             "title": "Edit theme",
             "imageUpload": "Drag and drop or <span>Browse</span> a file"

package/dist/index.cjs.js

@@ -697,17 +697,16 @@ var SwitchBlock = function SwitchBlock(_ref) {
   });
 };
 
-var Properties = function Properties() {
+var Properties = function Properties(_ref) {
+  var onPropertiesChange = _ref.onPropertiesChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"],
-        onPropertiesChange: store["onPropertiesChange"]
+        themePropertiesSchema: store["themePropertiesSchema"]
       };
     }, shallow.shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
-    onPropertiesChange = _useConfigStore.onPropertiesChange;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -721,9 +720,9 @@ var Properties = function Properties() {
     setVariable = _useThemeUtils.setVariable,
     setTheme = _useThemeUtils.setTheme;
   var handleColorChange = function handleColorChange(name) {
-    return function (_ref) {
-      var hex = _ref.hex,
-        rgb = _ref.rgb;
+    return function (_ref2) {
+      var hex = _ref2.hex,
+        rgb = _ref2.rgb;
       handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
     };
   };
@@ -760,27 +759,27 @@ var Properties = function Properties() {
       className: "divide-y divide-gray-200",
       children: [neetoCist.filterBy({
         kind: "font_family"
-      }, values.properties).map(function (_ref2) {
-        var key = _ref2.key,
-          value = _ref2.value,
-          kind = _ref2.kind;
+      }, values.properties).map(function (_ref3) {
+        var key = _ref3.key,
+          value = _ref3.value,
+          kind = _ref3.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
           label: buildLabel(key, kind),
           options: FONT_OPTIONS,
           value: neetoCist.findBy({
             value: value || null
           }, FONT_OPTIONS),
-          onChange: function onChange(_ref3) {
-            var value = _ref3.value;
+          onChange: function onChange(_ref4) {
+            var value = _ref4.value;
             handleChange(key, value);
           }
         }, key);
       }), neetoCist.filterBy({
         kind: "color"
-      }, values.properties).map(function (_ref4) {
-        var key = _ref4.key,
-          value = _ref4.value,
-          kind = _ref4.kind;
+      }, values.properties).map(function (_ref5) {
+        var key = _ref5.key,
+          value = _ref5.value,
+          kind = _ref5.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(ColorBlock, {
           color: value,
           label: buildLabel(key, kind),
@@ -788,10 +787,10 @@ var Properties = function Properties() {
         }, key);
       }), neetoCist.filterBy({
         kind: "overlay_opacity"
-      }, values.properties).map(function (_ref5) {
-        var key = _ref5.key,
-          value = _ref5.value,
-          kind = _ref5.kind;
+      }, values.properties).map(function (_ref6) {
+        var key = _ref6.key,
+          value = _ref6.value,
+          kind = _ref6.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
           label: buildLabel(key, kind),
           marks: OVERLAY_OPACITY_SLIDER_MARKS,
@@ -804,11 +803,11 @@ var Properties = function Properties() {
         }, key);
       }), neetoCist.filterBy({
         kind: "position_selector"
-      }, values.properties).map(function (_ref6) {
+      }, values.properties).map(function (_ref7) {
         var _findBy;
-        var key = _ref6.key,
-          kind = _ref6.kind,
-          value = _ref6.value;
+        var key = _ref7.key,
+          kind = _ref7.kind,
+          value = _ref7.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
@@ -826,10 +825,10 @@ var Properties = function Properties() {
         }, key);
       }), neetoCist.filterBy({
         kind: "boolean"
-      }, values.properties).map(function (_ref7) {
-        var key = _ref7.key,
-          kind = _ref7.kind,
-          value = _ref7.value;
+      }, values.properties).map(function (_ref8) {
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
@@ -864,7 +863,8 @@ var Customize = function Customize(_ref) {
     theme = _ref.theme,
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
-    isApplyingTheme = _ref.isApplyingTheme;
+    isApplyingTheme = _ref.isApplyingTheme,
+    onPropertiesChange = _ref.onPropertiesChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = react.useState({}),
@@ -928,7 +928,9 @@ var Customize = function Customize(_ref) {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-col gap-6 p-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {}), /*#__PURE__*/jsxRuntime.jsx(Properties, {}), neetoCist.filterBy({
+          children: [/*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {}), /*#__PURE__*/jsxRuntime.jsx(Properties, {
+            onPropertiesChange: onPropertiesChange
+          }), neetoCist.filterBy({
             kind: "image"
           }, themePropertiesSchema).map(function (_ref5) {
             var key = _ref5.key;
@@ -1473,7 +1475,8 @@ var TitleBar = function TitleBar(_ref) {
 var MemoizedAlert = /*#__PURE__*/react.memo(Alert__default["default"]);
 var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
-  var thumbnail = _ref.thumbnail;
+  var thumbnail = _ref.thumbnail,
+    onPropertiesChange = _ref.onPropertiesChange;
   var _useState = react.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     currentScreen = _useState2[0],
@@ -1641,6 +1644,7 @@ var Sidebar = function Sidebar(_ref) {
       isApplyingTheme: isApplyingTheme,
       onApplyTheme: onApplyTheme,
       onCreateTheme: onCreateTheme,
+      onPropertiesChange: onPropertiesChange,
       theme: themeToEdit.current,
       themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
     }), /*#__PURE__*/jsxRuntime.jsx(MemoizedAlert, {
@@ -1679,13 +1683,13 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   react.useEffect(function () {
     setConfigState({
       entityType: entityType,
-      entityId: entityId,
-      onPropertiesChange: onPropertiesChange
+      entityId: entityId
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsxRuntime.jsx(Sidebar, {
+      onPropertiesChange: onPropertiesChange,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-themes-preview__wrapper",