@bigbinary/neeto-themes-frontend 2.1.0 → 2.1.2

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.
package/dist/index.js CHANGED
@@ -1,1991 +1,46 @@
1
- import { shallow } from 'zustand/shallow';
2
- import { useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
3
- import { t as t$1 } from 'i18next';
4
- import { isNotPresent, snakeToCamelCase, filterBy, findBy, isPresent, isNot, hyphenate, findIndexBy, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
5
- import { withImmutableActions, useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
6
- import Spinner from '@bigbinary/neetoui/Spinner';
7
- import { useQuery } from '@tanstack/react-query';
8
- import axios from 'axios';
9
- import { prop, isEmpty, negate } from 'ramda';
10
- import { create as create$1 } from 'zustand';
11
- import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
12
- import _regeneratorRuntime from '@babel/runtime/regenerator';
13
- import Toastr from '@bigbinary/neetoui/Toastr';
14
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
15
- import Alert from '@bigbinary/neetoui/Alert';
16
- import { useTranslation, Trans } from 'react-i18next';
17
- import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
18
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
19
- import Close from '@bigbinary/neeto-icons/Close';
20
- import Button from '@bigbinary/neetoui/Button';
21
- import Popover from '@bigbinary/neetoui/Popover';
22
- import Typography from '@bigbinary/neetoui/Typography';
23
- import Form from '@bigbinary/neetoui/formik/Form';
24
- import * as yup from 'yup';
25
- import { useFormikContext, Field } from 'formik';
26
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
27
- import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
28
- import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
29
- import Select from '@bigbinary/neetoui/Select';
30
- import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
31
- import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
32
- import ColorPicker from '@bigbinary/neetoui/ColorPicker';
33
- import { Slider } from 'antd';
34
- import classnames from 'classnames';
35
- import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
36
- import Switch from '@bigbinary/neetoui/Switch';
37
- import Input from '@bigbinary/neetoui/formik/Input';
38
- import Search from '@bigbinary/neeto-molecules/Search';
39
- import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
40
- import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
41
- import Plus from '@bigbinary/neeto-icons/Plus';
42
-
43
- var BASE_URL = "neeto_themes_engine";
44
- var WHITE = "255, 255, 255";
45
- var BLACK = "0, 0, 0";
46
-
47
- var show$1 = function show(entityId) {
48
- return axios.get("".concat(BASE_URL, "/api/v1/entities/").concat(entityId));
49
- };
50
- var entitiesApi = {
51
- show: show$1
52
- };
53
-
54
- var QUERY_KEYS = {
55
- THEMES_LIST: "themes-list",
56
- THEME_DETAILS: "theme-details",
57
- SCHEMA_DETAILS: "schema-details"
58
- };
59
-
60
- var useShowThemeEntity = function useShowThemeEntity(entityId) {
61
- return useQuery({
62
- queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
63
- queryFn: function queryFn() {
64
- return entitiesApi.show(entityId);
65
- },
66
- enabled: !!entityId
67
- });
68
- };
69
-
70
- /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
71
- var useConfigStore = create$1(withImmutableActions(function (set) {
72
- return {
73
- themePropertiesSchema: [],
74
- entityType: "",
75
- entityId: "",
76
- variableNamesMap: {},
77
- defaultThemeName: "Plain blue",
78
- isFetchingSchema: true,
79
- isTemplateThemesEnabled: false,
80
- setConfigState: set
81
- };
82
- }));
83
-
84
- /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
85
- var useThemeStore = create$1(withImmutableActions(function (set) {
86
- return {
87
- currentTheme: {},
88
- isCurrentThemeLoading: true,
89
- previewingTheme: {},
90
- setThemeState: set
91
- };
92
- }));
93
-
94
- var getImageFromUrl = function getImageFromUrl(source) {
95
- var image = new Image();
96
- image.crossOrigin = "anonymous";
97
- image.src = source;
98
- return new Promise(function (resolve) {
99
- image.onload = function () {
100
- resolve(image);
101
- };
102
- });
103
- };
104
- var getDominantColorFromUrl = /*#__PURE__*/function () {
105
- var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(imageUrl) {
106
- var image, context, c;
107
- return _regeneratorRuntime.wrap(function _callee$(_context) {
108
- while (1) switch (_context.prev = _context.next) {
109
- case 0:
110
- _context.prev = 0;
111
- _context.next = 3;
112
- return getImageFromUrl(imageUrl);
113
- case 3:
114
- image = _context.sent;
115
- context = document.createElement("canvas").getContext("2d");
116
- context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
117
- c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
118
- if (!c) {
119
- _context.next = 9;
120
- break;
121
- }
122
- return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
123
- case 9:
124
- return _context.abrupt("return", null);
125
- case 12:
126
- _context.prev = 12;
127
- _context.t0 = _context["catch"](0);
128
- Toastr.error(_context.t0);
129
- return _context.abrupt("return", null);
130
- case 16:
131
- case "end":
132
- return _context.stop();
133
- }
134
- }, _callee, null, [[0, 12]]);
135
- }));
136
- return function getDominantColorFromUrl(_x) {
137
- return _ref.apply(this, arguments);
138
- };
139
- }();
140
- var scrollElementIntoView = function scrollElementIntoView(elementId) {
141
- var elementToScroll = document.getElementById(elementId);
142
- elementToScroll === null || elementToScroll === void 0 || elementToScroll.scrollIntoView({
143
- behavior: "smooth"
144
- });
145
- };
146
- var isFunction = function isFunction(obj) {
147
- return typeof obj === "function";
148
- };
149
- var hexToRgba = function hexToRgba(hex) {
150
- var result = /^#?(?:([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?|([a-f\d]{2})([a-f\d]{2})([a-f\d]{2}))$/i.exec(hex);
151
- if (!result) return null;
152
- var r = parseInt(result[1] || result[5], 16);
153
- var g = parseInt(result[2] || result[6], 16);
154
- var b = parseInt(result[3] || result[7], 16);
155
- var a = result[4] ? Math.round(parseInt(result[4], 16) / 2.55) / 100 : undefined;
156
- return "".concat(r, ", ").concat(g, ", ").concat(b).concat(a !== undefined ? ", ".concat(a) : "");
157
- };
158
-
159
- var root = document.querySelector(":root");
160
- var setVariable = function setVariable(name, value, variableNamesMap) {
161
- var variableName = variableNamesMap[name];
162
- if (!variableName) return;
163
- root.style.setProperty(variableName, value);
164
- };
165
- var isPropertyIndependent = function isPropertyIndependent(key, theme, schema) {
166
- var property = findBy({
167
- key: key
168
- }, schema);
169
- if (isNotPresent(property)) return false;
170
- var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
171
- if (isNotPresent(conditionalKey)) return true;
172
- var dependentPropertySchema = findBy({
173
- key: conditionalKey
174
- }, schema);
175
- var dependentProperty = findBy({
176
- key: conditionalKey
177
- }, theme.properties);
178
- if (dependentPropertySchema.kind === "image") {
179
- var _theme$snakeToCamelCa;
180
- return isPresent((_theme$snakeToCamelCa = theme[snakeToCamelCase(conditionalKey)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url);
181
- } else if (dependentPropertySchema.kind === "boolean") {
182
- return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
183
- }
184
- return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
185
- };
186
- var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
187
- if (isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
188
- theme.properties.forEach(function (property) {
189
- var attribute = snakeToCamelCase(property.key);
190
- if (!isPropertyIndependent(property.key, theme, themeConfig)) {
191
- setVariable(attribute, "", variableNamesMap);
192
- return;
193
- }
194
- if (property.kind === "color") {
195
- setVariable(attribute, hexToRgba(property.value), variableNamesMap);
196
- } else if (property.kind === "overlay_opacity") {
197
- var overlayOpacity = Number(property.value);
198
- setVariable(snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
199
- setVariable(snakeToCamelCase("".concat(property.key, "_overlay_color")), overlayOpacity < 0 ? BLACK : WHITE, variableNamesMap);
200
- } else if (property.kind === "radius") {
201
- setVariable(attribute, "".concat(property.value, "px"), variableNamesMap);
202
- } else {
203
- setVariable(attribute, property.value, variableNamesMap);
204
- }
205
- });
206
- filterBy({
207
- kind: "image"
208
- }, themeConfig).forEach(function (_ref) {
209
- var _theme$attribute;
210
- var key = _ref.key;
211
- var attribute = snakeToCamelCase(key);
212
- setVariable(attribute, "url(".concat((_theme$attribute = theme[attribute]) === null || _theme$attribute === void 0 ? void 0 : _theme$attribute.url, ")"), variableNamesMap);
213
- });
214
- };
215
-
216
- var list$1 = function list() {
217
- return axios.get("".concat(BASE_URL, "/api/v1/schema"));
218
- };
219
- var schemasApi = {
220
- list: list$1
221
- };
222
-
223
- var useListSchema = function useListSchema() {
224
- return useQuery({
225
- queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
226
- queryFn: schemasApi.list
227
- });
228
- };
229
-
230
- var useThemeUtils = function useThemeUtils() {
231
- var setConfigState = useConfigStore(prop("setConfigState"));
232
- var _useThemeStore = useThemeStore(function (store) {
233
- return {
234
- previewingTheme: store["previewingTheme"],
235
- currentTheme: store["currentTheme"]
236
- };
237
- }, shallow),
238
- previewingTheme = _useThemeStore.previewingTheme,
239
- currentTheme = _useThemeStore.currentTheme;
240
- var _useListSchema = useListSchema(),
241
- isFetchingSchema = _useListSchema.isLoading,
242
- data = _useListSchema.data;
243
- var _ref = data || {},
244
- _ref$schema = _ref.schema,
245
- themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
246
- _ref$variableNamesMap = _ref.variableNamesMap,
247
- variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
248
- useEffect(function () {
249
- if (data) {
250
- setConfigState({
251
- themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
252
- variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
253
- defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
254
- });
255
- }
256
- }, [data]);
257
- useEffect(function () {
258
- return setConfigState({
259
- isFetchingSchema: isFetchingSchema
260
- });
261
- }, [isFetchingSchema]);
262
- var setVariable$1 = function setVariable$1(name, value) {
263
- return setVariable(name, value, variableNamesMap);
264
- };
265
- var setTheme$1 = function setTheme$1(theme) {
266
- return setTheme(theme, variableNamesMap, themePropertiesSchema);
267
- };
268
- return {
269
- setTheme: setTheme$1,
270
- setVariable: setVariable$1,
271
- previewingTheme: previewingTheme,
272
- currentTheme: currentTheme,
273
- isFetchingSchema: isFetchingSchema
274
- };
275
- };
276
-
277
- var _excluded$1 = ["themeId"];
278
- var list = function list(entityId) {
279
- return axios.get("".concat(BASE_URL, "/api/v1/themes"), {
280
- params: {
281
- entity_id: entityId
282
- }
283
- });
284
- };
285
- var show = function show(id) {
286
- return axios.get("".concat(BASE_URL, "/api/v1/themes/").concat(id));
287
- };
288
- var create = function create(payload) {
289
- return axios.post("".concat(BASE_URL, "/api/v1/themes"), {
290
- theme: payload
291
- });
292
- };
293
- var update = function update(_ref) {
294
- var id = _ref.id,
295
- payload = _ref.payload;
296
- return axios.put("".concat(BASE_URL, "/api/v1/themes/").concat(id), {
297
- theme: payload
298
- });
299
- };
300
- var destroy = function destroy(id) {
301
- return axios["delete"]("".concat(BASE_URL, "/api/v1/themes/").concat(id));
302
- };
303
- var clone = function clone(id) {
304
- return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(id, "/clone"));
305
- };
306
- var apply = function apply(_ref2) {
307
- var themeId = _ref2.themeId,
308
- payload = _objectWithoutProperties(_ref2, _excluded$1);
309
- return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(themeId, "/apply"), {
310
- entity: payload
311
- });
312
- };
313
- var themesApi = {
314
- list: list,
315
- show: show,
316
- create: create,
317
- update: update,
318
- destroy: destroy,
319
- clone: clone,
320
- apply: apply
321
- };
322
-
323
- var useListThemes = function useListThemes(entityId) {
324
- var _useConfigStore = useConfigStore(function (store) {
325
- return {
326
- isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
327
- };
328
- }, shallow),
329
- isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
330
- var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
331
- return useQuery({
332
- queryKey: queryKey,
333
- queryFn: function queryFn() {
334
- return themesApi.list(entityId);
335
- }
336
- });
337
- };
338
- var useCreateTheme = function useCreateTheme() {
339
- return useMutationWithInvalidation(themesApi.create, {
340
- keysToInvalidate: [QUERY_KEYS.THEMES_LIST]
341
- });
342
- };
343
- var useUpdateTheme = function useUpdateTheme(themeId) {
344
- return useMutationWithInvalidation(function (payload) {
345
- return themesApi.update({
346
- id: themeId,
347
- payload: payload
348
- });
349
- }, {
350
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId]]
351
- });
352
- };
353
- var useDeleteTheme = function useDeleteTheme() {
354
- return useMutationWithInvalidation(themesApi.destroy, {
355
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
356
- });
357
- };
358
- var useCloneTheme = function useCloneTheme() {
359
- return useMutationWithInvalidation(themesApi.clone, {
360
- keysToInvalidate: [QUERY_KEYS.THEMES_LIST]
361
- });
362
- };
363
- var useApplyTheme = function useApplyTheme(_ref) {
364
- var onSuccess = _ref.onSuccess;
365
- return useMutationWithInvalidation(themesApi.apply, {
366
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
367
- onSuccess: onSuccess
368
- });
369
- };
370
-
371
- var POSITION_OPTIONS = [{
372
- label: "Left",
373
- value: "left"
374
- }, {
375
- label: "Right",
376
- value: "right"
377
- }];
378
- var FONT_OPTIONS = [{
379
- label: "System UI",
380
- value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
381
- }, {
382
- label: "Cedarville Cursive",
383
- value: "'Cedarville Cursive', cursive"
384
- }, {
385
- label: "Poppins",
386
- value: "Poppins, sans-serif"
387
- }, {
388
- label: "Roboto",
389
- value: "Roboto, sans-serif"
390
- }, {
391
- label: "Open Sans",
392
- value: "Open Sans, sans-serif"
393
- }, {
394
- label: "Montserrat",
395
- value: "Montserrat, sans-serif"
396
- }, {
397
- label: "Raleway",
398
- value: "Raleway, sans-serif"
399
- }, {
400
- label: "Quicksand",
401
- value: "Quicksand, sans-serif"
402
- }, {
403
- label: "Inter",
404
- value: "Inter, sans-serif"
405
- }, {
406
- label: "Satoshi",
407
- value: "Satoshi, sans-serif"
408
- }, {
409
- label: "Chillax",
410
- value: "Chillax, sans-serif"
411
- }, {
412
- label: "Clash Display",
413
- value: "Clash Display, sans-serif"
414
- }, {
415
- label: "General Sans",
416
- value: "General Sans, sans-serif"
417
- }, {
418
- label: "Cabinet Grotesk",
419
- value: "Cabinet Grotesk, sans-serif"
420
- }, {
421
- label: "Lora",
422
- value: "Lora, serif"
423
- }, {
424
- label: "Merriweather",
425
- value: "Merriweather, serif"
426
- }, {
427
- label: "Boska",
428
- value: "Boska, serif"
429
- }, {
430
- label: "Playfair Display",
431
- value: "Playfair Display, serif"
432
- }, {
433
- label: "Roboto Slab",
434
- value: "Roboto Slab, serif"
435
- }, {
436
- label: "Dancing Script",
437
- value: "Dancing Script, cursive"
438
- }];
439
- var THEME_VALIDATION_SCHEMA = yup.object().shape({
440
- name: yup.string().required("Name is required")
441
- });
442
- var OVERLAY_OPACITY_SLIDER_MARKS = {
443
- 0: " "
444
- };
445
- var HUNDRED = 100;
446
-
447
- var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
448
- if (isPresent(theme)) return theme;
449
- return {
450
- name: t$1("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
451
- properties: themePropertiesSchema.map(function (_ref) {
452
- var key = _ref.key,
453
- kind = _ref.kind,
454
- defaultValue = _ref.defaultValue;
455
- switch (kind) {
456
- case "color":
457
- return {
458
- value: defaultValue,
459
- kind: "color",
460
- key: key
461
- };
462
- case "font_family":
463
- return {
464
- value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
465
- kind: "font_family",
466
- key: key
467
- };
468
- case "overlay_opacity":
469
- return {
470
- value: 0,
471
- kind: "overlay_opacity",
472
- key: key
473
- };
474
- case "slider":
475
- return {
476
- value: 0,
477
- kind: "slider",
478
- key: key
479
- };
480
- case "radius":
481
- return {
482
- value: defaultValue,
483
- kind: "radius",
484
- key: key
485
- };
486
- case "boolean":
487
- return {
488
- value: String(defaultValue),
489
- kind: "boolean",
490
- key: key
491
- };
492
- case "position_selector":
493
- return {
494
- value: defaultValue,
495
- kind: "position_selector",
496
- key: key
497
- };
498
- case "alignment_block":
499
- return {
500
- value: defaultValue,
501
- kind: "alignment_block",
502
- key: key
503
- };
504
- default:
505
- return null;
506
- }
507
- }).filter(isNot(null))
508
- };
509
- };
510
- var buildImageData = function buildImageData(values, themePropertiesSchema) {
511
- return filterBy({
512
- kind: "image"
513
- }, themePropertiesSchema).reduce(function (acc, item) {
514
- var _values$snakeToCamelC;
515
- var signedId = (_values$snakeToCamelC = values[snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
516
- acc[item.key] = signedId;
517
- return acc;
518
- }, {});
519
- };
520
- var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
521
- var property = findBy({
522
- key: key
523
- }, themePropertiesSchema);
524
- if (isNotPresent(property)) return false;
525
- if (property !== null && property !== void 0 && property.hidden) return false;
526
- var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
527
- if (isNotPresent(conditionalKey)) return true;
528
- var dependentPropertySchema = findBy({
529
- key: conditionalKey
530
- }, themePropertiesSchema);
531
- var dependentProperty = findBy({
532
- key: conditionalKey
533
- }, formikValues.properties);
534
- if (dependentPropertySchema.kind === "image") {
535
- var _formikValues$snakeTo;
536
- return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
537
- } else if (dependentPropertySchema.kind === "boolean") {
538
- return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
539
- }
540
- return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
541
- };
542
- var buildLabel = function buildLabel(key, kind) {
543
- return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
544
- };
545
-
546
- var Card$2 = function Card(_ref) {
547
- var _ref$title = _ref.title,
548
- title = _ref$title === void 0 ? "" : _ref$title,
549
- children = _ref.children;
550
- return /*#__PURE__*/jsxs("div", {
551
- className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4",
552
- "data-cy": "theme-".concat(hyphenate(title), "-properties"),
553
- children: [title && /*#__PURE__*/jsx("div", {
554
- className: "flex items-center justify-between",
555
- children: /*#__PURE__*/jsx(Typography, {
556
- "data-cy": "theme-properties",
557
- lineHeight: "normal",
558
- style: "h4",
559
- weight: "semibold",
560
- children: title
561
- })
562
- }), children && /*#__PURE__*/jsx("div", {
563
- className: "space-y-4",
564
- children: children
565
- })]
566
- });
567
- };
568
-
569
- var SelectBlock = function SelectBlock(_ref) {
570
- var label = _ref.label,
571
- _ref$placeholder = _ref.placeholder,
572
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
573
- value = _ref.value,
574
- options = _ref.options,
575
- onChange = _ref.onChange;
576
- return /*#__PURE__*/jsxs("div", {
577
- className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
578
- "data-cy": "theme-style-".concat(joinHyphenCase(label)),
579
- children: [/*#__PURE__*/jsx(Typography, {
580
- "data-cy": "logo-field-labels",
581
- style: "body2",
582
- children: label
583
- }), /*#__PURE__*/jsx("div", {
584
- className: "w-40",
585
- children: /*#__PURE__*/jsx(Select, {
586
- onChange: onChange,
587
- options: options,
588
- placeholder: placeholder,
589
- value: value
590
- })
591
- })]
592
- });
593
- };
594
-
595
- var DESIGN_SCREENS = {
596
- THEMES: "Themes",
597
- Customize: "Customize"
598
- };
599
- var ONE_MEGABYTE = 1;
600
-
601
- var ImageBlock = function ImageBlock(_ref) {
602
- var _findBy;
603
- var label = _ref.label,
604
- name = _ref.name,
605
- _ref$imageData = _ref.imageData,
606
- imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
607
- _ref$uploadConfig = _ref.uploadConfig,
608
- uploadConfig = _ref$uploadConfig === void 0 ? {
609
- maxImageSize: ONE_MEGABYTE
610
- } : _ref$uploadConfig,
611
- attribute = _ref.attribute;
612
- var _useTranslation = useTranslation(),
613
- t = _useTranslation.t;
614
- var _useFormikContext = useFormikContext(),
615
- setFieldValue = _useFormikContext.setFieldValue,
616
- values = _useFormikContext.values;
617
- var _useConfigStore = useConfigStore(function (store) {
618
- return {
619
- themePropertiesSchema: store["themePropertiesSchema"]
620
- };
621
- }, shallow),
622
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
623
- var propertySchema = findBy({
624
- key: attribute
625
- }, themePropertiesSchema);
626
- var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
627
- var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
628
- var positionKeyInSchema = findBy({
629
- key: "".concat(name, "_position")
630
- }, themePropertiesSchema);
631
- var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
632
- var positionKeyIndex = findIndexBy({
633
- key: "".concat(name, "_position")
634
- }, values.properties);
635
- var handleImageChange = /*#__PURE__*/function () {
636
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
637
- var dominantColor;
638
- return _regeneratorRuntime.wrap(function _callee$(_context) {
639
- while (1) switch (_context.prev = _context.next) {
640
- case 0:
641
- _context.prev = 0;
642
- if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
643
- _context.next = 4;
644
- break;
645
- }
646
- setFieldValue(name, {
647
- signedId: null,
648
- url: image.url
649
- });
650
- return _context.abrupt("return");
651
- case 4:
652
- _context.next = 6;
653
- return getDominantColorFromUrl(image.url);
654
- case 6:
655
- dominantColor = _context.sent;
656
- setFieldValue(name, {
657
- signedId: image.signedId,
658
- url: image.url,
659
- dominantColor: dominantColor
660
- });
661
- _context.next = 13;
662
- break;
663
- case 10:
664
- _context.prev = 10;
665
- _context.t0 = _context["catch"](0);
666
- Toastr.error(_context.t0);
667
- case 13:
668
- case "end":
669
- return _context.stop();
670
- }
671
- }, _callee, null, [[0, 10]]);
672
- }));
673
- return function handleImageChange(_x) {
674
- return _ref2.apply(this, arguments);
675
- };
676
- }();
677
- return /*#__PURE__*/jsxs("div", {
678
- className: "space-y-3 py-3 first:pt-0 last:pb-0",
679
- "data-cy": "theme-style-".concat(joinHyphenCase(label)),
680
- children: [label && /*#__PURE__*/jsx("div", {
681
- className: "flex items-center justify-between",
682
- children: /*#__PURE__*/jsx(Typography, {
683
- "data-cy": "style-fields-labels",
684
- style: "body2",
685
- children: label
686
- })
687
- }), /*#__PURE__*/jsxs("div", {
688
- className: "space-y-3 divide-y divide-gray-200",
689
- children: [/*#__PURE__*/createElement(ImageUploader, {
690
- uploadConfig: uploadConfig,
691
- className: "h-40 w-full",
692
- key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
693
- src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
694
- onUploadComplete: handleImageChange
695
- }), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
696
- label: buildLabel("".concat(name, "Position"), "image"),
697
- options: options || POSITION_OPTIONS,
698
- placeholder: t("neetoThemes.common.left"),
699
- value: toLabelAndValue(((_findBy = findBy({
700
- key: "".concat(name, "_position")
701
- }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
702
- onChange: function onChange(option) {
703
- return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
704
- }
705
- })]
706
- })]
707
- });
708
- };
709
-
710
- var Images = function Images(_ref) {
711
- var attribute = _ref.attribute;
712
- var _useFormikContext = useFormikContext(),
713
- values = _useFormikContext.values;
714
- var key = snakeToCamelCase(attribute);
715
- var title = buildLabel(key, "image");
716
- var imageData = values[key];
717
- return /*#__PURE__*/jsx(Card$2, {
718
- title: title,
719
- children: /*#__PURE__*/jsx("div", {
720
- className: "divide-y divide-gray-200",
721
- children: /*#__PURE__*/jsx(ImageBlock, {
722
- attribute: attribute,
723
- imageData: imageData,
724
- name: key
725
- })
726
- })
727
- });
728
- };
729
-
730
- var AlignmentBlock = function AlignmentBlock(_ref) {
731
- var label = _ref.label,
732
- name = _ref.name;
733
- return /*#__PURE__*/jsxs("div", {
734
- className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
735
- "data-cy": joinHyphenCase(label),
736
- children: [/*#__PURE__*/jsx(Typography, {
737
- "data-cy": "style-fields-labels",
738
- style: "body2",
739
- children: label
740
- }), /*#__PURE__*/jsx(Field, {
741
- name: name,
742
- children: function children(_ref2) {
743
- var value = _ref2.field.value,
744
- setFieldValue = _ref2.form.setFieldValue;
745
- return /*#__PURE__*/jsxs("div", {
746
- className: "flex items-center gap-3",
747
- children: [/*#__PURE__*/jsx(Button, {
748
- "data-cy": "alignment-left",
749
- icon: LeftAlign,
750
- size: "large",
751
- style: value === "left" ? "primary" : "text",
752
- tooltipProps: {
753
- content: "Left align",
754
- position: "bottom"
755
- },
756
- onClick: function onClick() {
757
- return setFieldValue(name, "left");
758
- }
759
- }), /*#__PURE__*/jsx(Button, {
760
- "data-cy": "alignment-center",
761
- icon: CenterAlign,
762
- size: "large",
763
- style: value === "center" ? "primary" : "text",
764
- tooltipProps: {
765
- content: "Center align",
766
- position: "bottom"
767
- },
768
- onClick: function onClick() {
769
- return setFieldValue(name, "center");
770
- }
771
- })]
772
- });
773
- }
774
- })]
775
- });
776
- };
777
-
778
- var ColorBlock = function ColorBlock(_ref) {
779
- var label = _ref.label,
780
- _ref$color = _ref.color,
781
- color = _ref$color === void 0 ? "#FFFFFF" : _ref$color,
782
- onChange = _ref.onChange,
783
- showTransparencyControl = _ref.showTransparencyControl;
784
- return /*#__PURE__*/jsxs("div", {
785
- className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
786
- "data-cy": "theme-style-".concat(joinHyphenCase(label)),
787
- children: [/*#__PURE__*/jsx(Typography, {
788
- "data-cy": "style-fields-labels",
789
- style: "body2",
790
- children: label
791
- }), /*#__PURE__*/jsx(ColorPicker, {
792
- color: color,
793
- onChange: onChange,
794
- showTransparencyControl: showTransparencyControl,
795
- showEyeDropper: true
796
- })]
797
- });
798
- };
799
-
800
- 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; }
801
- 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), !0).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; }
802
- var FontPickerBlock = function FontPickerBlock(_ref) {
803
- var label = _ref.label,
804
- _ref$placeholder = _ref.placeholder,
805
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
806
- value = _ref.value,
807
- options = _ref.options,
808
- onChange = _ref.onChange;
809
- return /*#__PURE__*/jsxs("div", {
810
- className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
811
- "data-cy": "theme-style-".concat(joinHyphenCase(label)),
812
- children: [/*#__PURE__*/jsx(Typography, {
813
- "data-cy": "style-fields-labels",
814
- style: "body2",
815
- children: label
816
- }), /*#__PURE__*/jsx("div", {
817
- className: "w-40",
818
- children: /*#__PURE__*/jsx(Select, {
819
- onChange: onChange,
820
- options: options,
821
- placeholder: placeholder,
822
- value: value,
823
- menuPosition: "fixed",
824
- styles: {
825
- option: function option(styles, _ref2) {
826
- var data = _ref2.data;
827
- return _objectSpread$3(_objectSpread$3({}, styles), {}, {
828
- fontFamily: data.value
829
- });
830
- }
831
- }
832
- })
833
- })]
834
- });
835
- };
836
-
837
- var SliderBlock = function SliderBlock(_ref) {
838
- var label = _ref.label,
839
- onChange = _ref.onChange,
840
- value = _ref.value,
841
- min = _ref.min,
842
- max = _ref.max,
843
- marks = _ref.marks;
844
- return /*#__PURE__*/jsxs("div", {
845
- className: "flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0",
846
- "data-cy": "theme-style-".concat(joinHyphenCase(label)),
847
- children: [/*#__PURE__*/jsx(Typography, {
848
- "data-cy": "style-fields-labels",
849
- style: "body2",
850
- children: label
851
- }), /*#__PURE__*/jsx(Slider, {
852
- marks: marks,
853
- max: max,
854
- min: min,
855
- onChange: onChange,
856
- value: value,
857
- className: "my-2 w-20",
858
- tooltip: {
859
- formatter: null
860
- }
861
- })]
862
- });
863
- };
864
-
865
- var _excluded = ["label", "name"];
866
- 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; }
867
- 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), !0).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; }
868
- var SwitchBlock = function SwitchBlock(_ref) {
869
- var label = _ref.label,
870
- name = _ref.name,
871
- switchProps = _objectWithoutProperties(_ref, _excluded);
872
- var _useTranslation = useTranslation(),
873
- t = _useTranslation.t,
874
- i18n = _useTranslation.i18n;
875
- var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
876
- var doesHelpTextExist = i18n.exists(translationKey);
877
- return /*#__PURE__*/jsxs("div", {
878
- className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
879
- children: [/*#__PURE__*/jsxs("div", {
880
- className: "inline-flex items-center gap-4",
881
- children: [/*#__PURE__*/jsx(Typography, {
882
- "data-cy": "style-fields-labels",
883
- style: "body2",
884
- className: classnames({
885
- "w-32": doesHelpTextExist,
886
- "w-auto": !doesHelpTextExist
887
- }),
888
- children: label
889
- }), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
890
- className: "flex-shrink-0",
891
- description: t(translationKey)
892
- })]
893
- }), /*#__PURE__*/jsx(Switch, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
894
- name: name
895
- }, switchProps)), {}, {
896
- "data-cy": "enable-background-color-toggle"
897
- }))]
898
- });
899
- };
900
-
901
- var Properties = function Properties(_ref) {
902
- var onPropertiesChange = _ref.onPropertiesChange;
903
- var _useTranslation = useTranslation(),
904
- t = _useTranslation.t;
905
- var _useConfigStore = useConfigStore(function (store) {
906
- return {
907
- themePropertiesSchema: store["themePropertiesSchema"]
908
- };
909
- }, shallow),
910
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
911
- var _useThemeStore = useThemeStore(function (store) {
912
- return {
913
- setThemeState: store["setThemeState"]
914
- };
915
- }, shallow),
916
- setThemeState = _useThemeStore.setThemeState;
917
- var _useFormikContext = useFormikContext(),
918
- setFieldValue = _useFormikContext.setFieldValue,
919
- values = _useFormikContext.values;
920
- var _useThemeUtils = useThemeUtils(),
921
- setVariable = _useThemeUtils.setVariable,
922
- setTheme = _useThemeUtils.setTheme;
923
- var handleColorChange = function handleColorChange(name) {
924
- return function (_ref2) {
925
- var hex = _ref2.hex,
926
- rgb = _ref2.rgb;
927
- handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
928
- };
929
- };
930
- var handleChange = function handleChange(name, value, variableValue) {
931
- var index = findIndexBy({
932
- key: name
933
- }, values.properties);
934
- if (index !== -1 && values.properties[index].value !== value) {
935
- setFieldValue("properties[".concat(index, "].value"), value);
936
- }
937
- setVariable(snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
938
- };
939
- var handleOverlayChange = function handleOverlayChange(key, value) {
940
- var index = findIndexBy({
941
- key: key
942
- }, values.properties);
943
- var overlayColorVariable = "".concat(key, "_overlay_color");
944
- setFieldValue("properties[".concat(index, "].value"), value);
945
- setVariable("".concat(key, "_overlay_opacity"), Math.abs(value / 100));
946
- if (value < 0) {
947
- handleChange(overlayColorVariable, "#000000", "0, 0, 0");
948
- } else {
949
- handleChange(overlayColorVariable, "#ffffff", "255, 255, 255");
950
- }
951
- };
952
- useEffect(function () {
953
- onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
954
- setTheme(values);
955
- setThemeState({
956
- previewingTheme: values
957
- });
958
- }, [values]);
959
- return /*#__PURE__*/jsx(Card$2, {
960
- title: t("neetoThemes.common.style"),
961
- children: /*#__PURE__*/jsxs("div", {
962
- className: "divide-y divide-gray-200",
963
- children: [filterBy({
964
- kind: "font_family"
965
- }, values.properties).map(function (_ref3) {
966
- var key = _ref3.key,
967
- value = _ref3.value,
968
- kind = _ref3.kind;
969
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(FontPickerBlock, {
970
- label: buildLabel(key, kind),
971
- options: FONT_OPTIONS,
972
- value: findBy({
973
- value: value || null
974
- }, FONT_OPTIONS),
975
- onChange: function onChange(_ref4) {
976
- var value = _ref4.value;
977
- handleChange(key, value);
978
- }
979
- }, key);
980
- }), filterBy({
981
- kind: "color"
982
- }, values.properties).map(function (_ref5) {
983
- var _findBy;
984
- var key = _ref5.key,
985
- value = _ref5.value,
986
- kind = _ref5.kind;
987
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(ColorBlock, {
988
- color: value,
989
- label: buildLabel(key, kind),
990
- showTransparencyControl: ((_findBy = findBy({
991
- key: key
992
- }, themePropertiesSchema)) === null || _findBy === void 0 ? void 0 : _findBy.showTransparencyControl) || false,
993
- onChange: handleColorChange(key)
994
- }, key);
995
- }), filterBy({
996
- kind: "radius"
997
- }, values.properties).map(function (_ref6) {
998
- var key = _ref6.key,
999
- value = _ref6.value,
1000
- kind = _ref6.kind;
1001
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
1002
- label: buildLabel(key, kind),
1003
- max: 50,
1004
- min: 0,
1005
- value: Number(value) || 0,
1006
- onChange: function onChange(radius) {
1007
- return handleChange(key, radius, "".concat(radius, "px"));
1008
- }
1009
- }, key);
1010
- }), filterBy({
1011
- kind: "overlay_opacity"
1012
- }, values.properties).map(function (_ref7) {
1013
- var key = _ref7.key,
1014
- value = _ref7.value,
1015
- kind = _ref7.kind;
1016
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
1017
- label: buildLabel(key, kind),
1018
- marks: OVERLAY_OPACITY_SLIDER_MARKS,
1019
- max: HUNDRED,
1020
- min: negate(HUNDRED),
1021
- value: Number(value) || 0,
1022
- onChange: function onChange(opacity) {
1023
- return handleOverlayChange(key, opacity);
1024
- }
1025
- }, key);
1026
- }), filterBy({
1027
- kind: "position_selector"
1028
- }, values.properties).map(function (_ref8) {
1029
- var _findBy2;
1030
- var key = _ref8.key,
1031
- kind = _ref8.kind,
1032
- value = _ref8.value;
1033
- var index = findIndexBy({
1034
- key: key
1035
- }, values.properties);
1036
- var options = (_findBy2 = findBy({
1037
- key: key
1038
- }, themePropertiesSchema)) === null || _findBy2 === void 0 || (_findBy2 = _findBy2.options) === null || _findBy2 === void 0 ? void 0 : _findBy2.map(toLabelAndValue);
1039
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SelectBlock, {
1040
- label: buildLabel(key, kind),
1041
- options: options || POSITION_OPTIONS,
1042
- placeholder: "left",
1043
- value: toLabelAndValue(value),
1044
- onChange: function onChange(option) {
1045
- return setFieldValue("properties[".concat(index, "].value"), option.value);
1046
- }
1047
- }, key);
1048
- }), filterBy({
1049
- kind: "boolean"
1050
- }, values.properties).map(function (_ref9) {
1051
- var key = _ref9.key,
1052
- kind = _ref9.kind,
1053
- value = _ref9.value;
1054
- var index = findIndexBy({
1055
- key: key
1056
- }, values.properties);
1057
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SwitchBlock, {
1058
- checked: value !== "false",
1059
- label: buildLabel(key, kind),
1060
- name: snakeToCamelCase(key),
1061
- onChange: function onChange(e) {
1062
- return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
1063
- }
1064
- }, key);
1065
- }), filterBy({
1066
- kind: "alignment_block"
1067
- }, values.properties).map(function (_ref10) {
1068
- var key = _ref10.key,
1069
- kind = _ref10.kind;
1070
- var index = findIndexBy({
1071
- key: key
1072
- }, values.properties);
1073
- return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(AlignmentBlock, {
1074
- label: buildLabel(key, kind),
1075
- name: "properties[".concat(index, "].value")
1076
- });
1077
- })]
1078
- })
1079
- });
1080
- };
1081
-
1082
- var ThemeMeta = withT(function (_ref) {
1083
- var t = _ref.t;
1084
- return /*#__PURE__*/jsx(Card$2, {
1085
- title: t("neetoThemes.common.name"),
1086
- children: /*#__PURE__*/jsx(Input, {
1087
- autoFocus: true,
1088
- "data-cy": "theme-name-property",
1089
- name: "name"
1090
- })
1091
- });
1092
- });
1093
-
1094
- 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; }
1095
- 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), !0).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; }
1096
- var Customize = function Customize(_ref) {
1097
- var themeId = _ref.themeId,
1098
- theme = _ref.theme,
1099
- onCreateTheme = _ref.onCreateTheme,
1100
- onApplyTheme = _ref.onApplyTheme,
1101
- isApplyingTheme = _ref.isApplyingTheme,
1102
- onPropertiesChange = _ref.onPropertiesChange,
1103
- onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
1104
- var _useTranslation = useTranslation(),
1105
- t = _useTranslation.t;
1106
- var _useState = useState({}),
1107
- _useState2 = _slicedToArray(_useState, 2),
1108
- popoverInstance = _useState2[0],
1109
- setPopoverInstance = _useState2[1];
1110
- var _useConfigStore = useConfigStore(function (store) {
1111
- return {
1112
- themePropertiesSchema: store["themePropertiesSchema"],
1113
- entityType: store["entityType"]
1114
- };
1115
- }, shallow),
1116
- themePropertiesSchema = _useConfigStore.themePropertiesSchema,
1117
- entityType = _useConfigStore.entityType;
1118
- var _useThemeUtils = useThemeUtils(),
1119
- currentTheme = _useThemeUtils.currentTheme;
1120
- var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
1121
- var submitBtnRef = useRef(null);
1122
- var _useCreateTheme = useCreateTheme(),
1123
- createTheme = _useCreateTheme.mutate,
1124
- isCreating = _useCreateTheme.isPending;
1125
- var _useUpdateTheme = useUpdateTheme(themeId),
1126
- updateTheme = _useUpdateTheme.mutate,
1127
- isUpdating = _useUpdateTheme.isPending;
1128
- var isSubmitting = isCreating || isUpdating;
1129
- var onSubmit = function onSubmit(values, _ref2) {
1130
- var resetForm = _ref2.resetForm;
1131
- var imageData = buildImageData(values, themePropertiesSchema);
1132
- var themeToSave = _objectSpread$1({
1133
- propertiesAttributes: values.properties,
1134
- name: values.name
1135
- }, imageData);
1136
- if (!themeId) {
1137
- return createTheme(themeToSave, {
1138
- onSuccess: function onSuccess(_ref3) {
1139
- var theme = _ref3.theme;
1140
- resetForm({
1141
- values: theme
1142
- });
1143
- onCreateTheme(theme);
1144
- }
1145
- });
1146
- }
1147
- return updateTheme(themeToSave, {
1148
- onSuccess: function onSuccess() {
1149
- resetForm({
1150
- values: values
1151
- });
1152
- onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(values);
1153
- }
1154
- });
1155
- };
1156
- return /*#__PURE__*/jsx(Form, {
1157
- formikProps: {
1158
- initialValues: buildInitialValues(theme, themePropertiesSchema),
1159
- validationSchema: THEME_VALIDATION_SCHEMA,
1160
- onSubmit: onSubmit
1161
- },
1162
- children: function children(_ref4) {
1163
- var dirty = _ref4.dirty;
1164
- return /*#__PURE__*/jsxs("div", {
1165
- className: "neeto-themes-sidebar__scroll",
1166
- children: [/*#__PURE__*/jsxs("div", {
1167
- className: "flex flex-col gap-6 p-4",
1168
- children: [/*#__PURE__*/jsx(ThemeMeta, {}), /*#__PURE__*/jsx(Properties, {
1169
- onPropertiesChange: onPropertiesChange
1170
- }), filterBy({
1171
- kind: "image"
1172
- }, themePropertiesSchema).map(function (_ref5) {
1173
- var key = _ref5.key;
1174
- return /*#__PURE__*/jsx(Images, {
1175
- attribute: key
1176
- }, key);
1177
- })]
1178
- }), /*#__PURE__*/jsxs("div", {
1179
- className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 flex justify-end gap-x-2 px-4 py-6",
1180
- children: [/*#__PURE__*/jsx(Button, {
1181
- "data-cy": "reset-button",
1182
- disabled: !dirty || isSubmitting,
1183
- label: t("neetoThemes.buttons.reset"),
1184
- style: "text",
1185
- type: "reset"
1186
- }), /*#__PURE__*/jsx(Button, {
1187
- "data-cy": "save-changes-button",
1188
- disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
1189
- label: t("neetoThemes.buttons.save"),
1190
- loading: isSubmitting,
1191
- ref: submitBtnRef,
1192
- type: "submit"
1193
- })]
1194
- }), /*#__PURE__*/jsx(Popover, {
1195
- appendTo: function appendTo() {
1196
- return document.body;
1197
- },
1198
- disabled: isEditingCurrentlyAppliedTheme,
1199
- position: "top",
1200
- reference: submitBtnRef,
1201
- trigger: "click",
1202
- content: /*#__PURE__*/jsxs("div", {
1203
- className: "flex flex-col items-start gap-2",
1204
- children: [/*#__PURE__*/jsx(Button, {
1205
- className: "absolute right-1 top-1 z-0",
1206
- icon: Close,
1207
- size: "small",
1208
- style: "text",
1209
- onClick: function onClick() {
1210
- var _popoverInstance$hide;
1211
- return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
1212
- }
1213
- }), /*#__PURE__*/jsx(Typography, {
1214
- className: "w-72 pr-5",
1215
- style: "body2",
1216
- weight: "normal",
1217
- children: /*#__PURE__*/jsx(Trans, {
1218
- components: {
1219
- bold: /*#__PURE__*/jsx("strong", {})
1220
- },
1221
- i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
1222
- values: {
1223
- entityType: entityType
1224
- }
1225
- })
1226
- }), /*#__PURE__*/jsx(Button, {
1227
- disabled: isApplyingTheme,
1228
- label: t("neetoThemes.buttons.applyThisTheme"),
1229
- loading: isApplyingTheme,
1230
- onClick: function onClick() {
1231
- return onApplyTheme(theme);
1232
- }
1233
- })]
1234
- }),
1235
- onMount: setPopoverInstance
1236
- })]
1237
- });
1238
- }
1239
- });
1240
- };
1241
-
1242
- 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; }
1243
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).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; }
1244
- var Check = function Check(props) {
1245
- return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
1246
- fill: "none",
1247
- height: "24",
1248
- viewBox: "0 0 24 24",
1249
- width: "24",
1250
- xmlns: "http://www.w3.org/2000/svg"
1251
- }, props), {}, {
1252
- children: [/*#__PURE__*/jsxs("g", {
1253
- filter: "url(#filter0_d_9519_161)",
1254
- children: [/*#__PURE__*/jsx("rect", {
1255
- fill: "#008068",
1256
- height: "20",
1257
- rx: "10",
1258
- width: "20",
1259
- x: "2",
1260
- y: "2"
1261
- }), /*#__PURE__*/jsx("rect", {
1262
- height: "20",
1263
- rx: "10",
1264
- stroke: "#fff",
1265
- strokeWidth: "1.5",
1266
- width: "20",
1267
- x: "2",
1268
- y: "2"
1269
- }), /*#__PURE__*/jsx("path", {
1270
- d: "M16.375 9.5l-5.95 6.25-2.8-2.941",
1271
- stroke: "#fff",
1272
- strokeLinecap: "round",
1273
- strokeLinejoin: "round",
1274
- strokeWidth: "1.25"
1275
- })]
1276
- }), /*#__PURE__*/jsx("defs", {
1277
- children: /*#__PURE__*/jsxs("filter", {
1278
- colorInterpolationFilters: "sRGB",
1279
- filterUnits: "userSpaceOnUse",
1280
- height: "23.5",
1281
- id: "filter0_d_9519_161",
1282
- width: "23.5",
1283
- x: "0.25",
1284
- y: "0.25",
1285
- children: [/*#__PURE__*/jsx("feFlood", {
1286
- floodOpacity: "0",
1287
- result: "BackgroundImageFix"
1288
- }), /*#__PURE__*/jsx("feColorMatrix", {
1289
- "in": "SourceAlpha",
1290
- result: "hardAlpha",
1291
- values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
1292
- }), /*#__PURE__*/jsx("feOffset", {}), /*#__PURE__*/jsx("feGaussianBlur", {
1293
- stdDeviation: "0.5"
1294
- }), /*#__PURE__*/jsx("feComposite", {
1295
- in2: "hardAlpha",
1296
- operator: "out"
1297
- }), /*#__PURE__*/jsx("feColorMatrix", {
1298
- values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"
1299
- }), /*#__PURE__*/jsx("feBlend", {
1300
- in2: "BackgroundImageFix",
1301
- result: "effect1_dropShadow_9519_161"
1302
- }), /*#__PURE__*/jsx("feBlend", {
1303
- "in": "SourceGraphic",
1304
- in2: "effect1_dropShadow_9519_161",
1305
- result: "shape"
1306
- })]
1307
- })
1308
- })]
1309
- }));
1310
- };
1311
-
1312
- var Thumbnail = function Thumbnail(_ref) {
1313
- var _theme$snakeToCamelCa, _findBy, _findBy2;
1314
- var active = _ref.active,
1315
- isPreviewing = _ref.isPreviewing,
1316
- isHighLightedTheme = _ref.isHighLightedTheme,
1317
- theme = _ref.theme;
1318
- var _useConfigStore = useConfigStore(function (store) {
1319
- return {
1320
- themePropertiesSchema: store["themePropertiesSchema"]
1321
- };
1322
- }, shallow),
1323
- _useConfigStore$theme = _useConfigStore.themePropertiesSchema,
1324
- themePropertiesSchema = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
1325
- var _themePropertiesSchem = _slicedToArray(themePropertiesSchema, 2),
1326
- colorObject1 = _themePropertiesSchem[0],
1327
- colorObject2 = _themePropertiesSchem[1];
1328
- var primaryLabel = humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
1329
- var secondaryLabel = humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
1330
- var primaryColor = findBy({
1331
- key: colorObject1.key
1332
- }, theme.properties).value;
1333
- var secondaryColor = findBy({
1334
- key: colorObject2.key
1335
- }, theme.properties).value;
1336
- var backgroundImageUrl = (_theme$snakeToCamelCa = theme[snakeToCamelCase(findBy({
1337
- useAsCardBackground: true
1338
- }, themePropertiesSchema).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
1339
- var buttonBackgroundColor = (_findBy = findBy({
1340
- key: (_findBy2 = findBy({
1341
- useAsCardButtonBackground: true
1342
- }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
1343
- }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
1344
- return /*#__PURE__*/jsx("div", {
1345
- className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
1346
- "neeto-ui-border-gray-400": !active,
1347
- "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
1348
- "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1349
- "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1350
- }),
1351
- style: {
1352
- backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
1353
- backgroundSize: "cover"
1354
- },
1355
- children: /*#__PURE__*/jsx("div", {
1356
- className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85",
1357
- children: /*#__PURE__*/jsxs("div", {
1358
- className: "neeto-ui-rounded-lg p-3",
1359
- children: [/*#__PURE__*/jsxs("div", {
1360
- className: "mb-3",
1361
- children: [/*#__PURE__*/jsx(Typography, {
1362
- style: "h3",
1363
- weight: "semibold",
1364
- children: /*#__PURE__*/jsx("span", {
1365
- style: {
1366
- color: primaryColor
1367
- },
1368
- children: primaryLabel
1369
- })
1370
- }), /*#__PURE__*/jsx(Typography, {
1371
- className: "neeto-ui-text-gray-600",
1372
- style: "body2",
1373
- children: /*#__PURE__*/jsx("span", {
1374
- style: {
1375
- color: secondaryColor
1376
- },
1377
- children: secondaryLabel
1378
- })
1379
- })]
1380
- }), /*#__PURE__*/jsx("div", {
1381
- className: "neeto-ui-rounded-lg h-5 w-12",
1382
- style: {
1383
- backgroundColor: buttonBackgroundColor
1384
- }
1385
- })]
1386
- })
1387
- })
1388
- });
1389
- };
1390
-
1391
- var Card = function Card(_ref) {
1392
- var _ref$active = _ref.active,
1393
- active = _ref$active === void 0 ? false : _ref$active,
1394
- isPreviewing = _ref.isPreviewing,
1395
- onSetPreviewTheme = _ref.onSetPreviewTheme,
1396
- onDeleteTheme = _ref.onDeleteTheme,
1397
- onEditTheme = _ref.onEditTheme,
1398
- theme = _ref.theme,
1399
- isApplyingTheme = _ref.isApplyingTheme,
1400
- onCloneTheme = _ref.onCloneTheme,
1401
- isHighLightedTheme = _ref.isHighLightedTheme,
1402
- onApplyTheme = _ref.onApplyTheme,
1403
- Thumbnail$1 = _ref.thumbnail;
1404
- var _useTranslation = useTranslation(),
1405
- t = _useTranslation.t;
1406
- var id = theme.id,
1407
- name = theme.name,
1408
- appliedCount = theme.appliedCount;
1409
- var handleCloneTheme = function handleCloneTheme() {
1410
- return onCloneTheme(theme);
1411
- };
1412
- var handleEditTheme = function handleEditTheme() {
1413
- return onEditTheme(theme);
1414
- };
1415
- var handleDeleteTheme = function handleDeleteTheme() {
1416
- return onDeleteTheme(id, name, appliedCount);
1417
- };
1418
- return /*#__PURE__*/jsx("div", {
1419
- className: "group space-y-2 pt-0.5",
1420
- "data-cy": active ? "active-theme-card" : "theme-card",
1421
- id: theme.id,
1422
- children: /*#__PURE__*/jsxs("div", {
1423
- className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
1424
- "neeto-ui-border-gray-200": !active,
1425
- "neeto-themes-theme-thumbnail--active": active,
1426
- "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1427
- "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1428
- }),
1429
- onClick: function onClick() {
1430
- return onSetPreviewTheme(theme);
1431
- },
1432
- children: [/*#__PURE__*/jsxs("div", {
1433
- className: "neeto-ui-rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out group-hover:opacity-85",
1434
- children: [/*#__PURE__*/jsx("div", {
1435
- className: "absolute right-0 top-0 p-3",
1436
- children: active ? /*#__PURE__*/jsx(Check, {
1437
- className: "flex-shrink-0",
1438
- "data-cy": "active-theme-label"
1439
- }) : /*#__PURE__*/jsx("div", {
1440
- className: classnames({
1441
- hidden: !isPreviewing,
1442
- "group-hover:block": true
1443
- }),
1444
- children: /*#__PURE__*/jsx(Button, {
1445
- className: "neeto-themes-theme-thumbnail__apply-btn flex-shrink-0",
1446
- "data-cy": "apply-theme-button",
1447
- disabled: isApplyingTheme,
1448
- label: t("neetoThemes.common.apply"),
1449
- loading: isApplyingTheme,
1450
- size: "small",
1451
- style: "tertiary",
1452
- onClick: function onClick() {
1453
- return onApplyTheme(theme);
1454
- }
1455
- })
1456
- })
1457
- }), Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
1458
- active: active,
1459
- isHighLightedTheme: isHighLightedTheme,
1460
- isPreviewing: isPreviewing,
1461
- theme: theme
1462
- }) : /*#__PURE__*/jsx(Thumbnail, {
1463
- active: active,
1464
- isHighLightedTheme: isHighLightedTheme,
1465
- isPreviewing: isPreviewing,
1466
- theme: theme
1467
- })]
1468
- }), /*#__PURE__*/jsxs("div", {
1469
- className: "flex items-start justify-between gap-1 p-3",
1470
- children: [/*#__PURE__*/jsx(Typography, {
1471
- className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
1472
- "data-cy": "theme-name",
1473
- lineHeight: "snug",
1474
- style: "body2",
1475
- children: name
1476
- }), /*#__PURE__*/jsx(MoreDropdown, {
1477
- dropdownButtonProps: {
1478
- size: "small"
1479
- },
1480
- dropdownProps: {
1481
- strategy: "fixed",
1482
- onClick: function onClick(e) {
1483
- return e.stopPropagation();
1484
- }
1485
- },
1486
- menuItems: [{
1487
- key: "edit",
1488
- "data-cy": "edit-theme-menu-item",
1489
- label: t("neetoThemes.common.edit"),
1490
- isVisible: isPresent(onEditTheme),
1491
- onClick: handleEditTheme
1492
- }, {
1493
- key: "clone",
1494
- "data-cy": "clone-theme-menu-item",
1495
- label: t("neetoThemes.build.leftSideBar.themes.themeOptions.clone"),
1496
- onClick: handleCloneTheme
1497
- }, {
1498
- key: "divider",
1499
- type: "divider",
1500
- isVisible: isFunction(onDeleteTheme)
1501
- }, {
1502
- key: "delete",
1503
- "data-cy": "delete-theme-menu-item",
1504
- label: t("neetoThemes.build.leftSideBar.themes.themeOptions.delete"),
1505
- isVisible: isFunction(onDeleteTheme),
1506
- onClick: function onClick(e) {
1507
- e.stopPropagation();
1508
- handleDeleteTheme();
1509
- }
1510
- }]
1511
- })]
1512
- })]
1513
- })
1514
- });
1515
- };
1516
- var Card$1 = /*#__PURE__*/memo(Card);
1517
-
1518
- var Themes = function Themes(_ref) {
1519
- var onEditTheme = _ref.onEditTheme,
1520
- _ref$themes = _ref.themes,
1521
- themes = _ref$themes === void 0 ? [] : _ref$themes,
1522
- _ref$defaultThemes = _ref.defaultThemes,
1523
- defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1524
- onDeleteTheme = _ref.onDeleteTheme,
1525
- themeToHighlight = _ref.themeToHighlight,
1526
- didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1527
- isLoading = _ref.isLoading,
1528
- currentTheme = _ref.currentTheme,
1529
- isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1530
- thumbnail = _ref.thumbnail,
1531
- themeBeingApplied = _ref.themeBeingApplied,
1532
- onApplyTheme = _ref.onApplyTheme,
1533
- isApplyingTheme = _ref.isApplyingTheme;
1534
- var _useTranslation = useTranslation(),
1535
- t = _useTranslation.t;
1536
- var _useThemeUtils = useThemeUtils(),
1537
- setTheme = _useThemeUtils.setTheme;
1538
- var _useThemeStore = useThemeStore(function (store) {
1539
- return {
1540
- setThemeState: store["setThemeState"],
1541
- previewingTheme: store["previewingTheme"]
1542
- };
1543
- }, shallow),
1544
- setThemeState = _useThemeStore.setThemeState,
1545
- previewingTheme = _useThemeStore.previewingTheme;
1546
- var _useState = useState(""),
1547
- _useState2 = _slicedToArray(_useState, 2),
1548
- searchQuery = _useState2[0],
1549
- setSearchQuery = _useState2[1];
1550
- var _useCloneTheme = useCloneTheme(),
1551
- cloneTheme = _useCloneTheme.mutate;
1552
- useEffect(function () {
1553
- if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1554
- didScrollActiveThemeIntoView.current = true;
1555
- setTimeout(function () {
1556
- scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
1557
- }, 100);
1558
- }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
1559
- var setPreviewTheme = function setPreviewTheme(theme) {
1560
- setThemeState({
1561
- previewingTheme: theme
1562
- });
1563
- setTheme(theme);
1564
- };
1565
- var filteredDefaultThemes = defaultThemes.filter(function (theme) {
1566
- return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
1567
- });
1568
- var filteredThemes = themes.filter(function (theme) {
1569
- return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
1570
- });
1571
- var isSearchFieldVisible = (themes === null || themes === void 0 ? void 0 : themes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
1572
- var handleCloneTheme = function handleCloneTheme(data) {
1573
- cloneTheme(data.id, {
1574
- onSuccess: function onSuccess(_ref2) {
1575
- var clonedTheme = _ref2.theme;
1576
- onEditTheme(clonedTheme);
1577
- }
1578
- });
1579
- };
1580
- if (isLoading || isCurrentThemeLoading) {
1581
- return /*#__PURE__*/jsx("div", {
1582
- className: "flex h-full w-full items-center justify-center",
1583
- children: /*#__PURE__*/jsx(Spinner, {})
1584
- });
1585
- }
1586
- return /*#__PURE__*/jsxs("div", {
1587
- className: "neeto-themes-sidebar__scroll",
1588
- children: [/*#__PURE__*/jsxs("div", {
1589
- className: "mb-6 space-y-3",
1590
- children: [isSearchFieldVisible && /*#__PURE__*/jsx(Search, {
1591
- autoFocus: true,
1592
- autoComplete: "off",
1593
- className: "mb-4 mt-1 px-6",
1594
- placeholder: t("neetoThemes.common.searchThemes"),
1595
- onSearch: setSearchQuery
1596
- }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
1597
- className: "text-center",
1598
- style: "body2",
1599
- children: t("neetoThemes.common.noResultsFound")
1600
- }), isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxs(Fragment, {
1601
- children: [/*#__PURE__*/jsx(Typography, {
1602
- className: "my-4 px-4 uppercase lg:px-5 xl:px-6",
1603
- "data-cy": "system-themes-header",
1604
- style: "h6",
1605
- weight: "semibold",
1606
- children: t("neetoThemes.build.leftSideBar.themes.systemThemes")
1607
- }), /*#__PURE__*/jsx("div", {
1608
- className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
1609
- "data-cy": "system-themes",
1610
- children: filteredDefaultThemes.map(function (theme) {
1611
- return /*#__PURE__*/createElement(Card$1, {
1612
- onApplyTheme: onApplyTheme,
1613
- theme: theme,
1614
- thumbnail: thumbnail,
1615
- active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
1616
- isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
1617
- key: theme.id,
1618
- isApplyingTheme: isApplyingTheme && (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
1619
- onCloneTheme: handleCloneTheme,
1620
- onSetPreviewTheme: setPreviewTheme
1621
- });
1622
- })
1623
- })]
1624
- })]
1625
- }), isNotEmpty(filteredThemes) && /*#__PURE__*/jsxs("div", {
1626
- className: "mb-6 space-y-3",
1627
- children: [/*#__PURE__*/jsx(Typography, {
1628
- className: "my-4 px-6 uppercase",
1629
- "data-cy": "custom-themes-header",
1630
- style: "h6",
1631
- weight: "semibold",
1632
- children: t("neetoThemes.build.leftSideBar.themes.customThemes")
1633
- }), /*#__PURE__*/jsx("div", {
1634
- className: "flex flex-col gap-4 px-6",
1635
- "data-cy": "custom-themes",
1636
- children: filteredThemes.map(function (theme) {
1637
- var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
1638
- var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
1639
- return /*#__PURE__*/createElement(Card$1, {
1640
- isPreviewing: isPreviewing,
1641
- onApplyTheme: onApplyTheme,
1642
- onEditTheme: onEditTheme,
1643
- theme: theme,
1644
- thumbnail: thumbnail,
1645
- active: isActive,
1646
- isHighLightedTheme: theme.id === themeToHighlight,
1647
- key: theme.id,
1648
- isApplyingTheme: isApplyingTheme && (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
1649
- onCloneTheme: handleCloneTheme,
1650
- onDeleteTheme: !isActive && onDeleteTheme,
1651
- onSetPreviewTheme: setPreviewTheme
1652
- });
1653
- })
1654
- })]
1655
- })]
1656
- });
1657
- };
1658
-
1659
- var TitleBar = function TitleBar(_ref) {
1660
- var currentScreen = _ref.currentScreen,
1661
- handleBackPress = _ref.handleBackPress,
1662
- handleCreateNewTheme = _ref.handleCreateNewTheme,
1663
- isNewTheme = _ref.isNewTheme,
1664
- themeToEdit = _ref.themeToEdit;
1665
- var _useTranslation = useTranslation(),
1666
- t = _useTranslation.t;
1667
- if (currentScreen === DESIGN_SCREENS.Customize) {
1668
- return /*#__PURE__*/jsx("div", {
1669
- className: "neeto-themes-sidebar__header px-4",
1670
- children: /*#__PURE__*/jsxs("div", {
1671
- className: "flex items-center justify-start space-x-2",
1672
- children: [/*#__PURE__*/jsx(Button, {
1673
- "data-cy": "customize-themes-back-button",
1674
- icon: LeftArrow,
1675
- iconPosition: "left",
1676
- style: "text",
1677
- tooltipProps: {
1678
- content: t("neetoThemes.buttons.backToThemes"),
1679
- position: "top"
1680
- },
1681
- onClick: function onClick() {
1682
- return handleBackPress(themeToEdit);
1683
- }
1684
- }), /*#__PURE__*/jsx(Typography, {
1685
- "data-cy": "themes-header",
1686
- lineHeight: "normal",
1687
- style: "h3",
1688
- weight: "semibold",
1689
- children: isNewTheme ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")
1690
- })]
1691
- })
1692
- });
1693
- }
1694
- return /*#__PURE__*/jsx("div", {
1695
- className: "neeto-themes-sidebar__header px-4 lg:px-5 xl:px-6",
1696
- children: /*#__PURE__*/jsxs("div", {
1697
- className: "flex items-center justify-between space-x-2",
1698
- children: [/*#__PURE__*/jsx(Typography, {
1699
- "data-cy": "themes-header",
1700
- lineHeight: "normal",
1701
- style: "h3",
1702
- weight: "semibold",
1703
- children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
1704
- }), /*#__PURE__*/jsx("div", {
1705
- className: "self-end",
1706
- children: /*#__PURE__*/jsx(Button, {
1707
- "data-cy": "customize-themes-add-theme-button",
1708
- icon: Plus,
1709
- iconPosition: "left",
1710
- style: "text",
1711
- tooltipProps: {
1712
- content: t("neetoThemes.buttons.addNewTheme"),
1713
- position: "top"
1714
- },
1715
- onClick: handleCreateNewTheme
1716
- })
1717
- })]
1718
- })
1719
- });
1720
- };
1721
-
1722
- var MemoizedAlert = /*#__PURE__*/memo(Alert);
1723
- var Sidebar = function Sidebar(_ref) {
1724
- var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
1725
- var thumbnail = _ref.thumbnail,
1726
- onPropertiesChange = _ref.onPropertiesChange,
1727
- onApplyThemeSuccess = _ref.onApplyThemeSuccess,
1728
- onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
1729
- var _useState = useState(DESIGN_SCREENS.THEMES),
1730
- _useState2 = _slicedToArray(_useState, 2),
1731
- currentScreen = _useState2[0],
1732
- setCurrentScreen = _useState2[1];
1733
- var _useState3 = useState(false),
1734
- _useState4 = _slicedToArray(_useState3, 2),
1735
- isDeleteAlertOpen = _useState4[0],
1736
- setIsDeleteAlertOpen = _useState4[1];
1737
- var _useState5 = useState(null),
1738
- _useState6 = _slicedToArray(_useState5, 2),
1739
- themeToHighlight = _useState6[0],
1740
- setThemeToHighlight = _useState6[1];
1741
- var _useState7 = useState({}),
1742
- _useState8 = _slicedToArray(_useState7, 2),
1743
- themeBeingApplied = _useState8[0],
1744
- setThemeBeingApplied = _useState8[1];
1745
- var _useConfigStore = useConfigStore(function (store) {
1746
- return {
1747
- entityType: store["entityType"],
1748
- entityId: store["entityId"],
1749
- isFetchingSchema: store["isFetchingSchema"],
1750
- defaultThemeName: store["defaultThemeName"]
1751
- };
1752
- }, shallow),
1753
- entityType = _useConfigStore.entityType,
1754
- entityId = _useConfigStore.entityId,
1755
- isFetchingSchema = _useConfigStore.isFetchingSchema,
1756
- defaultThemeName = _useConfigStore.defaultThemeName;
1757
- var _useThemeStore = useThemeStore(function (store) {
1758
- return {
1759
- setThemeState: store["setThemeState"]
1760
- };
1761
- }, shallow),
1762
- setThemeState = _useThemeStore.setThemeState;
1763
- var didScrollActiveThemeIntoView = useRef(null);
1764
- var _useTranslation = useTranslation(),
1765
- t = _useTranslation.t;
1766
- var _useThemeUtils = useThemeUtils(),
1767
- setTheme = _useThemeUtils.setTheme;
1768
- var _useListThemes = useListThemes(entityId),
1769
- _useListThemes$data = _useListThemes.data,
1770
- _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
1771
- _useListThemes$data2$ = _useListThemes$data2.themes,
1772
- themes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
1773
- _useListThemes$data2$2 = _useListThemes$data2.defaultThemes,
1774
- defaultThemes = _useListThemes$data2$2 === void 0 ? [] : _useListThemes$data2$2,
1775
- isLoading = _useListThemes.isLoading;
1776
- var _useShowThemeEntity = useShowThemeEntity(entityId),
1777
- _useShowThemeEntity$d = _useShowThemeEntity.data,
1778
- _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
1779
- _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
1780
- currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
1781
- isCurrentThemeLoading = _useShowThemeEntity.isLoading;
1782
- var _useDeleteTheme = useDeleteTheme(),
1783
- deleteTheme = _useDeleteTheme.mutate,
1784
- isDeleting = _useDeleteTheme.isPending;
1785
- var _useApplyTheme = useApplyTheme({
1786
- onSuccess: function onSuccess(_ref2) {
1787
- var theme = _ref2.theme;
1788
- setTheme(theme);
1789
- highlightTheme(theme);
1790
- setThemeState({
1791
- previewingTheme: theme
1792
- });
1793
- setThemeBeingApplied({});
1794
- setCurrentScreen(DESIGN_SCREENS.THEMES);
1795
- onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
1796
- }
1797
- }),
1798
- applyTheme = _useApplyTheme.mutate,
1799
- isApplyingTheme = _useApplyTheme.isPending;
1800
- var themeToDelete = useRef(null);
1801
- var themeToEdit = useRef(null);
1802
- var handleEditTheme = function handleEditTheme(theme) {
1803
- themeToEdit.current = theme;
1804
- setCurrentScreen(DESIGN_SCREENS.Customize);
1805
- };
1806
- var onApplyTheme = function onApplyTheme(theme) {
1807
- if (isApplyingTheme) return;
1808
- setThemeBeingApplied(theme);
1809
- applyTheme({
1810
- themeId: theme.id,
1811
- entityId: entityId,
1812
- entityType: entityType
1813
- });
1814
- };
1815
- var handleBackPress = function handleBackPress(theme) {
1816
- setTheme(currentTheme);
1817
- highlightTheme(isPresent(theme) ? theme : currentTheme);
1818
- setThemeState({
1819
- previewingTheme: currentTheme
1820
- });
1821
- setCurrentScreen(DESIGN_SCREENS.THEMES);
1822
- themeToEdit.current = null;
1823
- };
1824
- var highlightTheme = function highlightTheme(themeToHighlight) {
1825
- setTimeout(function () {
1826
- scrollElementIntoView(themeToHighlight.id);
1827
- }, 1500);
1828
- setTimeout(function () {
1829
- setThemeToHighlight(null);
1830
- }, 4000);
1831
- setThemeToHighlight(themeToHighlight.id);
1832
- };
1833
- var onCreateTheme = function onCreateTheme(createdTheme) {
1834
- themeToEdit.current = createdTheme;
1835
- setTheme(createdTheme);
1836
- setThemeState({
1837
- previewingTheme: createdTheme
1838
- });
1839
- };
1840
- var handleDelete = function handleDelete(themeId, name, appliedCount) {
1841
- setIsDeleteAlertOpen(true);
1842
- themeToDelete.current = {
1843
- id: themeId,
1844
- name: name,
1845
- appliedCount: appliedCount
1846
- };
1847
- };
1848
- var handleCloseDeleteAlert = useCallback(function () {
1849
- setIsDeleteAlertOpen(false);
1850
- themeToDelete.current = null;
1851
- }, [themeToDelete]);
1852
- var handleDeleteTheme = useCallback(function () {
1853
- var _themeToDelete$curren;
1854
- deleteTheme((_themeToDelete$curren = themeToDelete.current) === null || _themeToDelete$curren === void 0 ? void 0 : _themeToDelete$curren.id, {
1855
- onSuccess: function onSuccess() {
1856
- setIsDeleteAlertOpen(false);
1857
- themeToDelete.current = null;
1858
- }
1859
- });
1860
- }, [deleteTheme, themeToDelete]);
1861
- return /*#__PURE__*/jsxs("div", {
1862
- className: "neeto-themes-sidebar neeto-ui-border-gray-200 flex-shrink-0 border-r",
1863
- children: [/*#__PURE__*/jsx(TitleBar, {
1864
- currentScreen: currentScreen,
1865
- handleBackPress: handleBackPress,
1866
- handleCreateNewTheme: function handleCreateNewTheme() {
1867
- return handleEditTheme({});
1868
- },
1869
- isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
1870
- themeToEdit: themeToEdit.current
1871
- }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsx(Themes, {
1872
- currentTheme: currentTheme,
1873
- defaultThemes: defaultThemes,
1874
- didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
1875
- highlightTheme: highlightTheme,
1876
- isApplyingTheme: isApplyingTheme,
1877
- isCurrentThemeLoading: isCurrentThemeLoading,
1878
- onApplyTheme: onApplyTheme,
1879
- themeBeingApplied: themeBeingApplied,
1880
- themeToHighlight: themeToHighlight,
1881
- themes: themes,
1882
- thumbnail: thumbnail,
1883
- isLoading: isLoading || isFetchingSchema,
1884
- onDeleteTheme: handleDelete,
1885
- onEditTheme: handleEditTheme
1886
- }) : /*#__PURE__*/jsx(Customize, {
1887
- isApplyingTheme: isApplyingTheme,
1888
- onApplyTheme: onApplyTheme,
1889
- onCreateTheme: onCreateTheme,
1890
- onPropertiesChange: onPropertiesChange,
1891
- onUpdateThemeSuccess: onUpdateThemeSuccess,
1892
- theme: themeToEdit.current,
1893
- themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id
1894
- }), /*#__PURE__*/jsx(MemoizedAlert, {
1895
- isOpen: isDeleteAlertOpen,
1896
- isSubmitting: isDeleting,
1897
- title: t("neetoThemes.alerts.title.deleteTheme"),
1898
- message: t("neetoThemes.alerts.message.deleteTheme", {
1899
- name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
1900
- count: (_themeToDelete$curren3 = themeToDelete.current) === null || _themeToDelete$curren3 === void 0 ? void 0 : _themeToDelete$curren3.appliedCount,
1901
- defaultThemeName: defaultThemeName,
1902
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
1903
- count: (_themeToDelete$curren4 = themeToDelete.current) === null || _themeToDelete$curren4 === void 0 ? void 0 : _themeToDelete$curren4.appliedCount
1904
- })
1905
- }),
1906
- onClose: handleCloseDeleteAlert,
1907
- onSubmit: handleDeleteTheme
1908
- })]
1909
- });
1910
- };
1911
-
1912
- var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
1913
- var children = _ref.children,
1914
- entityType = _ref.entityType,
1915
- entityId = _ref.entityId,
1916
- thumbnail = _ref.thumbnail,
1917
- onPropertiesChange = _ref.onPropertiesChange,
1918
- _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
1919
- isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
1920
- _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
1921
- onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? noop : _ref$onApplyThemeSucc,
1922
- _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
1923
- onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc;
1924
- var _useThemeStore = useThemeStore(function (store) {
1925
- return {
1926
- setThemeState: store["setThemeState"]
1927
- };
1928
- }, shallow),
1929
- setThemeState = _useThemeStore.setThemeState;
1930
- var _useThemeUtils = useThemeUtils(),
1931
- setTheme = _useThemeUtils.setTheme;
1932
- var _useConfigStore = useConfigStore(function (store) {
1933
- return {
1934
- setConfigState: store["setConfigState"]
1935
- };
1936
- }, shallow),
1937
- setConfigState = _useConfigStore.setConfigState;
1938
- var _useShowThemeEntity = useShowThemeEntity(entityId),
1939
- _useShowThemeEntity$d = _useShowThemeEntity.data,
1940
- _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
1941
- _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
1942
- currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
1943
- isLoading = _useShowThemeEntity.isLoading,
1944
- isFetchingCurrentTheme = _useShowThemeEntity.isFetching;
1945
- var isCurrentThemeLoading = isLoading || isFetchingCurrentTheme;
1946
- useEffect(function () {
1947
- setConfigState({
1948
- entityType: entityType,
1949
- entityId: entityId,
1950
- isTemplateThemesEnabled: isTemplateThemesEnabled
1951
- });
1952
- }, []);
1953
- useEffect(function () {
1954
- if (isNotPresent(currentTheme)) return;
1955
- setThemeState({
1956
- previewingTheme: currentTheme
1957
- });
1958
- setTheme(currentTheme);
1959
- }, [isLoading, entityId]);
1960
- useEffect(function () {
1961
- if (isNotPresent(currentTheme)) return;
1962
- setThemeState({
1963
- currentTheme: currentTheme,
1964
- isCurrentThemeLoading: isCurrentThemeLoading
1965
- });
1966
- }, [currentTheme, isCurrentThemeLoading]);
1967
- return /*#__PURE__*/jsxs("div", {
1968
- className: "neeto-themes__wrapper",
1969
- children: [/*#__PURE__*/jsx(Sidebar, {
1970
- onApplyThemeSuccess: onApplyThemeSuccess,
1971
- onPropertiesChange: onPropertiesChange,
1972
- onUpdateThemeSuccess: onUpdateThemeSuccess,
1973
- thumbnail: thumbnail
1974
- }), /*#__PURE__*/jsx("div", {
1975
- className: "neeto-themes-preview__wrapper",
1976
- children: isCurrentThemeLoading ? /*#__PURE__*/jsx("div", {
1977
- className: "m-auto flex h-full w-full items-center justify-center",
1978
- children: /*#__PURE__*/jsx(Spinner, {})
1979
- }) : children
1980
- })]
1981
- });
1982
- };
1983
- var index = withTitle(NeetoThemesBuilder, t$1("neetoThemes.common.design"));
1984
-
1985
- var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===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}}
1986
-
1987
- var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));height:calc(100vh - 64px);width:240px}@media (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px}}@media (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px}}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{height:calc(100vh - 120px);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 .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 64px);position:relative}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;outline:1px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!important}.neeto-themes-theme-thumbnail__apply-btn{--neeto-ui-btn-padding-x:12px;--neeto-ui-btn-border-radius:100px}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3RoZW1lcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1QkFFRSxZQUFBLENBREEsVUNFRixDRENFLDZDQUdFLDJDQUFBLENBREEseUJBQUEsQ0FEQSxXQ0dKLENEQ0ksMEJBTEYsNkNBTUksV0NFSixDQUNGLENEREksMEJBUkYsNkNBU0ksV0NJSixDQUNGLENERkksMkVBRUUsa0JBQUEsQ0FEQSxnQkNLTixDRERJLDJFQUNFLDBCQUFBLENBQ0EsZUNHTixDREFRLDRJQUNFLFlDRVYsQ0RJRSxzREFHRSxXQUFBLENBREEseUJBQUEsQ0FEQSxpQkNBSixDRE1BLDhDQUNFLG9EQUFBLENBQ0EseURDSEYsQ0RNQSxzQ0FDRSx1REFBQSxDQUNBLDREQ0hGLENETUEsZ0RBQ0Usb0RBQUEsQ0FDQSx5RENIRixDRE1BLHlDQUNFLDZCQUFBLENBQ0Esa0NDSEYsQ0RJRSxxR0FFRSxtQkNISiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcblxuICAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtc207XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG5cbiAgICBAc2NyZWVuIGxnIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtbGc7XG4gICAgfVxuICAgIEBzY3JlZW4geGwge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcblxuICAgICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQge1xuICAgICAgICAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG4ge1xuICAtLW5lZXRvLXVpLWJ0bi1wYWRkaW5nLXg6IDEycHg7XG4gIC0tbmVldG8tdWktYnRuLWJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAmOmRpc2FibGVkLFxuICAmW2Rpc2FibGVkXSB7XG4gICAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG8tdGhlbWVzX193cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIHdpZHRoOiAyNDBweDtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNjRweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuQHNjcmVlbiBsZyB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogMjgwcHg7XG4gIH1cbn1cbkBzY3JlZW4geGwge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gICAgd2lkdGg6IDMyMHB4O1xuICB9XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gIHBhZGRpbmctdG9wOiAxNnB4O1xuICBwYWRkaW5nLWJvdHRvbTogOHB4O1xufVxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAxMjBweCk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciAubmVldG8tdGhlbWVzLXNpZGViYXJfX3Njcm9sbCAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCAubmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0X19jb2RlIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1wcmV2aWV3X193cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA2NHB4KTtcbiAgZmxleC1ncm93OiAxO1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYXBwbHktYnRuIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAxMnB4O1xuICAtLW5lZXRvLXVpLWJ0bi1ib3JkZXItcmFkaXVzOiAxMDBweDtcbn1cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG46ZGlzYWJsZWQsIC5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG5bZGlzYWJsZWRdIHtcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xufSJdfQ== */";
1988
- n(css,{});
1989
-
1990
- export { index as NeetoThemesBuilder, setTheme, useThemeUtils };
1
+ export { default as NeetoThemesBuilder } from './NeetoThemesBuilder.js';
2
+ export { u as useThemeUtils } from './useThemeUtils-3875c1d1.js';
3
+ export { s as setTheme } from './index-383fae09.js';
4
+ import 'zustand/shallow';
5
+ import 'react';
6
+ import 'i18next';
7
+ import '@bigbinary/neeto-cist';
8
+ import '@bigbinary/neeto-commons-frontend/react-utils';
9
+ import '@bigbinary/neetoui/Spinner';
10
+ import '@tanstack/react-query';
11
+ import 'axios';
12
+ import '@babel/runtime/helpers/slicedToArray';
13
+ import 'classnames';
14
+ import '@bigbinary/neetoui/Alert';
15
+ import 'react-i18next';
16
+ import '@babel/runtime/helpers/objectWithoutProperties';
17
+ import '@babel/runtime/helpers/defineProperty';
18
+ import '@bigbinary/neeto-icons/Close';
19
+ import '@bigbinary/neetoui/Button';
20
+ import '@bigbinary/neetoui/Popover';
21
+ import '@bigbinary/neetoui/Typography';
22
+ import '@bigbinary/neetoui/formik/Form';
23
+ import 'yup';
24
+ import '@monaco-editor/react';
25
+ import 'formik';
26
+ import 'react/jsx-runtime';
27
+ import '@babel/runtime/helpers/asyncToGenerator';
28
+ import '@babel/runtime/regenerator';
29
+ import '@bigbinary/neeto-image-uploader-frontend';
30
+ import '@bigbinary/neeto-commons-frontend/utils';
31
+ import '@bigbinary/neetoui/Toastr';
32
+ import 'ramda';
33
+ import '@bigbinary/neetoui/Select';
34
+ import '@bigbinary/neeto-icons/CenterAlign';
35
+ import '@bigbinary/neeto-icons/LeftAlign';
36
+ import '@bigbinary/neetoui/ColorPicker';
37
+ import 'antd';
38
+ import '@bigbinary/neeto-molecules/HelpPopover';
39
+ import '@bigbinary/neetoui/Switch';
40
+ import '@bigbinary/neetoui/formik/Input';
41
+ import '@bigbinary/neeto-molecules/Search';
42
+ import '@bigbinary/neeto-molecules/MoreDropdown';
43
+ import '@bigbinary/neeto-icons/LeftArrow';
44
+ import '@bigbinary/neeto-icons/Plus';
45
+ import 'zustand';
1991
46
  //# sourceMappingURL=index.js.map