@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260306085544 → 0.8.1-dev.20260318114337
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +27 -1
- package/dist/index.d.ts +27 -1
- package/dist/index.js +809 -0
- package/dist/index.mjs +808 -0
- package/package.json +50 -5
package/dist/index.js
CHANGED
|
@@ -33,6 +33,7 @@ __export(index_exports, {
|
|
|
33
33
|
DataList: () => DataList_default,
|
|
34
34
|
InputControl: () => InputControl_default,
|
|
35
35
|
InputControlType: () => InputControlType_default,
|
|
36
|
+
PageBodyRenderer: () => PageBodyRenderer_default,
|
|
36
37
|
ViewControl: () => ViewControl_default,
|
|
37
38
|
ViewControlTypes: () => ViewControlTypes_default
|
|
38
39
|
});
|
|
@@ -2038,6 +2039,7 @@ var Icon_default = Icon;
|
|
|
2038
2039
|
|
|
2039
2040
|
// src/FormReducer.tsx
|
|
2040
2041
|
var FORM_INPUT_UPDATE = "FORM_INPUT_UPDATE";
|
|
2042
|
+
var FORM_INITIAL_UPDATE = "FORM_INITIAL_UPDATE";
|
|
2041
2043
|
function setNestedProperty(obj, path, value) {
|
|
2042
2044
|
if (path.includes(".")) {
|
|
2043
2045
|
const keys = path.split(".");
|
|
@@ -2068,6 +2070,11 @@ function FormReducer(state, action) {
|
|
|
2068
2070
|
),
|
|
2069
2071
|
lastPropertyChanged: action.name.toString()
|
|
2070
2072
|
};
|
|
2073
|
+
case FORM_INITIAL_UPDATE:
|
|
2074
|
+
return {
|
|
2075
|
+
inputValues: { ...action.values },
|
|
2076
|
+
lastPropertyChanged: action.name?.toString() || ""
|
|
2077
|
+
};
|
|
2071
2078
|
default:
|
|
2072
2079
|
return state;
|
|
2073
2080
|
}
|
|
@@ -2526,11 +2533,813 @@ var DataList = (props) => {
|
|
|
2526
2533
|
] });
|
|
2527
2534
|
};
|
|
2528
2535
|
var DataList_default = DataList;
|
|
2536
|
+
|
|
2537
|
+
// src/components/pageRenderingEngine/PageBodyRenderer.tsx
|
|
2538
|
+
var import_react49 = __toESM(require("react"));
|
|
2539
|
+
|
|
2540
|
+
// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
|
|
2541
|
+
var import_react37 = __toESM(require("react"));
|
|
2542
|
+
|
|
2543
|
+
// src/components/pageRenderingEngine/nodes/TextNode.tsx
|
|
2544
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2545
|
+
var TextNode = (props) => {
|
|
2546
|
+
const NodeTypes2 = {
|
|
2547
|
+
["text"]: TextNode
|
|
2548
|
+
};
|
|
2549
|
+
function cssStringToJson(cssString) {
|
|
2550
|
+
const styleObject = {};
|
|
2551
|
+
const matches = cssString.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
|
|
2552
|
+
if (matches && matches.length === 3) {
|
|
2553
|
+
const property = matches[1].trim();
|
|
2554
|
+
const value = matches[2].trim();
|
|
2555
|
+
{
|
|
2556
|
+
}
|
|
2557
|
+
styleObject[property] = value;
|
|
2558
|
+
}
|
|
2559
|
+
return styleObject;
|
|
2560
|
+
}
|
|
2561
|
+
const Formats = ["", "font-semibold"];
|
|
2562
|
+
const styles = cssStringToJson(props.node.style);
|
|
2563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { ...styles }, className: props.node.format < Formats.length ? Formats[props.node.format] : "", children: props.node.text });
|
|
2564
|
+
};
|
|
2565
|
+
var TextNode_default = TextNode;
|
|
2566
|
+
|
|
2567
|
+
// src/components/pageRenderingEngine/nodes/LineBreakNode.tsx
|
|
2568
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2569
|
+
var LineBreakNode = (props) => {
|
|
2570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "py-0.5 lg:py-1.5" });
|
|
2571
|
+
};
|
|
2572
|
+
var LineBreakNode_default = LineBreakNode;
|
|
2573
|
+
|
|
2574
|
+
// src/components/pageRenderingEngine/nodes/LinkNode.tsx
|
|
2575
|
+
var import_react36 = __toESM(require("react"));
|
|
2576
|
+
var import_link2 = __toESM(require("next/link"));
|
|
2577
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2578
|
+
var LinkNode = (props) => {
|
|
2579
|
+
const NodeTypes2 = {
|
|
2580
|
+
["text"]: TextNode_default
|
|
2581
|
+
};
|
|
2582
|
+
{
|
|
2583
|
+
}
|
|
2584
|
+
let formatClasses = props.node.cssClass || "";
|
|
2585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_link2.default, { className: formatClasses, href: props.node.url, title: props.node.title, children: [
|
|
2586
|
+
props.node.children && props.node.children.map((node, index) => {
|
|
2587
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react36.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectedNode, { node }) }, index);
|
|
2589
|
+
}),
|
|
2590
|
+
props.node.children.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("br", {})
|
|
2591
|
+
] });
|
|
2592
|
+
};
|
|
2593
|
+
var LinkNode_default = LinkNode;
|
|
2594
|
+
|
|
2595
|
+
// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
|
|
2596
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2597
|
+
var ParagraphNode = (props) => {
|
|
2598
|
+
const NodeTypes2 = {
|
|
2599
|
+
["text"]: TextNode_default,
|
|
2600
|
+
["linebreak"]: LineBreakNode_default,
|
|
2601
|
+
["link"]: LinkNode_default
|
|
2602
|
+
};
|
|
2603
|
+
const getNode = () => {
|
|
2604
|
+
};
|
|
2605
|
+
const FormatClass = {
|
|
2606
|
+
"center": "text-center"
|
|
2607
|
+
};
|
|
2608
|
+
{
|
|
2609
|
+
}
|
|
2610
|
+
let formatClasses = FormatClass[props.node.format] || "";
|
|
2611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "my-1 " + formatClasses, children: [
|
|
2612
|
+
props.node.children && props.node.children.map((node, index) => {
|
|
2613
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react37.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectedNode, { node }) }, index);
|
|
2615
|
+
}),
|
|
2616
|
+
props.node.children.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "py-0.5 lg:py-1.5" })
|
|
2617
|
+
] });
|
|
2618
|
+
};
|
|
2619
|
+
var ParagraphNode_default = ParagraphNode;
|
|
2620
|
+
|
|
2621
|
+
// src/components/pageRenderingEngine/nodes/HeadingNode.tsx
|
|
2622
|
+
var import_react38 = __toESM(require("react"));
|
|
2623
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2624
|
+
var HeadingNode = (props) => {
|
|
2625
|
+
const NodeTypes2 = {
|
|
2626
|
+
["text"]: TextNode_default,
|
|
2627
|
+
["link"]: LinkNode_default
|
|
2628
|
+
};
|
|
2629
|
+
const HeadingTag = `${props.node.tag}`;
|
|
2630
|
+
const FormatClass = {
|
|
2631
|
+
"center": "text-center"
|
|
2632
|
+
};
|
|
2633
|
+
{
|
|
2634
|
+
}
|
|
2635
|
+
let formatClasses = FormatClass[props.node.format] || "";
|
|
2636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: import_react38.default.createElement(
|
|
2637
|
+
HeadingTag,
|
|
2638
|
+
{ className: formatClasses },
|
|
2639
|
+
props.node.children && props.node.children.map((childNode, index) => {
|
|
2640
|
+
const SelectedNode = NodeTypes2[childNode.type];
|
|
2641
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react38.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectedNode, { node: childNode }) }, index);
|
|
2642
|
+
})
|
|
2643
|
+
) });
|
|
2644
|
+
};
|
|
2645
|
+
var HeadingNode_default = HeadingNode;
|
|
2646
|
+
|
|
2647
|
+
// src/components/pageRenderingEngine/nodes/ListNode.tsx
|
|
2648
|
+
var import_react40 = __toESM(require("react"));
|
|
2649
|
+
|
|
2650
|
+
// src/components/pageRenderingEngine/nodes/ListItemNode.tsx
|
|
2651
|
+
var import_react39 = __toESM(require("react"));
|
|
2652
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2653
|
+
var ListItemNode = (props) => {
|
|
2654
|
+
const NodeTypes2 = {
|
|
2655
|
+
["text"]: TextNode_default,
|
|
2656
|
+
["linebreak"]: LineBreakNode_default,
|
|
2657
|
+
["link"]: LinkNode_default
|
|
2658
|
+
};
|
|
2659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2660
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react39.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectedNode, { node }) }, index);
|
|
2662
|
+
}) });
|
|
2663
|
+
};
|
|
2664
|
+
var ListItemNode_default = ListItemNode;
|
|
2665
|
+
|
|
2666
|
+
// src/components/pageRenderingEngine/nodes/ListNode.tsx
|
|
2667
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2668
|
+
var ListNode = (props) => {
|
|
2669
|
+
const NodeTypes2 = {
|
|
2670
|
+
listitem: ListItemNode_default
|
|
2671
|
+
};
|
|
2672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react40.default.Fragment, { children: [
|
|
2673
|
+
props.node.listType == "bullet" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2674
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2675
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react40.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectedNode, { node }) }, index);
|
|
2676
|
+
}) }),
|
|
2677
|
+
props.node.listType == "number" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ol", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2678
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react40.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectedNode, { node }) }, index);
|
|
2680
|
+
}) })
|
|
2681
|
+
] });
|
|
2682
|
+
};
|
|
2683
|
+
var ListNode_default = ListNode;
|
|
2684
|
+
|
|
2685
|
+
// src/components/pageRenderingEngine/nodes/QuoteNode.tsx
|
|
2686
|
+
var import_react41 = __toESM(require("react"));
|
|
2687
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2688
|
+
var QuoteNode = (props) => {
|
|
2689
|
+
const NodeTypes2 = {
|
|
2690
|
+
["text"]: TextNode_default,
|
|
2691
|
+
["linebreak"]: LineBreakNode_default,
|
|
2692
|
+
["link"]: LinkNode_default
|
|
2693
|
+
};
|
|
2694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("blockquote", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2695
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react41.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectedNode, { node }) }, index);
|
|
2697
|
+
}) });
|
|
2698
|
+
};
|
|
2699
|
+
var QuoteNode_default = QuoteNode;
|
|
2700
|
+
|
|
2701
|
+
// src/components/pageRenderingEngine/nodes/CodeNode.tsx
|
|
2702
|
+
var import_react42 = __toESM(require("react"));
|
|
2703
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2704
|
+
var CodeNode = (props) => {
|
|
2705
|
+
const NodeTypes2 = {
|
|
2706
|
+
["text"]: TextNode_default,
|
|
2707
|
+
["linebreak"]: LineBreakNode_default,
|
|
2708
|
+
["link"]: LinkNode_default
|
|
2709
|
+
};
|
|
2710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("code", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2711
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react42.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectedNode, { node }) }, index);
|
|
2713
|
+
}) });
|
|
2714
|
+
};
|
|
2715
|
+
var CodeNode_default = CodeNode;
|
|
2716
|
+
|
|
2717
|
+
// src/components/pageRenderingEngine/nodes/HorizontalRuleNode.tsx
|
|
2718
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2719
|
+
var HorizontalRuleNode = (props) => {
|
|
2720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("hr", {});
|
|
2721
|
+
};
|
|
2722
|
+
var HorizontalRuleNode_default = HorizontalRuleNode;
|
|
2723
|
+
|
|
2724
|
+
// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
|
|
2725
|
+
var import_react45 = __toESM(require("react"));
|
|
2726
|
+
|
|
2727
|
+
// src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
|
|
2728
|
+
var import_react44 = __toESM(require("react"));
|
|
2729
|
+
|
|
2730
|
+
// src/components/pageRenderingEngine/nodes/ImageNode.tsx
|
|
2731
|
+
var import_react43 = __toESM(require("react"));
|
|
2732
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2733
|
+
var ImageNode = (props) => {
|
|
2734
|
+
const { node, apiBaseUrl = "" } = props;
|
|
2735
|
+
let imageUrl = node.imageUrl.startsWith("http") ? node.imageUrl : `${apiBaseUrl}/digitalassets/storefront/${node.imageUrl}`;
|
|
2736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react43.default.Fragment, { children: node.width ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { width: node.width }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
2737
|
+
"img",
|
|
2738
|
+
{
|
|
2739
|
+
loading: "lazy",
|
|
2740
|
+
className: "object-cover",
|
|
2741
|
+
src: imageUrl,
|
|
2742
|
+
width: node.intrinsicWidth,
|
|
2743
|
+
height: node.intrinsicHeight,
|
|
2744
|
+
alt: node.title
|
|
2745
|
+
}
|
|
2746
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
2747
|
+
"img",
|
|
2748
|
+
{
|
|
2749
|
+
loading: "lazy",
|
|
2750
|
+
className: "object-cover",
|
|
2751
|
+
src: imageUrl,
|
|
2752
|
+
width: node.intrinsicWidth,
|
|
2753
|
+
height: node.intrinsicHeight,
|
|
2754
|
+
alt: node.title
|
|
2755
|
+
}
|
|
2756
|
+
) });
|
|
2757
|
+
};
|
|
2758
|
+
var ImageNode_default = ImageNode;
|
|
2759
|
+
|
|
2760
|
+
// src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
|
|
2761
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
2762
|
+
var LayoutItemNode = (props) => {
|
|
2763
|
+
const NodeTypes2 = {
|
|
2764
|
+
["paragraph"]: ParagraphNode_default,
|
|
2765
|
+
["heading"]: HeadingNode_default,
|
|
2766
|
+
["list"]: ListNode_default,
|
|
2767
|
+
["quote"]: QuoteNode_default,
|
|
2768
|
+
["code"]: CodeNode_default,
|
|
2769
|
+
["horizontalrule"]: HorizontalRuleNode_default,
|
|
2770
|
+
["image"]: ImageNode_default,
|
|
2771
|
+
["layout-container"]: LayoutContainerNode_default,
|
|
2772
|
+
["link"]: LinkNode_default
|
|
2773
|
+
};
|
|
2774
|
+
let cssClasses = "";
|
|
2775
|
+
if (props.order) {
|
|
2776
|
+
cssClasses = "order-" + props.order + " lg:order-1";
|
|
2777
|
+
}
|
|
2778
|
+
if (props.node.itemBoxShadow) {
|
|
2779
|
+
{
|
|
2780
|
+
}
|
|
2781
|
+
cssClasses = cssClasses + " " + (props.node.itemBoxShadow || "");
|
|
2782
|
+
}
|
|
2783
|
+
const styles = {};
|
|
2784
|
+
if (props.node.itemBorderWidth) {
|
|
2785
|
+
styles.borderWidth = props.node.itemBorderWidth;
|
|
2786
|
+
cssClasses = cssClasses + " px-4 py-2";
|
|
2787
|
+
}
|
|
2788
|
+
if (props.node.itemBorderRadius) {
|
|
2789
|
+
styles.borderRadius = props.node.itemBorderRadius;
|
|
2790
|
+
}
|
|
2791
|
+
function removeParagraphsAtStartAndEnd(layoutItem) {
|
|
2792
|
+
let startIndex = 0;
|
|
2793
|
+
{
|
|
2794
|
+
}
|
|
2795
|
+
while (startIndex < layoutItem.children.length && layoutItem.children[startIndex].type === "paragraph" && layoutItem.children[startIndex].children.filter((x) => x.type == "linebreak").length == layoutItem.children[startIndex].children.length) {
|
|
2796
|
+
startIndex++;
|
|
2797
|
+
}
|
|
2798
|
+
let endIndex = layoutItem.children.length - 1;
|
|
2799
|
+
{
|
|
2800
|
+
}
|
|
2801
|
+
while (endIndex >= 0 && layoutItem.children[endIndex].type === "paragraph" && layoutItem.children[endIndex].children.filter((x) => x.type == "linebreak").length == layoutItem.children[endIndex].children.length) {
|
|
2802
|
+
endIndex--;
|
|
2803
|
+
}
|
|
2804
|
+
if (startIndex <= endIndex) {
|
|
2805
|
+
layoutItem.children = layoutItem.children.slice(startIndex, endIndex + 1);
|
|
2806
|
+
}
|
|
2807
|
+
return layoutItem;
|
|
2808
|
+
}
|
|
2809
|
+
let updatedLayout = props.node;
|
|
2810
|
+
if (props.node.itemBoxShadow || props.node.itemBorderWidth) {
|
|
2811
|
+
updatedLayout = props.node;
|
|
2812
|
+
} else {
|
|
2813
|
+
updatedLayout = removeParagraphsAtStartAndEnd(props.node);
|
|
2814
|
+
}
|
|
2815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "" + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
|
|
2816
|
+
{
|
|
2817
|
+
}
|
|
2818
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react44.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SelectedNode, { node }) }, index);
|
|
2820
|
+
}) });
|
|
2821
|
+
};
|
|
2822
|
+
var LayoutItemNode_default = LayoutItemNode;
|
|
2823
|
+
|
|
2824
|
+
// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
|
|
2825
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
2826
|
+
var VERTICAL_ALIGNMENT_CLASSES = {
|
|
2827
|
+
"start": "items-start",
|
|
2828
|
+
"center": "items-center",
|
|
2829
|
+
"end": "items-end",
|
|
2830
|
+
"stretch": "items-stretch",
|
|
2831
|
+
"baseline": "items-baseline"
|
|
2832
|
+
};
|
|
2833
|
+
var LAYOUTGRID_COLS_CLASSES = {
|
|
2834
|
+
"1fr": "layout-grid-col-1",
|
|
2835
|
+
"1fr 1fr": "layout-grid-col-2-equal",
|
|
2836
|
+
"1fr 2fr": "layout-grid-col-2-widths-33-67",
|
|
2837
|
+
"2fr 1fr": "layout-grid-col-2-widths-67-33",
|
|
2838
|
+
"3fr 2fr": "layout-grid-col-2-widths-60-40",
|
|
2839
|
+
"3fr 1fr": "layout-grid-col-2-widths-75-25",
|
|
2840
|
+
"1fr 1fr 1fr": "layout-grid-col-3-equal",
|
|
2841
|
+
"1fr 2fr 1fr": "layout-grid-col-3-widths-25-50-25",
|
|
2842
|
+
"1fr 6fr 1fr": "layout-grid-col-3-widths-15-70-15",
|
|
2843
|
+
"1fr 1fr 1fr 1fr": "layout-grid-col-4-equal"
|
|
2844
|
+
};
|
|
2845
|
+
var LayoutContainerNode = (props) => {
|
|
2846
|
+
const { node, apiBaseUrl = "" } = props;
|
|
2847
|
+
let gridCssClasses = LAYOUTGRID_COLS_CLASSES[node.templateColumns];
|
|
2848
|
+
if (node.contentVerticalAlignment) {
|
|
2849
|
+
{
|
|
2850
|
+
}
|
|
2851
|
+
gridCssClasses = gridCssClasses + " " + (VERTICAL_ALIGNMENT_CLASSES[node.contentVerticalAlignment] || "");
|
|
2852
|
+
}
|
|
2853
|
+
let columnGap = "0.5rem";
|
|
2854
|
+
if (node.columnGap && node.columnGap != "") {
|
|
2855
|
+
columnGap = node.columnGap;
|
|
2856
|
+
}
|
|
2857
|
+
const styles = {};
|
|
2858
|
+
if (node.backgroundColor) {
|
|
2859
|
+
styles.backgroundColor = node.backgroundColor;
|
|
2860
|
+
}
|
|
2861
|
+
let cssClasses = "layout_grid ";
|
|
2862
|
+
let addPadding = false;
|
|
2863
|
+
if (node.boxShadow) {
|
|
2864
|
+
{
|
|
2865
|
+
}
|
|
2866
|
+
cssClasses = cssClasses + " " + (node.boxShadow || "");
|
|
2867
|
+
addPadding = true;
|
|
2868
|
+
}
|
|
2869
|
+
if (node.borderWidth) {
|
|
2870
|
+
styles.borderWidth = node.borderWidth;
|
|
2871
|
+
addPadding = true;
|
|
2872
|
+
}
|
|
2873
|
+
if (node.borderRadius) {
|
|
2874
|
+
styles.borderRadius = node.borderRadius;
|
|
2875
|
+
}
|
|
2876
|
+
let backgroundStyle = "";
|
|
2877
|
+
if (node.backgroundImage) {
|
|
2878
|
+
let resolvedPath = node.backgroundImage;
|
|
2879
|
+
if (!resolvedPath.startsWith("http")) {
|
|
2880
|
+
resolvedPath = `${apiBaseUrl}/digitalassets/storefront/${resolvedPath}`;
|
|
2881
|
+
}
|
|
2882
|
+
backgroundStyle = `url('${resolvedPath}'),`;
|
|
2883
|
+
}
|
|
2884
|
+
if (node.gradientColor1 && node.gradientColor2) {
|
|
2885
|
+
backgroundStyle += `linear-gradient(to bottom, ${node.gradientColor1}, ${node.gradientColor2}),`;
|
|
2886
|
+
}
|
|
2887
|
+
if (node.backgroundColor) {
|
|
2888
|
+
backgroundStyle += `${node.backgroundColor},`;
|
|
2889
|
+
}
|
|
2890
|
+
if (backgroundStyle && backgroundStyle != "") {
|
|
2891
|
+
let stringWithoutTrailingComma = backgroundStyle.replace(/,(\s*)$/, "$1");
|
|
2892
|
+
styles.background = stringWithoutTrailingComma;
|
|
2893
|
+
addPadding = true;
|
|
2894
|
+
}
|
|
2895
|
+
let sectionWidth = "fixed";
|
|
2896
|
+
if (node.sectionWidth) {
|
|
2897
|
+
sectionWidth = node.sectionWidth;
|
|
2898
|
+
}
|
|
2899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react45.default.Fragment, { children: [
|
|
2900
|
+
sectionWidth == "mixed" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cssClasses, style: { ...styles }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "container", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "grid gap-y-8 " + gridCssClasses + (addPadding ? " px-4 py-4 lg:px-6 lg:py-6 " : ""), style: { columnGap, minHeight: node.height }, children: node.children && node.children.map((node2, index) => {
|
|
2901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
|
|
2902
|
+
}) }) }) }),
|
|
2903
|
+
sectionWidth == "full" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
2904
|
+
"div",
|
|
2905
|
+
{
|
|
2906
|
+
className: "grid gap-y-8 " + cssClasses + " " + gridCssClasses + (addPadding ? " p-4 lg:p-0" : ""),
|
|
2907
|
+
style: { columnGap, ...styles },
|
|
2908
|
+
children: node.children && node.children.map((node2, index) => {
|
|
2909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
|
|
2910
|
+
})
|
|
2911
|
+
}
|
|
2912
|
+
),
|
|
2913
|
+
sectionWidth == "fixed" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "container", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
2914
|
+
"div",
|
|
2915
|
+
{
|
|
2916
|
+
className: "grid gap-y-8 " + cssClasses + " " + gridCssClasses + (addPadding ? " px-4 py-4 lg:px-6 lg:py-6 " : ""),
|
|
2917
|
+
style: { columnGap, ...styles },
|
|
2918
|
+
children: node.children && node.children.map((node2, index) => {
|
|
2919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
|
|
2920
|
+
})
|
|
2921
|
+
}
|
|
2922
|
+
) })
|
|
2923
|
+
] });
|
|
2924
|
+
};
|
|
2925
|
+
var LayoutContainerNode_default = LayoutContainerNode;
|
|
2926
|
+
|
|
2927
|
+
// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
|
|
2928
|
+
var import_react46 = require("react");
|
|
2929
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
2930
|
+
var WidgetNode = (props) => {
|
|
2931
|
+
const getWidgetParameters = () => {
|
|
2932
|
+
const widgetInputParameters = { ...props.routeParameters ?? {} };
|
|
2933
|
+
const rawWidgetParams = props.node?.widgetParameters ?? props.node?.widgetParams;
|
|
2934
|
+
let widgetParameters = {};
|
|
2935
|
+
const isJSON = (str) => {
|
|
2936
|
+
if (typeof str !== "string") return false;
|
|
2937
|
+
str = str.trim();
|
|
2938
|
+
return str.startsWith("{") && str.endsWith("}") || str.startsWith("[") && str.endsWith("]");
|
|
2939
|
+
};
|
|
2940
|
+
if (rawWidgetParams) {
|
|
2941
|
+
if (typeof rawWidgetParams === "string" && isJSON(rawWidgetParams)) {
|
|
2942
|
+
widgetParameters = JSON.parse(rawWidgetParams);
|
|
2943
|
+
} else if (typeof rawWidgetParams === "object") {
|
|
2944
|
+
widgetParameters = rawWidgetParams;
|
|
2945
|
+
}
|
|
2946
|
+
}
|
|
2947
|
+
const resolveValue = (val) => {
|
|
2948
|
+
if (typeof val === "string") {
|
|
2949
|
+
const m = /^\{(.+)\}$/.exec(val);
|
|
2950
|
+
if (m) {
|
|
2951
|
+
const actualKey = m[1];
|
|
2952
|
+
return props.routeParameters?.[actualKey] ?? val;
|
|
2953
|
+
}
|
|
2954
|
+
return val;
|
|
2955
|
+
} else if (Array.isArray(val)) {
|
|
2956
|
+
return val.map(resolveValue);
|
|
2957
|
+
} else if (val && typeof val === "object") {
|
|
2958
|
+
const out = {};
|
|
2959
|
+
for (const k of Object.keys(val)) {
|
|
2960
|
+
out[k] = resolveValue(val[k]);
|
|
2961
|
+
}
|
|
2962
|
+
return out;
|
|
2963
|
+
}
|
|
2964
|
+
return val;
|
|
2965
|
+
};
|
|
2966
|
+
Object.keys(widgetParameters).forEach((key) => {
|
|
2967
|
+
const rawVal = widgetParameters[key];
|
|
2968
|
+
if (rawVal === "route") {
|
|
2969
|
+
if (key === "itemPath") {
|
|
2970
|
+
widgetInputParameters[key] = props.path;
|
|
2971
|
+
} else {
|
|
2972
|
+
widgetInputParameters[key] = widgetInputParameters[key] ?? null;
|
|
2973
|
+
}
|
|
2974
|
+
} else {
|
|
2975
|
+
widgetInputParameters[key] = resolveValue(rawVal);
|
|
2976
|
+
}
|
|
2977
|
+
});
|
|
2978
|
+
widgetInputParameters["widgetTitle"] = props.node?.widgetTitle;
|
|
2979
|
+
return widgetInputParameters;
|
|
2980
|
+
};
|
|
2981
|
+
const SelectedWidget = props.widgetResolver?.(props.node.widgetCode);
|
|
2982
|
+
if (!SelectedWidget) {
|
|
2983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
|
|
2984
|
+
"Widget not found: ",
|
|
2985
|
+
props.node.widgetCode
|
|
2986
|
+
] });
|
|
2987
|
+
}
|
|
2988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react46.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
2989
|
+
SelectedWidget,
|
|
2990
|
+
{
|
|
2991
|
+
params: getWidgetParameters(),
|
|
2992
|
+
query: props.query,
|
|
2993
|
+
session: props.session,
|
|
2994
|
+
host: props.host,
|
|
2995
|
+
path: props.path,
|
|
2996
|
+
apiBaseUrl: props.apiBaseUrl
|
|
2997
|
+
}
|
|
2998
|
+
) });
|
|
2999
|
+
};
|
|
3000
|
+
var WidgetNode_default = WidgetNode;
|
|
3001
|
+
|
|
3002
|
+
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3003
|
+
var import_react47 = __toESM(require("react"));
|
|
3004
|
+
|
|
3005
|
+
// src/components/pageRenderingEngine/nodes/InputControlNode.tsx
|
|
3006
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3007
|
+
var InputControlNode = (props) => {
|
|
3008
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3009
|
+
InputControl_default,
|
|
3010
|
+
{
|
|
3011
|
+
name: props.node.name,
|
|
3012
|
+
controlType: "lineTextInput",
|
|
3013
|
+
value: props.value,
|
|
3014
|
+
callback: props.callback,
|
|
3015
|
+
attributes: {
|
|
3016
|
+
pattern: props.node.pattern,
|
|
3017
|
+
maxLength: props.node.maxLength,
|
|
3018
|
+
minLength: props.node.minLength,
|
|
3019
|
+
//maxValue:props.node.maxV,
|
|
3020
|
+
//minValue?: number,
|
|
3021
|
+
readOnly: props.node.readOnly,
|
|
3022
|
+
label: "name",
|
|
3023
|
+
//props.node.label,
|
|
3024
|
+
hintText: props.node.hintText,
|
|
3025
|
+
placeholder: props.node.placeholder,
|
|
3026
|
+
required: props.node.required,
|
|
3027
|
+
errorMessage: props.node.errorMessage,
|
|
3028
|
+
helpText: props.node.helpText,
|
|
3029
|
+
autoFocus: props.node.autoFocus
|
|
3030
|
+
}
|
|
3031
|
+
}
|
|
3032
|
+
) });
|
|
3033
|
+
};
|
|
3034
|
+
var InputControlNode_default = InputControlNode;
|
|
3035
|
+
|
|
3036
|
+
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3037
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3038
|
+
var FormContainerNode = (props) => {
|
|
3039
|
+
const NodeTypes2 = {
|
|
3040
|
+
["input-control"]: InputControlNode_default
|
|
3041
|
+
};
|
|
3042
|
+
const { node } = props;
|
|
3043
|
+
const formRef = (0, import_react47.useRef)(null);
|
|
3044
|
+
const initialState = {
|
|
3045
|
+
inputValues: {},
|
|
3046
|
+
lastPropertyChanged: ""
|
|
3047
|
+
};
|
|
3048
|
+
const [formState, dispatch] = (0, import_react47.useReducer)(FormReducer_default, initialState);
|
|
3049
|
+
const handleInputChange = (0, import_react47.useCallback)((updatedValues) => {
|
|
3050
|
+
dispatch({ type: FORM_INPUT_UPDATE, name: updatedValues.name, value: updatedValues.value });
|
|
3051
|
+
}, [dispatch]);
|
|
3052
|
+
const onValidate = async () => {
|
|
3053
|
+
if (formRef.current && !formRef.current.checkValidity()) {
|
|
3054
|
+
formRef.current.classList.add("validated");
|
|
3055
|
+
return false;
|
|
3056
|
+
} else {
|
|
3057
|
+
return true;
|
|
3058
|
+
}
|
|
3059
|
+
};
|
|
3060
|
+
(0, import_react47.useEffect)(() => {
|
|
3061
|
+
const fetchInitialData = async () => {
|
|
3062
|
+
if (!props.fetchData || !node.dataFetchApi) return;
|
|
3063
|
+
const response = await props.fetchData(
|
|
3064
|
+
node.dataFetchApi,
|
|
3065
|
+
props.routeParameters
|
|
3066
|
+
);
|
|
3067
|
+
if (response?.isSuccessful) {
|
|
3068
|
+
dispatch({
|
|
3069
|
+
type: FORM_INITIAL_UPDATE,
|
|
3070
|
+
values: response.result,
|
|
3071
|
+
name: "all"
|
|
3072
|
+
});
|
|
3073
|
+
}
|
|
3074
|
+
};
|
|
3075
|
+
fetchInitialData();
|
|
3076
|
+
}, [props.fetchData, node.dataFetchApi, props.routeParameters]);
|
|
3077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
|
|
3078
|
+
node.children && node.children.map((node2, index) => {
|
|
3079
|
+
{
|
|
3080
|
+
}
|
|
3081
|
+
const SelectedNode = NodeTypes2[node2.type];
|
|
3082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react47.default.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
3083
|
+
InputControlNode_default,
|
|
3084
|
+
{
|
|
3085
|
+
value: formState.inputValues[node2.name],
|
|
3086
|
+
callback: handleInputChange,
|
|
3087
|
+
node: node2
|
|
3088
|
+
}
|
|
3089
|
+
) }, index);
|
|
3090
|
+
}),
|
|
3091
|
+
node.children.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "py-0.5 lg:py-1.5" })
|
|
3092
|
+
] });
|
|
3093
|
+
};
|
|
3094
|
+
var FormContainerNode_default = FormContainerNode;
|
|
3095
|
+
|
|
3096
|
+
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
3097
|
+
var import_react48 = __toESM(require("react"));
|
|
3098
|
+
var import_link3 = __toESM(require("next/link"));
|
|
3099
|
+
|
|
3100
|
+
// src/components/utilities/AssetUtility.tsx
|
|
3101
|
+
var AssetUtility = class {
|
|
3102
|
+
constructor() {
|
|
3103
|
+
}
|
|
3104
|
+
static resolveUrl(apiBaseUrl, url) {
|
|
3105
|
+
if (url) {
|
|
3106
|
+
if (url.startsWith("http")) {
|
|
3107
|
+
return url;
|
|
3108
|
+
} else {
|
|
3109
|
+
return `${apiBaseUrl}/digitalassets-management/${url}`;
|
|
3110
|
+
}
|
|
3111
|
+
}
|
|
3112
|
+
return void 0;
|
|
3113
|
+
}
|
|
3114
|
+
};
|
|
3115
|
+
var AssetUtility_default = AssetUtility;
|
|
3116
|
+
|
|
3117
|
+
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
3118
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
3119
|
+
var DivContainer = (props) => {
|
|
3120
|
+
const { cssProperties: styles, hoverCssProperties: hoverStyles, mobileCssProperties: mobileStyles } = props.node;
|
|
3121
|
+
const updatedStyles = convertKeysToCamelCase(styles);
|
|
3122
|
+
const NodeTypes2 = {
|
|
3123
|
+
["paragraph"]: ParagraphNode_default,
|
|
3124
|
+
["heading"]: HeadingNode_default,
|
|
3125
|
+
["list"]: ListNode_default,
|
|
3126
|
+
["quote"]: QuoteNode_default,
|
|
3127
|
+
["code"]: CodeNode_default,
|
|
3128
|
+
["image"]: ImageNode_default,
|
|
3129
|
+
["horizontalrule"]: HorizontalRuleNode_default,
|
|
3130
|
+
["layout-container"]: LayoutContainerNode_default,
|
|
3131
|
+
["widget"]: WidgetNode_default,
|
|
3132
|
+
["div-container"]: DivContainer,
|
|
3133
|
+
["text"]: TextNode_default
|
|
3134
|
+
};
|
|
3135
|
+
function toCamelCase(str) {
|
|
3136
|
+
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
3137
|
+
}
|
|
3138
|
+
function convertKeysToCamelCase(obj) {
|
|
3139
|
+
if (!obj || typeof obj !== "object") return obj;
|
|
3140
|
+
if (Array.isArray(obj)) {
|
|
3141
|
+
return obj.map(convertKeysToCamelCase);
|
|
3142
|
+
}
|
|
3143
|
+
return Object.fromEntries(
|
|
3144
|
+
Object.entries(obj).filter(([_, value]) => value !== "" && value !== void 0).map(([key, value]) => [
|
|
3145
|
+
toCamelCase(key),
|
|
3146
|
+
convertKeysToCamelCase(value)
|
|
3147
|
+
// Recursively convert nested objects
|
|
3148
|
+
])
|
|
3149
|
+
);
|
|
3150
|
+
}
|
|
3151
|
+
function generateCompleteBackgroundString(layers) {
|
|
3152
|
+
if (!layers || !Array.isArray(layers)) return "";
|
|
3153
|
+
return layers.filter((layer) => layer && layer.type && layer.value).map((layer) => {
|
|
3154
|
+
if (layer.type === "image" && layer.value && typeof layer.value === "object") {
|
|
3155
|
+
const imageValue = layer.value;
|
|
3156
|
+
if (!imageValue.assetUrl) return "";
|
|
3157
|
+
const url = `url('${AssetUtility_default.resolveUrl("/api/images", imageValue.assetUrl)}')`;
|
|
3158
|
+
const repeat = layer.repeat || "no-repeat";
|
|
3159
|
+
const position = layer.position || "center";
|
|
3160
|
+
const size = layer.size || "auto";
|
|
3161
|
+
const attachment = layer.attachment || "scroll";
|
|
3162
|
+
return `${url} ${position} / ${size} ${repeat} ${attachment}`;
|
|
3163
|
+
}
|
|
3164
|
+
if (layer.type === "gradient" && layer.value && typeof layer.value === "object") {
|
|
3165
|
+
const gradient = layer.value;
|
|
3166
|
+
if (!gradient.colors || !gradient.direction) return "";
|
|
3167
|
+
const colors = gradient.colors.map(
|
|
3168
|
+
(colorStop) => `color-mix(in srgb, ${colorStop.color}, transparent ${colorStop.transparency ?? 0}%) ${colorStop.start || "0%"}`
|
|
3169
|
+
).join(", ");
|
|
3170
|
+
return `linear-gradient(${gradient.direction}, ${colors})`;
|
|
3171
|
+
}
|
|
3172
|
+
return "";
|
|
3173
|
+
}).filter((bg) => bg.trim() !== "").join(", ");
|
|
3174
|
+
}
|
|
3175
|
+
var background = generateCompleteBackgroundString(props.node.backgroundLayers);
|
|
3176
|
+
let containerPaddingClass = "";
|
|
3177
|
+
if (props.node.containerPadding == "small") {
|
|
3178
|
+
containerPaddingClass = "container-small";
|
|
3179
|
+
} else if (props.node.containerPadding == "large") {
|
|
3180
|
+
containerPaddingClass = "container-large";
|
|
3181
|
+
}
|
|
3182
|
+
const updatedStyle = { ...updatedStyles };
|
|
3183
|
+
const backgroundStyle = background && background !== "" ? { background } : {};
|
|
3184
|
+
const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
|
|
3185
|
+
const generateCssString = (stylesObject, hoverStylesObject, mobileStylesObject) => {
|
|
3186
|
+
let gridColumns = stylesObject.gridTemplateColumns ? stylesObject.gridTemplateColumns.match(/\d+/g) : [];
|
|
3187
|
+
let hasGridProperties = gridColumns.length > 0;
|
|
3188
|
+
let tabletColumns = hasGridProperties ? Math.ceil(parseInt(gridColumns[0]) / 2) : 2;
|
|
3189
|
+
let mobileColumns = 1;
|
|
3190
|
+
let cssRules = Object.entries(stylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
|
|
3191
|
+
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
3192
|
+
return `${cssKey}: ${value};`;
|
|
3193
|
+
});
|
|
3194
|
+
let css2 = `#${guid} {
|
|
3195
|
+
${cssRules.join("\n")}
|
|
3196
|
+
|
|
3197
|
+
transition: all 0.3s ease-in-out;
|
|
3198
|
+
}`;
|
|
3199
|
+
if (hoverStylesObject) {
|
|
3200
|
+
let hoverCssRules = Object.entries(hoverStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
|
|
3201
|
+
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
3202
|
+
return `${cssKey}: ${value};`;
|
|
3203
|
+
});
|
|
3204
|
+
if (hoverCssRules.length > 0) {
|
|
3205
|
+
css2 += `
|
|
3206
|
+
#${guid}:hover {
|
|
3207
|
+
${hoverCssRules.join("\n")}
|
|
3208
|
+
}`;
|
|
3209
|
+
}
|
|
3210
|
+
}
|
|
3211
|
+
if (mobileStylesObject) {
|
|
3212
|
+
let mobileCssRules = Object.entries(mobileStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
|
|
3213
|
+
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
3214
|
+
return `${cssKey}: ${value};`;
|
|
3215
|
+
});
|
|
3216
|
+
if (mobileCssRules.length > 0) {
|
|
3217
|
+
css2 += `
|
|
3218
|
+
@media (max-width: 480px) { #${guid} {
|
|
3219
|
+
${mobileCssRules.join("\n")}
|
|
3220
|
+
} }`;
|
|
3221
|
+
}
|
|
3222
|
+
}
|
|
3223
|
+
if (hasGridProperties) {
|
|
3224
|
+
css2 += `
|
|
3225
|
+
@media (max-width: 1279px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
|
|
3226
|
+
css2 += `
|
|
3227
|
+
@media (max-width: 768px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
|
|
3228
|
+
css2 += `
|
|
3229
|
+
@media (max-width: 480px) { #${guid} { grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); } }`;
|
|
3230
|
+
}
|
|
3231
|
+
return css2;
|
|
3232
|
+
};
|
|
3233
|
+
const css = generateCssString(updatedStyle, hoverStyles, mobileStyles);
|
|
3234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react48.default.Fragment, { children: [
|
|
3235
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }),
|
|
3236
|
+
props.node.href && props.node.href !== "" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_link3.default, { href: props.node.href, className: "block", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3237
|
+
"div",
|
|
3238
|
+
{
|
|
3239
|
+
id: guid,
|
|
3240
|
+
style: { ...backgroundStyle, display: "block" },
|
|
3241
|
+
className: containerPaddingClass,
|
|
3242
|
+
children: props.node.children?.map((node, index) => {
|
|
3243
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
3244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react48.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3245
|
+
SelectedNode,
|
|
3246
|
+
{
|
|
3247
|
+
node,
|
|
3248
|
+
routeParameters: props.routeParameters,
|
|
3249
|
+
query: props.query,
|
|
3250
|
+
session: props.session,
|
|
3251
|
+
host: props.host,
|
|
3252
|
+
path: props.path,
|
|
3253
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
3254
|
+
breadcrumb: props.breadcrumb
|
|
3255
|
+
}
|
|
3256
|
+
) }, index);
|
|
3257
|
+
})
|
|
3258
|
+
}
|
|
3259
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
|
|
3260
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
3261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react48.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3262
|
+
SelectedNode,
|
|
3263
|
+
{
|
|
3264
|
+
node,
|
|
3265
|
+
routeParameters: props.routeParameters,
|
|
3266
|
+
query: props.query,
|
|
3267
|
+
session: props.session,
|
|
3268
|
+
host: props.host,
|
|
3269
|
+
path: props.path,
|
|
3270
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
3271
|
+
breadcrumb: props.breadcrumb
|
|
3272
|
+
}
|
|
3273
|
+
) }, index);
|
|
3274
|
+
}) })
|
|
3275
|
+
] });
|
|
3276
|
+
};
|
|
3277
|
+
var DivContainer_default = DivContainer;
|
|
3278
|
+
|
|
3279
|
+
// src/components/pageRenderingEngine/PageBodyRenderer.tsx
|
|
3280
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3281
|
+
var NodeTypes = {
|
|
3282
|
+
["paragraph"]: ParagraphNode_default,
|
|
3283
|
+
["heading"]: HeadingNode_default,
|
|
3284
|
+
["list"]: ListNode_default,
|
|
3285
|
+
["quote"]: QuoteNode_default,
|
|
3286
|
+
["code"]: CodeNode_default,
|
|
3287
|
+
["image"]: ImageNode_default,
|
|
3288
|
+
["horizontalrule"]: HorizontalRuleNode_default,
|
|
3289
|
+
["layout-container"]: LayoutContainerNode_default,
|
|
3290
|
+
["widget"]: WidgetNode_default,
|
|
3291
|
+
["form-container"]: FormContainerNode_default,
|
|
3292
|
+
["div-container"]: DivContainer_default
|
|
3293
|
+
};
|
|
3294
|
+
var PageBodyRenderer = (props) => {
|
|
3295
|
+
let pageBodyTree;
|
|
3296
|
+
if (props.rawBody != void 0 && props.rawBody != null && props.rawBody != "") {
|
|
3297
|
+
try {
|
|
3298
|
+
pageBodyTree = JSON.parse(props.rawBody.toString());
|
|
3299
|
+
} catch (error) {
|
|
3300
|
+
}
|
|
3301
|
+
}
|
|
3302
|
+
let rootNode;
|
|
3303
|
+
if (pageBodyTree && pageBodyTree.root) {
|
|
3304
|
+
rootNode = pageBodyTree.root;
|
|
3305
|
+
}
|
|
3306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react49.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
|
|
3307
|
+
{
|
|
3308
|
+
}
|
|
3309
|
+
const SelectedNode = NodeTypes[node.type];
|
|
3310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react49.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react49.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3311
|
+
SelectedNode,
|
|
3312
|
+
{
|
|
3313
|
+
node,
|
|
3314
|
+
firstNode: true,
|
|
3315
|
+
routeParameters: props.routeParameters,
|
|
3316
|
+
query: props.query,
|
|
3317
|
+
session: props.session,
|
|
3318
|
+
host: props.host,
|
|
3319
|
+
path: props.path,
|
|
3320
|
+
apiBaseUrl: props.apiBaseUrl
|
|
3321
|
+
}
|
|
3322
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3323
|
+
SelectedNode,
|
|
3324
|
+
{
|
|
3325
|
+
node,
|
|
3326
|
+
routeParameters: props.routeParameters,
|
|
3327
|
+
query: props.query,
|
|
3328
|
+
session: props.session,
|
|
3329
|
+
host: props.host,
|
|
3330
|
+
path: props.path,
|
|
3331
|
+
apiBaseUrl: props.apiBaseUrl
|
|
3332
|
+
}
|
|
3333
|
+
) }) }) }, index);
|
|
3334
|
+
}) });
|
|
3335
|
+
};
|
|
3336
|
+
var PageBodyRenderer_default = PageBodyRenderer;
|
|
2529
3337
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2530
3338
|
0 && (module.exports = {
|
|
2531
3339
|
DataList,
|
|
2532
3340
|
InputControl,
|
|
2533
3341
|
InputControlType,
|
|
3342
|
+
PageBodyRenderer,
|
|
2534
3343
|
ViewControl,
|
|
2535
3344
|
ViewControlTypes
|
|
2536
3345
|
});
|