@bigbinary/neeto-themes-frontend 4.0.20 → 4.0.22

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