@bigbinary/neeto-themes-frontend 4.0.21 → 4.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/app/javascript/src/translations/ar.json +45 -0
  2. package/app/javascript/src/translations/bg.json +45 -0
  3. package/app/javascript/src/translations/ca.json +45 -0
  4. package/app/javascript/src/translations/cs.json +45 -0
  5. package/app/javascript/src/translations/da.json +45 -0
  6. package/app/javascript/src/translations/de.json +45 -0
  7. package/app/javascript/src/translations/en.json +45 -0
  8. package/app/javascript/src/translations/es-MX.json +45 -0
  9. package/app/javascript/src/translations/es.json +45 -0
  10. package/app/javascript/src/translations/et.json +45 -0
  11. package/app/javascript/src/translations/fi.json +45 -0
  12. package/app/javascript/src/translations/fil.json +45 -0
  13. package/app/javascript/src/translations/fr.json +45 -0
  14. package/app/javascript/src/translations/he.json +45 -0
  15. package/app/javascript/src/translations/hi.json +45 -0
  16. package/app/javascript/src/translations/hr.json +45 -0
  17. package/app/javascript/src/translations/hu.json +45 -0
  18. package/app/javascript/src/translations/id.json +45 -0
  19. package/app/javascript/src/translations/index.js +108 -1
  20. package/app/javascript/src/translations/it.json +45 -0
  21. package/app/javascript/src/translations/ja.json +45 -0
  22. package/app/javascript/src/translations/ko.json +45 -0
  23. package/app/javascript/src/translations/nl.json +45 -0
  24. package/app/javascript/src/translations/pl.json +45 -0
  25. package/app/javascript/src/translations/pt-BR.json +45 -0
  26. package/app/javascript/src/translations/pt.json +45 -0
  27. package/app/javascript/src/translations/ro.json +45 -0
  28. package/app/javascript/src/translations/ru.json +45 -0
  29. package/app/javascript/src/translations/sk.json +45 -0
  30. package/app/javascript/src/translations/sl.json +45 -0
  31. package/app/javascript/src/translations/sv.json +45 -0
  32. package/app/javascript/src/translations/th.json +45 -0
  33. package/app/javascript/src/translations/tr.json +45 -0
  34. package/app/javascript/src/translations/uk.json +45 -0
  35. package/app/javascript/src/translations/vi.json +45 -0
  36. package/app/javascript/src/translations/zh-CN.json +45 -0
  37. package/app/javascript/src/translations/zh-TW.json +45 -0
  38. package/dist/.ready +1 -1
  39. package/dist/NeetoThemesBuilder.js +57 -2620
  40. package/dist/NeetoThemesBuilder.js.map +1 -1
  41. package/dist/cjs/NeetoThemesBuilder.js +58 -2617
  42. package/dist/cjs/NeetoThemesBuilder.js.map +1 -1
  43. package/dist/cjs/hooks.js +2 -2
  44. package/dist/cjs/index.js +6 -5
  45. package/dist/cjs/index.js.map +1 -1
  46. package/dist/cjs/utils.js +1 -1
  47. package/dist/hooks.js +2 -2
  48. package/dist/index-B-2UmfUl.js +10300 -0
  49. package/dist/index-B-2UmfUl.js.map +1 -0
  50. package/dist/{index-BP-ka0mC.js → index-BUeeI0XI.js} +3 -2
  51. package/dist/index-BUeeI0XI.js.map +1 -0
  52. package/dist/{index-JpAFUrB8.js → index-BZB12oJt.js} +3 -2
  53. package/dist/index-BZB12oJt.js.map +1 -0
  54. package/dist/index-CCp4j3GE.js +10303 -0
  55. package/dist/index-CCp4j3GE.js.map +1 -0
  56. package/dist/index.js +4 -4
  57. package/dist/{useExpandedSection-D9J7nzlC.js → useExpandedSection-CelNLEKQ.js} +2 -2
  58. package/dist/{useExpandedSection-D9J7nzlC.js.map → useExpandedSection-CelNLEKQ.js.map} +1 -1
  59. package/dist/{useExpandedSection-B6w2AxTV.js → useExpandedSection-GpzbAxmE.js} +2 -2
  60. package/dist/{useExpandedSection-B6w2AxTV.js.map → useExpandedSection-GpzbAxmE.js.map} +1 -1
  61. package/dist/utils.js +1 -1
  62. package/package.json +20 -20
  63. package/types.d.ts +5 -1
  64. package/dist/index-BP-ka0mC.js.map +0 -1
  65. package/dist/index-JpAFUrB8.js.map +0 -1
@@ -1,2625 +1,66 @@
1
1
  'use strict';
2
2
 
3
- var shallow = require('zustand/shallow');
4
- var react = require('react');
5
- var neetoCist = require('@bigbinary/neeto-cist');
6
- var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
7
- var Spinner = require('@bigbinary/neetoui/Spinner');
8
- var reactI18next = require('react-i18next');
9
- var utils = require('../index-BP-ka0mC.js');
10
- var reactQuery = require('@tanstack/react-query');
11
- var axios = require('axios');
12
- var useExpandedSection = require('../useExpandedSection-B6w2AxTV.js');
13
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
14
- var classnames = require('classnames');
15
- var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
16
- var Collapse = require('@bigbinary/neeto-icons/Collapse');
17
- var Alert = require('@bigbinary/neetoui/Alert');
18
- var Button = require('@bigbinary/neetoui/Button');
19
- var reactRouterDom = require('react-router-dom');
20
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
21
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
22
- var Close = require('@bigbinary/neeto-icons/Close');
23
- var ramda = require('ramda');
24
- var Popover = require('@bigbinary/neetoui/Popover');
25
- var Typography = require('@bigbinary/neetoui/Typography');
26
- var Switch = require('@bigbinary/neetoui/Switch');
27
- var Tooltip = require('@bigbinary/neetoui/Tooltip');
28
- var Form = require('@bigbinary/neetoui/formik/Form');
29
- var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
30
- var formik = require('formik');
31
- var jsxRuntime = require('react/jsx-runtime');
32
- var i18n = require('i18next');
33
- var Right = require('@bigbinary/neeto-icons/Right');
34
- var Left = require('@bigbinary/neeto-icons/Left');
35
- var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
36
- var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
37
- var reactDom = require('react-dom');
38
- var Radio = require('@bigbinary/neetoui/formik/Radio');
39
- var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
40
- var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
41
- var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
42
- var Select = require('@bigbinary/neetoui/Select');
43
- var antd = require('antd');
44
- var Checkbox = require('@bigbinary/neetoui/Checkbox');
45
- var Input = require('@bigbinary/neetoui/Input');
46
- var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
47
- var _regeneratorRuntime = require('@babel/runtime/regenerator');
48
- var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
49
- var Toastr = require('@bigbinary/neetoui/Toastr');
50
- var Input$1 = require('@bigbinary/neetoui/formik/Input');
51
- var Search = require('@bigbinary/neeto-molecules/Search');
52
- var AddImage = require('@bigbinary/neeto-icons/AddImage');
53
- var CodeBlock = require('@bigbinary/neeto-icons/CodeBlock');
54
- var ColorPicker$1 = require('@bigbinary/neeto-icons/ColorPicker');
55
- var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
56
- var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
57
- var RightArrow = require('@bigbinary/neeto-icons/RightArrow');
58
- var Search$1 = require('@bigbinary/neeto-icons/Search');
3
+ require('zustand/shallow');
4
+ require('react');
5
+ require('@bigbinary/neeto-cist');
6
+ require('@bigbinary/neeto-commons-frontend/react-utils');
7
+ require('@bigbinary/neetoui/Spinner');
8
+ require('react-i18next');
9
+ require('../index-BUeeI0XI.js');
10
+ var NeetoThemesBuilder = require('../index-CCp4j3GE.js');
11
+ require('../useExpandedSection-GpzbAxmE.js');
12
+ require('react/jsx-runtime');
13
+ require('@babel/runtime/helpers/asyncToGenerator');
14
+ require('@babel/runtime/regenerator');
15
+ require('@bigbinary/neetoui/Toastr');
16
+ require('@tanstack/react-query');
17
+ require('axios');
18
+ require('@babel/runtime/helpers/slicedToArray');
19
+ require('i18next');
20
+ require('classnames');
21
+ require('@bigbinary/neeto-commons-frontend/utils');
22
+ require('@bigbinary/neeto-icons/Collapse');
23
+ require('@bigbinary/neetoui/Alert');
24
+ require('@bigbinary/neetoui/Button');
25
+ require('react-router-dom');
26
+ require('@babel/runtime/helpers/defineProperty');
27
+ require('@babel/runtime/helpers/objectWithoutProperties');
28
+ require('@bigbinary/neeto-icons/Close');
29
+ require('ramda');
30
+ require('@bigbinary/neetoui/Popover');
31
+ require('@bigbinary/neetoui/Typography');
32
+ require('@bigbinary/neetoui/Switch');
33
+ require('@bigbinary/neetoui/Tooltip');
34
+ require('@bigbinary/neetoui/formik/Form');
35
+ require('@bigbinary/neetoui/formik/BlockNavigation');
36
+ require('formik');
37
+ require('@bigbinary/neeto-icons/Right');
38
+ require('@bigbinary/neeto-icons/Left');
39
+ require('@bigbinary/neeto-molecules/HelpPopover');
40
+ require('@babel/runtime/helpers/toConsumableArray');
41
+ require('react-dom');
42
+ require('@bigbinary/neetoui/formik/Radio');
43
+ require('@bigbinary/neeto-icons/CenterAlign');
44
+ require('@bigbinary/neeto-icons/LeftAlign');
45
+ require('@bigbinary/neetoui/ColorPicker');
46
+ require('@bigbinary/neetoui/Select');
47
+ require('antd');
48
+ require('@bigbinary/neetoui/Checkbox');
49
+ require('@bigbinary/neetoui/Input');
50
+ require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
51
+ require('@bigbinary/neetoui/formik/Input');
52
+ require('@bigbinary/neeto-molecules/Search');
53
+ require('@bigbinary/neeto-icons/AddImage');
54
+ require('@bigbinary/neeto-icons/CodeBlock');
55
+ require('@bigbinary/neeto-icons/ColorPicker');
56
+ require('@bigbinary/neeto-molecules/MoreDropdown');
57
+ require('@bigbinary/neeto-icons/LeftArrow');
58
+ require('@bigbinary/neeto-icons/RightArrow');
59
+ require('@bigbinary/neeto-icons/Search');
59
60
  require('zustand');
60
61
  require('yup');
61
62
 
62
- var show$2 = function show(entityId) {
63
- return axios.get("".concat(utils.BASE_URL, "/api/v1/entities/").concat(entityId));
64
- };
65
- var entitiesApi = {
66
- show: show$2
67
- };
68
63
 
69
- var useShowThemeEntity = function useShowThemeEntity(entityId) {
70
- return reactQuery.useQuery({
71
- queryKey: [useExpandedSection.QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
72
- queryFn: function queryFn() {
73
- return entitiesApi.show(entityId);
74
- },
75
- enabled: !!entityId
76
- });
77
- };
78
64
 
79
- var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
80
-
81
- var css = ":root{--themes-sidebar-expanded:520px;--themes-sidebar-width-xl:340px;--themes-sidebar-width-lg:320px;--themes-sidebar-width-sm:280px;--themes-sidebar-header-height:120px;--builder-header-height:65px}.neeto-themes__wrapper{display:flex;height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));height:100%;inset-inline-start:0;padding-top:1.5rem;position:fixed;top:0;transition:none;width:100%;z-index:102}.neeto-themes__wrapper .neeto-themes-sidebar--expanded{max-width:100%;width:520px!important;width:var(--themes-sidebar-expanded)!important}@media screen and (min-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px;width:var(--themes-sidebar-width-sm)}}@media screen and (min-width:768px){.neeto-themes__wrapper .neeto-themes-sidebar{height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));padding-top:0;position:relative}}@media screen and (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px;width:var(--themes-sidebar-width-lg)}}@media screen and (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:340px;width:var(--themes-sidebar-width-xl)}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed{max-width:0;min-width:0;width:0}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{transform:scale(-1)}@media screen and (max-width:767px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{top:6.8125rem}}@media screen and (max-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{inset-inline-end:auto;inset-inline-start:.5rem}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__header{display:none}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:.5rem;padding-top:1rem}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{display:flex;flex-direction:column;height:calc(100vh - 120px);height:calc(var(--viewport-height, 100vh) - var(--themes-sidebar-header-height));overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .css-editor-height__expanded{height:calc(100vh - 300px);height:calc(var(--viewport-height, 100vh) - 300px)}.neeto-themes__wrapper .css-editor-height__regular{height:384px}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));position:relative}.neeto-themes-theme-thumbnail:hover{box-shadow:0 0 0 2px rgb(var(--neeto-ui-gray-200))}.neeto-themes-theme-thumbnail:hover .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;box-shadow:none!important;outline:2px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--preview-active .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-accent-500))!important;box-shadow:none!important;outline:2px solid rgb(var(--neeto-ui-accent-500))!important}.neeto-themes-theme-thumbnail--active .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;box-shadow:none!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!important}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}.neeto-themes-theme-thumbnail__active-label{--neeto-ui-btn-focus-box-shadow:none}.neeto-themes-theme-thumbnail__active-label,.neeto-themes-theme-thumbnail__apply-btn,.neeto-themes-theme-thumbnail__preview-btn{max-width:100%;width:8.125rem}.neeto-themes-theme-thumbnail__preview-btn--disabled{--neeto-ui-btn-color:rgb(var(--neeto-ui-gray-300));--neeto-ui-btn-box-shadow:inset 0 0 0 1px rgba(var(--neeto-ui-gray-300))}.neeto-themes-sidebar__custom-css-editor-header{background-color:#1e1e1e;border-start-end-radius:var(--neeto-ui-rounded-lg);border-start-start-radius:var(--neeto-ui-rounded-lg);display:flex}@media screen and (max-width:576px){.neeto-themes-sidebar__custom-css-editor-header{display:none}}.neeto-themes-sidebar .monaco-editor,.neeto-themes-sidebar .overflow-guard{border-end-end-radius:var(--neeto-ui-rounded-lg);border-end-start-radius:var(--neeto-ui-rounded-lg)}.neeto-themes-sidebar__custom-css-wrapper .neeto-themes-nano-section{border-bottom:0!important}.neeto-themes-sidebar__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;inset-inline-start:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-themes-sidebar__backdrop{display:block;visibility:visible}}.neeto-themes-sidebar__toggler{flex-shrink:0;inset-inline-start:calc(100% + .5rem);position:absolute;top:.5rem;transition:color .3s ease-in-out}@media screen and (min-width:1024px){.neeto-themes-sidebar__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-themes-sidebar__toggler{inset-inline-end:1.5rem;inset-inline-start:auto}}.neeto-themes-nano-alignment-block{border-radius:.375rem}.neeto-themes-nano-alignment-button{--neeto-ui-btn-padding-x:0.75rem!important}.neeto-themes-nano-alignment-button__alignment-left{border-end-end-radius:0!important;border-start-end-radius:0!important}.neeto-themes-nano-alignment-button__alignment-center{border-end-start-radius:0!important;border-start-start-radius:0!important}.neeto-themes-nano-alignment-button.neeto-ui-btn--style-primary{--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100))!important;--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100))!important}.neeto-themes-nano-alignment-divider{background:rgb(var(--neeto-ui-gray-200));height:2rem;width:.0625rem}.neeto-themes-nano-section__content--open{max-height:1500px;opacity:1;padding-top:.25rem;visibility:visible}.neeto-themes-nano-section__content--closed{max-height:0;opacity:0;visibility:hidden}.neeto-themes-nano-section__title:focus-visible{box-shadow:0 0 0 3px rgba(var(--neeto-ui-primary-500),15%)}.neeto-themes-flip-animating{transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform}.neeto-themes-theme-thumbnail__active-banner{background-color:rgb(var(--neeto-ui-primary-500));color:rgb(var(--neeto-ui-white))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2Fic3RyYWN0cy92YXJpYWJsZXMuY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvY29tcG9uZW50cy90aGVtZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQ0UsK0JBQWdDLENBQ2hDLCtCQUFnQyxDQUNoQywrQkFBZ0MsQ0FDaEMsK0JBQWdDLENBQ2hDLG9DQUFxQyxDQUNyQyw0QkFDRixDQ1BBLHVCQUVFLFlBQWEsQ0FDYix5QkFBMEUsQ0FBMUUseUVBQTBFLENBRjFFLFVBR0YsQ0FFQSw2Q0FHRSwyQ0FBNEMsQ0FENUMsV0FBWSxDQUlaLG9CQUFxQixDQUdyQixrQkFBbUIsQ0FMbkIsY0FBZSxDQUNmLEtBQU0sQ0FFTixlQUFnQixDQU5oQixVQUFXLENBT1gsV0FFRixDQUVBLHVEQUVFLGNBQWUsQ0FEZixxQkFBZ0QsQ0FBaEQsOENBRUYsQ0FFQSxvQ0FDRSw2Q0FDRSxXQUFxQyxDQUFyQyxvQ0FDRixDQUNGLENBRUEsb0NBQ0UsNkNBR0UseUJBQTBFLENBQTFFLHlFQUEwRSxDQUYxRSxhQUFjLENBQ2QsaUJBRUYsQ0FDRixDQUVBLHFDQUNFLDZDQUNFLFdBQXFDLENBQXJDLG9DQUNGLENBQ0YsQ0FFQSxxQ0FDRSw2Q0FDRSxXQUFxQyxDQUFyQyxvQ0FDRixDQUNGLENBRUEsd0RBRUUsV0FBZSxDQUNmLFdBQWUsQ0FGZixPQUdGLENBRUEsdUZBQ0UsbUJBQ0YsQ0FFQSxvQ0FDRSx1RkFDRSxhQUNGLENBQ0YsQ0FFQSxvQ0FDRSx1RkFDRSxxQkFBc0IsQ0FDdEIsd0JBQ0YsQ0FDRixDQUVBLHNGQUNFLFlBQ0YsQ0FFQSwyRUFFRSxvQkFBc0IsQ0FEdEIsZ0JBRUYsQ0FFQSwyRUFHRSxZQUFhLENBQ2IscUJBQXNCLENBSHRCLDBCQUFpRixDQUFqRixnRkFBaUYsQ0FDakYsZUFHRixDQUVBLDRJQUNFLFlBQ0YsQ0FFQSxvREFDRSwwQkFBbUQsQ0FBbkQsa0RBQ0YsQ0FFQSxtREFDRSxZQUNGLENBRUEsc0RBR0UsV0FBWSxDQURaLHlCQUEwRSxDQUExRSx5RUFBMEUsQ0FEMUUsaUJBR0YsQ0FFQSxvQ0FDRSxrREFDRixDQUVBLDJFQUNFLFVBQ0YsQ0FFQSw4Q0FDRSxvREFBc0QsQ0FFdEQseUJBQTJCLENBRDNCLHlEQUVGLENBRUEscUZBQ0UsVUFDRixDQUVBLHNDQUNFLHNEQUF3RCxDQUV4RCx5QkFBMkIsQ0FEM0IsMkRBRUYsQ0FFQSw2RUFDRSxVQUNGLENBRUEsZ0RBQ0Usb0RBQXNELENBRXRELHlCQUEyQixDQUQzQix5REFFRixDQUVBLHFHQUVFLG1CQUNGLENBRUEsNENBQ0Usb0NBQ0YsQ0FFQSxnSUFJRSxjQUFlLENBRGYsY0FFRixDQUVBLHFEQUNFLGtEQUFtRCxDQUNuRCx3RUFDRixDQUVBLGdEQUVFLHdCQUF5QixDQUV6QixrREFBbUQsQ0FEbkQsb0RBQXFELENBRnJELFlBSUYsQ0FFQSxvQ0FDRSxnREFDRSxZQUNGLENBQ0YsQ0FFQSwyRUFHRSxnREFBaUQsQ0FEakQsa0RBRUYsQ0FFQSxxRUFDRSx5QkFDRixDQUVBLGdDQU1FLCtDQUFrRCxDQUNsRCxZQUFhLENBRmIsV0FBWSxDQUZaLG9CQUFxQixDQUZyQixjQUFlLENBQ2YsS0FBTSxDQU1OLGlCQUFrQixDQUpsQixVQUFXLENBS1gsV0FDRixDQUVBLG9DQUNFLGdDQUNFLGFBQWMsQ0FDZCxrQkFDRixDQUNGLENBRUEsK0JBSUUsYUFBYyxDQURkLHFDQUF1QyxDQUZ2QyxpQkFBa0IsQ0FDbEIsU0FBVyxDQUdYLGdDQUNGLENBRUEscUNBQ0UsK0JBQ0UsU0FBVSxDQUNWLG1CQUNGLENBQ0YsQ0FFQSxvQ0FDRSwrQkFFRSx1QkFBd0IsQ0FEeEIsdUJBRUYsQ0FDRixDQUVBLG1DQUNFLHFCQUNGLENBRUEsb0NBQ0UsMENBQ0YsQ0FFQSxvREFFRSxpQ0FBcUMsQ0FEckMsbUNBRUYsQ0FFQSxzREFFRSxtQ0FBdUMsQ0FEdkMscUNBRUYsQ0FFQSxnRUFDRSxrRUFBb0UsQ0FDcEUsd0VBQ0YsQ0FFQSxxQ0FHRSx3Q0FBeUMsQ0FEekMsV0FBWSxDQURaLGNBR0YsQ0FFQSwwQ0FDRSxpQkFBa0IsQ0FDbEIsU0FBVSxDQUVWLGtCQUFvQixDQURwQixrQkFFRixDQUVBLDRDQUNFLFlBQWUsQ0FDZixTQUFVLENBQ1YsaUJBQ0YsQ0FFQSxnREFDRSwwREFDRixDQUVBLDZCQUNFLGtEQUEwRCxDQUMxRCxxQkFDRixDQUVBLDZDQUNFLGlEQUFrRCxDQUNsRCxnQ0FDRiIsInNvdXJjZXNDb250ZW50IjpbIjpyb290IHtcbiAgLS10aGVtZXMtc2lkZWJhci1leHBhbmRlZDogNTIwcHg7XG4gIC0tdGhlbWVzLXNpZGViYXItd2lkdGgteGw6IDM0MHB4O1xuICAtLXRoZW1lcy1zaWRlYmFyLXdpZHRoLWxnOiAzMjBweDtcbiAgLS10aGVtZXMtc2lkZWJhci13aWR0aC1zbTogMjgwcHg7XG4gIC0tdGhlbWVzLXNpZGViYXItaGVhZGVyLWhlaWdodDogMTIwcHg7XG4gIC0tYnVpbGRlci1oZWFkZXItaGVpZ2h0OiA2NXB4O1xufVxuIiwiLm5lZXRvLXRoZW1lc19fd3JhcHBlciB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS1idWlsZGVyLWhlYWRlci1oZWlnaHQpKTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgdHJhbnNpdGlvbjogbm9uZTtcbiAgei1pbmRleDogMTAyO1xuICBwYWRkaW5nLXRvcDogMS41cmVtO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tZXhwYW5kZWQge1xuICB3aWR0aDogdmFyKC0tdGhlbWVzLXNpZGViYXItZXhwYW5kZWQpICFpbXBvcnRhbnQ7XG4gIG1heC13aWR0aDogMTAwJTtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTc2cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiB2YXIoLS10aGVtZXMtc2lkZWJhci13aWR0aC1zbSk7XG4gIH1cbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHBhZGRpbmctdG9wOiAwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS1idWlsZGVyLWhlYWRlci1oZWlnaHQpKTtcbiAgfVxufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiB2YXIoLS10aGVtZXMtc2lkZWJhci13aWR0aC1sZyk7XG4gIH1cbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTI4MHB4KSB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogdmFyKC0tdGhlbWVzLXNpZGViYXItd2lkdGgteGwpO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWQge1xuICB3aWR0aDogMHJlbTtcbiAgbWF4LXdpZHRoOiAwcmVtO1xuICBtaW4td2lkdGg6IDByZW07XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWQgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgdHJhbnNmb3JtOiBzY2FsZSgtMSk7XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWQgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgICB0b3A6IDYuODEyNXJlbTtcbiAgfVxufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1NzZweCkge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgaW5zZXQtaW5saW5lLWVuZDogYXV0bztcbiAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDAuNXJlbTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19oZWFkZXIge1xuICBwYWRkaW5nLXRvcDogMXJlbTtcbiAgcGFkZGluZy1ib3R0b206IDAuNXJlbTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS10aGVtZXMtc2lkZWJhci1oZWFkZXItaGVpZ2h0KSk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5jc3MtZWRpdG9yLWhlaWdodF9fZXhwYW5kZWQge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSAzMDBweCk7XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLmNzcy1lZGl0b3ItaGVpZ2h0X19yZWd1bGFyIHtcbiAgaGVpZ2h0OiAzODRweDtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYyh2YXIoLS12aWV3cG9ydC1oZWlnaHQsIDEwMHZoKSAtIHZhcigtLWJ1aWxkZXItaGVhZGVyLWhlaWdodCkpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsOmhvdmVyIHtcbiAgYm94LXNoYWRvdzogMHB4IDBweCAwcHggMnB4IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTIwMCkpO1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbDpob3ZlciAubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fb3ZlcmxheSB7XG4gIG9wYWNpdHk6IDAuNjtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLXByZXZpZXctYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUgLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX292ZXJsYXkge1xuICBvcGFjaXR5OiAwLjY7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtNTAwKSkgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIC5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19vdmVybGF5IHtcbiAgb3BhY2l0eTogMC42O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bjpkaXNhYmxlZCxcbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG5bZGlzYWJsZWRdIHtcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYWN0aXZlLWxhYmVsIHtcbiAgLS1uZWV0by11aS1idG4tZm9jdXMtYm94LXNoYWRvdzogbm9uZTtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX3ByZXZpZXctYnRuLFxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bixcbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hY3RpdmUtbGFiZWwge1xuICB3aWR0aDogOC4xMjVyZW07XG4gIG1heC13aWR0aDogMTAwJTtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX3ByZXZpZXctYnRuLS1kaXNhYmxlZCB7XG4gIC0tbmVldG8tdWktYnRuLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKTtcbiAgLS1uZWV0by11aS1idG4tYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKTtcbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19jdXN0b20tY3NzLWVkaXRvci1oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUxZTFlO1xuICBib3JkZXItc3RhcnQtc3RhcnQtcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLWxnKTtcbiAgYm9yZGVyLXN0YXJ0LWVuZC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1NzZweCkge1xuICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3MtZWRpdG9yLWhlYWRlciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXIgLm92ZXJmbG93LWd1YXJkLFxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5tb25hY28tZWRpdG9yIHtcbiAgYm9yZGVyLWVuZC1zdGFydC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICBib3JkZXItZW5kLWVuZC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3Mtd3JhcHBlciAubmVldG8tdGhlbWVzLW5hbm8tc2VjdGlvbiB7XG4gIGJvcmRlci1ib3R0b206IDAgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19iYWNrZHJvcCB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEodmFyKC0tbmVldG8tdWktYmxhY2spLCAwLjQpO1xuICBkaXNwbGF5OiBub25lO1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19iYWNrZHJvcCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX3RvZ2dsZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMC41cmVtO1xuICBpbnNldC1pbmxpbmUtc3RhcnQ6IGNhbGMoMTAwJSArIDAuNXJlbSk7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAwLjNzIGVhc2UtaW4tb3V0O1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgICBvcGFjaXR5OiAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiBhdXRvO1xuICAgIGluc2V0LWlubGluZS1lbmQ6IDEuNXJlbTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJsb2NrIHtcbiAgYm9yZGVyLXJhZGl1czogMC4zNzVyZW07XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtYnV0dG9uIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAwLjc1cmVtICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtYnV0dG9uX19hbGlnbm1lbnQtbGVmdCB7XG4gIGJvcmRlci1zdGFydC1lbmQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbiAgYm9yZGVyLWVuZC1lbmQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLWFsaWdubWVudC1idXR0b25fX2FsaWdubWVudC1jZW50ZXIge1xuICBib3JkZXItc3RhcnQtc3RhcnQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbiAgYm9yZGVyLWVuZC1zdGFydC1yYWRpdXM6IDBweCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJ1dHRvbi5uZWV0by11aS1idG4tLXN0eWxlLXByaW1hcnkge1xuICAtLW5lZXRvLXVpLWJ0bi1iZy1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktMTAwKSkgIWltcG9ydGFudDtcbiAgLS1uZWV0by11aS1idG4taG92ZXItYmctY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTEwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtZGl2aWRlciB7XG4gIHdpZHRoOiAwLjA2MjVyZW07XG4gIGhlaWdodDogMnJlbTtcbiAgYmFja2dyb3VuZDogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSk7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1zZWN0aW9uX19jb250ZW50LS1vcGVuIHtcbiAgbWF4LWhlaWdodDogMTUwMHB4O1xuICBvcGFjaXR5OiAxO1xuICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICBwYWRkaW5nLXRvcDogMC4yNXJlbTtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb25fX2NvbnRlbnQtLWNsb3NlZCB7XG4gIG1heC1oZWlnaHQ6IDBweDtcbiAgb3BhY2l0eTogMDtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tc2VjdGlvbl9fdGl0bGU6Zm9jdXMtdmlzaWJsZSB7XG4gIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSwgMTUlKTtcbn1cblxuLm5lZXRvLXRoZW1lcy1mbGlwLWFuaW1hdGluZyB7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSA5MDBtcyBjdWJpYy1iZXppZXIoMC4yMiwgMSwgMC4zNiwgMSk7XG4gIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hY3RpdmUtYmFubmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSk7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbn1cbiJdfQ== */";
82
- n(css,{});
83
-
84
- var _excluded$1 = ["themeId"];
85
- var list = function list(entityId) {
86
- return axios.get("".concat(utils.BASE_URL, "/api/v1/themes"), {
87
- params: {
88
- entity_id: entityId
89
- }
90
- });
91
- };
92
- var show$1 = function show(id) {
93
- return axios.get("".concat(utils.BASE_URL, "/api/v1/themes/").concat(id));
94
- };
95
- var create = function create(payload) {
96
- return axios.post("".concat(utils.BASE_URL, "/api/v1/themes"), {
97
- theme: payload
98
- });
99
- };
100
- var update = function update(_ref) {
101
- var id = _ref.id,
102
- payload = _ref.payload;
103
- return axios.put("".concat(utils.BASE_URL, "/api/v1/themes/").concat(id), {
104
- theme: payload
105
- }, {
106
- showToastr: false
107
- });
108
- };
109
- var destroy = function destroy(id) {
110
- return axios["delete"]("".concat(utils.BASE_URL, "/api/v1/themes/").concat(id), {
111
- showToastr: false
112
- });
113
- };
114
- var clone = function clone(id) {
115
- return axios.post("".concat(utils.BASE_URL, "/api/v1/themes/").concat(id, "/clone"), {}, {
116
- showToastr: false
117
- });
118
- };
119
- var apply = function apply(_ref2) {
120
- var themeId = _ref2.themeId,
121
- payload = _objectWithoutProperties(_ref2, _excluded$1);
122
- return axios.post("".concat(utils.BASE_URL, "/api/v1/themes/").concat(themeId, "/apply"), {
123
- entity: payload
124
- }, {
125
- showToastr: false
126
- });
127
- };
128
- var applyGlobalTheme = function applyGlobalTheme(_ref3) {
129
- var themeId = _ref3.themeId,
130
- payload = _ref3.payload;
131
- return axios.post("".concat(utils.BASE_URL, "/api/v1/themes/").concat(themeId, "/apply_global_theme"), {
132
- theme: payload
133
- });
134
- };
135
- var themesApi = {
136
- list: list,
137
- show: show$1,
138
- create: create,
139
- update: update,
140
- destroy: destroy,
141
- clone: clone,
142
- apply: apply,
143
- applyGlobalTheme: applyGlobalTheme
144
- };
145
-
146
- function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
147
- function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
148
- var useListThemes = function useListThemes(entityId) {
149
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
150
- return {
151
- isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
152
- };
153
- }, shallow.shallow),
154
- isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
155
- var queryKey = isTemplateThemesEnabled ? [useExpandedSection.QUERY_KEYS.THEMES_LIST, entityId] : [useExpandedSection.QUERY_KEYS.THEMES_LIST];
156
- return reactQuery.useQuery({
157
- queryKey: queryKey,
158
- queryFn: function queryFn() {
159
- return themesApi.list(entityId);
160
- }
161
- });
162
- };
163
- var useFetchTheme = function useFetchTheme(themeId, options) {
164
- return reactQuery.useQuery(_objectSpread$5({
165
- queryKey: [useExpandedSection.QUERY_KEYS.THEME_DETAILS, themeId],
166
- queryFn: function queryFn() {
167
- return themesApi.show(themeId);
168
- }
169
- }, options));
170
- };
171
- var useCreateTheme = function useCreateTheme() {
172
- return reactUtils.useMutationWithInvalidation(themesApi.create, {
173
- keysToInvalidate: [[useExpandedSection.QUERY_KEYS.THEMES_LIST], [useExpandedSection.QUERY_KEYS.THEME_ENTITY_DETAILS], [useExpandedSection.QUERY_KEYS.GLOBAL_THEME_DETAILS]]
174
- });
175
- };
176
- var useUpdateTheme = function useUpdateTheme(themeId) {
177
- var queryClient = reactQuery.useQueryClient();
178
- return reactUtils.useMutationWithInvalidation(function (payload) {
179
- return themesApi.update({
180
- id: themeId,
181
- payload: payload
182
- });
183
- }, {
184
- keysToInvalidate: [[useExpandedSection.QUERY_KEYS.THEMES_LIST], [useExpandedSection.QUERY_KEYS.THEME_ENTITY_DETAILS], [useExpandedSection.QUERY_KEYS.THEME_DETAILS, themeId], [useExpandedSection.QUERY_KEYS.GLOBAL_THEME_DETAILS]],
185
- onSuccess: function onSuccess(_ref) {
186
- var theme = _ref.theme;
187
- queryClient.setQueryData([useExpandedSection.QUERY_KEYS.THEME_DETAILS, themeId], theme);
188
- }
189
- });
190
- };
191
- var useDeleteTheme = function useDeleteTheme() {
192
- return reactUtils.useMutationWithInvalidation(themesApi.destroy, {
193
- keysToInvalidate: [[useExpandedSection.QUERY_KEYS.THEMES_LIST], [useExpandedSection.QUERY_KEYS.THEME_ENTITY_DETAILS]]
194
- });
195
- };
196
- var useCloneTheme = function useCloneTheme() {
197
- return reactUtils.useMutationWithInvalidation(themesApi.clone, {
198
- keysToInvalidate: [useExpandedSection.QUERY_KEYS.THEMES_LIST]
199
- });
200
- };
201
- var useApplyTheme = function useApplyTheme(_ref2) {
202
- var onSuccess = _ref2.onSuccess;
203
- return reactUtils.useMutationWithInvalidation(themesApi.apply, {
204
- keysToInvalidate: [[useExpandedSection.QUERY_KEYS.THEMES_LIST], [useExpandedSection.QUERY_KEYS.THEME_ENTITY_DETAILS]],
205
- onSuccess: onSuccess
206
- });
207
- };
208
-
209
- var routes = {
210
- themes: {
211
- index: "/themes",
212
- edit: "/themes/:themeId/edit",
213
- "new": "/themes/new"
214
- }
215
- };
216
-
217
- var show = function show(entityType) {
218
- return axios.get("".concat(utils.BASE_URL, "/api/v1/global_theme"), {
219
- params: {
220
- entity_type: entityType
221
- }
222
- });
223
- };
224
- var globalThemesApi = {
225
- show: show
226
- };
227
-
228
- var useShowGlobalTheme = function useShowGlobalTheme(entityType) {
229
- return reactQuery.useQuery({
230
- queryKey: [useExpandedSection.QUERY_KEYS.GLOBAL_THEME_DETAILS, entityType],
231
- queryFn: function queryFn() {
232
- return globalThemesApi.show(entityType);
233
- },
234
- enabled: !!entityType
235
- });
236
- };
237
-
238
- var DESIGN_SCREENS = {
239
- THEMES: "Themes",
240
- Customize: "Customize",
241
- CustomCSS: "CustomCSS"
242
- };
243
- var ONE_MEGABYTE = 1;
244
-
245
- var MonacoEditor = /*#__PURE__*/react.lazy(function () {
246
- return import('@monaco-editor/react');
247
- });
248
- var Editor = function Editor(_ref) {
249
- var value = _ref.value,
250
- isCustomCssScreen = _ref.isCustomCssScreen,
251
- onChange = _ref.onChange;
252
- return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
253
- fallback: /*#__PURE__*/jsxRuntime.jsx(Spinner, {}),
254
- children: /*#__PURE__*/jsxRuntime.jsx(MonacoEditor, {
255
- onChange: onChange,
256
- value: value,
257
- language: "css",
258
- theme: "vs-dark",
259
- className: classnames({
260
- rounded: true,
261
- "css-editor-height__expanded": isCustomCssScreen,
262
- "css-editor-height__regular": !isCustomCssScreen
263
- }),
264
- options: {
265
- scrollBeyondLastLine: false,
266
- minimap: {
267
- enabled: false
268
- }
269
- }
270
- })
271
- });
272
- };
273
-
274
- function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
275
- function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
276
- var Card$2 = function Card(_ref) {
277
- var _ref$title = _ref.title,
278
- title = _ref$title === void 0 ? "" : _ref$title,
279
- children = _ref.children,
280
- name = _ref.name,
281
- className = _ref.className,
282
- helpPopoverProps = _ref.helpPopoverProps,
283
- required = _ref.required;
284
- var _useExpandedSection = useExpandedSection.useExpandedSection(),
285
- expandedSection = _useExpandedSection.expandedSection,
286
- setExpandedSection = _useExpandedSection.setExpandedSection;
287
- var isOpen = expandedSection === name;
288
- var isRTL = i18n.dir() === "rtl";
289
- var ToggleIcon = isRTL ? Left : Right;
290
- var handleToggle = function handleToggle() {
291
- return setExpandedSection(isOpen ? "" : name);
292
- };
293
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
294
- "data-testid": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
295
- className: classnames("neeto-themes-nano-section neeto-ui-border-gray-200 border-b pt-2 transition-all duration-300 last:border-none", className, {
296
- "pb-2": !isOpen,
297
- "pb-3": isOpen
298
- }),
299
- children: [title && /*#__PURE__*/jsxRuntime.jsxs("button", {
300
- className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
301
- type: "button",
302
- onClick: handleToggle,
303
- children: [/*#__PURE__*/jsxRuntime.jsxs(Typography, {
304
- className: "flex min-w-0 grow items-center gap-2 text-start",
305
- component: "span",
306
- "data-testid": "theme-properties",
307
- lineHeight: "normal",
308
- style: "h4",
309
- weight: "semibold",
310
- children: [title, required && /*#__PURE__*/jsxRuntime.jsx("span", {
311
- "aria-hidden": true,
312
- className: "-ms-1",
313
- children: "*"
314
- }), neetoCist.isPresent(helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
315
- }), /*#__PURE__*/jsxRuntime.jsx(ToggleIcon, {
316
- size: 20,
317
- className: classnames("transition-all duration-300", {
318
- "rotate-90 rtl:-rotate-90": isOpen
319
- })
320
- })]
321
- }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
322
- className: classnames("neeto-themes-nano-section__content w-full space-y-3 overflow-hidden px-1 transition-all duration-300", {
323
- "neeto-themes-nano-section__content--closed": !isOpen,
324
- "neeto-themes-nano-section__content--open pb-1": isOpen
325
- }),
326
- children: children
327
- })]
328
- });
329
- };
330
-
331
- function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
332
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
333
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
334
- var isScreenCustomCSS = function isScreenCustomCSS(screen) {
335
- return screen === DESIGN_SCREENS.CustomCSS;
336
- };
337
- var buildPathname = function buildPathname(route) {
338
- var pathname = "";
339
- var _iterator = _createForOfIteratorHelper(location.pathname.split("/")),
340
- _step;
341
- try {
342
- for (_iterator.s(); !(_step = _iterator.n()).done;) {
343
- var segment = _step.value;
344
- if (ramda.isEmpty(segment)) {
345
- continue;
346
- }
347
- if (segment === "themes") {
348
- break;
349
- }
350
- pathname += "/".concat(segment);
351
- }
352
- } catch (err) {
353
- _iterator.e(err);
354
- } finally {
355
- _iterator.f();
356
- }
357
- return "".concat(pathname).concat(route);
358
- };
359
-
360
- // FLIP: measure each theme card's position, apply the React update, then
361
- // transform every card back to its old spot and let a CSS transition glide
362
- // it to the new one. The animation itself is CSS (.neeto-themes-flip-animating).
363
- var animateThemeReorder = function animateThemeReorder(updateFn) {
364
- var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
365
- var cards = _toConsumableArray(document.querySelectorAll("[data-flip-id]"));
366
- var scrollContainer = document.querySelector(".neeto-themes-sidebar__scroll");
367
- if (prefersReducedMotion || cards.length === 0) {
368
- updateFn();
369
- if (scrollContainer) scrollContainer.scrollTop = 0;
370
- return;
371
- }
372
- var oldRects = new Map(cards.map(function (card) {
373
- return [card.dataset.flipId, card.getBoundingClientRect()];
374
- }));
375
- reactDom.flushSync(updateFn);
376
-
377
- // Move the viewport to the top — the applied theme is now the first card.
378
- // The FLIP deltas below are measured after this, so the scroll is folded
379
- // into the glide instead of showing as an instant jump.
380
- if (scrollContainer) scrollContainer.scrollTop = 0;
381
- var flips = _toConsumableArray(document.querySelectorAll("[data-flip-id]")).map(function (card) {
382
- var oldRect = oldRects.get(card.dataset.flipId);
383
- if (!oldRect) return null;
384
- var newRect = card.getBoundingClientRect();
385
- var dx = oldRect.left - newRect.left;
386
- var dy = oldRect.top - newRect.top;
387
- return dx || dy ? {
388
- card: card,
389
- dx: dx,
390
- dy: dy
391
- } : null;
392
- }).filter(Boolean);
393
- if (flips.length === 0) return;
394
- flips.forEach(function (_ref) {
395
- var card = _ref.card,
396
- dx = _ref.dx,
397
- dy = _ref.dy;
398
- card.style.transform = "translate(".concat(dx, "px, ").concat(dy, "px)");
399
- });
400
-
401
- // Force a reflow so the starting transform is committed before animating.
402
- document.body.offsetHeight;
403
- flips.forEach(function (_ref2) {
404
- var card = _ref2.card;
405
- card.classList.add("neeto-themes-flip-animating");
406
- card.style.transform = "";
407
- card.addEventListener("transitionend", function () {
408
- card.classList.remove("neeto-themes-flip-animating");
409
- }, {
410
- once: true
411
- });
412
- });
413
- };
414
-
415
- var CustomCSS = function CustomCSS(_ref) {
416
- var onEditCSSClick = _ref.onEditCSSClick,
417
- currentScreen = _ref.currentScreen,
418
- isEnabled = _ref.isEnabled,
419
- isProFeature = _ref.isProFeature;
420
- var _useTranslation = reactI18next.useTranslation(),
421
- t = _useTranslation.t;
422
- var _useFormikContext = formik.useFormikContext(),
423
- values = _useFormikContext.values,
424
- setFieldValue = _useFormikContext.setFieldValue;
425
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
426
- return {
427
- themePropertiesSchema: store["themePropertiesSchema"],
428
- helpPopoverProps: store["helpPopoverProps"]
429
- };
430
- }, shallow.shallow),
431
- themePropertiesSchema = _useConfigStore.themePropertiesSchema,
432
- helpPopoverProps = _useConfigStore.helpPopoverProps;
433
- var _helpPopoverProps$cus = helpPopoverProps.customCss,
434
- customCssHelpPopoverProps = _helpPopoverProps$cus === void 0 ? {} : _helpPopoverProps$cus;
435
- var _useExpandedSection = useExpandedSection.useExpandedSection(),
436
- expandedSection = _useExpandedSection.expandedSection;
437
- var isExpanded = expandedSection === "customcss";
438
- var customCSS = neetoCist.findBy({
439
- kind: "custom_css"
440
- }, values.properties);
441
- if (!customCSS || !isEnabled && !isProFeature) return null;
442
- var parentElementClass = neetoCist.findBy({
443
- kind: "custom_css"
444
- }, themePropertiesSchema).parentClass;
445
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
446
- var handleEditorToggle = function handleEditorToggle() {
447
- if (!isCustomCssScreen) return onEditCSSClick(DESIGN_SCREENS.CustomCSS);
448
- onEditCSSClick(DESIGN_SCREENS.Customize);
449
- return setTimeout(function () {
450
- utils.scrollElementIntoView("css-editor");
451
- }, 400);
452
- };
453
- var handleChange = function handleChange(value) {
454
- var index = neetoCist.findIndexBy({
455
- key: customCSS.key
456
- }, values.properties);
457
- if (index !== -1 && values.properties[index].value !== value) {
458
- setFieldValue("properties[".concat(index, "].value"), value);
459
- utils.setCustomCSS({
460
- css: value,
461
- elementId: customCSS.key,
462
- parentElementClass: parentElementClass
463
- });
464
- }
465
- };
466
- return /*#__PURE__*/jsxRuntime.jsx("div", {
467
- className: "neeto-themes-sidebar__custom-css-wrapper",
468
- id: "css-editor",
469
- children: /*#__PURE__*/jsxRuntime.jsx(Card$2, {
470
- name: "customcss",
471
- helpPopoverProps: isEnabled ? customCssHelpPopoverProps : {
472
- title: t("neetoThemes.common.proFeature.customCSS.title"),
473
- description: t("neetoThemes.common.proFeature.customCSS.description")
474
- },
475
- title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
476
- children: isEnabled ? /*#__PURE__*/jsxRuntime.jsxs("div", {
477
- className: "w-full",
478
- children: [/*#__PURE__*/jsxRuntime.jsx("div", {
479
- className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
480
- children: /*#__PURE__*/jsxRuntime.jsx(Button, {
481
- size: "small",
482
- style: "secondary",
483
- label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
484
- onClick: handleEditorToggle
485
- })
486
- }), isExpanded && /*#__PURE__*/jsxRuntime.jsx(Editor, {
487
- isCustomCssScreen: isCustomCssScreen,
488
- value: customCSS.value,
489
- onChange: handleChange
490
- })]
491
- }) : /*#__PURE__*/jsxRuntime.jsx("div", {
492
- className: "px-1 py-2",
493
- children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
494
- lineHeight: "normal",
495
- style: "body2",
496
- children: t("neetoThemes.common.proFeature.customCSS.description")
497
- })
498
- })
499
- })
500
- });
501
- };
502
-
503
- var LogoPosition = function LogoPosition() {
504
- var _useTranslation = reactI18next.useTranslation(),
505
- t = _useTranslation.t;
506
- var _useFormikContext = formik.useFormikContext(),
507
- values = _useFormikContext.values;
508
- var index = neetoCist.findIndexBy({
509
- key: "logo_position"
510
- }, values.properties);
511
- // Do not show this field if the logo_position property is not present.
512
- if (index === -1) return null;
513
- return /*#__PURE__*/jsxRuntime.jsxs(Radio, {
514
- stacked: true,
515
- name: "properties[".concat(index, "].value"),
516
- label: /*#__PURE__*/jsxRuntime.jsx(Typography, {
517
- className: "my-3",
518
- component: "span",
519
- style: "body2",
520
- weight: "semibold",
521
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.title")
522
- }),
523
- children: [/*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
524
- value: "over_left",
525
- label: /*#__PURE__*/jsxRuntime.jsxs("span", {
526
- className: "flex flex-col gap-1",
527
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
528
- component: "span",
529
- style: "body2",
530
- weight: "semibold",
531
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeft")
532
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
533
- component: "span",
534
- style: "body3",
535
- weight: "normal",
536
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeftDescription")
537
- })]
538
- })
539
- }), /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
540
- value: "below_left",
541
- label: /*#__PURE__*/jsxRuntime.jsxs("span", {
542
- className: "flex flex-col gap-1",
543
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
544
- component: "span",
545
- style: "body2",
546
- weight: "semibold",
547
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeft")
548
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
549
- component: "span",
550
- style: "body3",
551
- weight: "normal",
552
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeftDescription")
553
- })]
554
- })
555
- })]
556
- });
557
- };
558
-
559
- function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
560
- function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
561
-
562
- // Capitalizes the first letter of the displayed label while keeping the
563
- // underlying value untouched (position values like "top left" are used
564
- // verbatim as CSS background-position, so they must stay lowercase).
565
- var toCapitalizedOption = function toCapitalizedOption(value) {
566
- var _toLabelAndValue = neetoCist.toLabelAndValue(value),
567
- label = _toLabelAndValue.label,
568
- optionValue = _toLabelAndValue.value;
569
- return {
570
- label: label ? neetoCist.capitalize(label) : label,
571
- value: optionValue
572
- };
573
- };
574
- var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
575
- if (neetoCist.isPresent(theme)) return theme;
576
- return {
577
- name: i18n.t("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
578
- properties: themePropertiesSchema.map(function (_ref) {
579
- var key = _ref.key,
580
- kind = _ref.kind,
581
- defaultValue = _ref.defaultValue,
582
- _ref$order = _ref.order,
583
- order = _ref$order === void 0 ? null : _ref$order,
584
- dependsOn = _ref.dependsOn;
585
- switch (kind) {
586
- case "text_input":
587
- return _objectSpread$3({
588
- value: defaultValue || "",
589
- kind: "text_input",
590
- key: key,
591
- dependsOn: dependsOn
592
- }, order !== null && {
593
- order: order
594
- });
595
- case "color":
596
- return _objectSpread$3({
597
- value: defaultValue,
598
- kind: "color",
599
- key: key,
600
- dependsOn: dependsOn
601
- }, order !== null && {
602
- order: order
603
- });
604
- case "font_family":
605
- return _objectSpread$3({
606
- value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
607
- kind: "font_family",
608
- key: key,
609
- dependsOn: dependsOn
610
- }, order !== null && {
611
- order: order
612
- });
613
- case "overlay_opacity":
614
- return _objectSpread$3({
615
- value: 0,
616
- kind: "overlay_opacity",
617
- key: key,
618
- dependsOn: dependsOn
619
- }, order !== null && {
620
- order: order
621
- });
622
- case "slider":
623
- return _objectSpread$3({
624
- value: 0,
625
- kind: "slider",
626
- key: key,
627
- dependsOn: dependsOn
628
- }, order !== null && {
629
- order: order
630
- });
631
- case "radius":
632
- return _objectSpread$3({
633
- value: defaultValue,
634
- kind: "radius",
635
- key: key,
636
- dependsOn: dependsOn
637
- }, order !== null && {
638
- order: order
639
- });
640
- case "boolean":
641
- return _objectSpread$3({
642
- value: String(defaultValue),
643
- kind: "boolean",
644
- key: key,
645
- dependsOn: dependsOn
646
- }, order !== null && {
647
- order: order
648
- });
649
- case "order_selector":
650
- return _objectSpread$3({
651
- value: defaultValue,
652
- kind: "order_selector",
653
- key: key,
654
- dependsOn: dependsOn
655
- }, order !== null && {
656
- order: order
657
- });
658
- case "alignment_block":
659
- return _objectSpread$3({
660
- value: defaultValue,
661
- kind: "alignment_block",
662
- key: key,
663
- dependsOn: dependsOn
664
- }, order !== null && {
665
- order: order
666
- });
667
- case "custom_css":
668
- return _objectSpread$3({
669
- value: defaultValue,
670
- kind: "custom_css",
671
- key: key,
672
- dependsOn: dependsOn
673
- }, order !== null && {
674
- order: order
675
- });
676
- case "logo_position":
677
- return _objectSpread$3({
678
- value: defaultValue,
679
- kind: "logo_position",
680
- key: key,
681
- dependsOn: dependsOn
682
- }, order !== null && {
683
- order: order
684
- });
685
- default:
686
- return null;
687
- }
688
- }).filter(neetoCist.isNot(null))
689
- };
690
- };
691
- var buildImageData = function buildImageData(values, themePropertiesSchema) {
692
- return neetoCist.filterBy({
693
- kind: "image"
694
- }, themePropertiesSchema).reduce(function (acc, item) {
695
- var _values$snakeToCamelC;
696
- var signedId = (_values$snakeToCamelC = values[neetoCist.snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
697
- acc[item.key] = signedId;
698
- return acc;
699
- }, {});
700
- };
701
- var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
702
- var property = neetoCist.findBy({
703
- key: key
704
- }, themePropertiesSchema);
705
- if (neetoCist.isNotPresent(property)) return false;
706
- if (property !== null && property !== void 0 && property.hidden) return false;
707
- var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
708
- if (neetoCist.isNotPresent(conditionalKey)) return true;
709
- var dependentPropertySchema = neetoCist.findBy({
710
- key: conditionalKey
711
- }, themePropertiesSchema);
712
- var dependentProperty = neetoCist.findBy({
713
- key: conditionalKey
714
- }, formikValues.properties);
715
- if (dependentPropertySchema.kind === "image") {
716
- var _formikValues$snakeTo;
717
- return neetoCist.isPresent((_formikValues$snakeTo = formikValues[neetoCist.snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
718
- } else if (dependentPropertySchema.kind === "boolean") {
719
- return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
720
- }
721
- return neetoCist.isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
722
- };
723
- var buildLabel = function buildLabel(key, kind) {
724
- return i18n.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
725
- };
726
- var buildProperties = function buildProperties(values, condition, themePropertiesSchema) {
727
- values.forEach(function (value) {
728
- themePropertiesSchema.forEach(function (theme) {
729
- if (!(value.key === theme.key)) return;
730
- value.dependsOn = theme.dependsOn;
731
- });
732
- });
733
- if (condition) {
734
- return neetoCist.filterBy({
735
- dependsOn: condition
736
- }, values);
737
- }
738
- var imageKeys = new Set();
739
- neetoCist.filterBy({
740
- kind: "image"
741
- }, themePropertiesSchema).forEach(function (ele) {
742
- return imageKeys.add(ele.key);
743
- });
744
- return values === null || values === void 0 ? void 0 : values.filter(function (_ref2) {
745
- var dependsOn = _ref2.dependsOn;
746
- return !imageKeys.has(dependsOn);
747
- });
748
- };
749
-
750
- var AlignmentBlock = function AlignmentBlock(_ref) {
751
- var label = _ref.label,
752
- name = _ref.name;
753
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
754
- className: "flex items-center justify-between gap-2",
755
- "data-testid": utils$1.joinHyphenCase(label),
756
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
757
- "data-testid": "style-fields-labels",
758
- style: "body2",
759
- children: label
760
- }), /*#__PURE__*/jsxRuntime.jsx(formik.Field, {
761
- name: name,
762
- children: function children(_ref2) {
763
- var value = _ref2.field.value,
764
- setFieldValue = _ref2.form.setFieldValue;
765
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
766
- className: "neeto-ui-border-gray-300 neeto-themes-nano-alignment-block flex items-center border",
767
- children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
768
- className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
769
- "data-testid": "alignment-left",
770
- size: "medium",
771
- style: value === "left" ? "primary" : "text",
772
- icon: function icon() {
773
- return /*#__PURE__*/jsxRuntime.jsx(LeftAlign, {
774
- size: 20,
775
- className: classnames({
776
- rounded: true,
777
- "neeto-ui-text-primary-800": value === "left",
778
- "neeto-ui-text-gray-600": value !== "left"
779
- })
780
- });
781
- },
782
- tooltipProps: {
783
- content: "Left align",
784
- position: "bottom"
785
- },
786
- onClick: function onClick() {
787
- return setFieldValue(name, "left");
788
- }
789
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
790
- className: "neeto-themes-nano-alignment-divider"
791
- }), /*#__PURE__*/jsxRuntime.jsx(Button, {
792
- className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
793
- "data-testid": "alignment-center",
794
- size: "medium",
795
- style: value === "center" ? "primary" : "text",
796
- icon: function icon() {
797
- return /*#__PURE__*/jsxRuntime.jsx(CenterAlign, {
798
- size: 20,
799
- className: classnames({
800
- rounded: true,
801
- "neeto-ui-text-primary-800": value === "center",
802
- "neeto-ui-text-gray-600": value !== "center"
803
- })
804
- });
805
- },
806
- tooltipProps: {
807
- content: "Center align",
808
- position: "bottom"
809
- },
810
- onClick: function onClick() {
811
- return setFieldValue(name, "center");
812
- }
813
- })]
814
- });
815
- }
816
- })]
817
- });
818
- };
819
-
820
- var ColorBlock = function ColorBlock(_ref) {
821
- var label = _ref.label,
822
- _ref$color = _ref.color,
823
- color = _ref$color === void 0 ? "#FFFFFF" : _ref$color,
824
- onChange = _ref.onChange,
825
- showTransparencyControl = _ref.showTransparencyControl;
826
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
827
- className: "flex items-center justify-between",
828
- "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
829
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
830
- "data-testid": "style-fields-labels",
831
- style: "body2",
832
- children: label
833
- }), /*#__PURE__*/jsxRuntime.jsx(ColorPicker, {
834
- color: color,
835
- onChange: onChange,
836
- showTransparencyControl: showTransparencyControl,
837
- showEyeDropper: true,
838
- size: "medium"
839
- })]
840
- });
841
- };
842
-
843
- function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
844
- function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
845
- var FontPickerBlock = function FontPickerBlock(_ref) {
846
- var label = _ref.label,
847
- _ref$placeholder = _ref.placeholder,
848
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
849
- value = _ref.value,
850
- options = _ref.options,
851
- onChange = _ref.onChange;
852
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
853
- className: "flex items-center justify-between",
854
- "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
855
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
856
- "data-testid": "style-fields-labels",
857
- style: "body2",
858
- children: label
859
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
860
- className: "w-40",
861
- children: /*#__PURE__*/jsxRuntime.jsx(Select, {
862
- onChange: onChange,
863
- options: options,
864
- placeholder: placeholder,
865
- value: value,
866
- menuPosition: "fixed",
867
- styles: {
868
- option: function option(styles, _ref2) {
869
- var data = _ref2.data;
870
- return _objectSpread$2(_objectSpread$2({}, styles), {}, {
871
- fontFamily: data.value
872
- });
873
- }
874
- }
875
- })
876
- })]
877
- });
878
- };
879
-
880
- var SelectBlock = function SelectBlock(_ref) {
881
- var label = _ref.label,
882
- _ref$placeholder = _ref.placeholder,
883
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
884
- value = _ref.value,
885
- options = _ref.options,
886
- onChange = _ref.onChange;
887
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
888
- className: "neeto-ui-border-gray-200 flex flex-col gap-2 border-t pt-3",
889
- "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
890
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
891
- "data-testid": "logo-field-labels",
892
- style: "body2",
893
- children: label
894
- }), /*#__PURE__*/jsxRuntime.jsx(Select, {
895
- onChange: onChange,
896
- options: options,
897
- placeholder: placeholder,
898
- value: value
899
- })]
900
- });
901
- };
902
-
903
- var SliderBlock = function SliderBlock(_ref) {
904
- var label = _ref.label,
905
- onChange = _ref.onChange,
906
- value = _ref.value,
907
- min = _ref.min,
908
- max = _ref.max,
909
- marks = _ref.marks;
910
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
911
- className: "flex items-center justify-between gap-3",
912
- "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
913
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
914
- "data-testid": "style-fields-labels",
915
- style: "body2",
916
- children: label
917
- }), /*#__PURE__*/jsxRuntime.jsx(antd.Slider, {
918
- marks: marks,
919
- max: max,
920
- min: min,
921
- onChange: onChange,
922
- value: value,
923
- className: "my-2 w-20",
924
- tooltip: {
925
- formatter: null
926
- }
927
- })]
928
- });
929
- };
930
-
931
- var _excluded = ["label", "name", "asCheckbox"];
932
- function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
933
- function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
934
- var SwitchBlock = function SwitchBlock(_ref) {
935
- var label = _ref.label,
936
- name = _ref.name,
937
- _ref$asCheckbox = _ref.asCheckbox,
938
- asCheckbox = _ref$asCheckbox === void 0 ? false : _ref$asCheckbox,
939
- inputProps = _objectWithoutProperties(_ref, _excluded);
940
- var _useTranslation = reactI18next.useTranslation(),
941
- t = _useTranslation.t,
942
- i18n = _useTranslation.i18n;
943
- var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
944
- var doesHelpTextExist = i18n.exists(translationKey);
945
- if (asCheckbox) {
946
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
947
- className: "flex items-center gap-2",
948
- "data-testid": "theme-style-content-background",
949
- children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
950
- label: label,
951
- name: name
952
- }, inputProps)), {}, {
953
- "data-testid": "enable-background-color-toggle"
954
- })), doesHelpTextExist && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
955
- className: "shrink-0",
956
- description: t(translationKey)
957
- })]
958
- });
959
- }
960
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
961
- className: "flex items-center justify-between",
962
- "data-testid": "theme-style-content-background",
963
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
964
- className: "inline-flex items-center gap-4",
965
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
966
- "data-testid": "style-fields-labels",
967
- style: "body2",
968
- className: classnames({
969
- "w-32": doesHelpTextExist,
970
- "w-auto": !doesHelpTextExist
971
- }),
972
- children: label
973
- }), doesHelpTextExist && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
974
- className: "shrink-0",
975
- description: t(translationKey)
976
- })]
977
- }), /*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
978
- name: name
979
- }, inputProps)), {}, {
980
- "data-testid": "enable-background-color-toggle"
981
- }))]
982
- });
983
- };
984
-
985
- var TextBlock = function TextBlock(_ref) {
986
- var label = _ref.label,
987
- name = _ref.name,
988
- _ref$type = _ref.type,
989
- type = _ref$type === void 0 ? "text" : _ref$type,
990
- value = _ref.value,
991
- onChange = _ref.onChange,
992
- placeholder = _ref.placeholder,
993
- error = _ref.error;
994
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
995
- className: "flex items-center justify-between",
996
- "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
997
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
998
- "data-testid": "style-fields-labels",
999
- style: "body2",
1000
- children: label
1001
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
1002
- className: "w-40",
1003
- children: /*#__PURE__*/jsxRuntime.jsx(Input, {
1004
- error: error,
1005
- name: name,
1006
- onChange: onChange,
1007
- placeholder: placeholder,
1008
- type: type,
1009
- value: value
1010
- })
1011
- })]
1012
- });
1013
- };
1014
-
1015
- var Properties = function Properties(_ref) {
1016
- var onPropertiesChange = _ref.onPropertiesChange,
1017
- condition = _ref.condition,
1018
- themeId = _ref.themeId;
1019
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1020
- return {
1021
- themePropertiesSchema: store["themePropertiesSchema"]
1022
- };
1023
- }, shallow.shallow),
1024
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
1025
- var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
1026
- return {
1027
- setThemeState: store["setThemeState"]
1028
- };
1029
- }, shallow.shallow),
1030
- setThemeState = _useThemeStore.setThemeState;
1031
- var _useFormikContext = formik.useFormikContext(),
1032
- setFieldValue = _useFormikContext.setFieldValue,
1033
- values = _useFormikContext.values,
1034
- errors = _useFormikContext.errors;
1035
- var _useThemeUtils = useExpandedSection.useThemeUtils(),
1036
- setVariable = _useThemeUtils.setVariable,
1037
- setTheme = _useThemeUtils.setTheme;
1038
- var handleColorChange = function handleColorChange(name) {
1039
- return function (_ref2) {
1040
- var hex = _ref2.hex,
1041
- rgb = _ref2.rgb;
1042
- if (name === "background_color") {
1043
- var _findBy, _values$backgroundIma;
1044
- var isDominantBackgroundColorEnabled = ((_findBy = neetoCist.findBy({
1045
- key: "is_dominant_background_color_enabled"
1046
- }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) === "true";
1047
- var hasImageWithDominantColor = values === null || values === void 0 || (_values$backgroundIma = values.backgroundImage) === null || _values$backgroundIma === void 0 ? void 0 : _values$backgroundIma.dominantColor;
1048
- if (isDominantBackgroundColorEnabled && hasImageWithDominantColor) {
1049
- return;
1050
- }
1051
- }
1052
- handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
1053
- };
1054
- };
1055
- var handleChange = function handleChange(name, value, variableValue) {
1056
- var index = neetoCist.findIndexBy({
1057
- key: name
1058
- }, values.properties);
1059
- if (index !== -1 && values.properties[index].value !== value) {
1060
- setFieldValue("properties[".concat(index, "].value"), value);
1061
- }
1062
- setVariable(neetoCist.snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
1063
- };
1064
- var handleOverlayChange = function handleOverlayChange(key, value) {
1065
- var index = neetoCist.findIndexBy({
1066
- key: key
1067
- }, values.properties);
1068
- var overlayColorVariable = "".concat(key, "_overlay_color");
1069
- setFieldValue("properties[".concat(index, "].value"), value);
1070
- setVariable("".concat(key, "_overlay_opacity"), Math.abs(value / 100));
1071
- if (value < 0) {
1072
- handleChange(overlayColorVariable, "#000000", "0, 0, 0");
1073
- } else {
1074
- handleChange(overlayColorVariable, "#ffffff", "255, 255, 255");
1075
- }
1076
- };
1077
- react.useEffect(function () {
1078
- if (!((values === null || values === void 0 ? void 0 : values.id) === themeId)) return;
1079
- onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
1080
- setTheme(values);
1081
- setThemeState({
1082
- previewingTheme: values
1083
- });
1084
- }, [values]);
1085
- return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
1086
- children: buildProperties(values === null || values === void 0 ? void 0 : values.properties, condition, themePropertiesSchema).sort(function (a, b) {
1087
- var order = function order(key) {
1088
- var _findBy2;
1089
- return ((_findBy2 = neetoCist.findBy({
1090
- key: key
1091
- }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.order) || Infinity;
1092
- };
1093
- return order(a.key) - order(b.key);
1094
- }).map(function (_ref3) {
1095
- var _findBy3;
1096
- var key = _ref3.key,
1097
- value = _ref3.value,
1098
- kind = _ref3.kind;
1099
- var isCurrentPropertyVisible = isPropertyVisible(key, values, themePropertiesSchema);
1100
- if (!isCurrentPropertyVisible) return null;
1101
- switch (kind) {
1102
- case "text_input":
1103
- {
1104
- var _errors$properties;
1105
- var index = neetoCist.findIndexBy({
1106
- key: key
1107
- }, values.properties);
1108
- var error = errors === null || errors === void 0 || (_errors$properties = errors.properties) === null || _errors$properties === void 0 || (_errors$properties = _errors$properties[index]) === null || _errors$properties === void 0 ? void 0 : _errors$properties.value;
1109
- return /*#__PURE__*/react.createElement(TextBlock, {
1110
- error: error,
1111
- key: key,
1112
- label: buildLabel(key, kind),
1113
- name: "properties[".concat(index, "].value"),
1114
- value: value || "",
1115
- onChange: function onChange(e) {
1116
- return setFieldValue("properties[".concat(index, "].value"), e.target.value);
1117
- }
1118
- });
1119
- }
1120
- case "font_family":
1121
- return /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
1122
- label: buildLabel(key, kind),
1123
- options: useExpandedSection.FONT_OPTIONS,
1124
- value: neetoCist.findBy({
1125
- value: value || null
1126
- }, useExpandedSection.FONT_OPTIONS),
1127
- onChange: function onChange(_ref4) {
1128
- var value = _ref4.value;
1129
- return handleChange(key, value);
1130
- }
1131
- }, key);
1132
- case "color":
1133
- return /*#__PURE__*/jsxRuntime.jsx(ColorBlock, {
1134
- color: value,
1135
- label: buildLabel(key, kind),
1136
- showTransparencyControl: ((_findBy3 = neetoCist.findBy({
1137
- key: key
1138
- }, themePropertiesSchema)) === null || _findBy3 === void 0 ? void 0 : _findBy3.showTransparencyControl) || false,
1139
- onChange: handleColorChange(key)
1140
- }, key);
1141
- case "radius":
1142
- return /*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
1143
- label: buildLabel(key, kind),
1144
- max: 50,
1145
- min: 0,
1146
- value: Number(value) || 0,
1147
- onChange: function onChange(radius) {
1148
- return handleChange(key, radius, "".concat(radius, "px"));
1149
- }
1150
- }, key);
1151
- case "overlay_opacity":
1152
- return /*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
1153
- label: buildLabel(key, kind),
1154
- marks: useExpandedSection.OVERLAY_OPACITY_SLIDER_MARKS,
1155
- max: useExpandedSection.HUNDRED,
1156
- min: ramda.negate(useExpandedSection.HUNDRED),
1157
- value: Number(value) || 0,
1158
- onChange: function onChange(opacity) {
1159
- return handleOverlayChange(key, opacity);
1160
- }
1161
- }, key);
1162
- case "position_selector":
1163
- {
1164
- var _findBy4;
1165
- var _index = neetoCist.findIndexBy({
1166
- key: key
1167
- }, values.properties);
1168
- var options = (_findBy4 = neetoCist.findBy({
1169
- key: key
1170
- }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toCapitalizedOption);
1171
- return /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
1172
- label: buildLabel(key, kind),
1173
- options: options || useExpandedSection.POSITION_OPTIONS,
1174
- placeholder: "left",
1175
- value: toCapitalizedOption(value),
1176
- onChange: function onChange(option) {
1177
- return setFieldValue("properties[".concat(_index, "].value"), option.value);
1178
- }
1179
- }, key);
1180
- }
1181
- case "boolean":
1182
- {
1183
- var _findBy5;
1184
- var _index2 = neetoCist.findIndexBy({
1185
- key: key
1186
- }, values.properties);
1187
- var renderAsCheckbox = ((_findBy5 = neetoCist.findBy({
1188
- key: key
1189
- }, themePropertiesSchema)) === null || _findBy5 === void 0 ? void 0 : _findBy5.renderAsCheckbox) || false;
1190
- return /*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
1191
- asCheckbox: renderAsCheckbox,
1192
- checked: value !== "false",
1193
- label: buildLabel(key, kind),
1194
- name: neetoCist.snakeToCamelCase(key),
1195
- onChange: function onChange(e) {
1196
- return setFieldValue("properties[".concat(_index2, "].value"), String(e.target.checked));
1197
- }
1198
- }, key);
1199
- }
1200
- case "alignment_block":
1201
- {
1202
- var _index3 = neetoCist.findIndexBy({
1203
- key: key
1204
- }, values.properties);
1205
- return /*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
1206
- label: buildLabel(key, kind),
1207
- name: "properties[".concat(_index3, "].value")
1208
- });
1209
- }
1210
- default:
1211
- return null;
1212
- }
1213
- })
1214
- });
1215
- };
1216
-
1217
- var ImageBlock = function ImageBlock(_ref) {
1218
- var _findBy;
1219
- var label = _ref.label,
1220
- name = _ref.name,
1221
- _ref$imageData = _ref.imageData,
1222
- imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
1223
- _ref$uploadConfig = _ref.uploadConfig,
1224
- uploadConfig = _ref$uploadConfig === void 0 ? {
1225
- maxImageSize: ONE_MEGABYTE
1226
- } : _ref$uploadConfig,
1227
- attribute = _ref.attribute,
1228
- defaultImageSize = _ref.defaultImageSize,
1229
- useDefaultImageSize = _ref.useDefaultImageSize,
1230
- fixedAspectRatio = _ref.fixedAspectRatio;
1231
- var _useTranslation = reactI18next.useTranslation(),
1232
- t = _useTranslation.t;
1233
- var _useFormikContext = formik.useFormikContext(),
1234
- setFieldValue = _useFormikContext.setFieldValue,
1235
- values = _useFormikContext.values;
1236
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1237
- return {
1238
- themePropertiesSchema: store["themePropertiesSchema"]
1239
- };
1240
- }, shallow.shallow),
1241
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
1242
- var propertySchema = neetoCist.findBy({
1243
- key: attribute
1244
- }, themePropertiesSchema);
1245
- var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
1246
- var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
1247
- var positionKeyInSchema = neetoCist.findBy({
1248
- key: "".concat(name, "_position")
1249
- }, themePropertiesSchema);
1250
- var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && neetoCist.isPresent(positionKeyInSchema);
1251
- var positionKeyIndex = neetoCist.findIndexBy({
1252
- key: "".concat(name, "_position")
1253
- }, values.properties);
1254
- var handleImageChange = /*#__PURE__*/function () {
1255
- var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
1256
- var dominantColor;
1257
- return _regeneratorRuntime.wrap(function _callee$(_context) {
1258
- while (1) switch (_context.prev = _context.next) {
1259
- case 0:
1260
- _context.prev = 0;
1261
- if (!(ramda.isEmpty(image.signedId) || ramda.isEmpty(image.url))) {
1262
- _context.next = 4;
1263
- break;
1264
- }
1265
- setFieldValue(name, {
1266
- signedId: null,
1267
- url: image.url
1268
- });
1269
- return _context.abrupt("return");
1270
- case 4:
1271
- _context.next = 6;
1272
- return utils.getDominantColorFromUrl(image.url);
1273
- case 6:
1274
- dominantColor = _context.sent;
1275
- setFieldValue(name, {
1276
- signedId: image.signedId,
1277
- url: image.url,
1278
- dominantColor: dominantColor
1279
- });
1280
- _context.next = 13;
1281
- break;
1282
- case 10:
1283
- _context.prev = 10;
1284
- _context.t0 = _context["catch"](0);
1285
- Toastr.error(_context.t0);
1286
- case 13:
1287
- case "end":
1288
- return _context.stop();
1289
- }
1290
- }, _callee, null, [[0, 10]]);
1291
- }));
1292
- return function handleImageChange(_x) {
1293
- return _ref2.apply(this, arguments);
1294
- };
1295
- }();
1296
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
1297
- className: "space-y-3",
1298
- "data-testid": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
1299
- children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
1300
- className: "flex items-center justify-between",
1301
- children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
1302
- "data-testid": "style-fields-labels",
1303
- style: "body2",
1304
- children: label
1305
- })
1306
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1307
- className: "space-y-3",
1308
- children: [/*#__PURE__*/react.createElement(ImageUploader, {
1309
- fixedAspectRatio: fixedAspectRatio,
1310
- uploadConfig: uploadConfig,
1311
- className: "h-40 w-full",
1312
- defaultImageSize: useDefaultImageSize ? defaultImageSize : {},
1313
- key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
1314
- src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
1315
- onUploadComplete: handleImageChange
1316
- }), isPositionChangerVisible && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
1317
- label: buildLabel("".concat(name, "Position"), "image"),
1318
- options: (options === null || options === void 0 ? void 0 : options.map(toCapitalizedOption)) || useExpandedSection.POSITION_OPTIONS,
1319
- placeholder: t("neetoThemes.common.left"),
1320
- value: toCapitalizedOption(((_findBy = neetoCist.findBy({
1321
- key: "".concat(name, "_position")
1322
- }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
1323
- onChange: function onChange(option) {
1324
- return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
1325
- }
1326
- })]
1327
- })]
1328
- });
1329
- };
1330
-
1331
- var Images = function Images(_ref) {
1332
- var _values$coverImage;
1333
- var attribute = _ref.attribute,
1334
- className = _ref.className,
1335
- onPropertiesChange = _ref.onPropertiesChange,
1336
- defaultImageSize = _ref.defaultImageSize,
1337
- useDefaultImageSize = _ref.useDefaultImageSize,
1338
- fixedAspectRatio = _ref.fixedAspectRatio;
1339
- var _useFormikContext = formik.useFormikContext(),
1340
- values = _useFormikContext.values;
1341
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1342
- return {
1343
- helpPopoverProps: store["helpPopoverProps"]
1344
- };
1345
- }, shallow.shallow),
1346
- helpPopoverProps = _useConfigStore.helpPopoverProps;
1347
- var key = neetoCist.snakeToCamelCase(attribute);
1348
- var title = buildLabel(key, "image");
1349
- var imageData = values[key];
1350
- return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
1351
- className: className,
1352
- title: title,
1353
- helpPopoverProps: helpPopoverProps[key],
1354
- name: key,
1355
- children: [/*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
1356
- attribute: attribute,
1357
- defaultImageSize: defaultImageSize,
1358
- fixedAspectRatio: fixedAspectRatio,
1359
- imageData: imageData,
1360
- useDefaultImageSize: useDefaultImageSize,
1361
- name: key
1362
- }), /*#__PURE__*/jsxRuntime.jsx(Properties, {
1363
- onPropertiesChange: onPropertiesChange,
1364
- condition: attribute
1365
- }), key === "logo" && ((_values$coverImage = values.coverImage) === null || _values$coverImage === void 0 ? void 0 : _values$coverImage.url) && /*#__PURE__*/jsxRuntime.jsx(LogoPosition, {})]
1366
- });
1367
- };
1368
-
1369
- var ThemeMeta = function ThemeMeta(_ref) {
1370
- var className = _ref.className;
1371
- var _useTranslation = reactI18next.useTranslation(),
1372
- t = _useTranslation.t;
1373
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1374
- return {
1375
- helpPopoverProps: store["helpPopoverProps"]
1376
- };
1377
- }, shallow.shallow),
1378
- helpPopoverProps = _useConfigStore.helpPopoverProps;
1379
- var _helpPopoverProps$nam = helpPopoverProps.name,
1380
- nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
1381
- return /*#__PURE__*/jsxRuntime.jsx(Card$2, {
1382
- className: className,
1383
- required: true,
1384
- helpPopoverProps: nameHelpPopoverProps,
1385
- name: "name",
1386
- title: t("neetoThemes.common.name"),
1387
- children: /*#__PURE__*/jsxRuntime.jsx(Input$1, {
1388
- autoFocus: true,
1389
- "data-testid": "theme-name-property",
1390
- name: "name"
1391
- })
1392
- });
1393
- };
1394
-
1395
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1396
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1397
- var Customize = function Customize(_ref) {
1398
- var theme = _ref.theme,
1399
- onCreateTheme = _ref.onCreateTheme,
1400
- onApplyTheme = _ref.onApplyTheme,
1401
- onUpdateTheme = _ref.onUpdateTheme,
1402
- isApplyingTheme = _ref.isApplyingTheme,
1403
- onPropertiesChange = _ref.onPropertiesChange,
1404
- defaultImageSize = _ref.defaultImageSize,
1405
- fixedAspectRatio = _ref.fixedAspectRatio,
1406
- onEditCSSClick = _ref.onEditCSSClick,
1407
- currentScreen = _ref.currentScreen;
1408
- var _useTranslation = reactI18next.useTranslation(),
1409
- t = _useTranslation.t;
1410
- useExpandedSection.useSyncExpandedSectionFromUrl();
1411
- var history = reactRouterDom.useHistory();
1412
- var _useState = react.useState({}),
1413
- _useState2 = _slicedToArray(_useState, 2),
1414
- popoverInstance = _useState2[0],
1415
- setPopoverInstance = _useState2[1];
1416
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1417
- return {
1418
- themePropertiesSchema: store["themePropertiesSchema"],
1419
- entityType: store["entityType"],
1420
- isFetchingSchema: store["isFetchingSchema"],
1421
- helpPopoverProps: store["helpPopoverProps"],
1422
- enabledFeatures: store["enabledFeatures"],
1423
- proFeatures: store["proFeatures"]
1424
- };
1425
- }, shallow.shallow),
1426
- themePropertiesSchema = _useConfigStore.themePropertiesSchema,
1427
- entityType = _useConfigStore.entityType,
1428
- isFetchingSchema = _useConfigStore.isFetchingSchema,
1429
- helpPopoverProps = _useConfigStore.helpPopoverProps,
1430
- enabledFeatures = _useConfigStore.enabledFeatures,
1431
- proFeatures = _useConfigStore.proFeatures;
1432
- var _useParams = reactRouterDom.useParams(),
1433
- themeId = _useParams.themeId;
1434
- var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
1435
- return {
1436
- currentTheme: store["currentTheme"],
1437
- setThemeState: store["setThemeState"]
1438
- };
1439
- }, shallow.shallow),
1440
- currentTheme = _useThemeStore.currentTheme,
1441
- setThemeState = _useThemeStore.setThemeState;
1442
- var _useShowGlobalTheme = useShowGlobalTheme(entityType),
1443
- _useShowGlobalTheme$d = _useShowGlobalTheme.data,
1444
- _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
1445
- _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
1446
- globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3;
1447
- var _useFetchTheme = useFetchTheme(themeId, {
1448
- enabled: utils.isEditThemeRoute() && ramda.isNotNil(themeId),
1449
- initialData: theme !== null && theme !== void 0 ? theme : undefined
1450
- }),
1451
- _useFetchTheme$data = _useFetchTheme.data,
1452
- themeData = _useFetchTheme$data === void 0 ? {} : _useFetchTheme$data,
1453
- isLoadingTheme = _useFetchTheme.isLoadingTheme;
1454
- var isLoading = isFetchingSchema || isLoadingTheme;
1455
- var isThemeGlobalTheme = themeId && (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
1456
- var isCurrentThemeAndGlobalThemeSame = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id);
1457
- var _helpPopoverProps$sty = helpPopoverProps.style,
1458
- styleHelpPopoverProps = _helpPopoverProps$sty === void 0 ? {} : _helpPopoverProps$sty;
1459
- var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
1460
- var submitBtnRef = react.useRef(null);
1461
- var _useCreateTheme = useCreateTheme(),
1462
- createTheme = _useCreateTheme.mutate,
1463
- isCreating = _useCreateTheme.isPending;
1464
- var _useUpdateTheme = useUpdateTheme(themeId),
1465
- updateTheme = _useUpdateTheme.mutate,
1466
- isUpdating = _useUpdateTheme.isPending;
1467
- var isSubmitting = isCreating || isUpdating;
1468
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
1469
- var handleGlobalThemeSwitchChange = function handleGlobalThemeSwitchChange(e, setFieldValue) {
1470
- setFieldValue("shouldSetAsGlobalTheme", e.target.checked);
1471
- };
1472
- var onSubmit = function onSubmit(values, _ref2) {
1473
- var resetForm = _ref2.resetForm;
1474
- var imageData = buildImageData(values, themePropertiesSchema);
1475
- var themeToSave = _objectSpread({
1476
- propertiesAttributes: values.properties,
1477
- name: values.name,
1478
- shouldSetAsGlobalTheme: values.shouldSetAsGlobalTheme,
1479
- entityType: values.entityType
1480
- }, imageData);
1481
- if (!themeId) {
1482
- return createTheme(themeToSave, {
1483
- onSuccess: function onSuccess(_ref3) {
1484
- var theme = _ref3.theme;
1485
- resetForm({
1486
- values: theme
1487
- });
1488
- onCreateTheme(theme);
1489
- history.replace(utils$1.buildUrl(buildPathname(routes.themes.edit), {
1490
- themeId: theme.id
1491
- }));
1492
- }
1493
- });
1494
- }
1495
- return updateTheme(themeToSave, {
1496
- onSuccess: function onSuccess(_ref4) {
1497
- var theme = _ref4.theme;
1498
- onUpdateTheme(theme);
1499
- resetForm({
1500
- values: theme
1501
- });
1502
- }
1503
- });
1504
- };
1505
- react.useEffect(function () {
1506
- if (ramda.isNotNil(themeId) && !isLoadingTheme) {
1507
- setThemeState({
1508
- previewingTheme: themeData
1509
- });
1510
- }
1511
- }, [isLoadingTheme]);
1512
- if (isLoading) {
1513
- return /*#__PURE__*/jsxRuntime.jsx("div", {
1514
- className: "flex h-full w-full items-center justify-center",
1515
- children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
1516
- });
1517
- }
1518
- return /*#__PURE__*/jsxRuntime.jsx(Form, {
1519
- formikProps: {
1520
- initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
1521
- shouldSetAsGlobalTheme: isThemeGlobalTheme,
1522
- entityType: entityType
1523
- }),
1524
- validationSchema: useExpandedSection.THEME_VALIDATION_SCHEMA,
1525
- enableReinitialize: true,
1526
- onSubmit: onSubmit
1527
- },
1528
- children: function children(_ref5) {
1529
- var dirty = _ref5.dirty,
1530
- isValid = _ref5.isValid,
1531
- values = _ref5.values,
1532
- setFieldValue = _ref5.setFieldValue;
1533
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
1534
- className: "neeto-themes-sidebar__scroll",
1535
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1536
- className: "neeto-themes-sidebar__scroll-content flex grow flex-col px-4 pb-4 lg:px-5",
1537
- children: [!isSubmitting && /*#__PURE__*/jsxRuntime.jsx(BlockNavigation, {}), /*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {
1538
- className: classnames({
1539
- hidden: isCustomCssScreen
1540
- })
1541
- }), /*#__PURE__*/jsxRuntime.jsx(Card$2, {
1542
- className: classnames({
1543
- hidden: isCustomCssScreen
1544
- }),
1545
- helpPopoverProps: styleHelpPopoverProps,
1546
- name: "style",
1547
- title: t("neetoThemes.common.style"),
1548
- children: /*#__PURE__*/jsxRuntime.jsx(Properties, {
1549
- onPropertiesChange: onPropertiesChange,
1550
- themeId: themeId
1551
- })
1552
- }), neetoCist.filterBy({
1553
- kind: "image"
1554
- }, themePropertiesSchema).map(function (_ref6) {
1555
- var key = _ref6.key,
1556
- useDefaultImageSize = _ref6.useDefaultImageSize,
1557
- propertyDefaultSize = _ref6.defaultImageSize,
1558
- propertyFixedAspectRatio = _ref6.fixedAspectRatio;
1559
- return /*#__PURE__*/react.createElement(Images, _defineProperty({
1560
- fixedAspectRatio: fixedAspectRatio,
1561
- onPropertiesChange: onPropertiesChange,
1562
- useDefaultImageSize: useDefaultImageSize,
1563
- attribute: key,
1564
- className: classnames({
1565
- hidden: isCustomCssScreen
1566
- }),
1567
- defaultImageSize: propertyDefaultSize || defaultImageSize,
1568
- key: key
1569
- }, "fixedAspectRatio", propertyFixedAspectRatio || fixedAspectRatio));
1570
- }), /*#__PURE__*/jsxRuntime.jsx(CustomCSS, {
1571
- currentScreen: currentScreen,
1572
- onEditCSSClick: onEditCSSClick,
1573
- isEnabled: enabledFeatures.customCSS,
1574
- isProFeature: proFeatures.customCSS
1575
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1576
- className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 mt-2 flex flex-col space-y-2 border p-2",
1577
- children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip, {
1578
- disabled: !isThemeGlobalTheme,
1579
- content: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.tooltipContent"),
1580
- children: /*#__PURE__*/jsxRuntime.jsx(Switch, {
1581
- checked: values.shouldSetAsGlobalTheme,
1582
- disabled: isThemeGlobalTheme,
1583
- name: "shouldSetAsGlobalTheme",
1584
- label: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.label"),
1585
- onChange: function onChange(e) {
1586
- return handleGlobalThemeSwitchChange(e, setFieldValue);
1587
- }
1588
- })
1589
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
1590
- className: "text-sm",
1591
- style: "body2",
1592
- children: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.helpText", {
1593
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
1594
- count: 2
1595
- })
1596
- })
1597
- })]
1598
- })]
1599
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1600
- className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 start-0 end-0 flex justify-end gap-x-2 px-4 py-6 lg:px-5 xl:px-6",
1601
- children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
1602
- "data-testid": "reset-button",
1603
- disabled: !dirty || isSubmitting,
1604
- label: t("neetoThemes.buttons.reset"),
1605
- style: "text",
1606
- type: "reset"
1607
- }), /*#__PURE__*/jsxRuntime.jsx(Button, {
1608
- "data-testid": "save-changes-button",
1609
- disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
1610
- label: t("neetoThemes.buttons.save"),
1611
- loading: isSubmitting,
1612
- ref: submitBtnRef,
1613
- type: "submit"
1614
- })]
1615
- }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
1616
- appendTo: function appendTo() {
1617
- return document.body;
1618
- },
1619
- position: "top",
1620
- reference: submitBtnRef,
1621
- trigger: "click",
1622
- content: /*#__PURE__*/jsxRuntime.jsxs("div", {
1623
- className: "flex flex-col items-start gap-2",
1624
- children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
1625
- className: "absolute end-1 top-1 z-0",
1626
- icon: Close,
1627
- size: "small",
1628
- style: "text",
1629
- onClick: function onClick() {
1630
- var _popoverInstance$hide;
1631
- return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
1632
- }
1633
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
1634
- className: "w-72 pe-5",
1635
- style: "body2",
1636
- weight: "normal",
1637
- children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
1638
- components: {
1639
- bold: /*#__PURE__*/jsxRuntime.jsx("strong", {})
1640
- },
1641
- i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
1642
- values: {
1643
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
1644
- }
1645
- })
1646
- }), /*#__PURE__*/jsxRuntime.jsx(Button, {
1647
- disabled: isApplyingTheme,
1648
- label: t("neetoThemes.buttons.applyThisTheme"),
1649
- loading: isApplyingTheme,
1650
- onClick: function onClick() {
1651
- return onApplyTheme(themeData);
1652
- }
1653
- })]
1654
- }),
1655
- disabled: isEditingCurrentlyAppliedTheme || isCurrentThemeAndGlobalThemeSame && values.shouldSetAsGlobalTheme,
1656
- onMount: setPopoverInstance
1657
- })]
1658
- });
1659
- }
1660
- });
1661
- };
1662
-
1663
- var QuickActionRow = function QuickActionRow(_ref) {
1664
- var Icon = _ref.icon,
1665
- label = _ref.label,
1666
- onClick = _ref.onClick,
1667
- testId = _ref.testId;
1668
- return /*#__PURE__*/jsxRuntime.jsxs("button", {
1669
- onClick: onClick,
1670
- className: "neeto-ui-border-gray-100 hover:neeto-ui-bg-gray-100 flex w-full cursor-pointer items-center gap-3 border-t px-3 py-2 text-start transition-colors",
1671
- "data-testid": testId,
1672
- type: "button",
1673
- children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
1674
- size: 16
1675
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
1676
- lineHeight: "normal",
1677
- style: "body2",
1678
- children: label
1679
- })]
1680
- });
1681
- };
1682
-
1683
- var Thumbnail = function Thumbnail(_ref) {
1684
- var _theme$snakeToCamelCa, _findBy, _findBy2;
1685
- var active = _ref.active,
1686
- isPreviewing = _ref.isPreviewing,
1687
- isHighLightedTheme = _ref.isHighLightedTheme,
1688
- theme = _ref.theme;
1689
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1690
- return {
1691
- themePropertiesSchema: store["themePropertiesSchema"]
1692
- };
1693
- }, shallow.shallow),
1694
- _useConfigStore$theme = _useConfigStore.themePropertiesSchema,
1695
- themePropertiesSchema = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
1696
- var _themePropertiesSchem = _slicedToArray(themePropertiesSchema, 2),
1697
- colorObject1 = _themePropertiesSchem[0],
1698
- colorObject2 = _themePropertiesSchem[1];
1699
- var primaryLabel = neetoCist.humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
1700
- var secondaryLabel = neetoCist.humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
1701
- var primaryColor = neetoCist.findBy({
1702
- key: colorObject1.key
1703
- }, theme.properties).value;
1704
- var secondaryColor = neetoCist.findBy({
1705
- key: colorObject2.key
1706
- }, theme.properties).value;
1707
- var backgroundImageUrl = (_theme$snakeToCamelCa = theme[neetoCist.snakeToCamelCase(neetoCist.findBy({
1708
- useAsCardBackground: true
1709
- }, themePropertiesSchema).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
1710
- var buttonBackgroundColor = (_findBy = neetoCist.findBy({
1711
- key: (_findBy2 = neetoCist.findBy({
1712
- useAsCardButtonBackground: true
1713
- }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
1714
- }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
1715
- return /*#__PURE__*/jsxRuntime.jsx("div", {
1716
- className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
1717
- "neeto-ui-border-gray-400": !active,
1718
- "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
1719
- "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1720
- "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1721
- }),
1722
- style: {
1723
- backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
1724
- backgroundSize: "cover"
1725
- },
1726
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
1727
- className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85",
1728
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
1729
- className: "neeto-ui-rounded-lg p-3",
1730
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1731
- className: "mb-3",
1732
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
1733
- style: "h3",
1734
- weight: "semibold",
1735
- children: /*#__PURE__*/jsxRuntime.jsx("span", {
1736
- style: {
1737
- color: primaryColor
1738
- },
1739
- children: primaryLabel
1740
- })
1741
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
1742
- className: "neeto-ui-text-gray-600",
1743
- style: "body2",
1744
- children: /*#__PURE__*/jsxRuntime.jsx("span", {
1745
- style: {
1746
- color: secondaryColor
1747
- },
1748
- children: secondaryLabel
1749
- })
1750
- })]
1751
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
1752
- className: "neeto-ui-rounded-lg h-5 w-12",
1753
- style: {
1754
- backgroundColor: buttonBackgroundColor
1755
- }
1756
- })]
1757
- })
1758
- })
1759
- });
1760
- };
1761
-
1762
- var Card = function Card(_ref) {
1763
- var _ref$active = _ref.active,
1764
- active = _ref$active === void 0 ? false : _ref$active,
1765
- isPreviewing = _ref.isPreviewing,
1766
- onSetPreviewTheme = _ref.onSetPreviewTheme,
1767
- onDeleteTheme = _ref.onDeleteTheme,
1768
- onEditTheme = _ref.onEditTheme,
1769
- theme = _ref.theme,
1770
- isApplyingTheme = _ref.isApplyingTheme,
1771
- onCloneTheme = _ref.onCloneTheme,
1772
- isHighLightedTheme = _ref.isHighLightedTheme,
1773
- isGlobalTheme = _ref.isGlobalTheme,
1774
- onApplyTheme = _ref.onApplyTheme,
1775
- Thumbnail$1 = _ref.thumbnail;
1776
- var _useTranslation = reactI18next.useTranslation(),
1777
- t = _useTranslation.t;
1778
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1779
- return {
1780
- themePropertiesSchema: store["themePropertiesSchema"]
1781
- };
1782
- }, shallow.shallow),
1783
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
1784
- var id = theme.id,
1785
- name = theme.name;
1786
- var imageProperties = neetoCist.filterBy({
1787
- kind: "image"
1788
- }, themePropertiesSchema);
1789
- var handleDeleteTheme = function handleDeleteTheme() {
1790
- return onDeleteTheme(id, name);
1791
- };
1792
- var handleQuickEdit = function handleQuickEdit(section) {
1793
- return function (e) {
1794
- e.stopPropagation();
1795
- if (neetoCist.isPresent(onEditTheme)) onEditTheme(theme, section);else onCloneTheme(theme, section);
1796
- };
1797
- };
1798
- var showMoreDropdown = utils.isFunction(onDeleteTheme);
1799
- return /*#__PURE__*/jsxRuntime.jsx("div", {
1800
- className: "group space-y-2 pt-0.5",
1801
- "data-flip-id": theme.id,
1802
- "data-testid": active ? "active-theme-card" : "theme-card",
1803
- id: theme.id,
1804
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
1805
- className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg relative cursor-pointer border-2 transition-all duration-300 ease-in-out", {
1806
- "neeto-ui-border-gray-400": !active,
1807
- "neeto-themes-theme-thumbnail--active": active,
1808
- "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1809
- "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1810
- }),
1811
- onClick: function onClick() {
1812
- return onSetPreviewTheme(theme);
1813
- },
1814
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1815
- className: "neeto-ui-rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out",
1816
- children: [active ? /*#__PURE__*/jsxRuntime.jsx("div", {
1817
- className: "neeto-themes-theme-thumbnail__active-banner absolute start-0 top-0 z-10 w-full py-1 text-center text-xs font-semibold uppercase tracking-wide",
1818
- "data-testid": "active-theme-label",
1819
- children: t("neetoThemes.common.activeTheme")
1820
- }) : /*#__PURE__*/jsxRuntime.jsx("div", {
1821
- className: "absolute start-0 top-0 z-10 flex h-full w-full items-center justify-center px-3 pb-3 pt-3",
1822
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
1823
- className: classnames("-translate-y-9 flex w-full items-center justify-between gap-2", {
1824
- hidden: !isPreviewing,
1825
- "group-hover:flex": true
1826
- }),
1827
- children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
1828
- "data-testid": "preview-theme-button",
1829
- disabled: isPreviewing,
1830
- label: t("neetoThemes.common.previewTheme"),
1831
- size: "medium",
1832
- style: "tertiary",
1833
- className: classnames({
1834
- "neeto-themes-theme-thumbnail__preview-btn--disabled opacity-100": isPreviewing,
1835
- "neeto-themes-theme-thumbnail__preview-btn shrink-0 justify-center": true
1836
- }),
1837
- onClick: function onClick() {
1838
- return onSetPreviewTheme(theme);
1839
- }
1840
- }), /*#__PURE__*/jsxRuntime.jsx(Button, {
1841
- className: "neeto-themes-theme-thumbnail__apply-btn shrink-0 justify-center",
1842
- "data-testid": "apply-theme-button",
1843
- disabled: isApplyingTheme,
1844
- label: t("neetoThemes.common.useTheme"),
1845
- loading: isApplyingTheme,
1846
- size: "medium",
1847
- style: "primary",
1848
- onClick: function onClick() {
1849
- return onApplyTheme(theme);
1850
- }
1851
- })]
1852
- })
1853
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
1854
- className: "neeto-themes-theme-thumbnail__overlay w-full transition-all duration-300 ease-in-out",
1855
- children: Thumbnail$1 ? /*#__PURE__*/jsxRuntime.jsx(Thumbnail$1, {
1856
- active: active,
1857
- isHighLightedTheme: isHighLightedTheme,
1858
- isPreviewing: isPreviewing,
1859
- theme: theme
1860
- }) : /*#__PURE__*/jsxRuntime.jsx(Thumbnail, {
1861
- active: active,
1862
- isHighLightedTheme: isHighLightedTheme,
1863
- isPreviewing: isPreviewing,
1864
- theme: theme
1865
- })
1866
- })]
1867
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1868
- className: "neeto-ui-border-gray-100 flex items-start justify-between gap-1 border-t p-2",
1869
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1870
- className: "flex items-center space-x-2",
1871
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
1872
- className: "neeto-ui-text-gray-500 line-clamp-2 min-w-0 grow wrap-anywhere pt-1 italic",
1873
- "data-testid": "theme-name",
1874
- lineHeight: "snug",
1875
- style: "body2",
1876
- children: name
1877
- }), isGlobalTheme && /*#__PURE__*/jsxRuntime.jsx(Typography, {
1878
- className: "neeto-ui-text-gray-500 shrink-0 pt-1 italic",
1879
- "data-testid": "default-theme-label",
1880
- lineHeight: "snug",
1881
- style: "body2",
1882
- children: t("neetoThemes.common.defaultTheme")
1883
- })]
1884
- }), showMoreDropdown && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
1885
- dropdownButtonProps: {
1886
- size: "small"
1887
- },
1888
- dropdownProps: {
1889
- strategy: "fixed",
1890
- onClick: function onClick(e) {
1891
- return e.stopPropagation();
1892
- }
1893
- },
1894
- menuItems: [{
1895
- key: "delete",
1896
- "data-testid": "delete-theme-menu-item",
1897
- label: t("neetoThemes.build.leftSideBar.themes.themeOptions.delete"),
1898
- isDisabled: isApplyingTheme,
1899
- onClick: function onClick(e) {
1900
- e.stopPropagation();
1901
- handleDeleteTheme();
1902
- }
1903
- }]
1904
- })]
1905
- }), active && /*#__PURE__*/jsxRuntime.jsxs("div", {
1906
- className: "flex flex-col",
1907
- children: [/*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
1908
- icon: ColorPicker$1,
1909
- label: t("neetoThemes.common.customizeStyle"),
1910
- testId: "quick-customize-style",
1911
- onClick: handleQuickEdit("style")
1912
- }), imageProperties.map(function (_ref2) {
1913
- var _theme$camelKey;
1914
- var key = _ref2.key;
1915
- var camelKey = neetoCist.snakeToCamelCase(key);
1916
- var hasImage = neetoCist.isPresent((_theme$camelKey = theme[camelKey]) === null || _theme$camelKey === void 0 ? void 0 : _theme$camelKey.url);
1917
- var action = hasImage ? "change" : "add";
1918
- var specificKey = "neetoThemes.common.".concat(action).concat(neetoCist.capitalize(camelKey));
1919
- return /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
1920
- icon: AddImage,
1921
- label: t([specificKey, "neetoThemes.common.addImage"]),
1922
- testId: "quick-add-".concat(neetoCist.hyphenate(key)),
1923
- onClick: handleQuickEdit(camelKey)
1924
- }, key);
1925
- }), /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
1926
- icon: CodeBlock,
1927
- label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
1928
- testId: "quick-custom-css",
1929
- onClick: handleQuickEdit("customcss")
1930
- })]
1931
- })]
1932
- })
1933
- });
1934
- };
1935
- var Card$1 = /*#__PURE__*/react.memo(Card);
1936
-
1937
- var Themes = function Themes(_ref) {
1938
- var onEditTheme = _ref.onEditTheme,
1939
- _ref$themes = _ref.themes,
1940
- themes = _ref$themes === void 0 ? [] : _ref$themes,
1941
- _ref$defaultThemes = _ref.defaultThemes,
1942
- defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1943
- onDeleteTheme = _ref.onDeleteTheme,
1944
- themeToHighlight = _ref.themeToHighlight,
1945
- didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1946
- isLoading = _ref.isLoading,
1947
- currentTheme = _ref.currentTheme,
1948
- isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1949
- thumbnail = _ref.thumbnail,
1950
- themeBeingApplied = _ref.themeBeingApplied,
1951
- onApplyTheme = _ref.onApplyTheme,
1952
- onApplyThemeSuccess = _ref.onApplyThemeSuccess,
1953
- _ref$isSearchVisible = _ref.isSearchVisible,
1954
- isSearchVisible = _ref$isSearchVisible === void 0 ? false : _ref$isSearchVisible;
1955
- var _useTranslation = reactI18next.useTranslation(),
1956
- t = _useTranslation.t;
1957
- var _useThemeUtils = useExpandedSection.useThemeUtils(),
1958
- setTheme = _useThemeUtils.setTheme;
1959
- var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
1960
- return {
1961
- setThemeState: store["setThemeState"],
1962
- previewingTheme: store["previewingTheme"]
1963
- };
1964
- }, shallow.shallow),
1965
- setThemeState = _useThemeStore.setThemeState,
1966
- previewingTheme = _useThemeStore.previewingTheme;
1967
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
1968
- return {
1969
- entityType: store["entityType"],
1970
- entityId: store["entityId"]
1971
- };
1972
- }, shallow.shallow),
1973
- entityType = _useConfigStore.entityType,
1974
- entityId = _useConfigStore.entityId;
1975
- var _useQueryParams = reactUtils.useQueryParams(),
1976
- _useQueryParams$searc = _useQueryParams.searchTerm,
1977
- searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
1978
- var _useCloneTheme = useCloneTheme(),
1979
- cloneTheme = _useCloneTheme.mutate;
1980
- var _useApplyTheme = useApplyTheme({}),
1981
- applyClonedTheme = _useApplyTheme.mutate;
1982
- var _useShowGlobalTheme = useShowGlobalTheme(entityType),
1983
- _useShowGlobalTheme$d = _useShowGlobalTheme.data,
1984
- _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
1985
- _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
1986
- globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3,
1987
- isLoadingGlobalTheme = _useShowGlobalTheme.isLoading;
1988
- react.useEffect(function () {
1989
- if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1990
- didScrollActiveThemeIntoView.current = true;
1991
- setTimeout(function () {
1992
- utils.scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
1993
- }, 100);
1994
- }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
1995
- var setPreviewTheme = function setPreviewTheme(theme) {
1996
- setThemeState({
1997
- previewingTheme: theme
1998
- });
1999
- setTheme(theme);
2000
- };
2001
- var activeThemeId = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id;
2002
- var lowerSearchTerm = searchTerm.toLowerCase();
2003
- var matchesSearch = function matchesSearch(theme) {
2004
- return theme.name.toLowerCase().includes(lowerSearchTerm);
2005
- };
2006
- var activeTheme = activeThemeId ? [].concat(_toConsumableArray(defaultThemes), _toConsumableArray(themes)).find(function (theme) {
2007
- return theme.id === activeThemeId;
2008
- }) : null;
2009
- var isActiveThemeCustom = themes.some(function (theme) {
2010
- return theme.id === activeThemeId;
2011
- });
2012
- var filteredDefaultThemes = defaultThemes.filter(function (theme) {
2013
- return theme.id !== activeThemeId && matchesSearch(theme);
2014
- });
2015
- var filteredThemes = themes.filter(function (theme) {
2016
- return theme.id !== activeThemeId && matchesSearch(theme);
2017
- });
2018
- var showActiveThemeSection = activeTheme && matchesSearch(activeTheme);
2019
- var handleCloneTheme = function handleCloneTheme(data, section) {
2020
- cloneTheme(data.id, {
2021
- onSuccess: function onSuccess(_ref2) {
2022
- var clonedTheme = _ref2.theme;
2023
- // A system theme is cloned when the user customizes it. Apply the
2024
- // clone right away so it becomes the active theme — the editor then
2025
- // won't prompt "apply this theme?" on save.
2026
- applyClonedTheme({
2027
- themeId: clonedTheme.id,
2028
- entityId: entityId,
2029
- entityType: entityType
2030
- }, {
2031
- onSuccess: function onSuccess() {
2032
- onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(clonedTheme);
2033
- onEditTheme(clonedTheme, section);
2034
- }
2035
- });
2036
- }
2037
- });
2038
- };
2039
- if (isLoading || isCurrentThemeLoading || isLoadingGlobalTheme) {
2040
- return /*#__PURE__*/jsxRuntime.jsx("div", {
2041
- className: "flex h-full w-full items-center justify-center",
2042
- children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
2043
- });
2044
- }
2045
- var activeThemeSection = showActiveThemeSection && /*#__PURE__*/jsxRuntime.jsx("div", {
2046
- className: "neeto-ui-border-gray-200 mb-6 border-b px-6 pb-6 lg:px-5 xl:px-6",
2047
- children: /*#__PURE__*/jsxRuntime.jsx(Card$1, {
2048
- onApplyTheme: onApplyTheme,
2049
- thumbnail: thumbnail,
2050
- active: true,
2051
- isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === activeTheme.id,
2052
- isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === activeTheme.id,
2053
- isHighLightedTheme: activeTheme.id === themeToHighlight,
2054
- isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === activeTheme.id,
2055
- theme: activeTheme,
2056
- onCloneTheme: handleCloneTheme,
2057
- onEditTheme: isActiveThemeCustom ? onEditTheme : undefined,
2058
- onSetPreviewTheme: setPreviewTheme
2059
- })
2060
- });
2061
- var systemThemesSection = neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx("div", {
2062
- className: "mb-6 space-y-3",
2063
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
2064
- className: "flex flex-col gap-4 px-6 pb-10 lg:px-5 xl:px-6",
2065
- "data-testid": "system-themes",
2066
- children: filteredDefaultThemes.map(function (theme) {
2067
- return /*#__PURE__*/react.createElement(Card$1, {
2068
- onApplyTheme: onApplyTheme,
2069
- theme: theme,
2070
- thumbnail: thumbnail,
2071
- active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
2072
- isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
2073
- isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
2074
- isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
2075
- key: theme.id,
2076
- onCloneTheme: handleCloneTheme,
2077
- onSetPreviewTheme: setPreviewTheme
2078
- });
2079
- })
2080
- })
2081
- });
2082
- var customThemesSection = neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/jsxRuntime.jsx("div", {
2083
- className: "mb-6 space-y-3",
2084
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
2085
- className: "flex flex-col gap-4 px-6",
2086
- "data-testid": "custom-themes",
2087
- children: filteredThemes.map(function (theme) {
2088
- var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
2089
- var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
2090
- return /*#__PURE__*/react.createElement(Card$1, {
2091
- isPreviewing: isPreviewing,
2092
- onApplyTheme: onApplyTheme,
2093
- onEditTheme: onEditTheme,
2094
- theme: theme,
2095
- thumbnail: thumbnail,
2096
- active: isActive,
2097
- isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
2098
- isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
2099
- isHighLightedTheme: theme.id === themeToHighlight,
2100
- key: theme.id,
2101
- onCloneTheme: handleCloneTheme,
2102
- onDeleteTheme: !isActive && onDeleteTheme,
2103
- onSetPreviewTheme: setPreviewTheme
2104
- });
2105
- })
2106
- })
2107
- });
2108
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
2109
- className: "neeto-themes-sidebar__scroll",
2110
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
2111
- className: "mb-6 space-y-3",
2112
- children: [isSearchVisible && /*#__PURE__*/jsxRuntime.jsx(Search, {
2113
- autoFocus: true,
2114
- enableUrlSync: true,
2115
- autoComplete: "off",
2116
- className: "mb-4 mt-1 px-6",
2117
- placeholder: t("neetoThemes.common.searchThemes")
2118
- }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx(Typography, {
2119
- className: "text-center",
2120
- "data-testid": "no-data-title",
2121
- style: "body2",
2122
- children: t("neetoThemes.common.noResultsFound")
2123
- })]
2124
- }), activeThemeSection, systemThemesSection, customThemesSection]
2125
- });
2126
- };
2127
-
2128
- var TitleBar = function TitleBar(_ref) {
2129
- var currentScreen = _ref.currentScreen,
2130
- handleBackPress = _ref.handleBackPress,
2131
- handleToggleSearch = _ref.handleToggleSearch;
2132
- var _useTranslation = reactI18next.useTranslation(),
2133
- t = _useTranslation.t;
2134
- var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
2135
- return {
2136
- previewingTheme: store["previewingTheme"]
2137
- };
2138
- }, shallow.shallow),
2139
- previewingTheme = _useThemeStore.previewingTheme;
2140
- var themeId = previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id;
2141
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
2142
- return {
2143
- entityType: store["entityType"],
2144
- helpDocUrl: store["helpDocUrl"]
2145
- };
2146
- }, shallow.shallow),
2147
- entityType = _useConfigStore.entityType,
2148
- helpDocUrl = _useConfigStore.helpDocUrl;
2149
- var isCustomizeScreen = utils.isEditThemeRoute() || utils.isNewThemeRoute();
2150
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
2151
- var isRTL = i18n.dir() === "rtl";
2152
- var BackButtonIcon = isRTL ? RightArrow : LeftArrow;
2153
- if (isCustomizeScreen) {
2154
- return /*#__PURE__*/jsxRuntime.jsx("div", {
2155
- className: "neeto-themes-sidebar__header px-4",
2156
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
2157
- className: "flex items-center justify-start space-x-2",
2158
- children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
2159
- "data-testid": "customize-themes-back-button",
2160
- icon: BackButtonIcon,
2161
- iconPosition: "left",
2162
- style: "text",
2163
- tooltipProps: {
2164
- content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
2165
- position: "top"
2166
- },
2167
- onClick: function onClick() {
2168
- return handleBackPress(themeId);
2169
- }
2170
- }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
2171
- "data-testid": "themes-header",
2172
- lineHeight: "normal",
2173
- style: "h3",
2174
- weight: "semibold",
2175
- children: [isCustomizeScreen && !isCustomCssScreen && (utils.isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
2176
- })]
2177
- })
2178
- });
2179
- }
2180
- return /*#__PURE__*/jsxRuntime.jsx("div", {
2181
- className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
2182
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
2183
- className: "flex items-center justify-between space-x-2",
2184
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
2185
- className: "flex space-x-2",
2186
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
2187
- "data-testid": "themes-header",
2188
- lineHeight: "normal",
2189
- style: "h3",
2190
- weight: "semibold",
2191
- children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
2192
- }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
2193
- helpLinkProps: helpDocUrl && {
2194
- href: helpDocUrl
2195
- },
2196
- title: t("neetoThemes.build.leftSideBar.helpPopover.title"),
2197
- description: t("neetoThemes.build.leftSideBar.helpPopover.description", {
2198
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
2199
- })
2200
- })]
2201
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
2202
- className: "self-end",
2203
- children: /*#__PURE__*/jsxRuntime.jsx(Button, {
2204
- "data-testid": "themes-search-toggle-button",
2205
- icon: Search$1,
2206
- iconPosition: "left",
2207
- style: "text",
2208
- tooltipProps: {
2209
- content: t("neetoThemes.common.searchThemes"),
2210
- position: "top"
2211
- },
2212
- onClick: handleToggleSearch
2213
- })
2214
- })]
2215
- })
2216
- });
2217
- };
2218
-
2219
- var MemoizedAlert = /*#__PURE__*/react.memo(Alert);
2220
- var Sidebar = function Sidebar(_ref) {
2221
- var _themeToDelete$curren2;
2222
- var thumbnail = _ref.thumbnail,
2223
- onPropertiesChange = _ref.onPropertiesChange,
2224
- defaultImageSize = _ref.defaultImageSize,
2225
- fixedAspectRatio = _ref.fixedAspectRatio,
2226
- onApplyThemeSuccess = _ref.onApplyThemeSuccess,
2227
- onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
2228
- var _useState = react.useState(DESIGN_SCREENS.THEMES),
2229
- _useState2 = _slicedToArray(_useState, 2),
2230
- currentScreen = _useState2[0],
2231
- setCurrentScreen = _useState2[1];
2232
- var _useState3 = react.useState(false),
2233
- _useState4 = _slicedToArray(_useState3, 2),
2234
- isDeleteAlertOpen = _useState4[0],
2235
- setIsDeleteAlertOpen = _useState4[1];
2236
- var _useState5 = react.useState(null),
2237
- _useState6 = _slicedToArray(_useState5, 2),
2238
- themeToHighlight = _useState6[0],
2239
- setThemeToHighlight = _useState6[1];
2240
- var _useState7 = react.useState({}),
2241
- _useState8 = _slicedToArray(_useState7, 2),
2242
- themeBeingApplied = _useState8[0],
2243
- setThemeBeingApplied = _useState8[1];
2244
- var _useBreakpoints = reactUtils.useBreakpoints(),
2245
- isSize = _useBreakpoints.isSize;
2246
- var isLargerScreen = !isSize("mobile");
2247
- var _useState9 = react.useState(!isLargerScreen),
2248
- _useState10 = _slicedToArray(_useState9, 2),
2249
- isThemesSidebarCollapsed = _useState10[0],
2250
- setIsThemesSidebarCollapsed = _useState10[1];
2251
- var history = reactRouterDom.useHistory();
2252
- react.useEffect(function () {
2253
- setIsThemesSidebarCollapsed(!isLargerScreen);
2254
- }, [isLargerScreen]);
2255
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
2256
- return {
2257
- entityType: store["entityType"],
2258
- entityId: store["entityId"],
2259
- isFetchingSchema: store["isFetchingSchema"],
2260
- defaultThemeName: store["defaultThemeName"]
2261
- };
2262
- }, shallow.shallow),
2263
- entityType = _useConfigStore.entityType,
2264
- entityId = _useConfigStore.entityId,
2265
- isFetchingSchema = _useConfigStore.isFetchingSchema,
2266
- defaultThemeName = _useConfigStore.defaultThemeName;
2267
- var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
2268
- return {
2269
- setThemeState: store["setThemeState"]
2270
- };
2271
- }, shallow.shallow),
2272
- setThemeState = _useThemeStore.setThemeState;
2273
- var didScrollActiveThemeIntoView = react.useRef(null);
2274
- var _useTranslation = reactI18next.useTranslation(),
2275
- t = _useTranslation.t;
2276
- var _useThemeUtils = useExpandedSection.useThemeUtils(),
2277
- setTheme = _useThemeUtils.setTheme;
2278
- var _useListThemes = useListThemes(entityId),
2279
- _useListThemes$data = _useListThemes.data,
2280
- _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
2281
- _useListThemes$data2$ = _useListThemes$data2.themes,
2282
- themes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
2283
- _useListThemes$data2$2 = _useListThemes$data2.defaultThemes,
2284
- defaultThemes = _useListThemes$data2$2 === void 0 ? [] : _useListThemes$data2$2,
2285
- isLoading = _useListThemes.isLoading;
2286
- var _useShowThemeEntity = useShowThemeEntity(entityId),
2287
- _useShowThemeEntity$d = _useShowThemeEntity.data,
2288
- _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
2289
- _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
2290
- currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
2291
- isCurrentThemeLoading = _useShowThemeEntity.isLoading;
2292
- var _useDeleteTheme = useDeleteTheme(),
2293
- deleteTheme = _useDeleteTheme.mutate,
2294
- isDeleting = _useDeleteTheme.isPending;
2295
- var _useApplyTheme = useApplyTheme({
2296
- onSuccess: function onSuccess(_ref2) {
2297
- var theme = _ref2.theme;
2298
- var applyUpdates = function applyUpdates() {
2299
- setTheme(theme);
2300
- highlightTheme(theme);
2301
- setThemeState({
2302
- previewingTheme: theme
2303
- });
2304
- setThemeBeingApplied({});
2305
- setCurrentScreen(DESIGN_SCREENS.THEMES);
2306
- onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
2307
- };
2308
-
2309
- // Keep the spinner visible a bit longer so the apply feels deliberate,
2310
- // then glide the card into the pinned active section.
2311
- setTimeout(function () {
2312
- return animateThemeReorder(applyUpdates);
2313
- }, useExpandedSection.APPLY_SPINNER_DELAY);
2314
- }
2315
- }),
2316
- applyTheme = _useApplyTheme.mutate,
2317
- isApplyingTheme = _useApplyTheme.isPending;
2318
- var themeToDelete = react.useRef(null);
2319
- var themeToEdit = react.useRef(null);
2320
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
2321
- var _useState11 = react.useState(false),
2322
- _useState12 = _slicedToArray(_useState11, 2),
2323
- isSearchVisible = _useState12[0],
2324
- setIsSearchVisible = _useState12[1];
2325
- var handleToggleSearch = function handleToggleSearch() {
2326
- setIsSearchVisible(function (prev) {
2327
- var next = !prev;
2328
- if (!next) {
2329
- var params = new URLSearchParams(history.location.search);
2330
- params["delete"]("searchTerm");
2331
- history.replace({
2332
- search: params.toString()
2333
- });
2334
- }
2335
- return next;
2336
- });
2337
- };
2338
- var handleEditTheme = function handleEditTheme(theme, section) {
2339
- themeToEdit.current = theme;
2340
- var pathname = utils$1.buildUrl(buildPathname(routes.themes.edit), {
2341
- themeId: theme.id
2342
- });
2343
- history.push({
2344
- pathname: pathname,
2345
- search: section ? "?section=".concat(section) : ""
2346
- });
2347
- };
2348
- var onApplyTheme = function onApplyTheme(theme) {
2349
- if (themeBeingApplied !== null && themeBeingApplied !== void 0 && themeBeingApplied.id) return;
2350
- setThemeBeingApplied(theme);
2351
- applyTheme({
2352
- themeId: theme.id,
2353
- entityId: entityId,
2354
- entityType: entityType
2355
- }, {
2356
- onError: function onError() {
2357
- return setThemeBeingApplied({});
2358
- }
2359
- });
2360
- };
2361
- var navigateToThemesScreen = function navigateToThemesScreen(themeId) {
2362
- highlightTheme(neetoCist.isPresent(themeId) ? themeId : currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
2363
- history.push(buildPathname(routes.themes.index));
2364
- themeToEdit.current = null;
2365
- };
2366
- var handleBackPress = function handleBackPress(themeId) {
2367
- if (isCustomCssScreen) {
2368
- setCurrentScreen(DESIGN_SCREENS.Customize);
2369
- return;
2370
- }
2371
- navigateToThemesScreen(themeId);
2372
- };
2373
- var highlightTheme = function highlightTheme(themeIdToHighlight) {
2374
- setTimeout(function () {
2375
- utils.scrollElementIntoView(themeIdToHighlight);
2376
- }, 1500);
2377
- setTimeout(function () {
2378
- setThemeToHighlight(null);
2379
- }, 4000);
2380
- setThemeToHighlight(themeIdToHighlight);
2381
- };
2382
- var onCreateTheme = function onCreateTheme(createdTheme) {
2383
- themeToEdit.current = createdTheme;
2384
- setTheme(createdTheme);
2385
- setThemeState({
2386
- previewingTheme: createdTheme
2387
- });
2388
- };
2389
- var onUpdateTheme = function onUpdateTheme(updatedTheme) {
2390
- themeToEdit.current = updatedTheme;
2391
- onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(updatedTheme);
2392
- };
2393
- var handleDelete = function handleDelete(themeId, name) {
2394
- setIsDeleteAlertOpen(true);
2395
- themeToDelete.current = {
2396
- id: themeId,
2397
- name: name
2398
- };
2399
- };
2400
- var handleCloseDeleteAlert = react.useCallback(function () {
2401
- setIsDeleteAlertOpen(false);
2402
- themeToDelete.current = null;
2403
- }, [themeToDelete]);
2404
- var handleDeleteTheme = react.useCallback(function () {
2405
- var _themeToDelete$curren;
2406
- deleteTheme((_themeToDelete$curren = themeToDelete.current) === null || _themeToDelete$curren === void 0 ? void 0 : _themeToDelete$curren.id, {
2407
- onSuccess: function onSuccess() {
2408
- setIsDeleteAlertOpen(false);
2409
- themeToDelete.current = null;
2410
- }
2411
- });
2412
- }, [deleteTheme, themeToDelete]);
2413
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
2414
- children: [!isThemesSidebarCollapsed && /*#__PURE__*/jsxRuntime.jsx("div", {
2415
- className: "neeto-themes-sidebar__backdrop",
2416
- onClick: function onClick() {
2417
- setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
2418
- }
2419
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2420
- className: classnames("neeto-themes-sidebar neeto-ui-border-gray-200 shrink-0 border-e transition-all duration-300", {
2421
- "neeto-themes-sidebar--expanded": isCustomCssScreen
2422
- }, {
2423
- "neeto-themes-sidebar--collapsed": isThemesSidebarCollapsed
2424
- }),
2425
- children: [/*#__PURE__*/jsxRuntime.jsx(TitleBar, {
2426
- currentScreen: currentScreen,
2427
- handleBackPress: handleBackPress,
2428
- handleToggleSearch: handleToggleSearch
2429
- }), /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
2430
- children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
2431
- exact: true,
2432
- path: buildPathname(routes.themes.index),
2433
- render: function render() {
2434
- return /*#__PURE__*/jsxRuntime.jsx(Themes, {
2435
- currentTheme: currentTheme,
2436
- defaultThemes: defaultThemes,
2437
- didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
2438
- highlightTheme: highlightTheme,
2439
- isCurrentThemeLoading: isCurrentThemeLoading,
2440
- isSearchVisible: isSearchVisible,
2441
- onApplyTheme: onApplyTheme,
2442
- onApplyThemeSuccess: onApplyThemeSuccess,
2443
- themeBeingApplied: themeBeingApplied,
2444
- themeToHighlight: themeToHighlight,
2445
- themes: themes,
2446
- thumbnail: thumbnail,
2447
- isLoading: isLoading || isFetchingSchema,
2448
- onDeleteTheme: handleDelete,
2449
- onEditTheme: handleEditTheme
2450
- });
2451
- }
2452
- }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
2453
- path: buildPathname(routes.themes["new"]),
2454
- render: function render() {
2455
- return /*#__PURE__*/jsxRuntime.jsx(Customize, {
2456
- currentScreen: currentScreen,
2457
- defaultImageSize: defaultImageSize,
2458
- fixedAspectRatio: fixedAspectRatio,
2459
- isApplyingTheme: isApplyingTheme,
2460
- onApplyTheme: onApplyTheme,
2461
- onCreateTheme: onCreateTheme,
2462
- onPropertiesChange: onPropertiesChange,
2463
- onUpdateTheme: onUpdateTheme,
2464
- theme: themeToEdit.current,
2465
- onEditCSSClick: setCurrentScreen
2466
- });
2467
- }
2468
- }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
2469
- path: buildPathname(routes.themes.edit),
2470
- render: function render() {
2471
- return /*#__PURE__*/jsxRuntime.jsx(Customize, {
2472
- currentScreen: currentScreen,
2473
- defaultImageSize: defaultImageSize,
2474
- fixedAspectRatio: fixedAspectRatio,
2475
- isApplyingTheme: isApplyingTheme,
2476
- onApplyTheme: onApplyTheme,
2477
- onCreateTheme: onCreateTheme,
2478
- onPropertiesChange: onPropertiesChange,
2479
- onUpdateTheme: onUpdateTheme,
2480
- theme: themeToEdit.current,
2481
- onEditCSSClick: setCurrentScreen
2482
- });
2483
- }
2484
- })]
2485
- }), /*#__PURE__*/jsxRuntime.jsx(MemoizedAlert, {
2486
- isOpen: isDeleteAlertOpen,
2487
- isSubmitting: isDeleting,
2488
- title: t("neetoThemes.alerts.title.deleteTheme"),
2489
- message: t("neetoThemes.alerts.message.deleteTheme", {
2490
- name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
2491
- defaultThemeName: defaultThemeName,
2492
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
2493
- }),
2494
- onClose: handleCloseDeleteAlert,
2495
- onSubmit: handleDeleteTheme
2496
- }), /*#__PURE__*/jsxRuntime.jsx(Button, {
2497
- className: "neeto-themes-sidebar__toggler",
2498
- icon: Collapse,
2499
- style: "secondary",
2500
- onClick: function onClick() {
2501
- setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
2502
- }
2503
- })]
2504
- })]
2505
- });
2506
- };
2507
-
2508
- var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
2509
- var children = _ref.children,
2510
- entityType = _ref.entityType,
2511
- entityId = _ref.entityId,
2512
- thumbnail = _ref.thumbnail,
2513
- onPropertiesChange = _ref.onPropertiesChange,
2514
- _ref$defaultImageSize = _ref.defaultImageSize,
2515
- defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize,
2516
- _ref$fixedAspectRatio = _ref.fixedAspectRatio,
2517
- fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
2518
- _ref$helpDocUrl = _ref.helpDocUrl,
2519
- helpDocUrl = _ref$helpDocUrl === void 0 ? null : _ref$helpDocUrl,
2520
- _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
2521
- isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
2522
- _ref$pageTitle = _ref.pageTitle,
2523
- pageTitle = _ref$pageTitle === void 0 ? null : _ref$pageTitle,
2524
- _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
2525
- onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? neetoCist.noop : _ref$onApplyThemeSucc,
2526
- _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
2527
- onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? neetoCist.noop : _ref$onUpdateThemeSuc,
2528
- _ref$helpPopoverProps = _ref.helpPopoverProps,
2529
- helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
2530
- _ref$enabledFeatures = _ref.enabledFeatures,
2531
- enabledFeatures = _ref$enabledFeatures === void 0 ? {
2532
- customCSS: true
2533
- } : _ref$enabledFeatures,
2534
- _ref$proFeatures = _ref.proFeatures,
2535
- proFeatures = _ref$proFeatures === void 0 ? {} : _ref$proFeatures;
2536
- var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
2537
- return {
2538
- setThemeState: store["setThemeState"]
2539
- };
2540
- }, shallow.shallow),
2541
- setThemeState = _useThemeStore.setThemeState;
2542
- var _useThemeUtils = useExpandedSection.useThemeUtils(),
2543
- setTheme = _useThemeUtils.setTheme;
2544
- var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
2545
- return {
2546
- setConfigState: store["setConfigState"]
2547
- };
2548
- }, shallow.shallow),
2549
- setConfigState = _useConfigStore.setConfigState;
2550
- var _useTranslation = reactI18next.useTranslation(),
2551
- t = _useTranslation.t;
2552
- var _useShowThemeEntity = useShowThemeEntity(entityId),
2553
- _useShowThemeEntity$d = _useShowThemeEntity.data,
2554
- _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
2555
- _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
2556
- currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
2557
- isLoading = _useShowThemeEntity.isLoading,
2558
- isFetchingCurrentTheme = _useShowThemeEntity.isFetching;
2559
- var isCurrentThemeLoading = isLoading || isFetchingCurrentTheme;
2560
- react.useEffect(function () {
2561
- setConfigState({
2562
- entityType: entityType,
2563
- entityId: entityId,
2564
- isTemplateThemesEnabled: isTemplateThemesEnabled,
2565
- helpDocUrl: helpDocUrl,
2566
- helpPopoverProps: helpPopoverProps,
2567
- enabledFeatures: enabledFeatures,
2568
- proFeatures: proFeatures
2569
- });
2570
- }, []);
2571
- react.useEffect(function () {
2572
- if (neetoCist.isNotPresent(currentTheme) || utils.isEditThemeRoute()) {
2573
- return;
2574
- }
2575
- setThemeState({
2576
- previewingTheme: currentTheme
2577
- });
2578
- setTheme(currentTheme);
2579
- }, [isLoading, entityId, currentTheme]);
2580
- react.useEffect(function () {
2581
- if (neetoCist.isNotPresent(currentTheme)) return;
2582
- setThemeState({
2583
- currentTheme: currentTheme,
2584
- isCurrentThemeLoading: isCurrentThemeLoading
2585
- });
2586
- }, [currentTheme, isCurrentThemeLoading]);
2587
- react.useEffect(function () {
2588
- var setViewportHeight = function setViewportHeight() {
2589
- document.documentElement.style.setProperty("--viewport-height", "".concat(window.innerHeight, "px"));
2590
- };
2591
- setViewportHeight();
2592
- window.addEventListener("load", setViewportHeight);
2593
- window.addEventListener("resize", setViewportHeight);
2594
- window.addEventListener("orientationchange", setViewportHeight);
2595
- window.addEventListener("scroll", setViewportHeight);
2596
- return function () {
2597
- window.removeEventListener("load", setViewportHeight);
2598
- window.removeEventListener("resize", setViewportHeight);
2599
- window.removeEventListener("orientationchange", setViewportHeight);
2600
- window.removeEventListener("scroll", setViewportHeight);
2601
- };
2602
- }, []);
2603
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
2604
- className: "neeto-themes__wrapper",
2605
- children: [/*#__PURE__*/jsxRuntime.jsx(reactUtils.PageTitle, {
2606
- title: pageTitle || t("neetoThemes.common.theme")
2607
- }), /*#__PURE__*/jsxRuntime.jsx(Sidebar, {
2608
- defaultImageSize: defaultImageSize,
2609
- fixedAspectRatio: fixedAspectRatio,
2610
- onApplyThemeSuccess: onApplyThemeSuccess,
2611
- onPropertiesChange: onPropertiesChange,
2612
- onUpdateThemeSuccess: onUpdateThemeSuccess,
2613
- thumbnail: thumbnail
2614
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
2615
- className: "neeto-themes-preview__wrapper",
2616
- children: isCurrentThemeLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
2617
- className: "m-auto flex h-full w-full items-center justify-center",
2618
- children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
2619
- }) : children
2620
- })]
2621
- });
2622
- };
2623
-
2624
- module.exports = NeetoThemesBuilder;
65
+ module.exports = NeetoThemesBuilder.NeetoThemesBuilder;
2625
66
  //# sourceMappingURL=NeetoThemesBuilder.js.map