@bigbinary/neeto-themes-frontend 1.3.0-beta2 → 2.0.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/app/javascript/src/translations/en.json +12 -2
- package/dist/index.cjs.js +374 -103
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +361 -99
- package/dist/index.js.map +1 -1
- package/package.json +11 -11
- package/types.d.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -8,32 +8,37 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
8
8
|
import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty } from '@bigbinary/neeto-cist';
|
|
9
9
|
import Alert from '@bigbinary/neetoui/Alert';
|
|
10
10
|
import { useTranslation, Trans } from 'react-i18next';
|
|
11
|
-
import '@babel/runtime/helpers/asyncToGenerator';
|
|
12
|
-
import '@babel/runtime/regenerator';
|
|
13
|
-
import '@bigbinary/neetoui/Toastr';
|
|
11
|
+
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
12
|
+
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
13
|
+
import Toastr from '@bigbinary/neetoui/Toastr';
|
|
14
14
|
import { useQuery } from '@tanstack/react-query';
|
|
15
15
|
import axios from 'axios';
|
|
16
16
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
17
17
|
import { prop, isEmpty, negate } from 'ramda';
|
|
18
18
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
19
|
-
import
|
|
19
|
+
import Close from '@bigbinary/neeto-icons/Close';
|
|
20
20
|
import Button from '@bigbinary/neetoui/Button';
|
|
21
21
|
import Popover from '@bigbinary/neetoui/Popover';
|
|
22
22
|
import Typography from '@bigbinary/neetoui/Typography';
|
|
23
23
|
import Form from '@bigbinary/neetoui/formik/Form';
|
|
24
24
|
import * as yup from 'yup';
|
|
25
|
-
import { useFormikContext } from 'formik';
|
|
25
|
+
import { useFormikContext, Field } from 'formik';
|
|
26
26
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
27
27
|
import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
|
|
28
28
|
import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
|
|
29
|
-
import ColorPicker from '@bigbinary/neetoui/ColorPicker';
|
|
30
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';
|
|
31
33
|
import { Slider } from 'antd';
|
|
34
|
+
import classnames from 'classnames';
|
|
35
|
+
import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
|
|
32
36
|
import Switch from '@bigbinary/neetoui/Switch';
|
|
33
37
|
import Input from '@bigbinary/neetoui/formik/Input';
|
|
34
38
|
import Search from '@bigbinary/neeto-molecules/Search';
|
|
35
|
-
import classnames from 'classnames';
|
|
36
39
|
import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
|
|
40
|
+
import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
|
|
41
|
+
import Plus from '@bigbinary/neeto-icons/Plus';
|
|
37
42
|
|
|
38
43
|
/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
|
|
39
44
|
var useConfigStore = create$1(withImmutableActions(function (set) {
|
|
@@ -42,7 +47,9 @@ var useConfigStore = create$1(withImmutableActions(function (set) {
|
|
|
42
47
|
entityType: "",
|
|
43
48
|
entityId: "",
|
|
44
49
|
variableNamesMap: {},
|
|
50
|
+
defaultThemeName: "Plain blue",
|
|
45
51
|
isFetchingSchema: true,
|
|
52
|
+
isTemplateThemesEnabled: false,
|
|
46
53
|
setConfigState: set
|
|
47
54
|
};
|
|
48
55
|
}));
|
|
@@ -57,6 +64,52 @@ var useThemeStore = create$1(withImmutableActions(function (set) {
|
|
|
57
64
|
};
|
|
58
65
|
}));
|
|
59
66
|
|
|
67
|
+
var getImageFromUrl = function getImageFromUrl(source) {
|
|
68
|
+
var image = new Image();
|
|
69
|
+
image.crossOrigin = "anonymous";
|
|
70
|
+
image.src = source;
|
|
71
|
+
return new Promise(function (resolve) {
|
|
72
|
+
image.onload = function () {
|
|
73
|
+
resolve(image);
|
|
74
|
+
};
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
var getDominantColorFromUrl = /*#__PURE__*/function () {
|
|
78
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(imageUrl) {
|
|
79
|
+
var image, context, c;
|
|
80
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
81
|
+
while (1) switch (_context.prev = _context.next) {
|
|
82
|
+
case 0:
|
|
83
|
+
_context.prev = 0;
|
|
84
|
+
_context.next = 3;
|
|
85
|
+
return getImageFromUrl(imageUrl);
|
|
86
|
+
case 3:
|
|
87
|
+
image = _context.sent;
|
|
88
|
+
context = document.createElement("canvas").getContext("2d");
|
|
89
|
+
context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
|
|
90
|
+
c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
|
|
91
|
+
if (!c) {
|
|
92
|
+
_context.next = 9;
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
|
|
96
|
+
case 9:
|
|
97
|
+
return _context.abrupt("return", null);
|
|
98
|
+
case 12:
|
|
99
|
+
_context.prev = 12;
|
|
100
|
+
_context.t0 = _context["catch"](0);
|
|
101
|
+
Toastr.error(_context.t0);
|
|
102
|
+
return _context.abrupt("return", null);
|
|
103
|
+
case 16:
|
|
104
|
+
case "end":
|
|
105
|
+
return _context.stop();
|
|
106
|
+
}
|
|
107
|
+
}, _callee, null, [[0, 12]]);
|
|
108
|
+
}));
|
|
109
|
+
return function getDominantColorFromUrl(_x) {
|
|
110
|
+
return _ref.apply(this, arguments);
|
|
111
|
+
};
|
|
112
|
+
}();
|
|
60
113
|
var scrollElementIntoView = function scrollElementIntoView(elementId) {
|
|
61
114
|
var elementToScroll = document.getElementById(elementId);
|
|
62
115
|
elementToScroll === null || elementToScroll === void 0 || elementToScroll.scrollIntoView({
|
|
@@ -104,8 +157,12 @@ var useShowThemeEntity = function useShowThemeEntity(entityId) {
|
|
|
104
157
|
};
|
|
105
158
|
|
|
106
159
|
var _excluded$1 = ["themeId"];
|
|
107
|
-
var list$1 = function list() {
|
|
108
|
-
return axios.get("".concat(BASE_URL, "/api/v1/themes")
|
|
160
|
+
var list$1 = function list(entityId) {
|
|
161
|
+
return axios.get("".concat(BASE_URL, "/api/v1/themes"), {
|
|
162
|
+
params: {
|
|
163
|
+
entity_id: entityId
|
|
164
|
+
}
|
|
165
|
+
});
|
|
109
166
|
};
|
|
110
167
|
var show = function show(id) {
|
|
111
168
|
return axios.get("".concat(BASE_URL, "/api/v1/themes/").concat(id));
|
|
@@ -145,10 +202,19 @@ var themesApi = {
|
|
|
145
202
|
apply: apply
|
|
146
203
|
};
|
|
147
204
|
|
|
148
|
-
var useListThemes = function useListThemes() {
|
|
205
|
+
var useListThemes = function useListThemes(entityId) {
|
|
206
|
+
var _useConfigStore = useConfigStore(function (store) {
|
|
207
|
+
return {
|
|
208
|
+
isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
|
|
209
|
+
};
|
|
210
|
+
}, shallow),
|
|
211
|
+
isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
|
|
212
|
+
var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
|
|
149
213
|
return useQuery({
|
|
150
|
-
queryKey:
|
|
151
|
-
queryFn:
|
|
214
|
+
queryKey: queryKey,
|
|
215
|
+
queryFn: function queryFn() {
|
|
216
|
+
return themesApi.list(entityId);
|
|
217
|
+
}
|
|
152
218
|
});
|
|
153
219
|
};
|
|
154
220
|
var useCreateTheme = function useCreateTheme() {
|
|
@@ -200,6 +266,8 @@ var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
|
|
|
200
266
|
var overlayOpacity = Number(property.value);
|
|
201
267
|
setVariable(snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
|
|
202
268
|
setVariable(snakeToCamelCase("".concat(property.key, "_overlay_color")), overlayOpacity < 0 ? BLACK : WHITE, variableNamesMap);
|
|
269
|
+
} else if (property.kind === "radius") {
|
|
270
|
+
setVariable(attribute, "".concat(property.value, "px"), variableNamesMap);
|
|
203
271
|
} else {
|
|
204
272
|
setVariable(attribute, property.value, variableNamesMap);
|
|
205
273
|
}
|
|
@@ -250,7 +318,8 @@ var useThemeUtils = function useThemeUtils() {
|
|
|
250
318
|
if (data) {
|
|
251
319
|
setConfigState({
|
|
252
320
|
themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
|
|
253
|
-
variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap
|
|
321
|
+
variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
|
|
322
|
+
defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
|
|
254
323
|
});
|
|
255
324
|
}
|
|
256
325
|
}, [data]);
|
|
@@ -383,6 +452,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
|
|
|
383
452
|
kind: "slider",
|
|
384
453
|
key: key
|
|
385
454
|
};
|
|
455
|
+
case "radius":
|
|
456
|
+
return {
|
|
457
|
+
value: defaultValue,
|
|
458
|
+
kind: "radius",
|
|
459
|
+
key: key
|
|
460
|
+
};
|
|
386
461
|
case "boolean":
|
|
387
462
|
return {
|
|
388
463
|
value: String(defaultValue),
|
|
@@ -395,6 +470,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
|
|
|
395
470
|
kind: "position_selector",
|
|
396
471
|
key: key
|
|
397
472
|
};
|
|
473
|
+
case "alignment_block":
|
|
474
|
+
return {
|
|
475
|
+
value: defaultValue,
|
|
476
|
+
kind: "alignment_block",
|
|
477
|
+
key: key
|
|
478
|
+
};
|
|
398
479
|
default:
|
|
399
480
|
return null;
|
|
400
481
|
}
|
|
@@ -412,23 +493,26 @@ var buildImageData = function buildImageData(values, themePropertiesSchema) {
|
|
|
412
493
|
}, {});
|
|
413
494
|
};
|
|
414
495
|
var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
|
|
415
|
-
var _findBy;
|
|
416
496
|
var property = findBy({
|
|
417
497
|
key: key
|
|
418
498
|
}, themePropertiesSchema);
|
|
419
499
|
if (isNotPresent(property)) return false;
|
|
500
|
+
if (property !== null && property !== void 0 && property.hidden) return false;
|
|
420
501
|
var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
|
|
421
502
|
if (isNotPresent(conditionalKey)) return true;
|
|
422
|
-
var
|
|
503
|
+
var dependentPropertySchema = findBy({
|
|
423
504
|
key: conditionalKey
|
|
424
505
|
}, themePropertiesSchema);
|
|
425
|
-
|
|
506
|
+
var dependentProperty = findBy({
|
|
507
|
+
key: conditionalKey
|
|
508
|
+
}, formikValues.properties);
|
|
509
|
+
if (dependentPropertySchema.kind === "image") {
|
|
426
510
|
var _formikValues$snakeTo;
|
|
427
511
|
return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
|
|
512
|
+
} else if (dependentPropertySchema.kind === "boolean") {
|
|
513
|
+
return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
|
|
428
514
|
}
|
|
429
|
-
return isPresent(
|
|
430
|
-
key: conditionalKey
|
|
431
|
-
}, formikValues.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value);
|
|
515
|
+
return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
|
|
432
516
|
};
|
|
433
517
|
var buildLabel = function buildLabel(key, kind) {
|
|
434
518
|
return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
|
|
@@ -456,6 +540,32 @@ var Card$2 = function Card(_ref) {
|
|
|
456
540
|
});
|
|
457
541
|
};
|
|
458
542
|
|
|
543
|
+
var SelectBlock = function SelectBlock(_ref) {
|
|
544
|
+
var label = _ref.label,
|
|
545
|
+
_ref$placeholder = _ref.placeholder,
|
|
546
|
+
placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
|
|
547
|
+
value = _ref.value,
|
|
548
|
+
options = _ref.options,
|
|
549
|
+
onChange = _ref.onChange;
|
|
550
|
+
return /*#__PURE__*/jsxs("div", {
|
|
551
|
+
className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
|
|
552
|
+
"data-cy": "theme-style-".concat(joinHyphenCase(label)),
|
|
553
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
554
|
+
"data-cy": "logo-field-labels",
|
|
555
|
+
style: "body2",
|
|
556
|
+
children: label
|
|
557
|
+
}), /*#__PURE__*/jsx("div", {
|
|
558
|
+
className: "w-40",
|
|
559
|
+
children: /*#__PURE__*/jsx(Select, {
|
|
560
|
+
onChange: onChange,
|
|
561
|
+
options: options,
|
|
562
|
+
placeholder: placeholder,
|
|
563
|
+
value: value
|
|
564
|
+
})
|
|
565
|
+
})]
|
|
566
|
+
});
|
|
567
|
+
};
|
|
568
|
+
|
|
459
569
|
var DESIGN_SCREENS = {
|
|
460
570
|
THEMES: "Themes",
|
|
461
571
|
Customize: "Customize"
|
|
@@ -463,6 +573,7 @@ var DESIGN_SCREENS = {
|
|
|
463
573
|
var ONE_MEGABYTE = 1;
|
|
464
574
|
|
|
465
575
|
var ImageBlock = function ImageBlock(_ref) {
|
|
576
|
+
var _findBy;
|
|
466
577
|
var label = _ref.label,
|
|
467
578
|
name = _ref.name,
|
|
468
579
|
_ref$imageData = _ref.imageData,
|
|
@@ -470,22 +581,73 @@ var ImageBlock = function ImageBlock(_ref) {
|
|
|
470
581
|
_ref$uploadConfig = _ref.uploadConfig,
|
|
471
582
|
uploadConfig = _ref$uploadConfig === void 0 ? {
|
|
472
583
|
maxImageSize: ONE_MEGABYTE
|
|
473
|
-
} : _ref$uploadConfig
|
|
584
|
+
} : _ref$uploadConfig,
|
|
585
|
+
attribute = _ref.attribute;
|
|
586
|
+
var _useTranslation = useTranslation(),
|
|
587
|
+
t = _useTranslation.t;
|
|
474
588
|
var _useFormikContext = useFormikContext(),
|
|
475
|
-
setFieldValue = _useFormikContext.setFieldValue
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
589
|
+
setFieldValue = _useFormikContext.setFieldValue,
|
|
590
|
+
values = _useFormikContext.values;
|
|
591
|
+
var _useConfigStore = useConfigStore(function (store) {
|
|
592
|
+
return {
|
|
593
|
+
themePropertiesSchema: store["themePropertiesSchema"]
|
|
594
|
+
};
|
|
595
|
+
}, shallow),
|
|
596
|
+
themePropertiesSchema = _useConfigStore.themePropertiesSchema;
|
|
597
|
+
var propertySchema = findBy({
|
|
598
|
+
key: attribute
|
|
599
|
+
}, themePropertiesSchema);
|
|
600
|
+
var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
|
|
601
|
+
var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
|
|
602
|
+
var positionKeyInSchema = findBy({
|
|
603
|
+
key: "".concat(name, "_position")
|
|
604
|
+
}, themePropertiesSchema);
|
|
605
|
+
var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
|
|
606
|
+
var positionKeyIndex = findIndexBy({
|
|
607
|
+
key: "".concat(name, "_position")
|
|
608
|
+
}, values.properties);
|
|
609
|
+
var handleImageChange = /*#__PURE__*/function () {
|
|
610
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
|
|
611
|
+
var dominantColor;
|
|
612
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
613
|
+
while (1) switch (_context.prev = _context.next) {
|
|
614
|
+
case 0:
|
|
615
|
+
_context.prev = 0;
|
|
616
|
+
if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
|
|
617
|
+
_context.next = 4;
|
|
618
|
+
break;
|
|
619
|
+
}
|
|
620
|
+
setFieldValue(name, {
|
|
621
|
+
signedId: null,
|
|
622
|
+
url: image.url
|
|
623
|
+
});
|
|
624
|
+
return _context.abrupt("return");
|
|
625
|
+
case 4:
|
|
626
|
+
_context.next = 6;
|
|
627
|
+
return getDominantColorFromUrl(image.url);
|
|
628
|
+
case 6:
|
|
629
|
+
dominantColor = _context.sent;
|
|
630
|
+
setFieldValue(name, {
|
|
631
|
+
signedId: image.signedId,
|
|
632
|
+
url: image.url,
|
|
633
|
+
dominantColor: dominantColor
|
|
634
|
+
});
|
|
635
|
+
_context.next = 13;
|
|
636
|
+
break;
|
|
637
|
+
case 10:
|
|
638
|
+
_context.prev = 10;
|
|
639
|
+
_context.t0 = _context["catch"](0);
|
|
640
|
+
Toastr.error(_context.t0);
|
|
641
|
+
case 13:
|
|
642
|
+
case "end":
|
|
643
|
+
return _context.stop();
|
|
644
|
+
}
|
|
645
|
+
}, _callee, null, [[0, 10]]);
|
|
646
|
+
}));
|
|
647
|
+
return function handleImageChange(_x) {
|
|
648
|
+
return _ref2.apply(this, arguments);
|
|
649
|
+
};
|
|
650
|
+
}();
|
|
489
651
|
return /*#__PURE__*/jsxs("div", {
|
|
490
652
|
className: "space-y-3 py-3 first:pt-0 last:pb-0",
|
|
491
653
|
"data-cy": "theme-style-".concat(joinHyphenCase(label)),
|
|
@@ -496,12 +658,25 @@ var ImageBlock = function ImageBlock(_ref) {
|
|
|
496
658
|
style: "body2",
|
|
497
659
|
children: label
|
|
498
660
|
})
|
|
499
|
-
}), /*#__PURE__*/
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
661
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
662
|
+
className: "space-y-3 divide-y divide-gray-200",
|
|
663
|
+
children: [/*#__PURE__*/createElement(ImageUploader, {
|
|
664
|
+
uploadConfig: uploadConfig,
|
|
665
|
+
className: "h-40 w-full",
|
|
666
|
+
key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
|
|
667
|
+
src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
|
|
668
|
+
onUploadComplete: handleImageChange
|
|
669
|
+
}), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
|
|
670
|
+
label: buildLabel("".concat(name, "Position"), "image"),
|
|
671
|
+
options: options || POSITION_OPTIONS,
|
|
672
|
+
placeholder: t("neetoThemes.common.left"),
|
|
673
|
+
value: toLabelAndValue((_findBy = findBy({
|
|
674
|
+
key: "".concat(name, "_position")
|
|
675
|
+
}, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value),
|
|
676
|
+
onChange: function onChange(option) {
|
|
677
|
+
return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
|
|
678
|
+
}
|
|
679
|
+
})]
|
|
505
680
|
})]
|
|
506
681
|
});
|
|
507
682
|
};
|
|
@@ -518,6 +693,7 @@ var Images = function Images(_ref) {
|
|
|
518
693
|
children: /*#__PURE__*/jsx("div", {
|
|
519
694
|
className: "divide-y divide-gray-200",
|
|
520
695
|
children: /*#__PURE__*/jsx(ImageBlock, {
|
|
696
|
+
attribute: attribute,
|
|
521
697
|
imageData: imageData,
|
|
522
698
|
name: key
|
|
523
699
|
})
|
|
@@ -525,6 +701,54 @@ var Images = function Images(_ref) {
|
|
|
525
701
|
});
|
|
526
702
|
};
|
|
527
703
|
|
|
704
|
+
var AlignmentBlock = function AlignmentBlock(_ref) {
|
|
705
|
+
var label = _ref.label,
|
|
706
|
+
name = _ref.name;
|
|
707
|
+
return /*#__PURE__*/jsxs("div", {
|
|
708
|
+
className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
|
|
709
|
+
"data-cy": joinHyphenCase(label),
|
|
710
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
711
|
+
"data-cy": "style-fields-labels",
|
|
712
|
+
style: "body2",
|
|
713
|
+
children: label
|
|
714
|
+
}), /*#__PURE__*/jsx(Field, {
|
|
715
|
+
name: name,
|
|
716
|
+
children: function children(_ref2) {
|
|
717
|
+
var value = _ref2.field.value,
|
|
718
|
+
setFieldValue = _ref2.form.setFieldValue;
|
|
719
|
+
return /*#__PURE__*/jsxs("div", {
|
|
720
|
+
className: "flex items-center gap-3",
|
|
721
|
+
children: [/*#__PURE__*/jsx(Button, {
|
|
722
|
+
"data-cy": "alignment-left",
|
|
723
|
+
icon: LeftAlign,
|
|
724
|
+
size: "large",
|
|
725
|
+
style: value === "left" ? "primary" : "text",
|
|
726
|
+
tooltipProps: {
|
|
727
|
+
content: "Left align",
|
|
728
|
+
position: "bottom"
|
|
729
|
+
},
|
|
730
|
+
onClick: function onClick() {
|
|
731
|
+
return setFieldValue(name, "left");
|
|
732
|
+
}
|
|
733
|
+
}), /*#__PURE__*/jsx(Button, {
|
|
734
|
+
"data-cy": "alignment-center",
|
|
735
|
+
icon: CenterAlign,
|
|
736
|
+
size: "large",
|
|
737
|
+
style: value === "center" ? "primary" : "text",
|
|
738
|
+
tooltipProps: {
|
|
739
|
+
content: "Center align",
|
|
740
|
+
position: "bottom"
|
|
741
|
+
},
|
|
742
|
+
onClick: function onClick() {
|
|
743
|
+
return setFieldValue(name, "center");
|
|
744
|
+
}
|
|
745
|
+
})]
|
|
746
|
+
});
|
|
747
|
+
}
|
|
748
|
+
})]
|
|
749
|
+
});
|
|
750
|
+
};
|
|
751
|
+
|
|
528
752
|
var ColorBlock = function ColorBlock(_ref) {
|
|
529
753
|
var label = _ref.label,
|
|
530
754
|
_ref$color = _ref.color,
|
|
@@ -584,32 +808,6 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
|
|
|
584
808
|
});
|
|
585
809
|
};
|
|
586
810
|
|
|
587
|
-
var SelectBlock = function SelectBlock(_ref) {
|
|
588
|
-
var label = _ref.label,
|
|
589
|
-
_ref$placeholder = _ref.placeholder,
|
|
590
|
-
placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
|
|
591
|
-
value = _ref.value,
|
|
592
|
-
options = _ref.options,
|
|
593
|
-
onChange = _ref.onChange;
|
|
594
|
-
return /*#__PURE__*/jsxs("div", {
|
|
595
|
-
className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
|
|
596
|
-
"data-cy": "theme-style-".concat(joinHyphenCase(label)),
|
|
597
|
-
children: [/*#__PURE__*/jsx(Typography, {
|
|
598
|
-
"data-cy": "logo-field-labels",
|
|
599
|
-
style: "body2",
|
|
600
|
-
children: label
|
|
601
|
-
}), /*#__PURE__*/jsx("div", {
|
|
602
|
-
className: "w-40",
|
|
603
|
-
children: /*#__PURE__*/jsx(Select, {
|
|
604
|
-
onChange: onChange,
|
|
605
|
-
options: options,
|
|
606
|
-
placeholder: placeholder,
|
|
607
|
-
value: value
|
|
608
|
-
})
|
|
609
|
-
})]
|
|
610
|
-
});
|
|
611
|
-
};
|
|
612
|
-
|
|
613
811
|
var SliderBlock = function SliderBlock(_ref) {
|
|
614
812
|
var label = _ref.label,
|
|
615
813
|
onChange = _ref.onChange,
|
|
@@ -645,14 +843,32 @@ var SwitchBlock = function SwitchBlock(_ref) {
|
|
|
645
843
|
var label = _ref.label,
|
|
646
844
|
name = _ref.name,
|
|
647
845
|
switchProps = _objectWithoutProperties(_ref, _excluded);
|
|
846
|
+
var _useTranslation = useTranslation(),
|
|
847
|
+
t = _useTranslation.t,
|
|
848
|
+
i18n = _useTranslation.i18n;
|
|
849
|
+
var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
|
|
850
|
+
var doesHelpTextExist = i18n.exists(translationKey);
|
|
648
851
|
return /*#__PURE__*/jsxs("div", {
|
|
649
852
|
className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
|
|
650
|
-
children: [/*#__PURE__*/
|
|
651
|
-
|
|
652
|
-
children:
|
|
653
|
-
|
|
853
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
854
|
+
className: "inline-flex items-center gap-4",
|
|
855
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
856
|
+
"data-cy": "style-fields-labels",
|
|
857
|
+
style: "body2",
|
|
858
|
+
className: classnames({
|
|
859
|
+
"w-32": doesHelpTextExist,
|
|
860
|
+
"w-auto": !doesHelpTextExist
|
|
861
|
+
}),
|
|
862
|
+
children: label
|
|
863
|
+
}), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
|
|
864
|
+
className: "flex-shrink-0",
|
|
865
|
+
description: t(translationKey)
|
|
866
|
+
})]
|
|
867
|
+
}), /*#__PURE__*/jsx(Switch, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
|
|
654
868
|
name: name
|
|
655
|
-
}, switchProps))
|
|
869
|
+
}, switchProps)), {}, {
|
|
870
|
+
"data-cy": "enable-background-color-toggle"
|
|
871
|
+
}))]
|
|
656
872
|
});
|
|
657
873
|
};
|
|
658
874
|
|
|
@@ -706,7 +922,7 @@ var Properties = function Properties(_ref) {
|
|
|
706
922
|
}
|
|
707
923
|
};
|
|
708
924
|
useEffect(function () {
|
|
709
|
-
onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values,
|
|
925
|
+
onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
|
|
710
926
|
setTheme(values);
|
|
711
927
|
setThemeState({
|
|
712
928
|
previewingTheme: values
|
|
@@ -736,20 +952,39 @@ var Properties = function Properties(_ref) {
|
|
|
736
952
|
}), filterBy({
|
|
737
953
|
kind: "color"
|
|
738
954
|
}, values.properties).map(function (_ref5) {
|
|
955
|
+
var _findBy;
|
|
739
956
|
var key = _ref5.key,
|
|
740
957
|
value = _ref5.value,
|
|
741
958
|
kind = _ref5.kind;
|
|
742
959
|
return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(ColorBlock, {
|
|
743
960
|
color: value,
|
|
744
961
|
label: buildLabel(key, kind),
|
|
962
|
+
showTransparencyControl: ((_findBy = findBy({
|
|
963
|
+
key: key
|
|
964
|
+
}, themePropertiesSchema)) === null || _findBy === void 0 ? void 0 : _findBy.showTransparencyControl) || false,
|
|
745
965
|
onChange: handleColorChange(key)
|
|
746
966
|
}, key);
|
|
747
967
|
}), filterBy({
|
|
748
|
-
kind: "
|
|
968
|
+
kind: "radius"
|
|
749
969
|
}, values.properties).map(function (_ref6) {
|
|
750
970
|
var key = _ref6.key,
|
|
751
971
|
value = _ref6.value,
|
|
752
972
|
kind = _ref6.kind;
|
|
973
|
+
return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
|
|
974
|
+
label: buildLabel(key, kind),
|
|
975
|
+
max: 50,
|
|
976
|
+
min: 0,
|
|
977
|
+
value: Number(value) || 0,
|
|
978
|
+
onChange: function onChange(radius) {
|
|
979
|
+
return handleChange(key, radius, "".concat(radius, "px"));
|
|
980
|
+
}
|
|
981
|
+
}, key);
|
|
982
|
+
}), filterBy({
|
|
983
|
+
kind: "overlay_opacity"
|
|
984
|
+
}, values.properties).map(function (_ref7) {
|
|
985
|
+
var key = _ref7.key,
|
|
986
|
+
value = _ref7.value,
|
|
987
|
+
kind = _ref7.kind;
|
|
753
988
|
return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
|
|
754
989
|
label: buildLabel(key, kind),
|
|
755
990
|
marks: OVERLAY_OPACITY_SLIDER_MARKS,
|
|
@@ -762,17 +997,17 @@ var Properties = function Properties(_ref) {
|
|
|
762
997
|
}, key);
|
|
763
998
|
}), filterBy({
|
|
764
999
|
kind: "position_selector"
|
|
765
|
-
}, values.properties).map(function (
|
|
766
|
-
var
|
|
767
|
-
var key =
|
|
768
|
-
kind =
|
|
769
|
-
value =
|
|
1000
|
+
}, values.properties).map(function (_ref8) {
|
|
1001
|
+
var _findBy2;
|
|
1002
|
+
var key = _ref8.key,
|
|
1003
|
+
kind = _ref8.kind,
|
|
1004
|
+
value = _ref8.value;
|
|
770
1005
|
var index = findIndexBy({
|
|
771
1006
|
key: key
|
|
772
1007
|
}, values.properties);
|
|
773
|
-
var options = (
|
|
1008
|
+
var options = (_findBy2 = findBy({
|
|
774
1009
|
key: key
|
|
775
|
-
}, themePropertiesSchema)) === null ||
|
|
1010
|
+
}, themePropertiesSchema)) === null || _findBy2 === void 0 || (_findBy2 = _findBy2.options) === null || _findBy2 === void 0 ? void 0 : _findBy2.map(toLabelAndValue);
|
|
776
1011
|
return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SelectBlock, {
|
|
777
1012
|
label: buildLabel(key, kind),
|
|
778
1013
|
options: options || POSITION_OPTIONS,
|
|
@@ -784,20 +1019,33 @@ var Properties = function Properties(_ref) {
|
|
|
784
1019
|
}, key);
|
|
785
1020
|
}), filterBy({
|
|
786
1021
|
kind: "boolean"
|
|
787
|
-
}, values.properties).map(function (
|
|
788
|
-
var key =
|
|
789
|
-
kind =
|
|
790
|
-
value =
|
|
1022
|
+
}, values.properties).map(function (_ref9) {
|
|
1023
|
+
var key = _ref9.key,
|
|
1024
|
+
kind = _ref9.kind,
|
|
1025
|
+
value = _ref9.value;
|
|
791
1026
|
var index = findIndexBy({
|
|
792
1027
|
key: key
|
|
793
1028
|
}, values.properties);
|
|
794
1029
|
return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SwitchBlock, {
|
|
795
1030
|
checked: value !== "false",
|
|
796
1031
|
label: buildLabel(key, kind),
|
|
1032
|
+
name: snakeToCamelCase(key),
|
|
797
1033
|
onChange: function onChange(e) {
|
|
798
1034
|
return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
|
|
799
1035
|
}
|
|
800
1036
|
}, key);
|
|
1037
|
+
}), filterBy({
|
|
1038
|
+
kind: "alignment_block"
|
|
1039
|
+
}, values.properties).map(function (_ref10) {
|
|
1040
|
+
var key = _ref10.key,
|
|
1041
|
+
kind = _ref10.kind;
|
|
1042
|
+
var index = findIndexBy({
|
|
1043
|
+
key: key
|
|
1044
|
+
}, values.properties);
|
|
1045
|
+
return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(AlignmentBlock, {
|
|
1046
|
+
label: buildLabel(key, kind),
|
|
1047
|
+
name: "properties[".concat(index, "].value")
|
|
1048
|
+
});
|
|
801
1049
|
})]
|
|
802
1050
|
})
|
|
803
1051
|
});
|
|
@@ -974,7 +1222,7 @@ var Check = function Check(props) {
|
|
|
974
1222
|
children: [/*#__PURE__*/jsxs("g", {
|
|
975
1223
|
filter: "url(#filter0_d_9519_161)",
|
|
976
1224
|
children: [/*#__PURE__*/jsx("rect", {
|
|
977
|
-
fill: "#
|
|
1225
|
+
fill: "#008068",
|
|
978
1226
|
height: "20",
|
|
979
1227
|
rx: "10",
|
|
980
1228
|
width: "20",
|
|
@@ -1375,7 +1623,8 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
1375
1623
|
var currentScreen = _ref.currentScreen,
|
|
1376
1624
|
handleBackPress = _ref.handleBackPress,
|
|
1377
1625
|
handleCreateNewTheme = _ref.handleCreateNewTheme,
|
|
1378
|
-
isNewTheme = _ref.isNewTheme
|
|
1626
|
+
isNewTheme = _ref.isNewTheme,
|
|
1627
|
+
themeToEdit = _ref.themeToEdit;
|
|
1379
1628
|
var _useTranslation = useTranslation(),
|
|
1380
1629
|
t = _useTranslation.t;
|
|
1381
1630
|
if (currentScreen === DESIGN_SCREENS.Customize) {
|
|
@@ -1392,7 +1641,9 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
1392
1641
|
content: t("neetoThemes.buttons.backToThemes"),
|
|
1393
1642
|
position: "top"
|
|
1394
1643
|
},
|
|
1395
|
-
onClick:
|
|
1644
|
+
onClick: function onClick() {
|
|
1645
|
+
return handleBackPress(themeToEdit);
|
|
1646
|
+
}
|
|
1396
1647
|
}), /*#__PURE__*/jsx(Typography, {
|
|
1397
1648
|
"data-cy": "themes-header",
|
|
1398
1649
|
lineHeight: "normal",
|
|
@@ -1433,7 +1684,7 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
1433
1684
|
|
|
1434
1685
|
var MemoizedAlert = /*#__PURE__*/memo(Alert);
|
|
1435
1686
|
var Sidebar = function Sidebar(_ref) {
|
|
1436
|
-
var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
|
|
1687
|
+
var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
|
|
1437
1688
|
var thumbnail = _ref.thumbnail,
|
|
1438
1689
|
onPropertiesChange = _ref.onPropertiesChange;
|
|
1439
1690
|
var _useState = useState(DESIGN_SCREENS.THEMES),
|
|
@@ -1456,12 +1707,14 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1456
1707
|
return {
|
|
1457
1708
|
entityType: store["entityType"],
|
|
1458
1709
|
entityId: store["entityId"],
|
|
1459
|
-
isFetchingSchema: store["isFetchingSchema"]
|
|
1710
|
+
isFetchingSchema: store["isFetchingSchema"],
|
|
1711
|
+
defaultThemeName: store["defaultThemeName"]
|
|
1460
1712
|
};
|
|
1461
1713
|
}, shallow),
|
|
1462
1714
|
entityType = _useConfigStore.entityType,
|
|
1463
1715
|
entityId = _useConfigStore.entityId,
|
|
1464
|
-
isFetchingSchema = _useConfigStore.isFetchingSchema
|
|
1716
|
+
isFetchingSchema = _useConfigStore.isFetchingSchema,
|
|
1717
|
+
defaultThemeName = _useConfigStore.defaultThemeName;
|
|
1465
1718
|
var _useThemeStore = useThemeStore(function (store) {
|
|
1466
1719
|
return {
|
|
1467
1720
|
setThemeState: store["setThemeState"]
|
|
@@ -1473,7 +1726,7 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1473
1726
|
t = _useTranslation.t;
|
|
1474
1727
|
var _useThemeUtils = useThemeUtils(),
|
|
1475
1728
|
setTheme = _useThemeUtils.setTheme;
|
|
1476
|
-
var _useListThemes = useListThemes(),
|
|
1729
|
+
var _useListThemes = useListThemes(entityId),
|
|
1477
1730
|
_useListThemes$data = _useListThemes.data,
|
|
1478
1731
|
_useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
|
|
1479
1732
|
_useListThemes$data2$ = _useListThemes$data2.themes,
|
|
@@ -1494,6 +1747,7 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1494
1747
|
onSuccess: function onSuccess(_ref2) {
|
|
1495
1748
|
var theme = _ref2.theme;
|
|
1496
1749
|
setTheme(theme);
|
|
1750
|
+
highlightTheme(theme);
|
|
1497
1751
|
setThemeState({
|
|
1498
1752
|
previewingTheme: theme
|
|
1499
1753
|
});
|
|
@@ -1518,8 +1772,9 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1518
1772
|
entityType: entityType
|
|
1519
1773
|
});
|
|
1520
1774
|
};
|
|
1521
|
-
var handleBackPress = function handleBackPress() {
|
|
1775
|
+
var handleBackPress = function handleBackPress(theme) {
|
|
1522
1776
|
setTheme(currentTheme);
|
|
1777
|
+
highlightTheme(isPresent(theme) ? theme : currentTheme);
|
|
1523
1778
|
setThemeState({
|
|
1524
1779
|
previewingTheme: currentTheme
|
|
1525
1780
|
});
|
|
@@ -1529,10 +1784,10 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1529
1784
|
var highlightTheme = function highlightTheme(themeToHighlight) {
|
|
1530
1785
|
setTimeout(function () {
|
|
1531
1786
|
scrollElementIntoView(themeToHighlight.id);
|
|
1532
|
-
},
|
|
1787
|
+
}, 1000);
|
|
1533
1788
|
setTimeout(function () {
|
|
1534
1789
|
setThemeToHighlight(null);
|
|
1535
|
-
},
|
|
1790
|
+
}, 3500);
|
|
1536
1791
|
setThemeToHighlight(themeToHighlight.id);
|
|
1537
1792
|
};
|
|
1538
1793
|
var onCreateTheme = function onCreateTheme(createdTheme) {
|
|
@@ -1583,7 +1838,8 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1583
1838
|
handleCreateNewTheme: function handleCreateNewTheme() {
|
|
1584
1839
|
return handleEditTheme({});
|
|
1585
1840
|
},
|
|
1586
|
-
isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id)
|
|
1841
|
+
isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
|
|
1842
|
+
themeToEdit: themeToEdit.current
|
|
1587
1843
|
}), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsx(Themes, {
|
|
1588
1844
|
currentTheme: currentTheme,
|
|
1589
1845
|
defaultThemes: defaultThemes,
|
|
@@ -1613,7 +1869,10 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
1613
1869
|
message: t("neetoThemes.alerts.message.deleteTheme", {
|
|
1614
1870
|
name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
|
|
1615
1871
|
count: (_themeToDelete$curren3 = themeToDelete.current) === null || _themeToDelete$curren3 === void 0 ? void 0 : _themeToDelete$curren3.appliedCount,
|
|
1616
|
-
|
|
1872
|
+
defaultThemeName: defaultThemeName,
|
|
1873
|
+
entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
|
|
1874
|
+
count: (_themeToDelete$curren4 = themeToDelete.current) === null || _themeToDelete$curren4 === void 0 ? void 0 : _themeToDelete$curren4.appliedCount
|
|
1875
|
+
})
|
|
1617
1876
|
}),
|
|
1618
1877
|
onClose: handleCloseDeleteAlert,
|
|
1619
1878
|
onSubmit: handleDeleteTheme
|
|
@@ -1626,7 +1885,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
|
|
|
1626
1885
|
entityType = _ref.entityType,
|
|
1627
1886
|
entityId = _ref.entityId,
|
|
1628
1887
|
thumbnail = _ref.thumbnail,
|
|
1629
|
-
onPropertiesChange = _ref.onPropertiesChange
|
|
1888
|
+
onPropertiesChange = _ref.onPropertiesChange,
|
|
1889
|
+
_ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
|
|
1890
|
+
isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes;
|
|
1630
1891
|
var _useThemeStore = useThemeStore(function (store) {
|
|
1631
1892
|
return {
|
|
1632
1893
|
isCurrentThemeLoading: store["isCurrentThemeLoading"]
|
|
@@ -1642,7 +1903,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
|
|
|
1642
1903
|
useEffect(function () {
|
|
1643
1904
|
setConfigState({
|
|
1644
1905
|
entityType: entityType,
|
|
1645
|
-
entityId: entityId
|
|
1906
|
+
entityId: entityId,
|
|
1907
|
+
isTemplateThemesEnabled: isTemplateThemesEnabled
|
|
1646
1908
|
});
|
|
1647
1909
|
}, []);
|
|
1648
1910
|
return /*#__PURE__*/jsxs("div", {
|
|
@@ -1663,7 +1925,7 @@ var index = withTitle(NeetoThemesBuilder, t$1("neetoThemes.common.design"));
|
|
|
1663
1925
|
|
|
1664
1926
|
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}}
|
|
1665
1927
|
|
|
1666
|
-
var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));
|
|
1928
|
+
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== */";
|
|
1667
1929
|
n(css,{});
|
|
1668
1930
|
|
|
1669
1931
|
export { index as NeetoThemesBuilder, setTheme, useThemeUtils };
|