@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260319054248 → 0.8.1-dev.20260320053940
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 +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +715 -260
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +710 -255
- package/dist/index.mjs.map +1 -0
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -2068,7 +2068,7 @@ var DataList = (props) => {
|
|
|
2068
2068
|
}
|
|
2069
2069
|
}
|
|
2070
2070
|
}, [props.dataset]);
|
|
2071
|
-
function
|
|
2071
|
+
function getNestedProperty2(obj, path) {
|
|
2072
2072
|
if (path.includes(".")) {
|
|
2073
2073
|
return path.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj);
|
|
2074
2074
|
} else if (Array.isArray(obj[path])) {
|
|
@@ -2352,7 +2352,7 @@ var DataList = (props) => {
|
|
|
2352
2352
|
/* @__PURE__ */ jsx40("tbody", { className: "divide-y divide-gray-200 ", children: props.dataset?.result?.map((dataitem, index) => {
|
|
2353
2353
|
let validityClass = "";
|
|
2354
2354
|
console.log("dataitem", dataitem);
|
|
2355
|
-
if (props.recordValidityColumnName &&
|
|
2355
|
+
if (props.recordValidityColumnName && getNestedProperty2(dataitem, props.recordValidityColumnName) == false) {
|
|
2356
2356
|
validityClass = "bg-alert-200";
|
|
2357
2357
|
}
|
|
2358
2358
|
return /* @__PURE__ */ jsx40("tr", { className: validityClass, children: props?.columns?.map((column, colindex) => {
|
|
@@ -2370,7 +2370,7 @@ var DataList = (props) => {
|
|
|
2370
2370
|
ViewControl_default,
|
|
2371
2371
|
{
|
|
2372
2372
|
controlType: column.controlType,
|
|
2373
|
-
value:
|
|
2373
|
+
value: getNestedProperty2(
|
|
2374
2374
|
dataitem,
|
|
2375
2375
|
column.name
|
|
2376
2376
|
),
|
|
@@ -2387,7 +2387,7 @@ var DataList = (props) => {
|
|
|
2387
2387
|
ViewControl_default,
|
|
2388
2388
|
{
|
|
2389
2389
|
controlType: column.controlType,
|
|
2390
|
-
value:
|
|
2390
|
+
value: getNestedProperty2(dataitem, column.name) || column.emptyValueLabel,
|
|
2391
2391
|
format: column.format,
|
|
2392
2392
|
customProps: column.customProps
|
|
2393
2393
|
}
|
|
@@ -2397,7 +2397,7 @@ var DataList = (props) => {
|
|
|
2397
2397
|
ViewControl_default,
|
|
2398
2398
|
{
|
|
2399
2399
|
controlType: column.controlType,
|
|
2400
|
-
value:
|
|
2400
|
+
value: getNestedProperty2(dataitem, column.name),
|
|
2401
2401
|
format: column.format,
|
|
2402
2402
|
customProps: column.customProps
|
|
2403
2403
|
}
|
|
@@ -2502,7 +2502,7 @@ var DataList = (props) => {
|
|
|
2502
2502
|
var DataList_default = DataList;
|
|
2503
2503
|
|
|
2504
2504
|
// src/components/pageRenderingEngine/PageBodyRenderer.tsx
|
|
2505
|
-
import
|
|
2505
|
+
import React51 from "react";
|
|
2506
2506
|
|
|
2507
2507
|
// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
|
|
2508
2508
|
import React37 from "react";
|
|
@@ -2515,19 +2515,57 @@ var TextNode = (props) => {
|
|
|
2515
2515
|
};
|
|
2516
2516
|
function cssStringToJson(cssString) {
|
|
2517
2517
|
const styleObject = {};
|
|
2518
|
-
const matches = cssString
|
|
2519
|
-
if (matches
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2518
|
+
const matches = cssString?.match(/([\w-]+)\s*:\s*([^;]+)\s*;/g);
|
|
2519
|
+
if (matches) {
|
|
2520
|
+
matches.forEach((match) => {
|
|
2521
|
+
const parts = match.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
|
|
2522
|
+
if (parts && parts.length === 3) {
|
|
2523
|
+
const property = parts[1].trim();
|
|
2524
|
+
const value = parts[2].trim();
|
|
2525
|
+
styleObject[property] = value;
|
|
2526
|
+
}
|
|
2527
|
+
});
|
|
2525
2528
|
}
|
|
2526
2529
|
return styleObject;
|
|
2527
2530
|
}
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
+
function toCamelCase(str) {
|
|
2532
|
+
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
2533
|
+
}
|
|
2534
|
+
function convertKeysToCamelCase(obj) {
|
|
2535
|
+
if (Array.isArray(obj)) {
|
|
2536
|
+
return obj.map(convertKeysToCamelCase);
|
|
2537
|
+
} else if (obj !== null && typeof obj === "object") {
|
|
2538
|
+
return Object.fromEntries(
|
|
2539
|
+
Object.entries(obj).filter(([_, value]) => value !== "").map(([key, value]) => [
|
|
2540
|
+
toCamelCase(key),
|
|
2541
|
+
convertKeysToCamelCase(value)
|
|
2542
|
+
])
|
|
2543
|
+
);
|
|
2544
|
+
}
|
|
2545
|
+
return obj;
|
|
2546
|
+
}
|
|
2547
|
+
function getFormatClass(format) {
|
|
2548
|
+
const classes = [];
|
|
2549
|
+
if (format === 1) classes.push("font-medium");
|
|
2550
|
+
if (format === 2) classes.push("italic");
|
|
2551
|
+
if (format === 3) classes.push("font-medium italic");
|
|
2552
|
+
if (format === 8) classes.push("underline");
|
|
2553
|
+
if (format === 9) classes.push("font-medium underline");
|
|
2554
|
+
if (format === 10) classes.push("italic underline");
|
|
2555
|
+
if (format === 11) classes.push("font-medium italic underline");
|
|
2556
|
+
if (format === 256) classes.push("lowercase");
|
|
2557
|
+
if (format === 512) classes.push("uppercase");
|
|
2558
|
+
if (format === 1024) classes.push("capitalize");
|
|
2559
|
+
return classes.join(" ");
|
|
2560
|
+
}
|
|
2561
|
+
const styles = convertKeysToCamelCase(cssStringToJson(props.node.style));
|
|
2562
|
+
function replacePlaceholders(template, dataItem) {
|
|
2563
|
+
return template.replace(/{(\w+)}/g, (_, key) => {
|
|
2564
|
+
return key in dataItem ? dataItem[key] : `{${key}}`;
|
|
2565
|
+
});
|
|
2566
|
+
}
|
|
2567
|
+
const displayText = props.linkText ? props.linkText : props.node.text;
|
|
2568
|
+
return /* @__PURE__ */ jsx41("span", { style: { ...styles }, className: getFormatClass(props.node.format), children: props.dataitem && props.linkText ? displayText : props.dataitem ? replacePlaceholders(props.node.text, props.dataitem) : props.node.text });
|
|
2531
2569
|
};
|
|
2532
2570
|
var TextNode_default = TextNode;
|
|
2533
2571
|
|
|
@@ -2559,39 +2597,225 @@ var LinkNode = (props) => {
|
|
|
2559
2597
|
};
|
|
2560
2598
|
var LinkNode_default = LinkNode;
|
|
2561
2599
|
|
|
2600
|
+
// src/components/pageRenderingEngine/nodes/SVGIconNode.tsx
|
|
2601
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
2602
|
+
var SVGIconNode = ({ node }) => {
|
|
2603
|
+
if (!node?.svgCode) return null;
|
|
2604
|
+
return /* @__PURE__ */ jsx44(
|
|
2605
|
+
"span",
|
|
2606
|
+
{
|
|
2607
|
+
style: {
|
|
2608
|
+
display: "flex",
|
|
2609
|
+
width: node.width,
|
|
2610
|
+
height: node.height,
|
|
2611
|
+
color: node.color
|
|
2612
|
+
},
|
|
2613
|
+
dangerouslySetInnerHTML: { __html: node.svgCode }
|
|
2614
|
+
}
|
|
2615
|
+
);
|
|
2616
|
+
};
|
|
2617
|
+
var SVGIconNode_default = SVGIconNode;
|
|
2618
|
+
|
|
2619
|
+
// src/components/pageRenderingEngine/nodes/EquationNode.tsx
|
|
2620
|
+
import katex from "katex";
|
|
2621
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
2622
|
+
var EquationNode = ({ node }) => {
|
|
2623
|
+
const { equation, inline } = node;
|
|
2624
|
+
let html = "";
|
|
2625
|
+
try {
|
|
2626
|
+
html = katex.renderToString(equation, {
|
|
2627
|
+
displayMode: !inline,
|
|
2628
|
+
throwOnError: false
|
|
2629
|
+
});
|
|
2630
|
+
} catch (error) {
|
|
2631
|
+
html = katex.renderToString(`\\text{Invalid equation}`, {
|
|
2632
|
+
throwOnError: false
|
|
2633
|
+
});
|
|
2634
|
+
}
|
|
2635
|
+
if (inline) {
|
|
2636
|
+
return /* @__PURE__ */ jsx45(
|
|
2637
|
+
"span",
|
|
2638
|
+
{
|
|
2639
|
+
className: "katex-inline",
|
|
2640
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
2641
|
+
}
|
|
2642
|
+
);
|
|
2643
|
+
}
|
|
2644
|
+
return /* @__PURE__ */ jsx45(
|
|
2645
|
+
"div",
|
|
2646
|
+
{
|
|
2647
|
+
className: "katex-block my-3 text-center",
|
|
2648
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
2649
|
+
}
|
|
2650
|
+
);
|
|
2651
|
+
};
|
|
2652
|
+
var EquationNode_default = EquationNode;
|
|
2653
|
+
|
|
2654
|
+
// src/components/pageRenderingEngine/nodes/DatafieldNode.tsx
|
|
2655
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
2656
|
+
function getNestedProperty(obj, path) {
|
|
2657
|
+
if (!obj || !path) return null;
|
|
2658
|
+
if (path.includes(".")) {
|
|
2659
|
+
return path.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj);
|
|
2660
|
+
} else if (Array.isArray(obj[path])) {
|
|
2661
|
+
return obj[path].map((item, index) => /* @__PURE__ */ jsx46("div", { children: item }, index));
|
|
2662
|
+
} else {
|
|
2663
|
+
return obj[path];
|
|
2664
|
+
}
|
|
2665
|
+
}
|
|
2666
|
+
var DatafieldNode = (props) => {
|
|
2667
|
+
function cssStringToJson(cssString) {
|
|
2668
|
+
const styleObject = {};
|
|
2669
|
+
const matches = cssString?.match(/([\w-]+)\s*:\s*([^;]+)\s*;/g);
|
|
2670
|
+
if (matches) {
|
|
2671
|
+
matches.forEach((match) => {
|
|
2672
|
+
const parts = match.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
|
|
2673
|
+
if (parts && parts.length === 3) {
|
|
2674
|
+
const property = parts[1].trim();
|
|
2675
|
+
const value2 = parts[2].trim();
|
|
2676
|
+
styleObject[property] = value2;
|
|
2677
|
+
}
|
|
2678
|
+
});
|
|
2679
|
+
}
|
|
2680
|
+
return styleObject;
|
|
2681
|
+
}
|
|
2682
|
+
function toCamelCase(str) {
|
|
2683
|
+
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
2684
|
+
}
|
|
2685
|
+
function convertKeysToCamelCase(obj) {
|
|
2686
|
+
if (!obj || typeof obj !== "object") return obj;
|
|
2687
|
+
return Object.fromEntries(
|
|
2688
|
+
Object.entries(obj).map(([key, value2]) => [toCamelCase(key), value2])
|
|
2689
|
+
);
|
|
2690
|
+
}
|
|
2691
|
+
const Formats = [
|
|
2692
|
+
"",
|
|
2693
|
+
"font-medium",
|
|
2694
|
+
"italic",
|
|
2695
|
+
"font-medium italic",
|
|
2696
|
+
"",
|
|
2697
|
+
"",
|
|
2698
|
+
"",
|
|
2699
|
+
"",
|
|
2700
|
+
"underline",
|
|
2701
|
+
"font-medium underline",
|
|
2702
|
+
"italic underline",
|
|
2703
|
+
"italic underline font-medium"
|
|
2704
|
+
];
|
|
2705
|
+
const styles = convertKeysToCamelCase(cssStringToJson(props.node.style));
|
|
2706
|
+
const fieldName = props.node.fieldName;
|
|
2707
|
+
const value = props.dataitem ? getNestedProperty(props.dataitem, fieldName) : null;
|
|
2708
|
+
console.log(fieldName, value, "haha");
|
|
2709
|
+
const isEmptyValue = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0 || typeof value === "object" && Object.keys(value).length === 0;
|
|
2710
|
+
const maxLines = props.node.maxLines;
|
|
2711
|
+
if (maxLines && Number(maxLines) > 0) {
|
|
2712
|
+
Object.assign(styles, {
|
|
2713
|
+
display: "-webkit-box",
|
|
2714
|
+
overflow: "hidden",
|
|
2715
|
+
WebkitBoxOrient: "vertical",
|
|
2716
|
+
WebkitLineClamp: String(maxLines)
|
|
2717
|
+
});
|
|
2718
|
+
}
|
|
2719
|
+
const dataType = props.node.dataType;
|
|
2720
|
+
if (isEmptyValue) {
|
|
2721
|
+
return null;
|
|
2722
|
+
}
|
|
2723
|
+
if (dataType == "rawContent") {
|
|
2724
|
+
return /* @__PURE__ */ jsx46(
|
|
2725
|
+
PageBodyRenderer_default,
|
|
2726
|
+
{
|
|
2727
|
+
rawBody: value ?? `@databound[${fieldName}]`,
|
|
2728
|
+
routeParameters: props.routeParameters,
|
|
2729
|
+
query: props.query,
|
|
2730
|
+
session: props.session,
|
|
2731
|
+
host: props.host,
|
|
2732
|
+
path: props.path,
|
|
2733
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
2734
|
+
breadcrumb: props.breadcrumb,
|
|
2735
|
+
donotApplyContainerClass: true
|
|
2736
|
+
}
|
|
2737
|
+
);
|
|
2738
|
+
}
|
|
2739
|
+
return /* @__PURE__ */ jsx46(
|
|
2740
|
+
"span",
|
|
2741
|
+
{
|
|
2742
|
+
className: `datafield-node ${props.node.format < Formats.length ? Formats[props.node.format] : ""}`,
|
|
2743
|
+
style: styles,
|
|
2744
|
+
children: /* @__PURE__ */ jsx46(
|
|
2745
|
+
ViewControl_default,
|
|
2746
|
+
{
|
|
2747
|
+
controlType: dataType,
|
|
2748
|
+
value: value ?? `@databound[${fieldName}]`
|
|
2749
|
+
}
|
|
2750
|
+
)
|
|
2751
|
+
}
|
|
2752
|
+
);
|
|
2753
|
+
};
|
|
2754
|
+
var DatafieldNode_default = DatafieldNode;
|
|
2755
|
+
|
|
2562
2756
|
// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
|
|
2563
|
-
import { jsx as
|
|
2757
|
+
import { Fragment as Fragment3, jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2564
2758
|
var ParagraphNode = (props) => {
|
|
2565
2759
|
const NodeTypes2 = {
|
|
2566
2760
|
["text"]: TextNode_default,
|
|
2567
2761
|
["linebreak"]: LineBreakNode_default,
|
|
2568
|
-
["link"]: LinkNode_default
|
|
2569
|
-
|
|
2570
|
-
|
|
2762
|
+
["link"]: LinkNode_default,
|
|
2763
|
+
["datafield"]: DatafieldNode_default,
|
|
2764
|
+
["equation"]: EquationNode_default,
|
|
2765
|
+
["svg-icon"]: SVGIconNode_default
|
|
2571
2766
|
};
|
|
2572
2767
|
const FormatClass = {
|
|
2573
|
-
"center": "text-center"
|
|
2768
|
+
"center": "text-center",
|
|
2769
|
+
"right": "text-right"
|
|
2574
2770
|
};
|
|
2575
2771
|
{
|
|
2576
2772
|
}
|
|
2577
2773
|
let formatClasses = FormatClass[props.node.format] || "";
|
|
2578
|
-
|
|
2579
|
-
|
|
2774
|
+
const isInlineOnlyParent = props.parentTag === "summary";
|
|
2775
|
+
const hasChildren = props.node.children && props.node.children.length > 0;
|
|
2776
|
+
if (isInlineOnlyParent) {
|
|
2777
|
+
return /* @__PURE__ */ jsx47(Fragment3, { children: hasChildren && props.node.children.map((node, index) => {
|
|
2778
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2779
|
+
return /* @__PURE__ */ jsx47(React37.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx47(
|
|
2780
|
+
SelectedNode,
|
|
2781
|
+
{
|
|
2782
|
+
node,
|
|
2783
|
+
dataitem: props.dataitem,
|
|
2784
|
+
session: props.session,
|
|
2785
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
2786
|
+
routeParameters: props.routeParameters
|
|
2787
|
+
}
|
|
2788
|
+
) }, index);
|
|
2789
|
+
}) });
|
|
2790
|
+
}
|
|
2791
|
+
return /* @__PURE__ */ jsxs24("div", { className: " " + formatClasses, children: [
|
|
2792
|
+
hasChildren && props.node.children.map((node, index) => {
|
|
2580
2793
|
const SelectedNode = NodeTypes2[node.type];
|
|
2581
|
-
return /* @__PURE__ */
|
|
2794
|
+
return /* @__PURE__ */ jsx47(React37.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx47(
|
|
2795
|
+
SelectedNode,
|
|
2796
|
+
{
|
|
2797
|
+
node,
|
|
2798
|
+
dataitem: props.dataitem,
|
|
2799
|
+
session: props.session,
|
|
2800
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
2801
|
+
routeParameters: props.routeParameters
|
|
2802
|
+
}
|
|
2803
|
+
) }, index);
|
|
2582
2804
|
}),
|
|
2583
|
-
|
|
2805
|
+
!hasChildren && /* @__PURE__ */ jsx47("div", { className: "py-1.5 lg:py-2" })
|
|
2584
2806
|
] });
|
|
2585
2807
|
};
|
|
2586
2808
|
var ParagraphNode_default = ParagraphNode;
|
|
2587
2809
|
|
|
2588
2810
|
// src/components/pageRenderingEngine/nodes/HeadingNode.tsx
|
|
2589
2811
|
import React38 from "react";
|
|
2590
|
-
import { Fragment as
|
|
2812
|
+
import { Fragment as Fragment4, jsx as jsx48 } from "react/jsx-runtime";
|
|
2591
2813
|
var HeadingNode = (props) => {
|
|
2592
2814
|
const NodeTypes2 = {
|
|
2593
2815
|
["text"]: TextNode_default,
|
|
2594
|
-
["link"]: LinkNode_default
|
|
2816
|
+
["link"]: LinkNode_default,
|
|
2817
|
+
// ["linebreak"]: LineBreakNodeNew,
|
|
2818
|
+
["datafield"]: DatafieldNode_default
|
|
2595
2819
|
};
|
|
2596
2820
|
const HeadingTag = `${props.node.tag}`;
|
|
2597
2821
|
const FormatClass = {
|
|
@@ -2600,12 +2824,12 @@ var HeadingNode = (props) => {
|
|
|
2600
2824
|
{
|
|
2601
2825
|
}
|
|
2602
2826
|
let formatClasses = FormatClass[props.node.format] || "";
|
|
2603
|
-
return /* @__PURE__ */
|
|
2827
|
+
return /* @__PURE__ */ jsx48(Fragment4, { children: React38.createElement(
|
|
2604
2828
|
HeadingTag,
|
|
2605
2829
|
{ className: formatClasses },
|
|
2606
2830
|
props.node.children && props.node.children.map((childNode, index) => {
|
|
2607
2831
|
const SelectedNode = NodeTypes2[childNode.type];
|
|
2608
|
-
return /* @__PURE__ */
|
|
2832
|
+
return /* @__PURE__ */ jsx48(React38.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx48(SelectedNode, { node: childNode, dataitem: props.dataitem, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
|
|
2609
2833
|
})
|
|
2610
2834
|
) });
|
|
2611
2835
|
};
|
|
@@ -2616,34 +2840,54 @@ import React40 from "react";
|
|
|
2616
2840
|
|
|
2617
2841
|
// src/components/pageRenderingEngine/nodes/ListItemNode.tsx
|
|
2618
2842
|
import React39 from "react";
|
|
2619
|
-
import { jsx as
|
|
2843
|
+
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
2620
2844
|
var ListItemNode = (props) => {
|
|
2621
2845
|
const NodeTypes2 = {
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2846
|
+
text: TextNode_default,
|
|
2847
|
+
linebreak: LineBreakNode_default,
|
|
2848
|
+
link: LinkNode_default,
|
|
2849
|
+
list: ListNode_default
|
|
2625
2850
|
};
|
|
2626
|
-
|
|
2851
|
+
let foundFirstBreak = false;
|
|
2852
|
+
const firstTextChild = props.node.children?.find((c) => c.type === "text");
|
|
2853
|
+
let liStyle = {};
|
|
2854
|
+
if (firstTextChild?.style) {
|
|
2855
|
+
const match = firstTextChild.style.match(/font-size\s*:\s*([^;]+);?/);
|
|
2856
|
+
if (match) {
|
|
2857
|
+
liStyle.fontSize = match[1].trim();
|
|
2858
|
+
}
|
|
2859
|
+
}
|
|
2860
|
+
return /* @__PURE__ */ jsx49("li", { style: liStyle, children: props.node.children && props.node.children.map((node, index) => {
|
|
2627
2861
|
const SelectedNode = NodeTypes2[node.type];
|
|
2628
|
-
|
|
2862
|
+
if (node.type === "linebreak") {
|
|
2863
|
+
if (!foundFirstBreak) {
|
|
2864
|
+
foundFirstBreak = true;
|
|
2865
|
+
return /* @__PURE__ */ jsx49("div", {}, index);
|
|
2866
|
+
} else {
|
|
2867
|
+
return /* @__PURE__ */ jsx49("div", { className: "py-1 lg:py-2" }, index);
|
|
2868
|
+
}
|
|
2869
|
+
} else {
|
|
2870
|
+
foundFirstBreak = false;
|
|
2871
|
+
return /* @__PURE__ */ jsx49(React39.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx49(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
|
|
2872
|
+
}
|
|
2629
2873
|
}) });
|
|
2630
2874
|
};
|
|
2631
2875
|
var ListItemNode_default = ListItemNode;
|
|
2632
2876
|
|
|
2633
2877
|
// src/components/pageRenderingEngine/nodes/ListNode.tsx
|
|
2634
|
-
import { jsx as
|
|
2878
|
+
import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2635
2879
|
var ListNode = (props) => {
|
|
2636
2880
|
const NodeTypes2 = {
|
|
2637
2881
|
listitem: ListItemNode_default
|
|
2638
2882
|
};
|
|
2639
2883
|
return /* @__PURE__ */ jsxs25(React40.Fragment, { children: [
|
|
2640
|
-
props.node.listType == "bullet" && /* @__PURE__ */
|
|
2884
|
+
props.node.listType == "bullet" && /* @__PURE__ */ jsx50("ul", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2641
2885
|
const SelectedNode = NodeTypes2[node.type];
|
|
2642
|
-
return /* @__PURE__ */
|
|
2886
|
+
return /* @__PURE__ */ jsx50(React40.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx50(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
|
|
2643
2887
|
}) }),
|
|
2644
|
-
props.node.listType == "number" && /* @__PURE__ */
|
|
2888
|
+
props.node.listType == "number" && /* @__PURE__ */ jsx50("ol", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2645
2889
|
const SelectedNode = NodeTypes2[node.type];
|
|
2646
|
-
return /* @__PURE__ */
|
|
2890
|
+
return /* @__PURE__ */ jsx50(React40.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx50(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
|
|
2647
2891
|
}) })
|
|
2648
2892
|
] });
|
|
2649
2893
|
};
|
|
@@ -2651,56 +2895,118 @@ var ListNode_default = ListNode;
|
|
|
2651
2895
|
|
|
2652
2896
|
// src/components/pageRenderingEngine/nodes/QuoteNode.tsx
|
|
2653
2897
|
import React41 from "react";
|
|
2654
|
-
import { jsx as
|
|
2898
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2655
2899
|
var QuoteNode = (props) => {
|
|
2656
2900
|
const NodeTypes2 = {
|
|
2657
2901
|
["text"]: TextNode_default,
|
|
2658
2902
|
["linebreak"]: LineBreakNode_default,
|
|
2659
2903
|
["link"]: LinkNode_default
|
|
2660
2904
|
};
|
|
2661
|
-
return /* @__PURE__ */
|
|
2905
|
+
return /* @__PURE__ */ jsx51("blockquote", { children: props.node.children && props.node.children.map((node, index) => {
|
|
2662
2906
|
const SelectedNode = NodeTypes2[node.type];
|
|
2663
|
-
return /* @__PURE__ */
|
|
2907
|
+
return /* @__PURE__ */ jsx51(React41.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx51(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
|
|
2664
2908
|
}) });
|
|
2665
2909
|
};
|
|
2666
2910
|
var QuoteNode_default = QuoteNode;
|
|
2667
2911
|
|
|
2668
2912
|
// src/components/pageRenderingEngine/nodes/CodeNode.tsx
|
|
2669
2913
|
import React42 from "react";
|
|
2670
|
-
|
|
2914
|
+
|
|
2915
|
+
// src/components/CopyButton.tsx
|
|
2916
|
+
import { useState as useState8, useRef as useRef3, useEffect as useEffect7 } from "react";
|
|
2917
|
+
import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2918
|
+
function CopyButton({ text }) {
|
|
2919
|
+
const [copied, setCopied] = useState8(false);
|
|
2920
|
+
const timeoutRef = useRef3(null);
|
|
2921
|
+
useEffect7(() => {
|
|
2922
|
+
return () => {
|
|
2923
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
2924
|
+
};
|
|
2925
|
+
}, []);
|
|
2926
|
+
const handleCopy = async () => {
|
|
2927
|
+
try {
|
|
2928
|
+
await navigator.clipboard.writeText(text);
|
|
2929
|
+
setCopied(true);
|
|
2930
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
2931
|
+
timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
|
|
2932
|
+
} catch (err) {
|
|
2933
|
+
console.error("Failed to copy: ", err);
|
|
2934
|
+
}
|
|
2935
|
+
};
|
|
2936
|
+
return /* @__PURE__ */ jsxs26(
|
|
2937
|
+
"button",
|
|
2938
|
+
{
|
|
2939
|
+
onClick: handleCopy,
|
|
2940
|
+
className: "flex gap-1 items-center hover:text-white transition",
|
|
2941
|
+
children: [
|
|
2942
|
+
/* @__PURE__ */ jsx52(
|
|
2943
|
+
"svg",
|
|
2944
|
+
{
|
|
2945
|
+
width: "16",
|
|
2946
|
+
height: "16",
|
|
2947
|
+
viewBox: "0 0 24 24",
|
|
2948
|
+
className: "w-4 h-4",
|
|
2949
|
+
fill: "currentColor",
|
|
2950
|
+
children: /* @__PURE__ */ jsx52(
|
|
2951
|
+
"path",
|
|
2952
|
+
{
|
|
2953
|
+
fillRule: "evenodd",
|
|
2954
|
+
clipRule: "evenodd",
|
|
2955
|
+
d: "M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z"
|
|
2956
|
+
}
|
|
2957
|
+
)
|
|
2958
|
+
}
|
|
2959
|
+
),
|
|
2960
|
+
copied ? "Copied!" : "Copy code"
|
|
2961
|
+
]
|
|
2962
|
+
}
|
|
2963
|
+
);
|
|
2964
|
+
}
|
|
2965
|
+
|
|
2966
|
+
// src/components/pageRenderingEngine/nodes/CodeNode.tsx
|
|
2967
|
+
import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2671
2968
|
var CodeNode = (props) => {
|
|
2672
2969
|
const NodeTypes2 = {
|
|
2673
2970
|
["text"]: TextNode_default,
|
|
2674
2971
|
["linebreak"]: LineBreakNode_default,
|
|
2675
2972
|
["link"]: LinkNode_default
|
|
2676
2973
|
};
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2974
|
+
const textContent = props.node?.children?.map((node) => {
|
|
2975
|
+
if (node.type === "text") return node.text || "";
|
|
2976
|
+
if (node.type === "linebreak") return "\n";
|
|
2977
|
+
if (node.type === "link") return node.text || node.url || "";
|
|
2978
|
+
return "";
|
|
2979
|
+
}).join("") ?? "";
|
|
2980
|
+
return /* @__PURE__ */ jsxs27("div", { className: "code-block", children: [
|
|
2981
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex items-center relative text-gray-200 bg-gray-800 px-4 py-2.5 text-xs font-sans justify-between rounded-t-md", children: [
|
|
2982
|
+
/* @__PURE__ */ jsx53("span", { children: "Code Snippet" }),
|
|
2983
|
+
/* @__PURE__ */ jsx53(CopyButton, { text: textContent })
|
|
2984
|
+
] }),
|
|
2985
|
+
/* @__PURE__ */ jsx53("code", { className: "block bg-gray-900 text-gray-100 p-4 rounded-b-md text-sm whitespace-pre-wrap", children: props.node.children && props.node.children.map((node, index) => {
|
|
2986
|
+
const SelectedNode = NodeTypes2[node.type];
|
|
2987
|
+
return /* @__PURE__ */ jsx53(React42.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx53(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
|
|
2988
|
+
}) })
|
|
2989
|
+
] });
|
|
2681
2990
|
};
|
|
2682
2991
|
var CodeNode_default = CodeNode;
|
|
2683
2992
|
|
|
2684
2993
|
// src/components/pageRenderingEngine/nodes/HorizontalRuleNode.tsx
|
|
2685
|
-
import { jsx as
|
|
2994
|
+
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
2686
2995
|
var HorizontalRuleNode = (props) => {
|
|
2687
|
-
return /* @__PURE__ */
|
|
2996
|
+
return /* @__PURE__ */ jsx54("hr", {});
|
|
2688
2997
|
};
|
|
2689
2998
|
var HorizontalRuleNode_default = HorizontalRuleNode;
|
|
2690
2999
|
|
|
2691
|
-
// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
|
|
2692
|
-
import React45 from "react";
|
|
2693
|
-
|
|
2694
3000
|
// src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
|
|
2695
|
-
import
|
|
3001
|
+
import React48 from "react";
|
|
2696
3002
|
|
|
2697
3003
|
// src/components/pageRenderingEngine/nodes/ImageNode.tsx
|
|
2698
3004
|
import React43 from "react";
|
|
2699
|
-
import { jsx as
|
|
3005
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
2700
3006
|
var ImageNode = (props) => {
|
|
2701
3007
|
const { node, apiBaseUrl = "" } = props;
|
|
2702
3008
|
let imageUrl = node.imageUrl.startsWith("http") ? node.imageUrl : `${apiBaseUrl}/digitalassets/storefront/${node.imageUrl}`;
|
|
2703
|
-
return /* @__PURE__ */
|
|
3009
|
+
return /* @__PURE__ */ jsx55(React43.Fragment, { children: node.width ? /* @__PURE__ */ jsx55("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx55(
|
|
2704
3010
|
"img",
|
|
2705
3011
|
{
|
|
2706
3012
|
loading: "lazy",
|
|
@@ -2710,7 +3016,7 @@ var ImageNode = (props) => {
|
|
|
2710
3016
|
height: node.intrinsicHeight,
|
|
2711
3017
|
alt: node.title
|
|
2712
3018
|
}
|
|
2713
|
-
) }) : /* @__PURE__ */
|
|
3019
|
+
) }) : /* @__PURE__ */ jsx55(
|
|
2714
3020
|
"img",
|
|
2715
3021
|
{
|
|
2716
3022
|
loading: "lazy",
|
|
@@ -2724,8 +3030,204 @@ var ImageNode = (props) => {
|
|
|
2724
3030
|
};
|
|
2725
3031
|
var ImageNode_default = ImageNode;
|
|
2726
3032
|
|
|
3033
|
+
// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
|
|
3034
|
+
import { Suspense } from "react";
|
|
3035
|
+
import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3036
|
+
var WidgetNode = (props) => {
|
|
3037
|
+
const getWidgetParameters = () => {
|
|
3038
|
+
const widgetInputParameters = { ...props.routeParameters ?? {} };
|
|
3039
|
+
const rawWidgetParams = props.node?.widgetParameters ?? props.node?.widgetParams;
|
|
3040
|
+
let widgetParameters = {};
|
|
3041
|
+
const isJSON = (str) => {
|
|
3042
|
+
if (typeof str !== "string") return false;
|
|
3043
|
+
str = str.trim();
|
|
3044
|
+
return str.startsWith("{") && str.endsWith("}") || str.startsWith("[") && str.endsWith("]");
|
|
3045
|
+
};
|
|
3046
|
+
if (rawWidgetParams) {
|
|
3047
|
+
if (typeof rawWidgetParams === "string" && isJSON(rawWidgetParams)) {
|
|
3048
|
+
widgetParameters = JSON.parse(rawWidgetParams);
|
|
3049
|
+
} else if (typeof rawWidgetParams === "object") {
|
|
3050
|
+
widgetParameters = rawWidgetParams;
|
|
3051
|
+
}
|
|
3052
|
+
}
|
|
3053
|
+
const resolveValue = (val) => {
|
|
3054
|
+
if (typeof val === "string") {
|
|
3055
|
+
const m = /^\{(.+)\}$/.exec(val);
|
|
3056
|
+
if (m) {
|
|
3057
|
+
const actualKey = m[1];
|
|
3058
|
+
return props.routeParameters?.[actualKey] ?? val;
|
|
3059
|
+
}
|
|
3060
|
+
return val;
|
|
3061
|
+
} else if (Array.isArray(val)) {
|
|
3062
|
+
return val.map(resolveValue);
|
|
3063
|
+
} else if (val && typeof val === "object") {
|
|
3064
|
+
const out = {};
|
|
3065
|
+
for (const k of Object.keys(val)) {
|
|
3066
|
+
out[k] = resolveValue(val[k]);
|
|
3067
|
+
}
|
|
3068
|
+
return out;
|
|
3069
|
+
}
|
|
3070
|
+
return val;
|
|
3071
|
+
};
|
|
3072
|
+
Object.keys(widgetParameters).forEach((key) => {
|
|
3073
|
+
const rawVal = widgetParameters[key];
|
|
3074
|
+
if (rawVal === "route") {
|
|
3075
|
+
if (key === "itemPath") {
|
|
3076
|
+
widgetInputParameters[key] = props.path;
|
|
3077
|
+
} else {
|
|
3078
|
+
widgetInputParameters[key] = widgetInputParameters[key] ?? null;
|
|
3079
|
+
}
|
|
3080
|
+
} else {
|
|
3081
|
+
widgetInputParameters[key] = resolveValue(rawVal);
|
|
3082
|
+
}
|
|
3083
|
+
});
|
|
3084
|
+
widgetInputParameters["widgetTitle"] = props.node?.widgetTitle;
|
|
3085
|
+
return widgetInputParameters;
|
|
3086
|
+
};
|
|
3087
|
+
const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
|
|
3088
|
+
if (!SelectedWidget) {
|
|
3089
|
+
console.warn("Widget not found:", props.node.widgetCode);
|
|
3090
|
+
return /* @__PURE__ */ jsxs28(Fragment5, { children: [
|
|
3091
|
+
"Widget not found: ",
|
|
3092
|
+
props.node.widgetCode
|
|
3093
|
+
] });
|
|
3094
|
+
}
|
|
3095
|
+
return /* @__PURE__ */ jsx56(Suspense, { fallback: /* @__PURE__ */ jsx56("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ jsx56(
|
|
3096
|
+
SelectedWidget,
|
|
3097
|
+
{
|
|
3098
|
+
params: getWidgetParameters(),
|
|
3099
|
+
query: props.query,
|
|
3100
|
+
session: props.session,
|
|
3101
|
+
host: props.host,
|
|
3102
|
+
path: props.path,
|
|
3103
|
+
apiBaseUrl: props.apiBaseUrl
|
|
3104
|
+
}
|
|
3105
|
+
) });
|
|
3106
|
+
};
|
|
3107
|
+
var WidgetNode_default = WidgetNode;
|
|
3108
|
+
|
|
3109
|
+
// src/components/pageRenderingEngine/nodes/IframeClient.tsx
|
|
3110
|
+
import React46, { useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
|
|
3111
|
+
|
|
3112
|
+
// src/components/IFrameLoaderView.tsx
|
|
3113
|
+
import React45 from "react";
|
|
3114
|
+
import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3115
|
+
var IFrameLoaderView = (props) => {
|
|
3116
|
+
return /* @__PURE__ */ jsxs29(React45.Fragment, { children: [
|
|
3117
|
+
props.isDataFound == null && /* @__PURE__ */ jsx57("div", { className: "", children: /* @__PURE__ */ jsxs29("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
|
|
3118
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center mb-4", children: [
|
|
3119
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
|
|
3120
|
+
/* @__PURE__ */ jsxs29("div", { className: "ml-2", children: [
|
|
3121
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
|
|
3122
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
|
|
3123
|
+
] })
|
|
3124
|
+
] }),
|
|
3125
|
+
/* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
|
|
3126
|
+
/* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
|
|
3127
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
|
|
3128
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
|
|
3129
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
|
|
3130
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
|
|
3131
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
|
|
3132
|
+
] }),
|
|
3133
|
+
/* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
|
|
3134
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
|
|
3135
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
|
|
3136
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
|
|
3137
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
|
|
3138
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
|
|
3139
|
+
] }),
|
|
3140
|
+
/* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
|
|
3141
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
|
|
3142
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
|
|
3143
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
|
|
3144
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
|
|
3145
|
+
/* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
|
|
3146
|
+
] })
|
|
3147
|
+
] })
|
|
3148
|
+
] }) }),
|
|
3149
|
+
props.children
|
|
3150
|
+
] });
|
|
3151
|
+
};
|
|
3152
|
+
var IFrameLoaderView_default = IFrameLoaderView;
|
|
3153
|
+
|
|
3154
|
+
// src/components/pageRenderingEngine/nodes/IframeClient.tsx
|
|
3155
|
+
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
3156
|
+
var IframeClient = ({ src }) => {
|
|
3157
|
+
const iframeRef = useRef4(null);
|
|
3158
|
+
const [iframeHeight, setIframeHeight] = useState9("100%");
|
|
3159
|
+
const [isDataFound, setIsDataFound] = useState9(null);
|
|
3160
|
+
useEffect8(() => {
|
|
3161
|
+
const handleReceiveMessage = (event) => {
|
|
3162
|
+
const eventName = event?.data?.eventName;
|
|
3163
|
+
const payload = event?.data?.payload;
|
|
3164
|
+
if (eventName === "SET_HEIGHT" && payload?.height) {
|
|
3165
|
+
let height = 500;
|
|
3166
|
+
if (payload.height > 500) {
|
|
3167
|
+
height = payload.height + 50;
|
|
3168
|
+
}
|
|
3169
|
+
setIframeHeight(`${height}px`);
|
|
3170
|
+
}
|
|
3171
|
+
};
|
|
3172
|
+
window.addEventListener("message", handleReceiveMessage);
|
|
3173
|
+
return () => window.removeEventListener("message", handleReceiveMessage);
|
|
3174
|
+
}, []);
|
|
3175
|
+
useEffect8(() => {
|
|
3176
|
+
const handleResize = () => {
|
|
3177
|
+
if (iframeRef.current) {
|
|
3178
|
+
iframeRef.current.contentWindow?.postMessage({ eventName: "RESIZE" }, "*");
|
|
3179
|
+
}
|
|
3180
|
+
};
|
|
3181
|
+
window.addEventListener("resize", handleResize);
|
|
3182
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
3183
|
+
}, []);
|
|
3184
|
+
const handleIframeLoad = () => {
|
|
3185
|
+
setIsDataFound(true);
|
|
3186
|
+
};
|
|
3187
|
+
return /* @__PURE__ */ jsx58(React46.Fragment, { children: /* @__PURE__ */ jsx58(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx58(
|
|
3188
|
+
"iframe",
|
|
3189
|
+
{
|
|
3190
|
+
ref: iframeRef,
|
|
3191
|
+
src,
|
|
3192
|
+
className: "w-full h-full border-none",
|
|
3193
|
+
scrolling: "no",
|
|
3194
|
+
onLoad: handleIframeLoad
|
|
3195
|
+
}
|
|
3196
|
+
) }) });
|
|
3197
|
+
};
|
|
3198
|
+
var IframeClient_default = IframeClient;
|
|
3199
|
+
|
|
3200
|
+
// src/components/pageRenderingEngine/nodes/EmbedNode.tsx
|
|
3201
|
+
import { jsx as jsx59 } from "react/jsx-runtime";
|
|
3202
|
+
var EmbedNode = (props) => {
|
|
3203
|
+
let src;
|
|
3204
|
+
if (props.node.provider == "youtube") {
|
|
3205
|
+
src = `https://www.youtube-nocookie.com/embed/${props.node.embedSrc}`;
|
|
3206
|
+
} else if (props.node.provider == "bunny") {
|
|
3207
|
+
src = `https://iframe.mediadelivery.net/embed/${props.node.embedSrc}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
|
|
3208
|
+
} else {
|
|
3209
|
+
src = props.node.embedSrc;
|
|
3210
|
+
}
|
|
3211
|
+
return /* @__PURE__ */ jsx59("div", { className: "aspect-video", children: src && /* @__PURE__ */ jsx59(IframeClient_default, { src }) });
|
|
3212
|
+
};
|
|
3213
|
+
var EmbedNode_default = EmbedNode;
|
|
3214
|
+
|
|
3215
|
+
// src/components/pageRenderingEngine/nodes/VideoNode.tsx
|
|
3216
|
+
import React47 from "react";
|
|
3217
|
+
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
3218
|
+
var VideoNode = (props) => {
|
|
3219
|
+
let src;
|
|
3220
|
+
if (props.node.provider == "youtube") {
|
|
3221
|
+
src = `https://www.youtube-nocookie.com/embed/${props.node.videoId}`;
|
|
3222
|
+
} else if (props.node.provider == "bunny") {
|
|
3223
|
+
src = `https://iframe.mediadelivery.net/embed/${props.node.videoId}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
|
|
3224
|
+
}
|
|
3225
|
+
return /* @__PURE__ */ jsx60(React47.Fragment, { children: src && /* @__PURE__ */ jsx60("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
|
|
3226
|
+
};
|
|
3227
|
+
var VideoNode_default = VideoNode;
|
|
3228
|
+
|
|
2727
3229
|
// src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
|
|
2728
|
-
import { jsx as
|
|
3230
|
+
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
2729
3231
|
var LayoutItemNode = (props) => {
|
|
2730
3232
|
const NodeTypes2 = {
|
|
2731
3233
|
["paragraph"]: ParagraphNode_default,
|
|
@@ -2736,7 +3238,11 @@ var LayoutItemNode = (props) => {
|
|
|
2736
3238
|
["horizontalrule"]: HorizontalRuleNode_default,
|
|
2737
3239
|
["image"]: ImageNode_default,
|
|
2738
3240
|
["layout-container"]: LayoutContainerNode_default,
|
|
2739
|
-
["link"]: LinkNode_default
|
|
3241
|
+
["link"]: LinkNode_default,
|
|
3242
|
+
["widget"]: WidgetNode_default,
|
|
3243
|
+
["youtube"]: VideoNode_default,
|
|
3244
|
+
["video"]: VideoNode_default,
|
|
3245
|
+
["embed"]: EmbedNode_default
|
|
2740
3246
|
};
|
|
2741
3247
|
let cssClasses = "";
|
|
2742
3248
|
if (props.order) {
|
|
@@ -2754,6 +3260,7 @@ var LayoutItemNode = (props) => {
|
|
|
2754
3260
|
}
|
|
2755
3261
|
if (props.node.itemBorderRadius) {
|
|
2756
3262
|
styles.borderRadius = props.node.itemBorderRadius;
|
|
3263
|
+
styles.overflow = "hidden";
|
|
2757
3264
|
}
|
|
2758
3265
|
function removeParagraphsAtStartAndEnd(layoutItem) {
|
|
2759
3266
|
let startIndex = 0;
|
|
@@ -2770,6 +3277,8 @@ var LayoutItemNode = (props) => {
|
|
|
2770
3277
|
}
|
|
2771
3278
|
if (startIndex <= endIndex) {
|
|
2772
3279
|
layoutItem.children = layoutItem.children.slice(startIndex, endIndex + 1);
|
|
3280
|
+
} else {
|
|
3281
|
+
layoutItem.children = [];
|
|
2773
3282
|
}
|
|
2774
3283
|
return layoutItem;
|
|
2775
3284
|
}
|
|
@@ -2779,201 +3288,160 @@ var LayoutItemNode = (props) => {
|
|
|
2779
3288
|
} else {
|
|
2780
3289
|
updatedLayout = removeParagraphsAtStartAndEnd(props.node);
|
|
2781
3290
|
}
|
|
2782
|
-
return /* @__PURE__ */
|
|
3291
|
+
return /* @__PURE__ */ jsx61(React48.Fragment, { children: /* @__PURE__ */ jsx61("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
|
|
2783
3292
|
{
|
|
2784
3293
|
}
|
|
2785
3294
|
const SelectedNode = NodeTypes2[node.type];
|
|
2786
|
-
return /* @__PURE__ */
|
|
2787
|
-
|
|
3295
|
+
return /* @__PURE__ */ jsx61(React48.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx61(
|
|
3296
|
+
SelectedNode,
|
|
3297
|
+
{
|
|
3298
|
+
node,
|
|
3299
|
+
routeParameters: props.routeParameters,
|
|
3300
|
+
query: props.query,
|
|
3301
|
+
session: props.session,
|
|
3302
|
+
host: props.host,
|
|
3303
|
+
path: props.path,
|
|
3304
|
+
apiBaseUrl: props.apiBaseUrl
|
|
3305
|
+
}
|
|
3306
|
+
) }, index);
|
|
3307
|
+
}) }) });
|
|
2788
3308
|
};
|
|
2789
3309
|
var LayoutItemNode_default = LayoutItemNode;
|
|
2790
3310
|
|
|
2791
|
-
// src/components/
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
}
|
|
2800
|
-
|
|
2801
|
-
"1fr": "layout-grid-col-1",
|
|
2802
|
-
"1fr 1fr": "layout-grid-col-2-equal",
|
|
2803
|
-
"1fr 2fr": "layout-grid-col-2-widths-33-67",
|
|
2804
|
-
"2fr 1fr": "layout-grid-col-2-widths-67-33",
|
|
2805
|
-
"3fr 2fr": "layout-grid-col-2-widths-60-40",
|
|
2806
|
-
"3fr 1fr": "layout-grid-col-2-widths-75-25",
|
|
2807
|
-
"1fr 1fr 1fr": "layout-grid-col-3-equal",
|
|
2808
|
-
"1fr 2fr 1fr": "layout-grid-col-3-widths-25-50-25",
|
|
2809
|
-
"1fr 6fr 1fr": "layout-grid-col-3-widths-15-70-15",
|
|
2810
|
-
"1fr 1fr 1fr 1fr": "layout-grid-col-4-equal"
|
|
3311
|
+
// src/components/utilities/AssetUtility.tsx
|
|
3312
|
+
var AssetUtility = class {
|
|
3313
|
+
constructor() {
|
|
3314
|
+
}
|
|
3315
|
+
static resolveUrl(apiBaseUrl, url) {
|
|
3316
|
+
if (!url) return void 0;
|
|
3317
|
+
if (url.startsWith("http")) return url;
|
|
3318
|
+
if (!apiBaseUrl) return url;
|
|
3319
|
+
return `${apiBaseUrl}/digitalassets-management/${url}`;
|
|
3320
|
+
}
|
|
2811
3321
|
};
|
|
3322
|
+
var AssetUtility_default = AssetUtility;
|
|
3323
|
+
|
|
3324
|
+
// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
|
|
3325
|
+
import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2812
3326
|
var LayoutContainerNode = (props) => {
|
|
2813
|
-
const
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
}
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
3327
|
+
const VERTICAL_ALIGNMENT_CLASSES = {
|
|
3328
|
+
start: "items-start",
|
|
3329
|
+
center: "items-center place-content-center",
|
|
3330
|
+
end: "items-end",
|
|
3331
|
+
stretch: "items-stretch",
|
|
3332
|
+
baseline: "items-baseline"
|
|
3333
|
+
};
|
|
3334
|
+
const LAYOUTGRID_COLS_CLASSES = {
|
|
3335
|
+
"1fr": "layout-grid-col-1",
|
|
3336
|
+
"1fr 1fr": "layout-grid-col-2-equal",
|
|
3337
|
+
"1fr 2fr": "layout-grid-col-2-widths-33-67",
|
|
3338
|
+
"2fr 1fr": "layout-grid-col-2-widths-67-33",
|
|
3339
|
+
"3fr 2fr": "layout-grid-col-2-widths-60-40",
|
|
3340
|
+
"3fr 1fr": "layout-grid-col-2-widths-75-25",
|
|
3341
|
+
"1fr 1fr 1fr": "layout-grid-col-3-equal",
|
|
3342
|
+
"1fr 2fr 1fr": "layout-grid-col-3-widths-25-50-25",
|
|
3343
|
+
"1fr 6fr 1fr": "layout-grid-col-3-widths-15-70-15",
|
|
3344
|
+
"1fr 1fr 1fr 1fr": "layout-grid-col-4-equal"
|
|
3345
|
+
};
|
|
3346
|
+
const sectionWidth = props.node.sectionWidth || "fixed";
|
|
3347
|
+
let gridCssClasses = LAYOUTGRID_COLS_CLASSES[props.node.templateColumns] || "";
|
|
3348
|
+
if (props.node.contentVerticalAlignment) {
|
|
3349
|
+
gridCssClasses += " " + (VERTICAL_ALIGNMENT_CLASSES[props.node.contentVerticalAlignment] || "");
|
|
2823
3350
|
}
|
|
3351
|
+
const columnGap = props.node.columnGap || "0.5rem";
|
|
2824
3352
|
const styles = {};
|
|
2825
|
-
|
|
2826
|
-
styles.backgroundColor = node.backgroundColor;
|
|
2827
|
-
}
|
|
2828
|
-
let cssClasses = "layout_grid ";
|
|
3353
|
+
let cssClasses = "layout_grid";
|
|
2829
3354
|
let addPadding = false;
|
|
2830
|
-
if (node.
|
|
2831
|
-
|
|
2832
|
-
}
|
|
2833
|
-
cssClasses = cssClasses + " " + (node.boxShadow || "");
|
|
2834
|
-
addPadding = true;
|
|
3355
|
+
if (props.node.backgroundColor) {
|
|
3356
|
+
styles.backgroundColor = props.node.backgroundColor;
|
|
2835
3357
|
}
|
|
2836
|
-
if (node.borderWidth) {
|
|
2837
|
-
styles.borderWidth = node.borderWidth;
|
|
3358
|
+
if (props.node.borderWidth) {
|
|
3359
|
+
styles.borderWidth = props.node.borderWidth;
|
|
2838
3360
|
addPadding = true;
|
|
2839
3361
|
}
|
|
2840
|
-
if (node.borderRadius) {
|
|
2841
|
-
styles.borderRadius = node.borderRadius;
|
|
2842
|
-
}
|
|
2843
|
-
let backgroundStyle = "";
|
|
2844
|
-
if (node.backgroundImage) {
|
|
2845
|
-
let resolvedPath = node.backgroundImage;
|
|
2846
|
-
if (!resolvedPath.startsWith("http")) {
|
|
2847
|
-
resolvedPath = `${apiBaseUrl}/digitalassets/storefront/${resolvedPath}`;
|
|
2848
|
-
}
|
|
2849
|
-
backgroundStyle = `url('${resolvedPath}'),`;
|
|
3362
|
+
if (props.node.borderRadius) {
|
|
3363
|
+
styles.borderRadius = props.node.borderRadius;
|
|
2850
3364
|
}
|
|
2851
|
-
if (node.
|
|
2852
|
-
|
|
3365
|
+
if (props.node.boxShadow && props.node.boxShadow !== "shadow-none") {
|
|
3366
|
+
cssClasses += " " + props.node.boxShadow;
|
|
3367
|
+
addPadding = true;
|
|
2853
3368
|
}
|
|
2854
|
-
|
|
2855
|
-
|
|
3369
|
+
const backgroundLayers = [];
|
|
3370
|
+
if (props.node.backgroundImage) {
|
|
3371
|
+
const resolved = AssetUtility_default.resolveUrl(
|
|
3372
|
+
props.apiBaseUrl,
|
|
3373
|
+
props.node.backgroundImage
|
|
3374
|
+
);
|
|
3375
|
+
if (resolved) {
|
|
3376
|
+
backgroundLayers.push(`url('${resolved}')`);
|
|
3377
|
+
addPadding = true;
|
|
3378
|
+
}
|
|
2856
3379
|
}
|
|
2857
|
-
if (
|
|
2858
|
-
|
|
2859
|
-
|
|
3380
|
+
if (props.node.gradientColor1 && props.node.gradientColor2) {
|
|
3381
|
+
backgroundLayers.push(
|
|
3382
|
+
`linear-gradient(to bottom, ${props.node.gradientColor1}, ${props.node.gradientColor2})`
|
|
3383
|
+
);
|
|
3384
|
+
addPadding = true;
|
|
3385
|
+
} else if (props.node.gradientColor1) {
|
|
3386
|
+
backgroundLayers.push(props.node.gradientColor1);
|
|
3387
|
+
addPadding = true;
|
|
3388
|
+
} else if (props.node.gradientColor2) {
|
|
3389
|
+
backgroundLayers.push(props.node.gradientColor2);
|
|
2860
3390
|
addPadding = true;
|
|
2861
3391
|
}
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
sectionWidth = node.sectionWidth;
|
|
3392
|
+
if (backgroundLayers.length) {
|
|
3393
|
+
styles.background = backgroundLayers.join(", ");
|
|
2865
3394
|
}
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
3395
|
+
const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ jsx62(
|
|
3396
|
+
LayoutItemNode_default,
|
|
3397
|
+
{
|
|
3398
|
+
node,
|
|
3399
|
+
order: props.node.smOrder === "reverse" ? props.node.children.length - index : index,
|
|
3400
|
+
routeParameters: props.routeParameters,
|
|
3401
|
+
query: props.query,
|
|
3402
|
+
session: props.session,
|
|
3403
|
+
host: props.host,
|
|
3404
|
+
path: props.path,
|
|
3405
|
+
apiBaseUrl: props.apiBaseUrl
|
|
3406
|
+
},
|
|
3407
|
+
index
|
|
3408
|
+
));
|
|
3409
|
+
return /* @__PURE__ */ jsxs30(Fragment6, { children: [
|
|
3410
|
+
sectionWidth === "mixed" && /* @__PURE__ */ jsx62("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
|
|
3411
|
+
"div",
|
|
3412
|
+
{
|
|
3413
|
+
className: `grid gap-y-4 lg:gap-y-0 ${gridCssClasses} ${addPadding ? "py-8 lg:py-6" : ""}`,
|
|
3414
|
+
style: { columnGap, minHeight: props.node.height },
|
|
3415
|
+
children: renderChildren()
|
|
3416
|
+
}
|
|
3417
|
+
) }) }),
|
|
3418
|
+
sectionWidth === "full" && /* @__PURE__ */ jsx62(
|
|
2871
3419
|
"div",
|
|
2872
3420
|
{
|
|
2873
|
-
className:
|
|
3421
|
+
className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "p-8 lg:p-0" : ""}`,
|
|
2874
3422
|
style: { columnGap, ...styles },
|
|
2875
|
-
children:
|
|
2876
|
-
return /* @__PURE__ */ jsx53(React45.Fragment, { children: /* @__PURE__ */ jsx53(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
|
|
2877
|
-
})
|
|
3423
|
+
children: renderChildren()
|
|
2878
3424
|
}
|
|
2879
3425
|
),
|
|
2880
|
-
sectionWidth
|
|
3426
|
+
sectionWidth === "fixed" && /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
|
|
2881
3427
|
"div",
|
|
2882
3428
|
{
|
|
2883
|
-
className:
|
|
3429
|
+
className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "px-8 py-6 lg:px-6 lg:py-6" : ""}`,
|
|
2884
3430
|
style: { columnGap, ...styles },
|
|
2885
|
-
children:
|
|
2886
|
-
return /* @__PURE__ */ jsx53(React45.Fragment, { children: /* @__PURE__ */ jsx53(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
|
|
2887
|
-
})
|
|
3431
|
+
children: renderChildren()
|
|
2888
3432
|
}
|
|
2889
3433
|
) })
|
|
2890
3434
|
] });
|
|
2891
3435
|
};
|
|
2892
3436
|
var LayoutContainerNode_default = LayoutContainerNode;
|
|
2893
3437
|
|
|
2894
|
-
// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
|
|
2895
|
-
import { Suspense } from "react";
|
|
2896
|
-
import { Fragment as Fragment4, jsx as jsx54, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2897
|
-
var WidgetNode = (props) => {
|
|
2898
|
-
const getWidgetParameters = () => {
|
|
2899
|
-
const widgetInputParameters = { ...props.routeParameters ?? {} };
|
|
2900
|
-
const rawWidgetParams = props.node?.widgetParameters ?? props.node?.widgetParams;
|
|
2901
|
-
let widgetParameters = {};
|
|
2902
|
-
const isJSON = (str) => {
|
|
2903
|
-
if (typeof str !== "string") return false;
|
|
2904
|
-
str = str.trim();
|
|
2905
|
-
return str.startsWith("{") && str.endsWith("}") || str.startsWith("[") && str.endsWith("]");
|
|
2906
|
-
};
|
|
2907
|
-
if (rawWidgetParams) {
|
|
2908
|
-
if (typeof rawWidgetParams === "string" && isJSON(rawWidgetParams)) {
|
|
2909
|
-
widgetParameters = JSON.parse(rawWidgetParams);
|
|
2910
|
-
} else if (typeof rawWidgetParams === "object") {
|
|
2911
|
-
widgetParameters = rawWidgetParams;
|
|
2912
|
-
}
|
|
2913
|
-
}
|
|
2914
|
-
const resolveValue = (val) => {
|
|
2915
|
-
if (typeof val === "string") {
|
|
2916
|
-
const m = /^\{(.+)\}$/.exec(val);
|
|
2917
|
-
if (m) {
|
|
2918
|
-
const actualKey = m[1];
|
|
2919
|
-
return props.routeParameters?.[actualKey] ?? val;
|
|
2920
|
-
}
|
|
2921
|
-
return val;
|
|
2922
|
-
} else if (Array.isArray(val)) {
|
|
2923
|
-
return val.map(resolveValue);
|
|
2924
|
-
} else if (val && typeof val === "object") {
|
|
2925
|
-
const out = {};
|
|
2926
|
-
for (const k of Object.keys(val)) {
|
|
2927
|
-
out[k] = resolveValue(val[k]);
|
|
2928
|
-
}
|
|
2929
|
-
return out;
|
|
2930
|
-
}
|
|
2931
|
-
return val;
|
|
2932
|
-
};
|
|
2933
|
-
Object.keys(widgetParameters).forEach((key) => {
|
|
2934
|
-
const rawVal = widgetParameters[key];
|
|
2935
|
-
if (rawVal === "route") {
|
|
2936
|
-
if (key === "itemPath") {
|
|
2937
|
-
widgetInputParameters[key] = props.path;
|
|
2938
|
-
} else {
|
|
2939
|
-
widgetInputParameters[key] = widgetInputParameters[key] ?? null;
|
|
2940
|
-
}
|
|
2941
|
-
} else {
|
|
2942
|
-
widgetInputParameters[key] = resolveValue(rawVal);
|
|
2943
|
-
}
|
|
2944
|
-
});
|
|
2945
|
-
widgetInputParameters["widgetTitle"] = props.node?.widgetTitle;
|
|
2946
|
-
return widgetInputParameters;
|
|
2947
|
-
};
|
|
2948
|
-
const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
|
|
2949
|
-
if (!SelectedWidget) {
|
|
2950
|
-
console.warn("Widget not found:", props.node.widgetCode);
|
|
2951
|
-
return /* @__PURE__ */ jsxs27(Fragment4, { children: [
|
|
2952
|
-
"Widget not found: ",
|
|
2953
|
-
props.node.widgetCode
|
|
2954
|
-
] });
|
|
2955
|
-
}
|
|
2956
|
-
return /* @__PURE__ */ jsx54(Suspense, { fallback: /* @__PURE__ */ jsx54("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ jsx54(
|
|
2957
|
-
SelectedWidget,
|
|
2958
|
-
{
|
|
2959
|
-
params: getWidgetParameters(),
|
|
2960
|
-
query: props.query,
|
|
2961
|
-
session: props.session,
|
|
2962
|
-
host: props.host,
|
|
2963
|
-
path: props.path,
|
|
2964
|
-
apiBaseUrl: props.apiBaseUrl
|
|
2965
|
-
}
|
|
2966
|
-
) });
|
|
2967
|
-
};
|
|
2968
|
-
var WidgetNode_default = WidgetNode;
|
|
2969
|
-
|
|
2970
3438
|
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
2971
|
-
import
|
|
3439
|
+
import React49, { useRef as useRef5, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect9 } from "react";
|
|
2972
3440
|
|
|
2973
3441
|
// src/components/pageRenderingEngine/nodes/InputControlNode.tsx
|
|
2974
|
-
import { jsx as
|
|
3442
|
+
import { jsx as jsx63 } from "react/jsx-runtime";
|
|
2975
3443
|
var InputControlNode = (props) => {
|
|
2976
|
-
return /* @__PURE__ */
|
|
3444
|
+
return /* @__PURE__ */ jsx63("div", { children: /* @__PURE__ */ jsx63(
|
|
2977
3445
|
InputControl_default,
|
|
2978
3446
|
{
|
|
2979
3447
|
name: props.node.name,
|
|
@@ -3002,13 +3470,13 @@ var InputControlNode = (props) => {
|
|
|
3002
3470
|
var InputControlNode_default = InputControlNode;
|
|
3003
3471
|
|
|
3004
3472
|
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3005
|
-
import { jsx as
|
|
3473
|
+
import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3006
3474
|
var FormContainerNode = (props) => {
|
|
3007
3475
|
const NodeTypes2 = {
|
|
3008
3476
|
["input-control"]: InputControlNode_default
|
|
3009
3477
|
};
|
|
3010
3478
|
const { node } = props;
|
|
3011
|
-
const formRef =
|
|
3479
|
+
const formRef = useRef5(null);
|
|
3012
3480
|
const initialState = {
|
|
3013
3481
|
inputValues: {},
|
|
3014
3482
|
lastPropertyChanged: ""
|
|
@@ -3025,7 +3493,7 @@ var FormContainerNode = (props) => {
|
|
|
3025
3493
|
return true;
|
|
3026
3494
|
}
|
|
3027
3495
|
};
|
|
3028
|
-
|
|
3496
|
+
useEffect9(() => {
|
|
3029
3497
|
const fetchInitialData = async () => {
|
|
3030
3498
|
if (!props.fetchData || !node.dataFetchApi) return;
|
|
3031
3499
|
const response = await props.fetchData(
|
|
@@ -3042,12 +3510,12 @@ var FormContainerNode = (props) => {
|
|
|
3042
3510
|
};
|
|
3043
3511
|
fetchInitialData();
|
|
3044
3512
|
}, [props.fetchData, node.dataFetchApi, props.routeParameters]);
|
|
3045
|
-
return /* @__PURE__ */
|
|
3513
|
+
return /* @__PURE__ */ jsxs31("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
|
|
3046
3514
|
node.children && node.children.map((node2, index) => {
|
|
3047
3515
|
{
|
|
3048
3516
|
}
|
|
3049
3517
|
const SelectedNode = NodeTypes2[node2.type];
|
|
3050
|
-
return /* @__PURE__ */
|
|
3518
|
+
return /* @__PURE__ */ jsx64(React49.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx64(
|
|
3051
3519
|
InputControlNode_default,
|
|
3052
3520
|
{
|
|
3053
3521
|
value: formState.inputValues[node2.name],
|
|
@@ -3056,34 +3524,15 @@ var FormContainerNode = (props) => {
|
|
|
3056
3524
|
}
|
|
3057
3525
|
) }, index);
|
|
3058
3526
|
}),
|
|
3059
|
-
node.children.length == 0 && /* @__PURE__ */
|
|
3527
|
+
node.children.length == 0 && /* @__PURE__ */ jsx64("div", { className: "py-0.5 lg:py-1.5" })
|
|
3060
3528
|
] });
|
|
3061
3529
|
};
|
|
3062
3530
|
var FormContainerNode_default = FormContainerNode;
|
|
3063
3531
|
|
|
3064
3532
|
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
3065
|
-
import
|
|
3533
|
+
import React50 from "react";
|
|
3066
3534
|
import Link3 from "next/link";
|
|
3067
|
-
|
|
3068
|
-
// src/components/utilities/AssetUtility.tsx
|
|
3069
|
-
var AssetUtility = class {
|
|
3070
|
-
constructor() {
|
|
3071
|
-
}
|
|
3072
|
-
static resolveUrl(apiBaseUrl, url) {
|
|
3073
|
-
if (url) {
|
|
3074
|
-
if (url.startsWith("http")) {
|
|
3075
|
-
return url;
|
|
3076
|
-
} else {
|
|
3077
|
-
return `${apiBaseUrl}/digitalassets-management/${url}`;
|
|
3078
|
-
}
|
|
3079
|
-
}
|
|
3080
|
-
return void 0;
|
|
3081
|
-
}
|
|
3082
|
-
};
|
|
3083
|
-
var AssetUtility_default = AssetUtility;
|
|
3084
|
-
|
|
3085
|
-
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
3086
|
-
import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3535
|
+
import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3087
3536
|
var DivContainer = (props) => {
|
|
3088
3537
|
const { cssProperties: styles, hoverCssProperties: hoverStyles, mobileCssProperties: mobileStyles } = props.node;
|
|
3089
3538
|
const updatedStyles = convertKeysToCamelCase(styles);
|
|
@@ -3097,8 +3546,11 @@ var DivContainer = (props) => {
|
|
|
3097
3546
|
["horizontalrule"]: HorizontalRuleNode_default,
|
|
3098
3547
|
["layout-container"]: LayoutContainerNode_default,
|
|
3099
3548
|
["widget"]: WidgetNode_default,
|
|
3549
|
+
["embed"]: EmbedNode_default,
|
|
3100
3550
|
["div-container"]: DivContainer,
|
|
3101
|
-
["text"]: TextNode_default
|
|
3551
|
+
["text"]: TextNode_default,
|
|
3552
|
+
["datafield"]: DatafieldNode_default,
|
|
3553
|
+
["svg-icon"]: SVGIconNode_default
|
|
3102
3554
|
};
|
|
3103
3555
|
function toCamelCase(str) {
|
|
3104
3556
|
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
@@ -3199,9 +3651,9 @@ ${mobileCssRules.join("\n")}
|
|
|
3199
3651
|
return css2;
|
|
3200
3652
|
};
|
|
3201
3653
|
const css = generateCssString(updatedStyle, hoverStyles, mobileStyles);
|
|
3202
|
-
return /* @__PURE__ */
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
props.node.href && props.node.href !== "" ? /* @__PURE__ */
|
|
3654
|
+
return /* @__PURE__ */ jsxs32(React50.Fragment, { children: [
|
|
3655
|
+
/* @__PURE__ */ jsx65("style", { dangerouslySetInnerHTML: { __html: css } }),
|
|
3656
|
+
props.node.href && props.node.href !== "" ? /* @__PURE__ */ jsx65(Link3, { href: props.node.href, className: "block", children: /* @__PURE__ */ jsx65(
|
|
3205
3657
|
"div",
|
|
3206
3658
|
{
|
|
3207
3659
|
id: guid,
|
|
@@ -3209,7 +3661,7 @@ ${mobileCssRules.join("\n")}
|
|
|
3209
3661
|
className: containerPaddingClass,
|
|
3210
3662
|
children: props.node.children?.map((node, index) => {
|
|
3211
3663
|
const SelectedNode = NodeTypes2[node.type];
|
|
3212
|
-
return /* @__PURE__ */
|
|
3664
|
+
return /* @__PURE__ */ jsx65(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx65(
|
|
3213
3665
|
SelectedNode,
|
|
3214
3666
|
{
|
|
3215
3667
|
node,
|
|
@@ -3224,9 +3676,9 @@ ${mobileCssRules.join("\n")}
|
|
|
3224
3676
|
) }, index);
|
|
3225
3677
|
})
|
|
3226
3678
|
}
|
|
3227
|
-
) }) : /* @__PURE__ */
|
|
3679
|
+
) }) : /* @__PURE__ */ jsx65("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
|
|
3228
3680
|
const SelectedNode = NodeTypes2[node.type];
|
|
3229
|
-
return /* @__PURE__ */
|
|
3681
|
+
return /* @__PURE__ */ jsx65(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx65(
|
|
3230
3682
|
SelectedNode,
|
|
3231
3683
|
{
|
|
3232
3684
|
node,
|
|
@@ -3245,7 +3697,7 @@ ${mobileCssRules.join("\n")}
|
|
|
3245
3697
|
var DivContainer_default = DivContainer;
|
|
3246
3698
|
|
|
3247
3699
|
// src/components/pageRenderingEngine/PageBodyRenderer.tsx
|
|
3248
|
-
import { jsx as
|
|
3700
|
+
import { jsx as jsx66 } from "react/jsx-runtime";
|
|
3249
3701
|
var NodeTypes = {
|
|
3250
3702
|
["paragraph"]: ParagraphNode_default,
|
|
3251
3703
|
["heading"]: HeadingNode_default,
|
|
@@ -3257,7 +3709,9 @@ var NodeTypes = {
|
|
|
3257
3709
|
["layout-container"]: LayoutContainerNode_default,
|
|
3258
3710
|
["widget"]: WidgetNode_default,
|
|
3259
3711
|
["form-container"]: FormContainerNode_default,
|
|
3260
|
-
["div-container"]: DivContainer_default
|
|
3712
|
+
["div-container"]: DivContainer_default,
|
|
3713
|
+
["svg-icon"]: SVGIconNode_default,
|
|
3714
|
+
["embed"]: EmbedNode_default
|
|
3261
3715
|
};
|
|
3262
3716
|
var PageBodyRenderer = (props) => {
|
|
3263
3717
|
let pageBodyTree;
|
|
@@ -3271,11 +3725,11 @@ var PageBodyRenderer = (props) => {
|
|
|
3271
3725
|
if (pageBodyTree && pageBodyTree.root) {
|
|
3272
3726
|
rootNode = pageBodyTree.root;
|
|
3273
3727
|
}
|
|
3274
|
-
return /* @__PURE__ */
|
|
3728
|
+
return /* @__PURE__ */ jsx66(React51.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
|
|
3275
3729
|
{
|
|
3276
3730
|
}
|
|
3277
3731
|
const SelectedNode = NodeTypes[node.type];
|
|
3278
|
-
return /* @__PURE__ */
|
|
3732
|
+
return /* @__PURE__ */ jsx66(React51.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx66(React51.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx66(React51.Fragment, { children: /* @__PURE__ */ jsx66(
|
|
3279
3733
|
SelectedNode,
|
|
3280
3734
|
{
|
|
3281
3735
|
node,
|
|
@@ -3288,7 +3742,7 @@ var PageBodyRenderer = (props) => {
|
|
|
3288
3742
|
apiBaseUrl: props.apiBaseUrl,
|
|
3289
3743
|
widgetRegistry: props.widgetRegistry
|
|
3290
3744
|
}
|
|
3291
|
-
) }) : /* @__PURE__ */
|
|
3745
|
+
) }) : /* @__PURE__ */ jsx66(React51.Fragment, { children: /* @__PURE__ */ jsx66(
|
|
3292
3746
|
SelectedNode,
|
|
3293
3747
|
{
|
|
3294
3748
|
node,
|
|
@@ -3312,3 +3766,4 @@ export {
|
|
|
3312
3766
|
ViewControl_default as ViewControl,
|
|
3313
3767
|
ViewControlTypes_default as ViewControlTypes
|
|
3314
3768
|
};
|
|
3769
|
+
//# sourceMappingURL=index.mjs.map
|