@bigbinary/neeto-themes-frontend 4.0.21 → 4.0.23

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