@orion-studios/payload-studio 0.5.0-beta.73 → 0.5.0-beta.74
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/studio-pages/client.js +88 -1492
- package/dist/studio-pages/client.mjs +88 -1492
- package/package.json +1 -1
|
@@ -3780,25 +3780,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
3780
3780
|
setExpandedItemIndex((current) => current === itemIndex ? null : itemIndex);
|
|
3781
3781
|
openSidebarPanel("selected");
|
|
3782
3782
|
};
|
|
3783
|
-
const defaultItemFocus = (value, fitValue) => {
|
|
3784
|
-
const normalized = normalizeImagePosition2(value);
|
|
3785
|
-
const fit = normalizeImageFit2(fitValue);
|
|
3786
|
-
if (fit === "cover" && (normalized === "left" || normalized === "right")) {
|
|
3787
|
-
return { x: 50, y: 50 };
|
|
3788
|
-
}
|
|
3789
|
-
switch (normalized) {
|
|
3790
|
-
case "top":
|
|
3791
|
-
return { x: 50, y: 0 };
|
|
3792
|
-
case "bottom":
|
|
3793
|
-
return { x: 50, y: 100 };
|
|
3794
|
-
case "left":
|
|
3795
|
-
return { x: 0, y: 50 };
|
|
3796
|
-
case "right":
|
|
3797
|
-
return { x: 100, y: 50 };
|
|
3798
|
-
default:
|
|
3799
|
-
return { x: 50, y: 50 };
|
|
3800
|
-
}
|
|
3801
|
-
};
|
|
3802
3783
|
const setSelectedStyleField = (fieldName, value) => {
|
|
3803
3784
|
updateSelectedField(fieldName, value);
|
|
3804
3785
|
};
|
|
@@ -6651,1299 +6632,24 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
6651
6632
|
value: parseColor(selectedBlock.backgroundColor, "#1f684f")
|
|
6652
6633
|
}
|
|
6653
6634
|
)
|
|
6654
|
-
] })
|
|
6655
|
-
/* @__PURE__ */ jsx5(
|
|
6656
|
-
"button",
|
|
6657
|
-
{
|
|
6658
|
-
onClick: () => appendItemToSelected("items", {
|
|
6659
|
-
description: "Describe this feature.",
|
|
6660
|
-
iconType: "badge",
|
|
6661
|
-
icon: "04",
|
|
6662
|
-
imageCornerStyle: "rounded",
|
|
6663
|
-
imageFit: "cover",
|
|
6664
|
-
imagePosition: "center",
|
|
6665
|
-
title: "New Feature"
|
|
6666
|
-
}),
|
|
6667
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
6668
|
-
type: "button",
|
|
6669
|
-
children: "Add Feature Item"
|
|
6670
|
-
}
|
|
6671
|
-
),
|
|
6672
|
-
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
|
|
6673
|
-
const isOpen = expandedItemIndex === itemIndex;
|
|
6674
|
-
const itemTitle = normalizeText2(item.title, "");
|
|
6675
|
-
const label = itemTitle || `Item ${itemIndex + 1}`;
|
|
6676
|
-
const imageHeightValue = typeof item.imageHeight === "number" && Number.isFinite(item.imageHeight) ? item.imageHeight : "";
|
|
6677
|
-
return /* @__PURE__ */ jsxs5(
|
|
6678
|
-
"div",
|
|
6679
|
-
{
|
|
6680
|
-
style: {
|
|
6681
|
-
border: "1px solid rgba(13, 74, 55, 0.16)",
|
|
6682
|
-
borderRadius: 10,
|
|
6683
|
-
display: "grid",
|
|
6684
|
-
gap: 8,
|
|
6685
|
-
padding: 8
|
|
6686
|
-
},
|
|
6687
|
-
children: [
|
|
6688
|
-
/* @__PURE__ */ jsxs5(
|
|
6689
|
-
"button",
|
|
6690
|
-
{
|
|
6691
|
-
onClick: () => toggleSelectedItem(itemIndex),
|
|
6692
|
-
style: {
|
|
6693
|
-
alignItems: "center",
|
|
6694
|
-
background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
|
|
6695
|
-
border: "none",
|
|
6696
|
-
cursor: "pointer",
|
|
6697
|
-
display: "flex",
|
|
6698
|
-
fontSize: 12,
|
|
6699
|
-
fontWeight: 800,
|
|
6700
|
-
gap: 8,
|
|
6701
|
-
justifyContent: "space-between",
|
|
6702
|
-
padding: "6px 8px",
|
|
6703
|
-
textAlign: "left",
|
|
6704
|
-
width: "100%"
|
|
6705
|
-
},
|
|
6706
|
-
type: "button",
|
|
6707
|
-
children: [
|
|
6708
|
-
/* @__PURE__ */ jsx5("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
|
|
6709
|
-
/* @__PURE__ */ jsx5("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
|
|
6710
|
-
]
|
|
6711
|
-
}
|
|
6712
|
-
),
|
|
6713
|
-
isOpen ? /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 6 }, children: [
|
|
6714
|
-
/* @__PURE__ */ jsx5(
|
|
6715
|
-
"input",
|
|
6716
|
-
{
|
|
6717
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "title", event.target.value),
|
|
6718
|
-
placeholder: "Title",
|
|
6719
|
-
style: sidebarInputStyle,
|
|
6720
|
-
type: "text",
|
|
6721
|
-
value: normalizeText2(item.title)
|
|
6722
|
-
}
|
|
6723
|
-
),
|
|
6724
|
-
/* @__PURE__ */ jsxs5("label", { style: { ...sidebarLabelStyle, margin: 0 }, children: [
|
|
6725
|
-
"Icon Type",
|
|
6726
|
-
/* @__PURE__ */ jsxs5(
|
|
6727
|
-
"select",
|
|
6728
|
-
{
|
|
6729
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "iconType", event.target.value),
|
|
6730
|
-
style: sidebarInputStyle,
|
|
6731
|
-
value: normalizeText2(item.iconType, "badge"),
|
|
6732
|
-
children: [
|
|
6733
|
-
/* @__PURE__ */ jsx5("option", { value: "badge", children: "Badge Text" }),
|
|
6734
|
-
/* @__PURE__ */ jsx5("option", { value: "lucide", children: "Icon" })
|
|
6735
|
-
]
|
|
6736
|
-
}
|
|
6737
|
-
)
|
|
6738
|
-
] }),
|
|
6739
|
-
normalizeText2(item.iconType, "badge") === "lucide" ? /* @__PURE__ */ jsxs5("label", { style: { ...sidebarLabelStyle, margin: 0 }, children: [
|
|
6740
|
-
"Icon",
|
|
6741
|
-
/* @__PURE__ */ jsxs5(
|
|
6742
|
-
"select",
|
|
6743
|
-
{
|
|
6744
|
-
onChange: (event) => updateArrayItemField(
|
|
6745
|
-
selectedIndex ?? 0,
|
|
6746
|
-
"items",
|
|
6747
|
-
itemIndex,
|
|
6748
|
-
"iconLucide",
|
|
6749
|
-
event.target.value
|
|
6750
|
-
),
|
|
6751
|
-
style: sidebarInputStyle,
|
|
6752
|
-
value: normalizeText2(item.iconLucide),
|
|
6753
|
-
children: [
|
|
6754
|
-
/* @__PURE__ */ jsx5("option", { value: "", children: "Select an icon" }),
|
|
6755
|
-
/* @__PURE__ */ jsx5("option", { value: "ShieldCheck", children: "Shield Check" }),
|
|
6756
|
-
/* @__PURE__ */ jsx5("option", { value: "Clock", children: "Clock" }),
|
|
6757
|
-
/* @__PURE__ */ jsx5("option", { value: "Leaf", children: "Leaf" }),
|
|
6758
|
-
/* @__PURE__ */ jsx5("option", { value: "DollarSign", children: "Dollar Sign" }),
|
|
6759
|
-
/* @__PURE__ */ jsx5("option", { value: "HardHat", children: "Hard Hat" }),
|
|
6760
|
-
/* @__PURE__ */ jsx5("option", { value: "Sparkles", children: "Sparkles" }),
|
|
6761
|
-
/* @__PURE__ */ jsx5("option", { value: "TreePine", children: "Tree Pine" }),
|
|
6762
|
-
/* @__PURE__ */ jsx5("option", { value: "BadgeCheck", children: "Badge Check" }),
|
|
6763
|
-
/* @__PURE__ */ jsx5("option", { value: "CalendarClock", children: "Calendar Clock" })
|
|
6764
|
-
]
|
|
6765
|
-
}
|
|
6766
|
-
)
|
|
6767
|
-
] }) : /* @__PURE__ */ jsx5(
|
|
6768
|
-
"input",
|
|
6769
|
-
{
|
|
6770
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "icon", event.target.value),
|
|
6771
|
-
placeholder: "Badge text (e.g. 01)",
|
|
6772
|
-
style: sidebarInputStyle,
|
|
6773
|
-
type: "text",
|
|
6774
|
-
value: normalizeText2(item.icon)
|
|
6775
|
-
}
|
|
6776
|
-
),
|
|
6777
|
-
/* @__PURE__ */ jsx5(
|
|
6778
|
-
"textarea",
|
|
6779
|
-
{
|
|
6780
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
|
|
6781
|
-
placeholder: "Description",
|
|
6782
|
-
style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
|
|
6783
|
-
value: normalizeText2(item.description)
|
|
6784
|
-
}
|
|
6785
|
-
),
|
|
6786
|
-
(() => {
|
|
6787
|
-
const itemMedia = resolveMediaLibraryItemFromValue(item.media);
|
|
6788
|
-
const itemMediaID = getRelationID2(item.media);
|
|
6789
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
6790
|
-
/* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: itemMedia ? `Selected image: ${mediaLabel2(itemMedia)}` : "No item image selected." }),
|
|
6791
|
-
/* @__PURE__ */ jsx5(
|
|
6792
|
-
"button",
|
|
6793
|
-
{
|
|
6794
|
-
disabled: !itemMedia && itemMediaID === null,
|
|
6795
|
-
onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", ""),
|
|
6796
|
-
style: {
|
|
6797
|
-
borderRadius: 999,
|
|
6798
|
-
cursor: itemMedia || itemMediaID !== null ? "pointer" : "not-allowed",
|
|
6799
|
-
fontSize: 12,
|
|
6800
|
-
padding: "7px 10px"
|
|
6801
|
-
},
|
|
6802
|
-
type: "button",
|
|
6803
|
-
children: "Remove Item Image"
|
|
6804
|
-
}
|
|
6805
|
-
),
|
|
6806
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6807
|
-
"Image Height (px)",
|
|
6808
|
-
/* @__PURE__ */ jsx5(
|
|
6809
|
-
"input",
|
|
6810
|
-
{
|
|
6811
|
-
max: 600,
|
|
6812
|
-
min: 40,
|
|
6813
|
-
onChange: (event) => updateArrayItemField(
|
|
6814
|
-
selectedIndex ?? 0,
|
|
6815
|
-
"items",
|
|
6816
|
-
itemIndex,
|
|
6817
|
-
"imageHeight",
|
|
6818
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
6819
|
-
),
|
|
6820
|
-
placeholder: "120",
|
|
6821
|
-
style: sidebarInputStyle,
|
|
6822
|
-
type: "number",
|
|
6823
|
-
value: imageHeightValue
|
|
6824
|
-
}
|
|
6825
|
-
)
|
|
6826
|
-
] }),
|
|
6827
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6828
|
-
"Image Fit",
|
|
6829
|
-
/* @__PURE__ */ jsxs5(
|
|
6830
|
-
"select",
|
|
6831
|
-
{
|
|
6832
|
-
onChange: (event) => {
|
|
6833
|
-
const nextFit = event.target.value;
|
|
6834
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imageFit", nextFit);
|
|
6835
|
-
if (nextFit === "cover") {
|
|
6836
|
-
const pos = normalizeImagePosition2(item.imagePosition);
|
|
6837
|
-
if (pos === "left" || pos === "right") {
|
|
6838
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", "center");
|
|
6839
|
-
}
|
|
6840
|
-
}
|
|
6841
|
-
},
|
|
6842
|
-
style: sidebarInputStyle,
|
|
6843
|
-
value: normalizeImageFit2(item.imageFit),
|
|
6844
|
-
children: [
|
|
6845
|
-
/* @__PURE__ */ jsx5("option", { value: "cover", children: "Cover" }),
|
|
6846
|
-
/* @__PURE__ */ jsx5("option", { value: "contain", children: "Contain" })
|
|
6847
|
-
]
|
|
6848
|
-
}
|
|
6849
|
-
)
|
|
6850
|
-
] }),
|
|
6851
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6852
|
-
"Image Corners",
|
|
6853
|
-
/* @__PURE__ */ jsxs5(
|
|
6854
|
-
"select",
|
|
6855
|
-
{
|
|
6856
|
-
onChange: (event) => updateArrayItemField(
|
|
6857
|
-
selectedIndex ?? 0,
|
|
6858
|
-
"items",
|
|
6859
|
-
itemIndex,
|
|
6860
|
-
"imageCornerStyle",
|
|
6861
|
-
event.target.value
|
|
6862
|
-
),
|
|
6863
|
-
style: sidebarInputStyle,
|
|
6864
|
-
value: normalizeImageCornerStyle2(item.imageCornerStyle),
|
|
6865
|
-
children: [
|
|
6866
|
-
/* @__PURE__ */ jsx5("option", { value: "rounded", children: "Rounded" }),
|
|
6867
|
-
/* @__PURE__ */ jsx5("option", { value: "square", children: "Square" })
|
|
6868
|
-
]
|
|
6869
|
-
}
|
|
6870
|
-
)
|
|
6871
|
-
] }),
|
|
6872
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6873
|
-
"Image Position",
|
|
6874
|
-
/* @__PURE__ */ jsxs5(
|
|
6875
|
-
"select",
|
|
6876
|
-
{
|
|
6877
|
-
onChange: (event) => {
|
|
6878
|
-
const nextPosition = event.target.value;
|
|
6879
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", nextPosition);
|
|
6880
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
|
|
6881
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
|
|
6882
|
-
},
|
|
6883
|
-
style: sidebarInputStyle,
|
|
6884
|
-
value: (() => {
|
|
6885
|
-
const fit = normalizeImageFit2(item.imageFit);
|
|
6886
|
-
const pos = normalizeImagePosition2(item.imagePosition);
|
|
6887
|
-
if (fit === "cover" && (pos === "left" || pos === "right")) {
|
|
6888
|
-
return "center";
|
|
6889
|
-
}
|
|
6890
|
-
return pos;
|
|
6891
|
-
})(),
|
|
6892
|
-
children: [
|
|
6893
|
-
/* @__PURE__ */ jsx5("option", { value: "center", children: "Center" }),
|
|
6894
|
-
/* @__PURE__ */ jsx5("option", { value: "top", children: "Top" }),
|
|
6895
|
-
/* @__PURE__ */ jsx5("option", { value: "bottom", children: "Bottom" }),
|
|
6896
|
-
normalizeImageFit2(item.imageFit) !== "cover" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
6897
|
-
/* @__PURE__ */ jsx5("option", { value: "left", children: "Left" }),
|
|
6898
|
-
/* @__PURE__ */ jsx5("option", { value: "right", children: "Right" })
|
|
6899
|
-
] }) : null
|
|
6900
|
-
]
|
|
6901
|
-
}
|
|
6902
|
-
)
|
|
6903
|
-
] }),
|
|
6904
|
-
(() => {
|
|
6905
|
-
const fallbackFocus = defaultItemFocus(item.imagePosition, item.imageFit);
|
|
6906
|
-
const focusX = parsePercentNumber(item.imagePositionX, fallbackFocus.x);
|
|
6907
|
-
const focusY = parsePercentNumber(item.imagePositionY, fallbackFocus.y);
|
|
6908
|
-
const hasCustomFocus = typeof item.imagePositionX === "number" || typeof item.imagePositionX === "string" || typeof item.imagePositionY === "number" || typeof item.imagePositionY === "string";
|
|
6909
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
6910
|
-
/* @__PURE__ */ jsxs5("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
|
|
6911
|
-
"Image Focus ",
|
|
6912
|
-
hasCustomFocus ? "(custom)" : "(from Image Position)",
|
|
6913
|
-
": ",
|
|
6914
|
-
focusX,
|
|
6915
|
-
"% /",
|
|
6916
|
-
" ",
|
|
6917
|
-
focusY,
|
|
6918
|
-
"%"
|
|
6919
|
-
] }),
|
|
6920
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6921
|
-
"Focus X (%)",
|
|
6922
|
-
/* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
|
|
6923
|
-
/* @__PURE__ */ jsx5(
|
|
6924
|
-
"input",
|
|
6925
|
-
{
|
|
6926
|
-
max: 100,
|
|
6927
|
-
min: 0,
|
|
6928
|
-
onChange: (event) => updateArrayItemField(
|
|
6929
|
-
selectedIndex ?? 0,
|
|
6930
|
-
"items",
|
|
6931
|
-
itemIndex,
|
|
6932
|
-
"imagePositionX",
|
|
6933
|
-
Number(event.target.value)
|
|
6934
|
-
),
|
|
6935
|
-
type: "range",
|
|
6936
|
-
value: focusX
|
|
6937
|
-
}
|
|
6938
|
-
),
|
|
6939
|
-
/* @__PURE__ */ jsx5(
|
|
6940
|
-
"input",
|
|
6941
|
-
{
|
|
6942
|
-
max: 100,
|
|
6943
|
-
min: 0,
|
|
6944
|
-
onChange: (event) => updateArrayItemField(
|
|
6945
|
-
selectedIndex ?? 0,
|
|
6946
|
-
"items",
|
|
6947
|
-
itemIndex,
|
|
6948
|
-
"imagePositionX",
|
|
6949
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
6950
|
-
),
|
|
6951
|
-
style: sidebarInputStyle,
|
|
6952
|
-
type: "number",
|
|
6953
|
-
value: hasCustomFocus ? typeof item.imagePositionX === "number" ? item.imagePositionX : focusX : focusX
|
|
6954
|
-
}
|
|
6955
|
-
)
|
|
6956
|
-
] })
|
|
6957
|
-
] }),
|
|
6958
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6959
|
-
"Focus Y (%)",
|
|
6960
|
-
/* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
|
|
6961
|
-
/* @__PURE__ */ jsx5(
|
|
6962
|
-
"input",
|
|
6963
|
-
{
|
|
6964
|
-
max: 100,
|
|
6965
|
-
min: 0,
|
|
6966
|
-
onChange: (event) => updateArrayItemField(
|
|
6967
|
-
selectedIndex ?? 0,
|
|
6968
|
-
"items",
|
|
6969
|
-
itemIndex,
|
|
6970
|
-
"imagePositionY",
|
|
6971
|
-
Number(event.target.value)
|
|
6972
|
-
),
|
|
6973
|
-
type: "range",
|
|
6974
|
-
value: focusY
|
|
6975
|
-
}
|
|
6976
|
-
),
|
|
6977
|
-
/* @__PURE__ */ jsx5(
|
|
6978
|
-
"input",
|
|
6979
|
-
{
|
|
6980
|
-
max: 100,
|
|
6981
|
-
min: 0,
|
|
6982
|
-
onChange: (event) => updateArrayItemField(
|
|
6983
|
-
selectedIndex ?? 0,
|
|
6984
|
-
"items",
|
|
6985
|
-
itemIndex,
|
|
6986
|
-
"imagePositionY",
|
|
6987
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
6988
|
-
),
|
|
6989
|
-
style: sidebarInputStyle,
|
|
6990
|
-
type: "number",
|
|
6991
|
-
value: hasCustomFocus ? typeof item.imagePositionY === "number" ? item.imagePositionY : focusY : focusY
|
|
6992
|
-
}
|
|
6993
|
-
)
|
|
6994
|
-
] })
|
|
6995
|
-
] }),
|
|
6996
|
-
/* @__PURE__ */ jsx5(
|
|
6997
|
-
"button",
|
|
6998
|
-
{
|
|
6999
|
-
onClick: () => {
|
|
7000
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
|
|
7001
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
|
|
7002
|
-
},
|
|
7003
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7004
|
-
type: "button",
|
|
7005
|
-
children: "Reset Image Focus"
|
|
7006
|
-
}
|
|
7007
|
-
)
|
|
7008
|
-
] });
|
|
7009
|
-
})(),
|
|
7010
|
-
mediaLibraryLoading ? /* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
|
|
7011
|
-
mediaLibraryError ? /* @__PURE__ */ jsx5("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
|
|
7012
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7013
|
-
"Choose from Media Library",
|
|
7014
|
-
/* @__PURE__ */ jsxs5(
|
|
7015
|
-
"select",
|
|
7016
|
-
{
|
|
7017
|
-
onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", event.target.value),
|
|
7018
|
-
style: sidebarInputStyle,
|
|
7019
|
-
value: itemMediaID !== null ? String(itemMediaID) : "",
|
|
7020
|
-
children: [
|
|
7021
|
-
/* @__PURE__ */ jsx5("option", { value: "", children: "No image" }),
|
|
7022
|
-
mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx5("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
|
|
7023
|
-
]
|
|
7024
|
-
}
|
|
7025
|
-
)
|
|
7026
|
-
] })
|
|
7027
|
-
] });
|
|
7028
|
-
})(),
|
|
7029
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7030
|
-
"Upload Item Image",
|
|
7031
|
-
/* @__PURE__ */ jsx5(
|
|
7032
|
-
"input",
|
|
7033
|
-
{
|
|
7034
|
-
accept: "image/*",
|
|
7035
|
-
disabled: uploadingTarget !== null,
|
|
7036
|
-
onChange: (event) => {
|
|
7037
|
-
const file = event.currentTarget.files?.[0];
|
|
7038
|
-
if (file) {
|
|
7039
|
-
void uploadMediaForSelected({ field: "media", itemIndex, kind: "featureGridItem" }, file);
|
|
7040
|
-
}
|
|
7041
|
-
event.currentTarget.value = "";
|
|
7042
|
-
},
|
|
7043
|
-
style: sidebarInputStyle,
|
|
7044
|
-
type: "file"
|
|
7045
|
-
}
|
|
7046
|
-
)
|
|
7047
|
-
] }),
|
|
7048
|
-
/* @__PURE__ */ jsx5(
|
|
7049
|
-
"button",
|
|
7050
|
-
{
|
|
7051
|
-
onClick: () => removeItemFromSelected("items", itemIndex),
|
|
7052
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7053
|
-
type: "button",
|
|
7054
|
-
children: "Remove Item"
|
|
7055
|
-
}
|
|
7056
|
-
)
|
|
7057
|
-
] }) : null
|
|
7058
|
-
]
|
|
7059
|
-
},
|
|
7060
|
-
`feature-item-control-${itemIndex}`
|
|
7061
|
-
);
|
|
7062
|
-
}) })
|
|
7063
|
-
] }) : null,
|
|
7064
|
-
selectedType === "stats" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7065
|
-
/* @__PURE__ */ jsx5(
|
|
7066
|
-
"button",
|
|
7067
|
-
{
|
|
7068
|
-
onClick: () => appendItemToSelected("items", {
|
|
7069
|
-
description: "Add context for this metric.",
|
|
7070
|
-
label: "Metric",
|
|
7071
|
-
value: "00"
|
|
7072
|
-
}),
|
|
7073
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7074
|
-
type: "button",
|
|
7075
|
-
children: "Add Stat"
|
|
7076
|
-
}
|
|
7077
|
-
),
|
|
7078
|
-
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
|
|
7079
|
-
const isOpen = expandedItemIndex === itemIndex;
|
|
7080
|
-
const label = normalizeText2(item.label, "") || `Stat ${itemIndex + 1}`;
|
|
7081
|
-
return /* @__PURE__ */ jsxs5(
|
|
7082
|
-
"div",
|
|
7083
|
-
{
|
|
7084
|
-
style: {
|
|
7085
|
-
border: "1px solid rgba(13, 74, 55, 0.16)",
|
|
7086
|
-
borderRadius: 10,
|
|
7087
|
-
display: "grid",
|
|
7088
|
-
gap: 8,
|
|
7089
|
-
padding: 8
|
|
7090
|
-
},
|
|
7091
|
-
children: [
|
|
7092
|
-
/* @__PURE__ */ jsxs5(
|
|
7093
|
-
"button",
|
|
7094
|
-
{
|
|
7095
|
-
onClick: () => toggleSelectedItem(itemIndex),
|
|
7096
|
-
style: {
|
|
7097
|
-
alignItems: "center",
|
|
7098
|
-
background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
|
|
7099
|
-
border: "none",
|
|
7100
|
-
cursor: "pointer",
|
|
7101
|
-
display: "flex",
|
|
7102
|
-
fontSize: 12,
|
|
7103
|
-
fontWeight: 800,
|
|
7104
|
-
gap: 8,
|
|
7105
|
-
justifyContent: "space-between",
|
|
7106
|
-
padding: "6px 8px",
|
|
7107
|
-
textAlign: "left",
|
|
7108
|
-
width: "100%"
|
|
7109
|
-
},
|
|
7110
|
-
type: "button",
|
|
7111
|
-
children: [
|
|
7112
|
-
/* @__PURE__ */ jsx5("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
|
|
7113
|
-
/* @__PURE__ */ jsx5("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
|
|
7114
|
-
]
|
|
7115
|
-
}
|
|
7116
|
-
),
|
|
7117
|
-
isOpen ? /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 6 }, children: [
|
|
7118
|
-
/* @__PURE__ */ jsx5(
|
|
7119
|
-
"input",
|
|
7120
|
-
{
|
|
7121
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "value", event.target.value),
|
|
7122
|
-
placeholder: "Value",
|
|
7123
|
-
style: sidebarInputStyle,
|
|
7124
|
-
type: "text",
|
|
7125
|
-
value: normalizeText2(item.value)
|
|
7126
|
-
}
|
|
7127
|
-
),
|
|
7128
|
-
/* @__PURE__ */ jsx5(
|
|
7129
|
-
"input",
|
|
7130
|
-
{
|
|
7131
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
|
|
7132
|
-
placeholder: "Label",
|
|
7133
|
-
style: sidebarInputStyle,
|
|
7134
|
-
type: "text",
|
|
7135
|
-
value: normalizeText2(item.label)
|
|
7136
|
-
}
|
|
7137
|
-
),
|
|
7138
|
-
/* @__PURE__ */ jsx5(
|
|
7139
|
-
"input",
|
|
7140
|
-
{
|
|
7141
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
|
|
7142
|
-
placeholder: "Description",
|
|
7143
|
-
style: sidebarInputStyle,
|
|
7144
|
-
type: "text",
|
|
7145
|
-
value: normalizeText2(item.description)
|
|
7146
|
-
}
|
|
7147
|
-
),
|
|
7148
|
-
/* @__PURE__ */ jsx5(
|
|
7149
|
-
"button",
|
|
7150
|
-
{
|
|
7151
|
-
onClick: () => removeItemFromSelected("items", itemIndex),
|
|
7152
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7153
|
-
type: "button",
|
|
7154
|
-
children: "Remove Item"
|
|
7155
|
-
}
|
|
7156
|
-
)
|
|
7157
|
-
] }) : null
|
|
7158
|
-
]
|
|
7159
|
-
},
|
|
7160
|
-
`stats-item-control-${itemIndex}`
|
|
7161
|
-
);
|
|
7162
|
-
}) })
|
|
7163
|
-
] }) : null,
|
|
7164
|
-
selectedType === "logoWall" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7165
|
-
/* @__PURE__ */ jsx5(
|
|
7166
|
-
"button",
|
|
7167
|
-
{
|
|
7168
|
-
onClick: () => appendItemToSelected("items", {
|
|
7169
|
-
href: "",
|
|
7170
|
-
imageCornerStyle: "rounded",
|
|
7171
|
-
imageFit: "contain",
|
|
7172
|
-
imagePosition: "center",
|
|
7173
|
-
name: "Partner"
|
|
7174
|
-
}),
|
|
7175
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7176
|
-
type: "button",
|
|
7177
|
-
children: "Add Logo"
|
|
7178
|
-
}
|
|
7179
|
-
),
|
|
7180
|
-
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
|
|
7181
|
-
const isOpen = expandedItemIndex === itemIndex;
|
|
7182
|
-
const label = normalizeText2(item.name, "") || `Logo ${itemIndex + 1}`;
|
|
7183
|
-
const imageHeightValue = typeof item.imageHeight === "number" && Number.isFinite(item.imageHeight) ? item.imageHeight : "";
|
|
7184
|
-
return /* @__PURE__ */ jsxs5(
|
|
7185
|
-
"div",
|
|
7186
|
-
{
|
|
7187
|
-
style: {
|
|
7188
|
-
border: "1px solid rgba(13, 74, 55, 0.16)",
|
|
7189
|
-
borderRadius: 10,
|
|
7190
|
-
display: "grid",
|
|
7191
|
-
gap: 8,
|
|
7192
|
-
padding: 8
|
|
7193
|
-
},
|
|
7194
|
-
children: [
|
|
7195
|
-
/* @__PURE__ */ jsxs5(
|
|
7196
|
-
"button",
|
|
7197
|
-
{
|
|
7198
|
-
onClick: () => toggleSelectedItem(itemIndex),
|
|
7199
|
-
style: {
|
|
7200
|
-
alignItems: "center",
|
|
7201
|
-
background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
|
|
7202
|
-
border: "none",
|
|
7203
|
-
cursor: "pointer",
|
|
7204
|
-
display: "flex",
|
|
7205
|
-
fontSize: 12,
|
|
7206
|
-
fontWeight: 800,
|
|
7207
|
-
gap: 8,
|
|
7208
|
-
justifyContent: "space-between",
|
|
7209
|
-
padding: "6px 8px",
|
|
7210
|
-
textAlign: "left",
|
|
7211
|
-
width: "100%"
|
|
7212
|
-
},
|
|
7213
|
-
type: "button",
|
|
7214
|
-
children: [
|
|
7215
|
-
/* @__PURE__ */ jsx5("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
|
|
7216
|
-
/* @__PURE__ */ jsx5("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
|
|
7217
|
-
]
|
|
7218
|
-
}
|
|
7219
|
-
),
|
|
7220
|
-
isOpen ? /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 6 }, children: [
|
|
7221
|
-
/* @__PURE__ */ jsx5(
|
|
7222
|
-
"input",
|
|
7223
|
-
{
|
|
7224
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
|
|
7225
|
-
placeholder: "Partner Name",
|
|
7226
|
-
style: sidebarInputStyle,
|
|
7227
|
-
type: "text",
|
|
7228
|
-
value: normalizeText2(item.name)
|
|
7229
|
-
}
|
|
7230
|
-
),
|
|
7231
|
-
/* @__PURE__ */ jsx5(
|
|
7232
|
-
"input",
|
|
7233
|
-
{
|
|
7234
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "href", event.target.value),
|
|
7235
|
-
placeholder: "https://example.com",
|
|
7236
|
-
style: sidebarInputStyle,
|
|
7237
|
-
type: "text",
|
|
7238
|
-
value: normalizeText2(item.href)
|
|
7239
|
-
}
|
|
7240
|
-
),
|
|
7241
|
-
(() => {
|
|
7242
|
-
const logoMedia = resolveMediaLibraryItemFromValue(item.media);
|
|
7243
|
-
const logoMediaID = getRelationID2(item.media);
|
|
7244
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7245
|
-
/* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: logoMedia ? `Selected logo: ${mediaLabel2(logoMedia)}` : "No logo image selected." }),
|
|
7246
|
-
/* @__PURE__ */ jsx5(
|
|
7247
|
-
"button",
|
|
7248
|
-
{
|
|
7249
|
-
disabled: !logoMedia && logoMediaID === null,
|
|
7250
|
-
onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", ""),
|
|
7251
|
-
style: {
|
|
7252
|
-
borderRadius: 999,
|
|
7253
|
-
cursor: logoMedia || logoMediaID !== null ? "pointer" : "not-allowed",
|
|
7254
|
-
fontSize: 12,
|
|
7255
|
-
padding: "7px 10px"
|
|
7256
|
-
},
|
|
7257
|
-
type: "button",
|
|
7258
|
-
children: "Remove Logo Image"
|
|
7259
|
-
}
|
|
7260
|
-
),
|
|
7261
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7262
|
-
"Image Height (px)",
|
|
7263
|
-
/* @__PURE__ */ jsx5(
|
|
7264
|
-
"input",
|
|
7265
|
-
{
|
|
7266
|
-
max: 200,
|
|
7267
|
-
min: 24,
|
|
7268
|
-
onChange: (event) => updateArrayItemField(
|
|
7269
|
-
selectedIndex ?? 0,
|
|
7270
|
-
"items",
|
|
7271
|
-
itemIndex,
|
|
7272
|
-
"imageHeight",
|
|
7273
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
7274
|
-
),
|
|
7275
|
-
placeholder: "54",
|
|
7276
|
-
style: sidebarInputStyle,
|
|
7277
|
-
type: "number",
|
|
7278
|
-
value: imageHeightValue
|
|
7279
|
-
}
|
|
7280
|
-
)
|
|
7281
|
-
] }),
|
|
7282
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7283
|
-
"Image Fit",
|
|
7284
|
-
/* @__PURE__ */ jsxs5(
|
|
7285
|
-
"select",
|
|
7286
|
-
{
|
|
7287
|
-
onChange: (event) => {
|
|
7288
|
-
const nextFit = event.target.value;
|
|
7289
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imageFit", nextFit);
|
|
7290
|
-
if (nextFit === "cover") {
|
|
7291
|
-
const pos = normalizeImagePosition2(item.imagePosition);
|
|
7292
|
-
if (pos === "left" || pos === "right") {
|
|
7293
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", "center");
|
|
7294
|
-
}
|
|
7295
|
-
}
|
|
7296
|
-
},
|
|
7297
|
-
style: sidebarInputStyle,
|
|
7298
|
-
value: normalizeImageFit2(item.imageFit),
|
|
7299
|
-
children: [
|
|
7300
|
-
/* @__PURE__ */ jsx5("option", { value: "cover", children: "Cover" }),
|
|
7301
|
-
/* @__PURE__ */ jsx5("option", { value: "contain", children: "Contain" })
|
|
7302
|
-
]
|
|
7303
|
-
}
|
|
7304
|
-
)
|
|
7305
|
-
] }),
|
|
7306
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7307
|
-
"Image Corners",
|
|
7308
|
-
/* @__PURE__ */ jsxs5(
|
|
7309
|
-
"select",
|
|
7310
|
-
{
|
|
7311
|
-
onChange: (event) => updateArrayItemField(
|
|
7312
|
-
selectedIndex ?? 0,
|
|
7313
|
-
"items",
|
|
7314
|
-
itemIndex,
|
|
7315
|
-
"imageCornerStyle",
|
|
7316
|
-
event.target.value
|
|
7317
|
-
),
|
|
7318
|
-
style: sidebarInputStyle,
|
|
7319
|
-
value: normalizeImageCornerStyle2(item.imageCornerStyle),
|
|
7320
|
-
children: [
|
|
7321
|
-
/* @__PURE__ */ jsx5("option", { value: "rounded", children: "Rounded" }),
|
|
7322
|
-
/* @__PURE__ */ jsx5("option", { value: "square", children: "Square" })
|
|
7323
|
-
]
|
|
7324
|
-
}
|
|
7325
|
-
)
|
|
7326
|
-
] }),
|
|
7327
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7328
|
-
"Image Position",
|
|
7329
|
-
/* @__PURE__ */ jsxs5(
|
|
7330
|
-
"select",
|
|
7331
|
-
{
|
|
7332
|
-
onChange: (event) => {
|
|
7333
|
-
const nextPosition = event.target.value;
|
|
7334
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", nextPosition);
|
|
7335
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
|
|
7336
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
|
|
7337
|
-
},
|
|
7338
|
-
style: sidebarInputStyle,
|
|
7339
|
-
value: (() => {
|
|
7340
|
-
const fit = normalizeImageFit2(item.imageFit);
|
|
7341
|
-
const pos = normalizeImagePosition2(item.imagePosition);
|
|
7342
|
-
if (fit === "cover" && (pos === "left" || pos === "right")) {
|
|
7343
|
-
return "center";
|
|
7344
|
-
}
|
|
7345
|
-
return pos;
|
|
7346
|
-
})(),
|
|
7347
|
-
children: [
|
|
7348
|
-
/* @__PURE__ */ jsx5("option", { value: "center", children: "Center" }),
|
|
7349
|
-
/* @__PURE__ */ jsx5("option", { value: "top", children: "Top" }),
|
|
7350
|
-
/* @__PURE__ */ jsx5("option", { value: "bottom", children: "Bottom" }),
|
|
7351
|
-
normalizeImageFit2(item.imageFit) !== "cover" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7352
|
-
/* @__PURE__ */ jsx5("option", { value: "left", children: "Left" }),
|
|
7353
|
-
/* @__PURE__ */ jsx5("option", { value: "right", children: "Right" })
|
|
7354
|
-
] }) : null
|
|
7355
|
-
]
|
|
7356
|
-
}
|
|
7357
|
-
)
|
|
7358
|
-
] }),
|
|
7359
|
-
(() => {
|
|
7360
|
-
const fallbackFocus = defaultItemFocus(item.imagePosition, item.imageFit);
|
|
7361
|
-
const focusX = parsePercentNumber(item.imagePositionX, fallbackFocus.x);
|
|
7362
|
-
const focusY = parsePercentNumber(item.imagePositionY, fallbackFocus.y);
|
|
7363
|
-
const hasCustomFocus = typeof item.imagePositionX === "number" || typeof item.imagePositionX === "string" || typeof item.imagePositionY === "number" || typeof item.imagePositionY === "string";
|
|
7364
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7365
|
-
/* @__PURE__ */ jsxs5("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
|
|
7366
|
-
"Image Focus ",
|
|
7367
|
-
hasCustomFocus ? "(custom)" : "(from Image Position)",
|
|
7368
|
-
": ",
|
|
7369
|
-
focusX,
|
|
7370
|
-
"% /",
|
|
7371
|
-
" ",
|
|
7372
|
-
focusY,
|
|
7373
|
-
"%"
|
|
7374
|
-
] }),
|
|
7375
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7376
|
-
"Focus X (%)",
|
|
7377
|
-
/* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
|
|
7378
|
-
/* @__PURE__ */ jsx5(
|
|
7379
|
-
"input",
|
|
7380
|
-
{
|
|
7381
|
-
max: 100,
|
|
7382
|
-
min: 0,
|
|
7383
|
-
onChange: (event) => updateArrayItemField(
|
|
7384
|
-
selectedIndex ?? 0,
|
|
7385
|
-
"items",
|
|
7386
|
-
itemIndex,
|
|
7387
|
-
"imagePositionX",
|
|
7388
|
-
Number(event.target.value)
|
|
7389
|
-
),
|
|
7390
|
-
type: "range",
|
|
7391
|
-
value: focusX
|
|
7392
|
-
}
|
|
7393
|
-
),
|
|
7394
|
-
/* @__PURE__ */ jsx5(
|
|
7395
|
-
"input",
|
|
7396
|
-
{
|
|
7397
|
-
max: 100,
|
|
7398
|
-
min: 0,
|
|
7399
|
-
onChange: (event) => updateArrayItemField(
|
|
7400
|
-
selectedIndex ?? 0,
|
|
7401
|
-
"items",
|
|
7402
|
-
itemIndex,
|
|
7403
|
-
"imagePositionX",
|
|
7404
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
7405
|
-
),
|
|
7406
|
-
style: sidebarInputStyle,
|
|
7407
|
-
type: "number",
|
|
7408
|
-
value: hasCustomFocus ? typeof item.imagePositionX === "number" ? item.imagePositionX : focusX : focusX
|
|
7409
|
-
}
|
|
7410
|
-
)
|
|
7411
|
-
] })
|
|
7412
|
-
] }),
|
|
7413
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7414
|
-
"Focus Y (%)",
|
|
7415
|
-
/* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
|
|
7416
|
-
/* @__PURE__ */ jsx5(
|
|
7417
|
-
"input",
|
|
7418
|
-
{
|
|
7419
|
-
max: 100,
|
|
7420
|
-
min: 0,
|
|
7421
|
-
onChange: (event) => updateArrayItemField(
|
|
7422
|
-
selectedIndex ?? 0,
|
|
7423
|
-
"items",
|
|
7424
|
-
itemIndex,
|
|
7425
|
-
"imagePositionY",
|
|
7426
|
-
Number(event.target.value)
|
|
7427
|
-
),
|
|
7428
|
-
type: "range",
|
|
7429
|
-
value: focusY
|
|
7430
|
-
}
|
|
7431
|
-
),
|
|
7432
|
-
/* @__PURE__ */ jsx5(
|
|
7433
|
-
"input",
|
|
7434
|
-
{
|
|
7435
|
-
max: 100,
|
|
7436
|
-
min: 0,
|
|
7437
|
-
onChange: (event) => updateArrayItemField(
|
|
7438
|
-
selectedIndex ?? 0,
|
|
7439
|
-
"items",
|
|
7440
|
-
itemIndex,
|
|
7441
|
-
"imagePositionY",
|
|
7442
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
7443
|
-
),
|
|
7444
|
-
style: sidebarInputStyle,
|
|
7445
|
-
type: "number",
|
|
7446
|
-
value: hasCustomFocus ? typeof item.imagePositionY === "number" ? item.imagePositionY : focusY : focusY
|
|
7447
|
-
}
|
|
7448
|
-
)
|
|
7449
|
-
] })
|
|
7450
|
-
] }),
|
|
7451
|
-
/* @__PURE__ */ jsx5(
|
|
7452
|
-
"button",
|
|
7453
|
-
{
|
|
7454
|
-
onClick: () => {
|
|
7455
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
|
|
7456
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
|
|
7457
|
-
},
|
|
7458
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7459
|
-
type: "button",
|
|
7460
|
-
children: "Reset Image Focus"
|
|
7461
|
-
}
|
|
7462
|
-
)
|
|
7463
|
-
] });
|
|
7464
|
-
})(),
|
|
7465
|
-
mediaLibraryLoading ? /* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
|
|
7466
|
-
mediaLibraryError ? /* @__PURE__ */ jsx5("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
|
|
7467
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7468
|
-
"Choose from Media Library",
|
|
7469
|
-
/* @__PURE__ */ jsxs5(
|
|
7470
|
-
"select",
|
|
7471
|
-
{
|
|
7472
|
-
onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", event.target.value),
|
|
7473
|
-
style: sidebarInputStyle,
|
|
7474
|
-
value: logoMediaID !== null ? String(logoMediaID) : "",
|
|
7475
|
-
children: [
|
|
7476
|
-
/* @__PURE__ */ jsx5("option", { value: "", children: "No image" }),
|
|
7477
|
-
mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx5("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
|
|
7478
|
-
]
|
|
7479
|
-
}
|
|
7480
|
-
)
|
|
7481
|
-
] })
|
|
7482
|
-
] });
|
|
7483
|
-
})(),
|
|
7484
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7485
|
-
"Upload Logo Image",
|
|
7486
|
-
/* @__PURE__ */ jsx5(
|
|
7487
|
-
"input",
|
|
7488
|
-
{
|
|
7489
|
-
accept: "image/*",
|
|
7490
|
-
disabled: uploadingTarget !== null,
|
|
7491
|
-
onChange: (event) => {
|
|
7492
|
-
const file = event.currentTarget.files?.[0];
|
|
7493
|
-
if (file) {
|
|
7494
|
-
void uploadMediaForSelected({ field: "media", itemIndex, kind: "logoWallItem" }, file);
|
|
7495
|
-
}
|
|
7496
|
-
event.currentTarget.value = "";
|
|
7497
|
-
},
|
|
7498
|
-
style: sidebarInputStyle,
|
|
7499
|
-
type: "file"
|
|
7500
|
-
}
|
|
7501
|
-
)
|
|
7502
|
-
] }),
|
|
7503
|
-
/* @__PURE__ */ jsx5(
|
|
7504
|
-
"button",
|
|
7505
|
-
{
|
|
7506
|
-
onClick: () => removeItemFromSelected("items", itemIndex),
|
|
7507
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7508
|
-
type: "button",
|
|
7509
|
-
children: "Remove Item"
|
|
7510
|
-
}
|
|
7511
|
-
)
|
|
7512
|
-
] }) : null
|
|
7513
|
-
]
|
|
7514
|
-
},
|
|
7515
|
-
`logo-item-control-${itemIndex}`
|
|
7516
|
-
);
|
|
7517
|
-
}) })
|
|
6635
|
+
] })
|
|
7518
6636
|
] }) : null,
|
|
7519
|
-
selectedType === "beforeAfter" ? /* @__PURE__ */ jsxs5(
|
|
7520
|
-
|
|
7521
|
-
|
|
7522
|
-
|
|
7523
|
-
"select",
|
|
7524
|
-
{
|
|
7525
|
-
onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
|
|
7526
|
-
style: sidebarInputStyle,
|
|
7527
|
-
value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
|
|
7528
|
-
children: [
|
|
7529
|
-
/* @__PURE__ */ jsx5("option", { value: 1, children: "1" }),
|
|
7530
|
-
/* @__PURE__ */ jsx5("option", { value: 2, children: "2" }),
|
|
7531
|
-
/* @__PURE__ */ jsx5("option", { value: 3, children: "3" }),
|
|
7532
|
-
/* @__PURE__ */ jsx5("option", { value: 4, children: "4" })
|
|
7533
|
-
]
|
|
7534
|
-
}
|
|
7535
|
-
)
|
|
7536
|
-
] }),
|
|
7537
|
-
/* @__PURE__ */ jsx5(
|
|
7538
|
-
"button",
|
|
6637
|
+
selectedType === "beforeAfter" ? /* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6638
|
+
"Items Per Row (Desktop)",
|
|
6639
|
+
/* @__PURE__ */ jsxs5(
|
|
6640
|
+
"select",
|
|
7539
6641
|
{
|
|
7540
|
-
|
|
7541
|
-
|
|
7542
|
-
|
|
7543
|
-
|
|
7544
|
-
|
|
7545
|
-
|
|
7546
|
-
|
|
7547
|
-
|
|
7548
|
-
|
|
7549
|
-
children: "Add Before/After Pair"
|
|
6642
|
+
onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
|
|
6643
|
+
style: sidebarInputStyle,
|
|
6644
|
+
value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
|
|
6645
|
+
children: [
|
|
6646
|
+
/* @__PURE__ */ jsx5("option", { value: 1, children: "1" }),
|
|
6647
|
+
/* @__PURE__ */ jsx5("option", { value: 2, children: "2" }),
|
|
6648
|
+
/* @__PURE__ */ jsx5("option", { value: 3, children: "3" }),
|
|
6649
|
+
/* @__PURE__ */ jsx5("option", { value: 4, children: "4" })
|
|
6650
|
+
]
|
|
7550
6651
|
}
|
|
7551
|
-
)
|
|
7552
|
-
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
|
|
7553
|
-
const isOpen = expandedItemIndex === itemIndex;
|
|
7554
|
-
const label = normalizeText2(item.label, "") || `Pair ${itemIndex + 1}`;
|
|
7555
|
-
const imageHeightValue = typeof item.imageHeight === "number" && Number.isFinite(item.imageHeight) ? item.imageHeight : "";
|
|
7556
|
-
return /* @__PURE__ */ jsxs5(
|
|
7557
|
-
"div",
|
|
7558
|
-
{
|
|
7559
|
-
style: {
|
|
7560
|
-
border: "1px solid rgba(13, 74, 55, 0.16)",
|
|
7561
|
-
borderRadius: 10,
|
|
7562
|
-
display: "grid",
|
|
7563
|
-
gap: 8,
|
|
7564
|
-
padding: 8
|
|
7565
|
-
},
|
|
7566
|
-
children: [
|
|
7567
|
-
/* @__PURE__ */ jsxs5(
|
|
7568
|
-
"button",
|
|
7569
|
-
{
|
|
7570
|
-
onClick: () => toggleSelectedItem(itemIndex),
|
|
7571
|
-
style: {
|
|
7572
|
-
alignItems: "center",
|
|
7573
|
-
background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
|
|
7574
|
-
border: "none",
|
|
7575
|
-
cursor: "pointer",
|
|
7576
|
-
display: "flex",
|
|
7577
|
-
fontSize: 12,
|
|
7578
|
-
fontWeight: 800,
|
|
7579
|
-
gap: 8,
|
|
7580
|
-
justifyContent: "space-between",
|
|
7581
|
-
padding: "6px 8px",
|
|
7582
|
-
textAlign: "left",
|
|
7583
|
-
width: "100%"
|
|
7584
|
-
},
|
|
7585
|
-
type: "button",
|
|
7586
|
-
children: [
|
|
7587
|
-
/* @__PURE__ */ jsx5("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
|
|
7588
|
-
/* @__PURE__ */ jsx5("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
|
|
7589
|
-
]
|
|
7590
|
-
}
|
|
7591
|
-
),
|
|
7592
|
-
isOpen ? /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 6 }, children: [
|
|
7593
|
-
/* @__PURE__ */ jsx5(
|
|
7594
|
-
"input",
|
|
7595
|
-
{
|
|
7596
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
|
|
7597
|
-
placeholder: "Project Label",
|
|
7598
|
-
style: sidebarInputStyle,
|
|
7599
|
-
type: "text",
|
|
7600
|
-
value: normalizeText2(item.label)
|
|
7601
|
-
}
|
|
7602
|
-
),
|
|
7603
|
-
/* @__PURE__ */ jsx5(
|
|
7604
|
-
"textarea",
|
|
7605
|
-
{
|
|
7606
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
|
|
7607
|
-
placeholder: "Description",
|
|
7608
|
-
style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
|
|
7609
|
-
value: normalizeText2(item.description)
|
|
7610
|
-
}
|
|
7611
|
-
),
|
|
7612
|
-
(() => {
|
|
7613
|
-
const beforeMedia = resolveMediaLibraryItemFromValue(item.beforeMedia);
|
|
7614
|
-
const beforeMediaID = getRelationID2(item.beforeMedia);
|
|
7615
|
-
const afterMedia = resolveMediaLibraryItemFromValue(item.afterMedia);
|
|
7616
|
-
const afterMediaID = getRelationID2(item.afterMedia);
|
|
7617
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7618
|
-
/* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: beforeMedia ? `Before image: ${mediaLabel2(beforeMedia)}` : "No before image selected." }),
|
|
7619
|
-
/* @__PURE__ */ jsx5(
|
|
7620
|
-
"button",
|
|
7621
|
-
{
|
|
7622
|
-
disabled: !beforeMedia && beforeMediaID === null,
|
|
7623
|
-
onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "beforeMedia", ""),
|
|
7624
|
-
style: {
|
|
7625
|
-
borderRadius: 999,
|
|
7626
|
-
cursor: beforeMedia || beforeMediaID !== null ? "pointer" : "not-allowed",
|
|
7627
|
-
fontSize: 12,
|
|
7628
|
-
padding: "7px 10px"
|
|
7629
|
-
},
|
|
7630
|
-
type: "button",
|
|
7631
|
-
children: "Remove Before Image"
|
|
7632
|
-
}
|
|
7633
|
-
),
|
|
7634
|
-
/* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: afterMedia ? `After image: ${mediaLabel2(afterMedia)}` : "No after image selected." }),
|
|
7635
|
-
/* @__PURE__ */ jsx5(
|
|
7636
|
-
"button",
|
|
7637
|
-
{
|
|
7638
|
-
disabled: !afterMedia && afterMediaID === null,
|
|
7639
|
-
onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "afterMedia", ""),
|
|
7640
|
-
style: {
|
|
7641
|
-
borderRadius: 999,
|
|
7642
|
-
cursor: afterMedia || afterMediaID !== null ? "pointer" : "not-allowed",
|
|
7643
|
-
fontSize: 12,
|
|
7644
|
-
padding: "7px 10px"
|
|
7645
|
-
},
|
|
7646
|
-
type: "button",
|
|
7647
|
-
children: "Remove After Image"
|
|
7648
|
-
}
|
|
7649
|
-
),
|
|
7650
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7651
|
-
"Image Height (px)",
|
|
7652
|
-
/* @__PURE__ */ jsx5(
|
|
7653
|
-
"input",
|
|
7654
|
-
{
|
|
7655
|
-
max: 600,
|
|
7656
|
-
min: 60,
|
|
7657
|
-
onChange: (event) => updateArrayItemField(
|
|
7658
|
-
selectedIndex ?? 0,
|
|
7659
|
-
"items",
|
|
7660
|
-
itemIndex,
|
|
7661
|
-
"imageHeight",
|
|
7662
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
7663
|
-
),
|
|
7664
|
-
placeholder: "160",
|
|
7665
|
-
style: sidebarInputStyle,
|
|
7666
|
-
type: "number",
|
|
7667
|
-
value: imageHeightValue
|
|
7668
|
-
}
|
|
7669
|
-
)
|
|
7670
|
-
] }),
|
|
7671
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7672
|
-
"Image Fit",
|
|
7673
|
-
/* @__PURE__ */ jsxs5(
|
|
7674
|
-
"select",
|
|
7675
|
-
{
|
|
7676
|
-
onChange: (event) => {
|
|
7677
|
-
const nextFit = event.target.value;
|
|
7678
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imageFit", nextFit);
|
|
7679
|
-
if (nextFit === "cover") {
|
|
7680
|
-
const pos = normalizeImagePosition2(item.imagePosition);
|
|
7681
|
-
if (pos === "left" || pos === "right") {
|
|
7682
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", "center");
|
|
7683
|
-
}
|
|
7684
|
-
}
|
|
7685
|
-
},
|
|
7686
|
-
style: sidebarInputStyle,
|
|
7687
|
-
value: normalizeImageFit2(item.imageFit),
|
|
7688
|
-
children: [
|
|
7689
|
-
/* @__PURE__ */ jsx5("option", { value: "cover", children: "Cover" }),
|
|
7690
|
-
/* @__PURE__ */ jsx5("option", { value: "contain", children: "Contain" })
|
|
7691
|
-
]
|
|
7692
|
-
}
|
|
7693
|
-
)
|
|
7694
|
-
] }),
|
|
7695
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7696
|
-
"Image Corners",
|
|
7697
|
-
/* @__PURE__ */ jsxs5(
|
|
7698
|
-
"select",
|
|
7699
|
-
{
|
|
7700
|
-
onChange: (event) => updateArrayItemField(
|
|
7701
|
-
selectedIndex ?? 0,
|
|
7702
|
-
"items",
|
|
7703
|
-
itemIndex,
|
|
7704
|
-
"imageCornerStyle",
|
|
7705
|
-
event.target.value
|
|
7706
|
-
),
|
|
7707
|
-
style: sidebarInputStyle,
|
|
7708
|
-
value: normalizeImageCornerStyle2(item.imageCornerStyle),
|
|
7709
|
-
children: [
|
|
7710
|
-
/* @__PURE__ */ jsx5("option", { value: "rounded", children: "Rounded" }),
|
|
7711
|
-
/* @__PURE__ */ jsx5("option", { value: "square", children: "Square" })
|
|
7712
|
-
]
|
|
7713
|
-
}
|
|
7714
|
-
)
|
|
7715
|
-
] }),
|
|
7716
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7717
|
-
"Image Position",
|
|
7718
|
-
/* @__PURE__ */ jsxs5(
|
|
7719
|
-
"select",
|
|
7720
|
-
{
|
|
7721
|
-
onChange: (event) => {
|
|
7722
|
-
const nextPosition = event.target.value;
|
|
7723
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", nextPosition);
|
|
7724
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
|
|
7725
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
|
|
7726
|
-
},
|
|
7727
|
-
style: sidebarInputStyle,
|
|
7728
|
-
value: (() => {
|
|
7729
|
-
const fit = normalizeImageFit2(item.imageFit);
|
|
7730
|
-
const pos = normalizeImagePosition2(item.imagePosition);
|
|
7731
|
-
if (fit === "cover" && (pos === "left" || pos === "right")) {
|
|
7732
|
-
return "center";
|
|
7733
|
-
}
|
|
7734
|
-
return pos;
|
|
7735
|
-
})(),
|
|
7736
|
-
children: [
|
|
7737
|
-
/* @__PURE__ */ jsx5("option", { value: "center", children: "Center" }),
|
|
7738
|
-
/* @__PURE__ */ jsx5("option", { value: "top", children: "Top" }),
|
|
7739
|
-
/* @__PURE__ */ jsx5("option", { value: "bottom", children: "Bottom" }),
|
|
7740
|
-
normalizeImageFit2(item.imageFit) !== "cover" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7741
|
-
/* @__PURE__ */ jsx5("option", { value: "left", children: "Left" }),
|
|
7742
|
-
/* @__PURE__ */ jsx5("option", { value: "right", children: "Right" })
|
|
7743
|
-
] }) : null
|
|
7744
|
-
]
|
|
7745
|
-
}
|
|
7746
|
-
)
|
|
7747
|
-
] }),
|
|
7748
|
-
(() => {
|
|
7749
|
-
const fallbackFocus = defaultItemFocus(item.imagePosition, item.imageFit);
|
|
7750
|
-
const focusX = parsePercentNumber(item.imagePositionX, fallbackFocus.x);
|
|
7751
|
-
const focusY = parsePercentNumber(item.imagePositionY, fallbackFocus.y);
|
|
7752
|
-
const hasCustomFocus = typeof item.imagePositionX === "number" || typeof item.imagePositionX === "string" || typeof item.imagePositionY === "number" || typeof item.imagePositionY === "string";
|
|
7753
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7754
|
-
/* @__PURE__ */ jsxs5("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
|
|
7755
|
-
"Image Focus ",
|
|
7756
|
-
hasCustomFocus ? "(custom)" : "(from Image Position)",
|
|
7757
|
-
": ",
|
|
7758
|
-
focusX,
|
|
7759
|
-
"% /",
|
|
7760
|
-
" ",
|
|
7761
|
-
focusY,
|
|
7762
|
-
"%"
|
|
7763
|
-
] }),
|
|
7764
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7765
|
-
"Focus X (%)",
|
|
7766
|
-
/* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
|
|
7767
|
-
/* @__PURE__ */ jsx5(
|
|
7768
|
-
"input",
|
|
7769
|
-
{
|
|
7770
|
-
max: 100,
|
|
7771
|
-
min: 0,
|
|
7772
|
-
onChange: (event) => updateArrayItemField(
|
|
7773
|
-
selectedIndex ?? 0,
|
|
7774
|
-
"items",
|
|
7775
|
-
itemIndex,
|
|
7776
|
-
"imagePositionX",
|
|
7777
|
-
Number(event.target.value)
|
|
7778
|
-
),
|
|
7779
|
-
type: "range",
|
|
7780
|
-
value: focusX
|
|
7781
|
-
}
|
|
7782
|
-
),
|
|
7783
|
-
/* @__PURE__ */ jsx5(
|
|
7784
|
-
"input",
|
|
7785
|
-
{
|
|
7786
|
-
max: 100,
|
|
7787
|
-
min: 0,
|
|
7788
|
-
onChange: (event) => updateArrayItemField(
|
|
7789
|
-
selectedIndex ?? 0,
|
|
7790
|
-
"items",
|
|
7791
|
-
itemIndex,
|
|
7792
|
-
"imagePositionX",
|
|
7793
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
7794
|
-
),
|
|
7795
|
-
style: sidebarInputStyle,
|
|
7796
|
-
type: "number",
|
|
7797
|
-
value: hasCustomFocus ? typeof item.imagePositionX === "number" ? item.imagePositionX : focusX : focusX
|
|
7798
|
-
}
|
|
7799
|
-
)
|
|
7800
|
-
] })
|
|
7801
|
-
] }),
|
|
7802
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7803
|
-
"Focus Y (%)",
|
|
7804
|
-
/* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
|
|
7805
|
-
/* @__PURE__ */ jsx5(
|
|
7806
|
-
"input",
|
|
7807
|
-
{
|
|
7808
|
-
max: 100,
|
|
7809
|
-
min: 0,
|
|
7810
|
-
onChange: (event) => updateArrayItemField(
|
|
7811
|
-
selectedIndex ?? 0,
|
|
7812
|
-
"items",
|
|
7813
|
-
itemIndex,
|
|
7814
|
-
"imagePositionY",
|
|
7815
|
-
Number(event.target.value)
|
|
7816
|
-
),
|
|
7817
|
-
type: "range",
|
|
7818
|
-
value: focusY
|
|
7819
|
-
}
|
|
7820
|
-
),
|
|
7821
|
-
/* @__PURE__ */ jsx5(
|
|
7822
|
-
"input",
|
|
7823
|
-
{
|
|
7824
|
-
max: 100,
|
|
7825
|
-
min: 0,
|
|
7826
|
-
onChange: (event) => updateArrayItemField(
|
|
7827
|
-
selectedIndex ?? 0,
|
|
7828
|
-
"items",
|
|
7829
|
-
itemIndex,
|
|
7830
|
-
"imagePositionY",
|
|
7831
|
-
event.target.value === "" ? null : Number(event.target.value)
|
|
7832
|
-
),
|
|
7833
|
-
style: sidebarInputStyle,
|
|
7834
|
-
type: "number",
|
|
7835
|
-
value: hasCustomFocus ? typeof item.imagePositionY === "number" ? item.imagePositionY : focusY : focusY
|
|
7836
|
-
}
|
|
7837
|
-
)
|
|
7838
|
-
] })
|
|
7839
|
-
] }),
|
|
7840
|
-
/* @__PURE__ */ jsx5(
|
|
7841
|
-
"button",
|
|
7842
|
-
{
|
|
7843
|
-
onClick: () => {
|
|
7844
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
|
|
7845
|
-
updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
|
|
7846
|
-
},
|
|
7847
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7848
|
-
type: "button",
|
|
7849
|
-
children: "Reset Image Focus"
|
|
7850
|
-
}
|
|
7851
|
-
)
|
|
7852
|
-
] });
|
|
7853
|
-
})(),
|
|
7854
|
-
mediaLibraryLoading ? /* @__PURE__ */ jsx5("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
|
|
7855
|
-
mediaLibraryError ? /* @__PURE__ */ jsx5("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
|
|
7856
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7857
|
-
"Choose Before Image",
|
|
7858
|
-
/* @__PURE__ */ jsxs5(
|
|
7859
|
-
"select",
|
|
7860
|
-
{
|
|
7861
|
-
onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "beforeMedia", event.target.value),
|
|
7862
|
-
style: sidebarInputStyle,
|
|
7863
|
-
value: beforeMediaID !== null ? String(beforeMediaID) : "",
|
|
7864
|
-
children: [
|
|
7865
|
-
/* @__PURE__ */ jsx5("option", { value: "", children: "No image" }),
|
|
7866
|
-
mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx5("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
|
|
7867
|
-
]
|
|
7868
|
-
}
|
|
7869
|
-
)
|
|
7870
|
-
] }),
|
|
7871
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7872
|
-
"Upload Before Image",
|
|
7873
|
-
/* @__PURE__ */ jsx5(
|
|
7874
|
-
"input",
|
|
7875
|
-
{
|
|
7876
|
-
accept: "image/*",
|
|
7877
|
-
disabled: uploadingTarget !== null,
|
|
7878
|
-
onChange: (event) => {
|
|
7879
|
-
const file = event.currentTarget.files?.[0];
|
|
7880
|
-
if (file) {
|
|
7881
|
-
void uploadMediaForSelected(
|
|
7882
|
-
{ field: "beforeMedia", itemIndex, kind: "beforeAfterItem" },
|
|
7883
|
-
file
|
|
7884
|
-
);
|
|
7885
|
-
}
|
|
7886
|
-
event.currentTarget.value = "";
|
|
7887
|
-
},
|
|
7888
|
-
style: sidebarInputStyle,
|
|
7889
|
-
type: "file"
|
|
7890
|
-
}
|
|
7891
|
-
)
|
|
7892
|
-
] }),
|
|
7893
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7894
|
-
"Choose After Image",
|
|
7895
|
-
/* @__PURE__ */ jsxs5(
|
|
7896
|
-
"select",
|
|
7897
|
-
{
|
|
7898
|
-
onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "afterMedia", event.target.value),
|
|
7899
|
-
style: sidebarInputStyle,
|
|
7900
|
-
value: afterMediaID !== null ? String(afterMediaID) : "",
|
|
7901
|
-
children: [
|
|
7902
|
-
/* @__PURE__ */ jsx5("option", { value: "", children: "No image" }),
|
|
7903
|
-
mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx5("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
|
|
7904
|
-
]
|
|
7905
|
-
}
|
|
7906
|
-
)
|
|
7907
|
-
] }),
|
|
7908
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
7909
|
-
"Upload After Image",
|
|
7910
|
-
/* @__PURE__ */ jsx5(
|
|
7911
|
-
"input",
|
|
7912
|
-
{
|
|
7913
|
-
accept: "image/*",
|
|
7914
|
-
disabled: uploadingTarget !== null,
|
|
7915
|
-
onChange: (event) => {
|
|
7916
|
-
const file = event.currentTarget.files?.[0];
|
|
7917
|
-
if (file) {
|
|
7918
|
-
void uploadMediaForSelected(
|
|
7919
|
-
{ field: "afterMedia", itemIndex, kind: "beforeAfterItem" },
|
|
7920
|
-
file
|
|
7921
|
-
);
|
|
7922
|
-
}
|
|
7923
|
-
event.currentTarget.value = "";
|
|
7924
|
-
},
|
|
7925
|
-
style: sidebarInputStyle,
|
|
7926
|
-
type: "file"
|
|
7927
|
-
}
|
|
7928
|
-
)
|
|
7929
|
-
] })
|
|
7930
|
-
] });
|
|
7931
|
-
})(),
|
|
7932
|
-
/* @__PURE__ */ jsx5(
|
|
7933
|
-
"button",
|
|
7934
|
-
{
|
|
7935
|
-
onClick: () => removeItemFromSelected("items", itemIndex),
|
|
7936
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
7937
|
-
type: "button",
|
|
7938
|
-
children: "Remove Item"
|
|
7939
|
-
}
|
|
7940
|
-
)
|
|
7941
|
-
] }) : null
|
|
7942
|
-
]
|
|
7943
|
-
},
|
|
7944
|
-
`before-after-item-control-${itemIndex}`
|
|
7945
|
-
);
|
|
7946
|
-
}) })
|
|
6652
|
+
)
|
|
7947
6653
|
] }) : null,
|
|
7948
6654
|
selectedType === "cta" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
7949
6655
|
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
@@ -8137,191 +6843,81 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
8137
6843
|
}
|
|
8138
6844
|
)
|
|
8139
6845
|
] }) : null,
|
|
8140
|
-
selectedType === "
|
|
8141
|
-
|
|
6846
|
+
selectedType === "testimonials" ? /* @__PURE__ */ jsx5(Fragment3, { children: (() => {
|
|
6847
|
+
const visibleCountValue = Math.max(
|
|
6848
|
+
1,
|
|
6849
|
+
Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
|
|
6850
|
+
);
|
|
6851
|
+
const rotateIntervalValue = Math.max(
|
|
6852
|
+
2,
|
|
6853
|
+
Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
|
|
6854
|
+
);
|
|
6855
|
+
const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
|
|
6856
|
+
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
6857
|
+
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6858
|
+
"Visible At Once",
|
|
6859
|
+
/* @__PURE__ */ jsx5(
|
|
6860
|
+
"input",
|
|
6861
|
+
{
|
|
6862
|
+
max: 6,
|
|
6863
|
+
min: 1,
|
|
6864
|
+
onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
|
|
6865
|
+
style: sidebarInputStyle,
|
|
6866
|
+
type: "number",
|
|
6867
|
+
value: visibleCountValue
|
|
6868
|
+
}
|
|
6869
|
+
)
|
|
6870
|
+
] }),
|
|
6871
|
+
/* @__PURE__ */ jsxs5("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
|
|
6872
|
+
/* @__PURE__ */ jsx5(
|
|
6873
|
+
"input",
|
|
6874
|
+
{
|
|
6875
|
+
checked: autoRotateValue,
|
|
6876
|
+
onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
|
|
6877
|
+
type: "checkbox"
|
|
6878
|
+
}
|
|
6879
|
+
),
|
|
6880
|
+
"Auto Rotate"
|
|
6881
|
+
] }),
|
|
6882
|
+
autoRotateValue ? /* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
6883
|
+
"Rotate Interval (seconds)",
|
|
6884
|
+
/* @__PURE__ */ jsx5(
|
|
6885
|
+
"input",
|
|
6886
|
+
{
|
|
6887
|
+
max: 30,
|
|
6888
|
+
min: 2,
|
|
6889
|
+
onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
|
|
6890
|
+
style: sidebarInputStyle,
|
|
6891
|
+
type: "number",
|
|
6892
|
+
value: rotateIntervalValue
|
|
6893
|
+
}
|
|
6894
|
+
)
|
|
6895
|
+
] }) : null
|
|
6896
|
+
] });
|
|
6897
|
+
})() }) : null,
|
|
6898
|
+
isArrayItemBlockSelected ? /* @__PURE__ */ jsx5(
|
|
6899
|
+
ArrayItemsEditor,
|
|
8142
6900
|
{
|
|
8143
|
-
|
|
8144
|
-
|
|
8145
|
-
|
|
8146
|
-
|
|
8147
|
-
|
|
8148
|
-
|
|
8149
|
-
|
|
6901
|
+
blockType: selectedType,
|
|
6902
|
+
expandedItemIndex,
|
|
6903
|
+
isUploadingItemMedia: isSelectedItemMediaUploading,
|
|
6904
|
+
items: selectedItems,
|
|
6905
|
+
mediaLibrary,
|
|
6906
|
+
mediaLibraryError,
|
|
6907
|
+
mediaLibraryLoading,
|
|
6908
|
+
mode: "advanced",
|
|
6909
|
+
onAddItem: appendDefaultItemToSelected,
|
|
6910
|
+
onRemoveItem: (itemIndex) => removeItemFromSelected("items", itemIndex),
|
|
6911
|
+
onSetItemMediaFromLibrary: setSelectedItemMediaFieldFromLibrary,
|
|
6912
|
+
onToggleItem: toggleSelectedItem,
|
|
6913
|
+
onUpdateItemField: (itemIndex, fieldName, value) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, fieldName, value),
|
|
6914
|
+
onUpdateItemSetting: (itemIndex, path, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, path, value),
|
|
6915
|
+
onUploadItemMedia: uploadItemMediaFromV2,
|
|
6916
|
+
searchQuery: "",
|
|
6917
|
+
showInlineCopyFields: true,
|
|
6918
|
+
uploadDisabled: uploadingTarget !== null
|
|
8150
6919
|
}
|
|
8151
|
-
) : null
|
|
8152
|
-
selectedType === "testimonials" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
8153
|
-
(() => {
|
|
8154
|
-
const visibleCountValue = Math.max(
|
|
8155
|
-
1,
|
|
8156
|
-
Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
|
|
8157
|
-
);
|
|
8158
|
-
const rotateIntervalValue = Math.max(
|
|
8159
|
-
2,
|
|
8160
|
-
Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
|
|
8161
|
-
);
|
|
8162
|
-
const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
|
|
8163
|
-
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
8164
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
8165
|
-
"Visible At Once",
|
|
8166
|
-
/* @__PURE__ */ jsx5(
|
|
8167
|
-
"input",
|
|
8168
|
-
{
|
|
8169
|
-
max: 6,
|
|
8170
|
-
min: 1,
|
|
8171
|
-
onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
|
|
8172
|
-
style: sidebarInputStyle,
|
|
8173
|
-
type: "number",
|
|
8174
|
-
value: visibleCountValue
|
|
8175
|
-
}
|
|
8176
|
-
)
|
|
8177
|
-
] }),
|
|
8178
|
-
/* @__PURE__ */ jsxs5("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
|
|
8179
|
-
/* @__PURE__ */ jsx5(
|
|
8180
|
-
"input",
|
|
8181
|
-
{
|
|
8182
|
-
checked: autoRotateValue,
|
|
8183
|
-
onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
|
|
8184
|
-
type: "checkbox"
|
|
8185
|
-
}
|
|
8186
|
-
),
|
|
8187
|
-
"Auto Rotate"
|
|
8188
|
-
] }),
|
|
8189
|
-
autoRotateValue ? /* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
8190
|
-
"Rotate Interval (seconds)",
|
|
8191
|
-
/* @__PURE__ */ jsx5(
|
|
8192
|
-
"input",
|
|
8193
|
-
{
|
|
8194
|
-
max: 30,
|
|
8195
|
-
min: 2,
|
|
8196
|
-
onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
|
|
8197
|
-
style: sidebarInputStyle,
|
|
8198
|
-
type: "number",
|
|
8199
|
-
value: rotateIntervalValue
|
|
8200
|
-
}
|
|
8201
|
-
)
|
|
8202
|
-
] }) : null
|
|
8203
|
-
] });
|
|
8204
|
-
})(),
|
|
8205
|
-
/* @__PURE__ */ jsx5(
|
|
8206
|
-
"button",
|
|
8207
|
-
{
|
|
8208
|
-
onClick: () => appendItemToSelected("items", {
|
|
8209
|
-
location: "City, ST",
|
|
8210
|
-
name: "Customer Name",
|
|
8211
|
-
quote: "Add testimonial text.",
|
|
8212
|
-
rating: 5
|
|
8213
|
-
}),
|
|
8214
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
8215
|
-
type: "button",
|
|
8216
|
-
children: "Add Testimonial"
|
|
8217
|
-
}
|
|
8218
|
-
),
|
|
8219
|
-
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
|
|
8220
|
-
const isOpen = expandedItemIndex === itemIndex;
|
|
8221
|
-
const label = normalizeText2(item.name, "") || `Testimonial ${itemIndex + 1}`;
|
|
8222
|
-
const ratingValue = parseTestimonialRating(item.rating, 5);
|
|
8223
|
-
return /* @__PURE__ */ jsxs5(
|
|
8224
|
-
"div",
|
|
8225
|
-
{
|
|
8226
|
-
style: {
|
|
8227
|
-
border: "1px solid rgba(13, 74, 55, 0.16)",
|
|
8228
|
-
borderRadius: 10,
|
|
8229
|
-
display: "grid",
|
|
8230
|
-
gap: 8,
|
|
8231
|
-
padding: 8
|
|
8232
|
-
},
|
|
8233
|
-
children: [
|
|
8234
|
-
/* @__PURE__ */ jsxs5(
|
|
8235
|
-
"button",
|
|
8236
|
-
{
|
|
8237
|
-
onClick: () => toggleSelectedItem(itemIndex),
|
|
8238
|
-
style: {
|
|
8239
|
-
alignItems: "center",
|
|
8240
|
-
background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
|
|
8241
|
-
border: "none",
|
|
8242
|
-
cursor: "pointer",
|
|
8243
|
-
display: "flex",
|
|
8244
|
-
fontSize: 12,
|
|
8245
|
-
fontWeight: 800,
|
|
8246
|
-
gap: 8,
|
|
8247
|
-
justifyContent: "space-between",
|
|
8248
|
-
padding: "6px 8px",
|
|
8249
|
-
textAlign: "left",
|
|
8250
|
-
width: "100%"
|
|
8251
|
-
},
|
|
8252
|
-
type: "button",
|
|
8253
|
-
children: [
|
|
8254
|
-
/* @__PURE__ */ jsx5("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
|
|
8255
|
-
/* @__PURE__ */ jsx5("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
|
|
8256
|
-
]
|
|
8257
|
-
}
|
|
8258
|
-
),
|
|
8259
|
-
isOpen ? /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 6 }, children: [
|
|
8260
|
-
/* @__PURE__ */ jsx5(
|
|
8261
|
-
"textarea",
|
|
8262
|
-
{
|
|
8263
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "quote", event.target.value),
|
|
8264
|
-
placeholder: "Customer quote",
|
|
8265
|
-
style: { ...sidebarInputStyle, minHeight: 110, resize: "vertical" },
|
|
8266
|
-
value: normalizeText2(item.quote)
|
|
8267
|
-
}
|
|
8268
|
-
),
|
|
8269
|
-
/* @__PURE__ */ jsx5(
|
|
8270
|
-
"input",
|
|
8271
|
-
{
|
|
8272
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
|
|
8273
|
-
placeholder: "Customer name",
|
|
8274
|
-
style: sidebarInputStyle,
|
|
8275
|
-
type: "text",
|
|
8276
|
-
value: normalizeText2(item.name)
|
|
8277
|
-
}
|
|
8278
|
-
),
|
|
8279
|
-
/* @__PURE__ */ jsx5(
|
|
8280
|
-
"input",
|
|
8281
|
-
{
|
|
8282
|
-
onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "location", event.target.value),
|
|
8283
|
-
placeholder: "Location",
|
|
8284
|
-
style: sidebarInputStyle,
|
|
8285
|
-
type: "text",
|
|
8286
|
-
value: normalizeText2(item.location)
|
|
8287
|
-
}
|
|
8288
|
-
),
|
|
8289
|
-
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
8290
|
-
"Stars (1-5)",
|
|
8291
|
-
/* @__PURE__ */ jsx5(
|
|
8292
|
-
"input",
|
|
8293
|
-
{
|
|
8294
|
-
max: 5,
|
|
8295
|
-
min: 1,
|
|
8296
|
-
onChange: (event) => updateArrayItemField(
|
|
8297
|
-
selectedIndex ?? 0,
|
|
8298
|
-
"items",
|
|
8299
|
-
itemIndex,
|
|
8300
|
-
"rating",
|
|
8301
|
-
Number(event.target.value)
|
|
8302
|
-
),
|
|
8303
|
-
style: sidebarInputStyle,
|
|
8304
|
-
type: "number",
|
|
8305
|
-
value: ratingValue
|
|
8306
|
-
}
|
|
8307
|
-
)
|
|
8308
|
-
] }),
|
|
8309
|
-
/* @__PURE__ */ jsx5(
|
|
8310
|
-
"button",
|
|
8311
|
-
{
|
|
8312
|
-
onClick: () => removeItemFromSelected("items", itemIndex),
|
|
8313
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
8314
|
-
type: "button",
|
|
8315
|
-
children: "Remove Testimonial"
|
|
8316
|
-
}
|
|
8317
|
-
)
|
|
8318
|
-
] }) : null
|
|
8319
|
-
]
|
|
8320
|
-
},
|
|
8321
|
-
`testimonial-item-control-${itemIndex}`
|
|
8322
|
-
);
|
|
8323
|
-
}) })
|
|
8324
|
-
] }) : null
|
|
6920
|
+
) : null
|
|
8325
6921
|
] }),
|
|
8326
6922
|
/* @__PURE__ */ jsxs5("label", { style: sidebarLabelStyle, children: [
|
|
8327
6923
|
"Upload Alt Text",
|