@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260323123345 → 0.8.1-dev.20260324072940
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 +5 -7
- package/dist/index.d.ts +5 -7
- package/dist/index.js +914 -878
- package/dist/index.mjs +909 -873
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -39,6 +39,8 @@ var DateView = (props) => {
|
|
|
39
39
|
let timezone;
|
|
40
40
|
try {
|
|
41
41
|
const val = props.value && props.value.toString().includes("Z") ? props.value : props.value + "Z";
|
|
42
|
+
{
|
|
43
|
+
}
|
|
42
44
|
const parsedDate = new Date(val);
|
|
43
45
|
const timezoneOffset = parsedDate.getTimezoneOffset();
|
|
44
46
|
timezone = moment.tz.zone(moment.tz.guess())?.abbr(timezoneOffset);
|
|
@@ -156,6 +158,8 @@ var StatusView_default = Status;
|
|
|
156
158
|
import React8 from "react";
|
|
157
159
|
import { jsx as jsx8, jsxs } from "react/jsx-runtime";
|
|
158
160
|
var Money = (props) => {
|
|
161
|
+
{
|
|
162
|
+
}
|
|
159
163
|
const parsedNumber = parseFloat(props.value);
|
|
160
164
|
return /* @__PURE__ */ jsx8(React8.Fragment, { children: !Number.isNaN(parsedNumber) && /* @__PURE__ */ jsxs("span", { className: parsedNumber < 0 ? "text-alert" : "", children: [
|
|
161
165
|
/* @__PURE__ */ jsx8("span", { className: "mr-0.5", children: "\u20B9" }),
|
|
@@ -168,6 +172,8 @@ var MoneyView_default = Money;
|
|
|
168
172
|
import React9 from "react";
|
|
169
173
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
170
174
|
var MultilineTextBullets = (props) => {
|
|
175
|
+
{
|
|
176
|
+
}
|
|
171
177
|
const lines = props.value?.split("\\n");
|
|
172
178
|
return /* @__PURE__ */ jsx9(React9.Fragment, { children: /* @__PURE__ */ jsx9("ul", { className: "list-disc", children: lines && lines.map((line, index) => {
|
|
173
179
|
return /* @__PURE__ */ jsx9("li", { children: line }, index);
|
|
@@ -200,7 +206,7 @@ var ViewControl = React11.forwardRef(
|
|
|
200
206
|
[ViewControlTypes_default.booleanView]: BooleanView_default
|
|
201
207
|
// [ViewControlTypes.booleanView]: BooleanView
|
|
202
208
|
};
|
|
203
|
-
const SelectedControlComponent = ControlComponents[props.controlType];
|
|
209
|
+
const SelectedControlComponent = props.controlType ? ControlComponents[props.controlType] : void 0;
|
|
204
210
|
return /* @__PURE__ */ jsx11(React11.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx11(SelectedControlComponent, { ...props }) : "Control not found" });
|
|
205
211
|
}
|
|
206
212
|
);
|
|
@@ -2509,7 +2515,7 @@ var DataList = (props) => {
|
|
|
2509
2515
|
var DataList_default = DataList;
|
|
2510
2516
|
|
|
2511
2517
|
// src/components/pageRenderingEngine/PageBodyRenderer.tsx
|
|
2512
|
-
import
|
|
2518
|
+
import React50 from "react";
|
|
2513
2519
|
|
|
2514
2520
|
// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
|
|
2515
2521
|
import React36 from "react";
|
|
@@ -2517,9 +2523,6 @@ import React36 from "react";
|
|
|
2517
2523
|
// src/components/pageRenderingEngine/nodes/TextNode.tsx
|
|
2518
2524
|
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
2519
2525
|
var TextNode = (props) => {
|
|
2520
|
-
const NodeTypes2 = {
|
|
2521
|
-
["text"]: TextNode
|
|
2522
|
-
};
|
|
2523
2526
|
function cssStringToJson(cssString) {
|
|
2524
2527
|
const styleObject = {};
|
|
2525
2528
|
const matches = cssString?.match(/([\w-]+)\s*:\s*([^;]+)\s*;/g);
|
|
@@ -2567,18 +2570,25 @@ var TextNode = (props) => {
|
|
|
2567
2570
|
}
|
|
2568
2571
|
const styles = convertKeysToCamelCase2(cssStringToJson(props.node.style));
|
|
2569
2572
|
function replacePlaceholders(template, dataItem) {
|
|
2573
|
+
{
|
|
2574
|
+
}
|
|
2570
2575
|
return template.replace(/{(\w+)}/g, (_, key) => {
|
|
2576
|
+
{
|
|
2577
|
+
}
|
|
2571
2578
|
return key in dataItem ? dataItem[key] : `{${key}}`;
|
|
2572
2579
|
});
|
|
2573
2580
|
}
|
|
2574
2581
|
const displayText = props.linkText ? props.linkText : props.node.text;
|
|
2575
|
-
return
|
|
2582
|
+
return (
|
|
2583
|
+
// @ts-expect-error custom code
|
|
2584
|
+
/* @__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 })
|
|
2585
|
+
);
|
|
2576
2586
|
};
|
|
2577
2587
|
var TextNode_default = TextNode;
|
|
2578
2588
|
|
|
2579
2589
|
// src/components/pageRenderingEngine/nodes/LineBreakNode.tsx
|
|
2580
2590
|
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
2581
|
-
var LineBreakNode = (
|
|
2591
|
+
var LineBreakNode = () => {
|
|
2582
2592
|
return /* @__PURE__ */ jsx42("div", { className: "py-0.5 lg:py-1.5" });
|
|
2583
2593
|
};
|
|
2584
2594
|
var LineBreakNode_default = LineBreakNode;
|
|
@@ -2663,12 +2673,18 @@ import { jsx as jsx46 } from "react/jsx-runtime";
|
|
|
2663
2673
|
function getNestedProperty(obj, path) {
|
|
2664
2674
|
if (!obj || !path) return null;
|
|
2665
2675
|
if (path.includes(".")) {
|
|
2666
|
-
return path.split(".").reduce((prev, curr) =>
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2676
|
+
return path.split(".").reduce((prev, curr) => {
|
|
2677
|
+
if (prev && typeof prev === "object") {
|
|
2678
|
+
return prev[curr];
|
|
2679
|
+
}
|
|
2680
|
+
return null;
|
|
2681
|
+
}, obj);
|
|
2671
2682
|
}
|
|
2683
|
+
const value = obj[path];
|
|
2684
|
+
if (Array.isArray(value)) {
|
|
2685
|
+
return value.map((item, index) => /* @__PURE__ */ jsx46("div", { children: String(item) }, index));
|
|
2686
|
+
}
|
|
2687
|
+
return value;
|
|
2672
2688
|
}
|
|
2673
2689
|
var DatafieldNode = (props) => {
|
|
2674
2690
|
function cssStringToJson(cssString) {
|
|
@@ -2678,9 +2694,7 @@ var DatafieldNode = (props) => {
|
|
|
2678
2694
|
matches.forEach((match) => {
|
|
2679
2695
|
const parts = match.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
|
|
2680
2696
|
if (parts && parts.length === 3) {
|
|
2681
|
-
|
|
2682
|
-
const value2 = parts[2].trim();
|
|
2683
|
-
styleObject[property] = value2;
|
|
2697
|
+
styleObject[parts[1].trim()] = parts[2].trim();
|
|
2684
2698
|
}
|
|
2685
2699
|
});
|
|
2686
2700
|
}
|
|
@@ -2690,9 +2704,11 @@ var DatafieldNode = (props) => {
|
|
|
2690
2704
|
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
2691
2705
|
}
|
|
2692
2706
|
function convertKeysToCamelCase2(obj) {
|
|
2693
|
-
if (!obj || typeof obj !== "object") return obj;
|
|
2694
2707
|
return Object.fromEntries(
|
|
2695
|
-
Object.entries(obj).map(([key, value2]) => [
|
|
2708
|
+
Object.entries(obj).map(([key, value2]) => [
|
|
2709
|
+
toCamelCase2(key),
|
|
2710
|
+
value2
|
|
2711
|
+
])
|
|
2696
2712
|
);
|
|
2697
2713
|
}
|
|
2698
2714
|
const Formats = [
|
|
@@ -2709,11 +2725,12 @@ var DatafieldNode = (props) => {
|
|
|
2709
2725
|
"italic underline",
|
|
2710
2726
|
"italic underline font-medium"
|
|
2711
2727
|
];
|
|
2712
|
-
const styles = convertKeysToCamelCase2(
|
|
2713
|
-
|
|
2728
|
+
const styles = convertKeysToCamelCase2(
|
|
2729
|
+
cssStringToJson(props.node.style)
|
|
2730
|
+
);
|
|
2731
|
+
const fieldName = props.node.fieldName ?? "";
|
|
2714
2732
|
const value = props.dataitem ? getNestedProperty(props.dataitem, fieldName) : null;
|
|
2715
|
-
|
|
2716
|
-
const isEmptyValue = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0 || typeof value === "object" && Object.keys(value).length === 0;
|
|
2733
|
+
const isEmptyValue = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0 || typeof value === "object" && value !== null && Object.keys(value).length === 0;
|
|
2717
2734
|
const maxLines = props.node.maxLines;
|
|
2718
2735
|
if (maxLines && Number(maxLines) > 0) {
|
|
2719
2736
|
Object.assign(styles, {
|
|
@@ -2724,14 +2741,12 @@ var DatafieldNode = (props) => {
|
|
|
2724
2741
|
});
|
|
2725
2742
|
}
|
|
2726
2743
|
const dataType = props.node.dataType;
|
|
2727
|
-
if (isEmptyValue)
|
|
2728
|
-
|
|
2729
|
-
}
|
|
2730
|
-
if (dataType == "rawContent") {
|
|
2744
|
+
if (isEmptyValue) return null;
|
|
2745
|
+
if (dataType === "rawContent") {
|
|
2731
2746
|
return /* @__PURE__ */ jsx46(
|
|
2732
2747
|
PageBodyRenderer_default,
|
|
2733
2748
|
{
|
|
2734
|
-
rawBody: value ?? `@databound[${fieldName}]
|
|
2749
|
+
rawBody: String(value ?? `@databound[${fieldName}]`),
|
|
2735
2750
|
routeParameters: props.routeParameters,
|
|
2736
2751
|
query: props.query,
|
|
2737
2752
|
session: props.session,
|
|
@@ -2748,7 +2763,13 @@ var DatafieldNode = (props) => {
|
|
|
2748
2763
|
{
|
|
2749
2764
|
className: `datafield-node ${props.node.format < Formats.length ? Formats[props.node.format] : ""}`,
|
|
2750
2765
|
style: styles,
|
|
2751
|
-
children:
|
|
2766
|
+
children: /* @__PURE__ */ jsx46(
|
|
2767
|
+
ViewControl_default,
|
|
2768
|
+
{
|
|
2769
|
+
controlType: dataType,
|
|
2770
|
+
value: value ?? `@databound[${fieldName}]`
|
|
2771
|
+
}
|
|
2772
|
+
)
|
|
2752
2773
|
}
|
|
2753
2774
|
);
|
|
2754
2775
|
};
|
|
@@ -2771,7 +2792,7 @@ var ParagraphNode = (props) => {
|
|
|
2771
2792
|
};
|
|
2772
2793
|
{
|
|
2773
2794
|
}
|
|
2774
|
-
|
|
2795
|
+
const formatClasses = FormatClass[props.node.format] || "";
|
|
2775
2796
|
const isInlineOnlyParent = props.parentTag === "summary";
|
|
2776
2797
|
const hasChildren = props.node.children && props.node.children.length > 0;
|
|
2777
2798
|
if (isInlineOnlyParent) {
|
|
@@ -2816,7 +2837,6 @@ var HeadingNode = (props) => {
|
|
|
2816
2837
|
["text"]: TextNode_default,
|
|
2817
2838
|
["link"]: LinkNode_default,
|
|
2818
2839
|
["svg-icon"]: SVGIconNode_default,
|
|
2819
|
-
// ["linebreak"]: LineBreakNodeNew,
|
|
2820
2840
|
["datafield"]: DatafieldNode_default
|
|
2821
2841
|
};
|
|
2822
2842
|
const HeadingTag = `${props.node.tag}`;
|
|
@@ -2825,7 +2845,7 @@ var HeadingNode = (props) => {
|
|
|
2825
2845
|
};
|
|
2826
2846
|
{
|
|
2827
2847
|
}
|
|
2828
|
-
|
|
2848
|
+
const formatClasses = FormatClass[props.node.format] || "";
|
|
2829
2849
|
return /* @__PURE__ */ jsx48(Fragment5, { children: React37.createElement(
|
|
2830
2850
|
HeadingTag,
|
|
2831
2851
|
{ className: formatClasses },
|
|
@@ -2969,8 +2989,10 @@ function CopyButton({ text }) {
|
|
|
2969
2989
|
import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2970
2990
|
var CodeNode = (props) => {
|
|
2971
2991
|
const NodeTypes2 = {
|
|
2992
|
+
// @ts-expect-error custom code
|
|
2972
2993
|
["text"]: TextNode_default,
|
|
2973
2994
|
["linebreak"]: LineBreakNode_default,
|
|
2995
|
+
// @ts-expect-error custom code
|
|
2974
2996
|
["link"]: LinkNode_default
|
|
2975
2997
|
};
|
|
2976
2998
|
const textContent = props.node?.children?.map((node) => {
|
|
@@ -2994,28 +3016,22 @@ var CodeNode_default = CodeNode;
|
|
|
2994
3016
|
|
|
2995
3017
|
// src/components/pageRenderingEngine/nodes/HorizontalRuleNode.tsx
|
|
2996
3018
|
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
2997
|
-
var HorizontalRuleNode = (
|
|
3019
|
+
var HorizontalRuleNode = () => {
|
|
2998
3020
|
return /* @__PURE__ */ jsx54("hr", {});
|
|
2999
3021
|
};
|
|
3000
3022
|
var HorizontalRuleNode_default = HorizontalRuleNode;
|
|
3001
3023
|
|
|
3002
|
-
// src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
|
|
3003
|
-
import React46 from "react";
|
|
3004
|
-
|
|
3005
3024
|
// src/components/pageRenderingEngine/nodes/ImageNode.tsx
|
|
3006
3025
|
import { Fragment as Fragment6, jsx as jsx55 } from "react/jsx-runtime";
|
|
3007
3026
|
var ImageNode = (props) => {
|
|
3008
|
-
const { node,
|
|
3009
|
-
let imageUrl;
|
|
3027
|
+
const { node, assetBaseUrl = "" } = props;
|
|
3010
3028
|
if (!node.imageUrl) return null;
|
|
3029
|
+
let imageUrl;
|
|
3011
3030
|
if (node.imageUrl.startsWith("http")) {
|
|
3012
3031
|
imageUrl = node.imageUrl;
|
|
3013
|
-
} else if (resolveAssetUrl) {
|
|
3014
|
-
imageUrl = resolveAssetUrl(node.imageUrl);
|
|
3015
3032
|
} else {
|
|
3016
|
-
imageUrl = `${
|
|
3033
|
+
imageUrl = assetBaseUrl ? `${assetBaseUrl}/${node.imageUrl}` : node.imageUrl;
|
|
3017
3034
|
}
|
|
3018
|
-
if (!imageUrl) return null;
|
|
3019
3035
|
return /* @__PURE__ */ jsx55(Fragment6, { children: node.width ? /* @__PURE__ */ jsx55("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx55(
|
|
3020
3036
|
"img",
|
|
3021
3037
|
{
|
|
@@ -3041,21 +3057,37 @@ var ImageNode = (props) => {
|
|
|
3041
3057
|
var ImageNode_default = ImageNode;
|
|
3042
3058
|
|
|
3043
3059
|
// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
|
|
3044
|
-
import { Suspense } from "react";
|
|
3060
|
+
import React42, { Suspense } from "react";
|
|
3061
|
+
|
|
3062
|
+
// src/components/pageRenderingEngine/nodes/WidgetRegistry.tsx
|
|
3063
|
+
var registry = {};
|
|
3064
|
+
var getWidget = (code) => {
|
|
3065
|
+
return registry[code];
|
|
3066
|
+
};
|
|
3067
|
+
|
|
3068
|
+
// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
|
|
3045
3069
|
import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3070
|
+
function resolveWidget(code) {
|
|
3071
|
+
return getWidget(code);
|
|
3072
|
+
}
|
|
3046
3073
|
var WidgetNode = (props) => {
|
|
3047
3074
|
const getWidgetParameters = () => {
|
|
3048
|
-
const widgetInputParameters = {
|
|
3049
|
-
|
|
3075
|
+
const widgetInputParameters = {
|
|
3076
|
+
...props.routeParameters ?? {}
|
|
3077
|
+
};
|
|
3078
|
+
const rawWidgetParams = props.node.widgetParameters ?? props.node.widgetParams;
|
|
3050
3079
|
let widgetParameters = {};
|
|
3051
3080
|
const isJSON = (str) => {
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
return str.startsWith("{") && str.endsWith("}") || str.startsWith("[") && str.endsWith("]");
|
|
3081
|
+
const s = str.trim();
|
|
3082
|
+
return s.startsWith("{") && s.endsWith("}") || s.startsWith("[") && s.endsWith("]");
|
|
3055
3083
|
};
|
|
3056
3084
|
if (rawWidgetParams) {
|
|
3057
3085
|
if (typeof rawWidgetParams === "string" && isJSON(rawWidgetParams)) {
|
|
3058
|
-
|
|
3086
|
+
try {
|
|
3087
|
+
widgetParameters = JSON.parse(rawWidgetParams);
|
|
3088
|
+
} catch {
|
|
3089
|
+
widgetParameters = {};
|
|
3090
|
+
}
|
|
3059
3091
|
} else if (typeof rawWidgetParams === "object") {
|
|
3060
3092
|
widgetParameters = rawWidgetParams;
|
|
3061
3093
|
}
|
|
@@ -3068,9 +3100,11 @@ var WidgetNode = (props) => {
|
|
|
3068
3100
|
return props.routeParameters?.[actualKey] ?? val;
|
|
3069
3101
|
}
|
|
3070
3102
|
return val;
|
|
3071
|
-
}
|
|
3103
|
+
}
|
|
3104
|
+
if (Array.isArray(val)) {
|
|
3072
3105
|
return val.map(resolveValue);
|
|
3073
|
-
}
|
|
3106
|
+
}
|
|
3107
|
+
if (val && typeof val === "object") {
|
|
3074
3108
|
const out = {};
|
|
3075
3109
|
for (const k of Object.keys(val)) {
|
|
3076
3110
|
out[k] = resolveValue(val[k]);
|
|
@@ -3079,80 +3113,366 @@ var WidgetNode = (props) => {
|
|
|
3079
3113
|
}
|
|
3080
3114
|
return val;
|
|
3081
3115
|
};
|
|
3082
|
-
Object.keys(widgetParameters)
|
|
3116
|
+
for (const key of Object.keys(widgetParameters)) {
|
|
3083
3117
|
const rawVal = widgetParameters[key];
|
|
3084
3118
|
if (rawVal === "route") {
|
|
3085
|
-
|
|
3086
|
-
widgetInputParameters[key] = props.path;
|
|
3087
|
-
} else {
|
|
3088
|
-
widgetInputParameters[key] = widgetInputParameters[key] ?? null;
|
|
3089
|
-
}
|
|
3119
|
+
widgetInputParameters[key] = key === "itemPath" ? props.path : widgetInputParameters[key] ?? null;
|
|
3090
3120
|
} else {
|
|
3091
3121
|
widgetInputParameters[key] = resolveValue(rawVal);
|
|
3092
3122
|
}
|
|
3093
|
-
}
|
|
3094
|
-
widgetInputParameters["widgetTitle"] = props.node
|
|
3123
|
+
}
|
|
3124
|
+
widgetInputParameters["widgetTitle"] = props.node.widgetTitle;
|
|
3095
3125
|
return widgetInputParameters;
|
|
3096
3126
|
};
|
|
3097
|
-
const
|
|
3127
|
+
const widgetCode = props.node.widgetCode;
|
|
3128
|
+
const SelectedWidget = resolveWidget(widgetCode);
|
|
3098
3129
|
if (!SelectedWidget) {
|
|
3099
|
-
console.warn("Widget not found:",
|
|
3130
|
+
console.warn("Widget not found:", widgetCode);
|
|
3100
3131
|
return /* @__PURE__ */ jsxs27(Fragment7, { children: [
|
|
3101
3132
|
"Widget not found: ",
|
|
3102
|
-
|
|
3133
|
+
widgetCode
|
|
3103
3134
|
] });
|
|
3104
3135
|
}
|
|
3105
|
-
return /* @__PURE__ */ jsx56(Suspense, { fallback: /* @__PURE__ */ jsx56("div", { className: "container mt-2", children: "..." }), children:
|
|
3106
|
-
|
|
3136
|
+
return /* @__PURE__ */ jsx56(Suspense, { fallback: /* @__PURE__ */ jsx56("div", { className: "container mt-2", children: "..." }), children: React42.createElement(SelectedWidget, {
|
|
3137
|
+
params: getWidgetParameters(),
|
|
3138
|
+
query: props.query,
|
|
3139
|
+
session: props.session,
|
|
3140
|
+
host: props.host,
|
|
3141
|
+
path: props.path,
|
|
3142
|
+
apiBaseUrl: props.apiBaseUrl
|
|
3143
|
+
}) });
|
|
3144
|
+
};
|
|
3145
|
+
var WidgetNode_default = WidgetNode;
|
|
3146
|
+
|
|
3147
|
+
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3148
|
+
import React43, { useRef as useRef4, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect8 } from "react";
|
|
3149
|
+
|
|
3150
|
+
// src/components/pageRenderingEngine/nodes/InputControlNode.tsx
|
|
3151
|
+
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
3152
|
+
var InputControlNode = (props) => {
|
|
3153
|
+
return /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsx57(
|
|
3154
|
+
InputControl_default,
|
|
3107
3155
|
{
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3156
|
+
name: props.node.name,
|
|
3157
|
+
controlType: "lineTextInput",
|
|
3158
|
+
value: props.value,
|
|
3159
|
+
callback: props.callback,
|
|
3160
|
+
attributes: {
|
|
3161
|
+
pattern: props.node.pattern,
|
|
3162
|
+
maxLength: props.node.maxLength,
|
|
3163
|
+
minLength: props.node.minLength,
|
|
3164
|
+
//maxValue:props.node.maxV,
|
|
3165
|
+
//minValue?: number,
|
|
3166
|
+
readOnly: props.node.readOnly,
|
|
3167
|
+
label: "name",
|
|
3168
|
+
//props.node.label,
|
|
3169
|
+
hintText: props.node.hintText,
|
|
3170
|
+
placeholder: props.node.placeholder,
|
|
3171
|
+
required: props.node.required,
|
|
3172
|
+
errorMessage: props.node.errorMessage,
|
|
3173
|
+
helpText: props.node.helpText,
|
|
3174
|
+
autoFocus: props.node.autoFocus
|
|
3175
|
+
}
|
|
3114
3176
|
}
|
|
3115
3177
|
) });
|
|
3116
3178
|
};
|
|
3117
|
-
var
|
|
3179
|
+
var InputControlNode_default = InputControlNode;
|
|
3180
|
+
|
|
3181
|
+
// src/clients/CacheManage.tsx
|
|
3182
|
+
import NodeCache from "node-cache";
|
|
3183
|
+
var CacheManager = class _CacheManager {
|
|
3184
|
+
constructor() {
|
|
3185
|
+
this.maxCacheSize = 1e3;
|
|
3186
|
+
this.cache = new NodeCache({ stdTTL: 0, checkperiod: 300 });
|
|
3187
|
+
}
|
|
3188
|
+
static getInstance() {
|
|
3189
|
+
if (!_CacheManager.instance) {
|
|
3190
|
+
_CacheManager.instance = new _CacheManager();
|
|
3191
|
+
}
|
|
3192
|
+
return _CacheManager.instance;
|
|
3193
|
+
}
|
|
3194
|
+
get(key) {
|
|
3195
|
+
return null;
|
|
3196
|
+
}
|
|
3197
|
+
set(key, data, ttl) {
|
|
3198
|
+
}
|
|
3199
|
+
clear() {
|
|
3200
|
+
this.cache.flushAll();
|
|
3201
|
+
}
|
|
3202
|
+
size() {
|
|
3203
|
+
return this.cache.keys().length;
|
|
3204
|
+
}
|
|
3205
|
+
destroy() {
|
|
3206
|
+
this.cache.close();
|
|
3207
|
+
}
|
|
3208
|
+
};
|
|
3209
|
+
|
|
3210
|
+
// src/clients/ServiceClient.tsx
|
|
3211
|
+
var ServerApiError = class extends Error {
|
|
3212
|
+
constructor(data, status) {
|
|
3213
|
+
super(data.message || "---");
|
|
3214
|
+
this.status = status;
|
|
3215
|
+
this.data = data;
|
|
3216
|
+
this.data.isSuccessful = false;
|
|
3217
|
+
}
|
|
3218
|
+
};
|
|
3219
|
+
var ServiceClient = class {
|
|
3220
|
+
constructor(apiBaseUrl, session) {
|
|
3221
|
+
this.cacheManager = CacheManager.getInstance();
|
|
3222
|
+
this.baseUrl = apiBaseUrl;
|
|
3223
|
+
this.session = session;
|
|
3224
|
+
}
|
|
3225
|
+
buildFullPath(path, params) {
|
|
3226
|
+
let updatedPath = path;
|
|
3227
|
+
if (params) {
|
|
3228
|
+
Object.keys(params).forEach((key) => {
|
|
3229
|
+
updatedPath = updatedPath.replace(
|
|
3230
|
+
`{${key}}`,
|
|
3231
|
+
String(params[key])
|
|
3232
|
+
);
|
|
3233
|
+
});
|
|
3234
|
+
}
|
|
3235
|
+
return this.baseUrl + updatedPath;
|
|
3236
|
+
}
|
|
3237
|
+
getConfig() {
|
|
3238
|
+
const config = { headers: {} };
|
|
3239
|
+
if (this.session) {
|
|
3240
|
+
if (this.session.oAuthToken) {
|
|
3241
|
+
config.headers["Authorization"] = "Bearer " + this.session.oAuthToken;
|
|
3242
|
+
}
|
|
3243
|
+
config.headers["cid"] = this.session.cid || "";
|
|
3244
|
+
config.headers["UserCurrencyCode"] = this.session.userCurrencyCode || "INR";
|
|
3245
|
+
config.headers["MarketCode"] = this.session?.marketCode || "IND";
|
|
3246
|
+
}
|
|
3247
|
+
return config;
|
|
3248
|
+
}
|
|
3249
|
+
handleFetchError(error) {
|
|
3250
|
+
console.log(error);
|
|
3251
|
+
const serverApiError = error;
|
|
3252
|
+
if (serverApiError) {
|
|
3253
|
+
return serverApiError.data;
|
|
3254
|
+
}
|
|
3255
|
+
return {
|
|
3256
|
+
message: "There is some error. Please try after sometime.",
|
|
3257
|
+
isSuccessful: false
|
|
3258
|
+
};
|
|
3259
|
+
}
|
|
3260
|
+
async fetchJsonWithCache(fullPath, config) {
|
|
3261
|
+
const cacheKey = fullPath + "--" + (this.session?.marketCode || "IND");
|
|
3262
|
+
const cachedData = this.cacheManager.get(cacheKey);
|
|
3263
|
+
if (cachedData) {
|
|
3264
|
+
return cachedData;
|
|
3265
|
+
}
|
|
3266
|
+
console.log("*****************CALLING API:", cacheKey, (/* @__PURE__ */ new Date()).toISOString());
|
|
3267
|
+
const response = await fetch(fullPath, { headers: config.headers });
|
|
3268
|
+
if (!response.ok) {
|
|
3269
|
+
const apiErrorData = await response.json();
|
|
3270
|
+
throw new ServerApiError(apiErrorData, response.status);
|
|
3271
|
+
}
|
|
3272
|
+
const cacheControl = response.headers.get("Cache-Control");
|
|
3273
|
+
let revalidate = null;
|
|
3274
|
+
if (cacheControl) {
|
|
3275
|
+
const maxAgeMatch = cacheControl.match(/max-age=(\d+)/);
|
|
3276
|
+
if (maxAgeMatch && maxAgeMatch[1]) {
|
|
3277
|
+
const maxAge = parseInt(maxAgeMatch[1], 10);
|
|
3278
|
+
revalidate = maxAge * 1e3;
|
|
3279
|
+
}
|
|
3280
|
+
}
|
|
3281
|
+
const data = await response.json();
|
|
3282
|
+
data.isSuccessful = true;
|
|
3283
|
+
if (revalidate !== null && revalidate > 0) {
|
|
3284
|
+
console.log("revalidate............I am caching:" + revalidate);
|
|
3285
|
+
this.cacheManager.set(cacheKey, data, revalidate);
|
|
3286
|
+
}
|
|
3287
|
+
return data;
|
|
3288
|
+
}
|
|
3289
|
+
// private async refreshToken(): Promise<void> {
|
|
3290
|
+
// console.log("*******************calling refresh token***********************");
|
|
3291
|
+
// try {
|
|
3292
|
+
// const response = await fetch(this.baseUrl + "/auth/storefront/login/refreshToken", {
|
|
3293
|
+
// method: 'POST',
|
|
3294
|
+
// headers: {
|
|
3295
|
+
// 'Content-Type': 'application/json'
|
|
3296
|
+
// },
|
|
3297
|
+
// body: JSON.stringify({ refreshToken: this.session.refreshToken })
|
|
3298
|
+
// });
|
|
3299
|
+
// if (!response.ok) {
|
|
3300
|
+
// throw new Error("Failed to refresh token");
|
|
3301
|
+
// }
|
|
3302
|
+
// const responseData = await response.json();
|
|
3303
|
+
// this.session.oAuthToken = responseData.result.accessToken;
|
|
3304
|
+
// if (typeof window === "undefined") {
|
|
3305
|
+
// // Running on the server
|
|
3306
|
+
// } else {
|
|
3307
|
+
// await fetch("/api/login", {
|
|
3308
|
+
// method: "post",
|
|
3309
|
+
// headers: {
|
|
3310
|
+
// "Content-Type": "application/json",
|
|
3311
|
+
// },
|
|
3312
|
+
// body: JSON.stringify({ session: this.session }),
|
|
3313
|
+
// });
|
|
3314
|
+
// }
|
|
3315
|
+
// } catch (error: any) {
|
|
3316
|
+
// throw new Error("Failed to refresh token");
|
|
3317
|
+
// }
|
|
3318
|
+
// }
|
|
3319
|
+
async handleRequest(request) {
|
|
3320
|
+
try {
|
|
3321
|
+
return await request();
|
|
3322
|
+
} catch (error) {
|
|
3323
|
+
throw error;
|
|
3324
|
+
}
|
|
3325
|
+
}
|
|
3326
|
+
async post(path, data) {
|
|
3327
|
+
const request = async () => {
|
|
3328
|
+
const fullPath = this.baseUrl + path;
|
|
3329
|
+
const config = this.getConfig();
|
|
3330
|
+
const response = await fetch(fullPath, {
|
|
3331
|
+
method: "POST",
|
|
3332
|
+
headers: {
|
|
3333
|
+
...config.headers,
|
|
3334
|
+
"Content-Type": "application/json"
|
|
3335
|
+
},
|
|
3336
|
+
body: JSON.stringify(data)
|
|
3337
|
+
});
|
|
3338
|
+
if (!response.ok) {
|
|
3339
|
+
const apiErrorData = await response.json();
|
|
3340
|
+
throw new ServerApiError(apiErrorData, response.status);
|
|
3341
|
+
}
|
|
3342
|
+
const responseData = await response.json();
|
|
3343
|
+
responseData.isSuccessful = true;
|
|
3344
|
+
return responseData;
|
|
3345
|
+
};
|
|
3346
|
+
try {
|
|
3347
|
+
return await this.handleRequest(request);
|
|
3348
|
+
} catch (error) {
|
|
3349
|
+
return this.handleFetchError(error);
|
|
3350
|
+
}
|
|
3351
|
+
}
|
|
3352
|
+
async getSingle(path, params) {
|
|
3353
|
+
const request = async () => {
|
|
3354
|
+
const sanitizedParams = params ? Object.fromEntries(
|
|
3355
|
+
Object.entries(params).map(([k, v]) => [k, String(v)])
|
|
3356
|
+
) : void 0;
|
|
3357
|
+
const fullPath = this.buildFullPath(path, sanitizedParams);
|
|
3358
|
+
const config = this.getConfig();
|
|
3359
|
+
return await this.fetchJsonWithCache(fullPath, config);
|
|
3360
|
+
};
|
|
3361
|
+
try {
|
|
3362
|
+
return await this.handleRequest(request);
|
|
3363
|
+
} catch (error) {
|
|
3364
|
+
return this.handleFetchError(error);
|
|
3365
|
+
}
|
|
3366
|
+
}
|
|
3367
|
+
async get(path, params) {
|
|
3368
|
+
const request = async () => {
|
|
3369
|
+
const sanitizedParams = params ? Object.fromEntries(
|
|
3370
|
+
Object.entries(params).map(([k, v]) => [k, String(v)])
|
|
3371
|
+
) : void 0;
|
|
3372
|
+
const fullPath = this.buildFullPath(path, sanitizedParams);
|
|
3373
|
+
const config = this.getConfig();
|
|
3374
|
+
console.log(fullPath);
|
|
3375
|
+
return await this.fetchJsonWithCache(fullPath, config);
|
|
3376
|
+
};
|
|
3377
|
+
try {
|
|
3378
|
+
return await this.handleRequest(request);
|
|
3379
|
+
} catch (error) {
|
|
3380
|
+
return this.handleFetchError(error);
|
|
3381
|
+
}
|
|
3382
|
+
}
|
|
3383
|
+
};
|
|
3384
|
+
var ServiceClient_default = ServiceClient;
|
|
3385
|
+
|
|
3386
|
+
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3387
|
+
import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3388
|
+
var FormContainerNode = (props) => {
|
|
3389
|
+
const NodeTypes2 = {
|
|
3390
|
+
["input-control"]: InputControlNode_default
|
|
3391
|
+
};
|
|
3392
|
+
const { node } = props;
|
|
3393
|
+
const formRef = useRef4(null);
|
|
3394
|
+
const initialState = {
|
|
3395
|
+
inputValues: {},
|
|
3396
|
+
lastPropertyChanged: ""
|
|
3397
|
+
};
|
|
3398
|
+
const [formState, dispatch] = useReducer2(FormReducer_default, initialState);
|
|
3399
|
+
const handleInputChange = useCallback3((updatedValues) => {
|
|
3400
|
+
dispatch({ type: FORM_INPUT_UPDATE, name: updatedValues.name, value: updatedValues.value });
|
|
3401
|
+
}, [dispatch]);
|
|
3402
|
+
useEffect8(() => {
|
|
3403
|
+
const fetchInitialData = async () => {
|
|
3404
|
+
const client = new ServiceClient_default(props.apiBaseUrl, props.session);
|
|
3405
|
+
const response = await client.getSingle(props.node.dataFetchApi, props.routeParameters);
|
|
3406
|
+
if (response.isSuccessful) {
|
|
3407
|
+
dispatch({
|
|
3408
|
+
type: FORM_INITIAL_UPDATE,
|
|
3409
|
+
values: response.result,
|
|
3410
|
+
// @ts-expect-error custom code
|
|
3411
|
+
name: "all"
|
|
3412
|
+
});
|
|
3413
|
+
}
|
|
3414
|
+
};
|
|
3415
|
+
fetchInitialData();
|
|
3416
|
+
}, [props.apiBaseUrl, props.node, props.session, props.routeParameters]);
|
|
3417
|
+
return /* @__PURE__ */ jsxs28("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
|
|
3418
|
+
node.children && node.children.map((node2, index) => {
|
|
3419
|
+
{
|
|
3420
|
+
}
|
|
3421
|
+
const SelectedNode = NodeTypes2[node2.type];
|
|
3422
|
+
return /* @__PURE__ */ jsx58(React43.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx58(
|
|
3423
|
+
InputControlNode_default,
|
|
3424
|
+
{
|
|
3425
|
+
value: formState.inputValues[node2.name],
|
|
3426
|
+
callback: handleInputChange,
|
|
3427
|
+
node: node2
|
|
3428
|
+
}
|
|
3429
|
+
) }, index);
|
|
3430
|
+
}),
|
|
3431
|
+
node.children.length == 0 && /* @__PURE__ */ jsx58("div", { className: "py-0.5 lg:py-1.5" })
|
|
3432
|
+
] });
|
|
3433
|
+
};
|
|
3434
|
+
var FormContainerNode_default = FormContainerNode;
|
|
3435
|
+
|
|
3436
|
+
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
3437
|
+
import React49 from "react";
|
|
3118
3438
|
|
|
3119
3439
|
// src/components/pageRenderingEngine/nodes/IframeClient.tsx
|
|
3120
|
-
import
|
|
3440
|
+
import React45, { useEffect as useEffect9, useRef as useRef5, useState as useState9 } from "react";
|
|
3121
3441
|
|
|
3122
3442
|
// src/components/IFrameLoaderView.tsx
|
|
3123
|
-
import
|
|
3124
|
-
import { jsx as
|
|
3443
|
+
import React44 from "react";
|
|
3444
|
+
import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3125
3445
|
var IFrameLoaderView = (props) => {
|
|
3126
|
-
return /* @__PURE__ */
|
|
3127
|
-
props.isDataFound == null && /* @__PURE__ */
|
|
3128
|
-
/* @__PURE__ */
|
|
3129
|
-
/* @__PURE__ */
|
|
3130
|
-
/* @__PURE__ */
|
|
3131
|
-
/* @__PURE__ */
|
|
3132
|
-
/* @__PURE__ */
|
|
3446
|
+
return /* @__PURE__ */ jsxs29(React44.Fragment, { children: [
|
|
3447
|
+
props.isDataFound == null && /* @__PURE__ */ jsx59("div", { className: "", children: /* @__PURE__ */ jsxs29("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
|
|
3448
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center mb-4", children: [
|
|
3449
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
|
|
3450
|
+
/* @__PURE__ */ jsxs29("div", { className: "ml-2", children: [
|
|
3451
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
|
|
3452
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
|
|
3133
3453
|
] })
|
|
3134
3454
|
] }),
|
|
3135
|
-
/* @__PURE__ */
|
|
3136
|
-
/* @__PURE__ */
|
|
3137
|
-
/* @__PURE__ */
|
|
3138
|
-
/* @__PURE__ */
|
|
3139
|
-
/* @__PURE__ */
|
|
3140
|
-
/* @__PURE__ */
|
|
3141
|
-
/* @__PURE__ */
|
|
3455
|
+
/* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
|
|
3456
|
+
/* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
|
|
3457
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
|
|
3458
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
|
|
3459
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
|
|
3460
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
|
|
3461
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
|
|
3142
3462
|
] }),
|
|
3143
|
-
/* @__PURE__ */
|
|
3144
|
-
/* @__PURE__ */
|
|
3145
|
-
/* @__PURE__ */
|
|
3146
|
-
/* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3148
|
-
/* @__PURE__ */
|
|
3463
|
+
/* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
|
|
3464
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
|
|
3465
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
|
|
3466
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
|
|
3467
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
|
|
3468
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
|
|
3149
3469
|
] }),
|
|
3150
|
-
/* @__PURE__ */
|
|
3151
|
-
/* @__PURE__ */
|
|
3152
|
-
/* @__PURE__ */
|
|
3153
|
-
/* @__PURE__ */
|
|
3154
|
-
/* @__PURE__ */
|
|
3155
|
-
/* @__PURE__ */
|
|
3470
|
+
/* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
|
|
3471
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
|
|
3472
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
|
|
3473
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
|
|
3474
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
|
|
3475
|
+
/* @__PURE__ */ jsx59("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
|
|
3156
3476
|
] })
|
|
3157
3477
|
] })
|
|
3158
3478
|
] }) }),
|
|
@@ -3162,12 +3482,12 @@ var IFrameLoaderView = (props) => {
|
|
|
3162
3482
|
var IFrameLoaderView_default = IFrameLoaderView;
|
|
3163
3483
|
|
|
3164
3484
|
// src/components/pageRenderingEngine/nodes/IframeClient.tsx
|
|
3165
|
-
import { jsx as
|
|
3485
|
+
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
3166
3486
|
var IframeClient = ({ src }) => {
|
|
3167
|
-
const iframeRef =
|
|
3487
|
+
const iframeRef = useRef5(null);
|
|
3168
3488
|
const [iframeHeight, setIframeHeight] = useState9("100%");
|
|
3169
3489
|
const [isDataFound, setIsDataFound] = useState9(null);
|
|
3170
|
-
|
|
3490
|
+
useEffect9(() => {
|
|
3171
3491
|
const handleReceiveMessage = (event) => {
|
|
3172
3492
|
const eventName = event?.data?.eventName;
|
|
3173
3493
|
const payload = event?.data?.payload;
|
|
@@ -3182,7 +3502,7 @@ var IframeClient = ({ src }) => {
|
|
|
3182
3502
|
window.addEventListener("message", handleReceiveMessage);
|
|
3183
3503
|
return () => window.removeEventListener("message", handleReceiveMessage);
|
|
3184
3504
|
}, []);
|
|
3185
|
-
|
|
3505
|
+
useEffect9(() => {
|
|
3186
3506
|
const handleResize = () => {
|
|
3187
3507
|
if (iframeRef.current) {
|
|
3188
3508
|
iframeRef.current.contentWindow?.postMessage({ eventName: "RESIZE" }, "*");
|
|
@@ -3194,13 +3514,14 @@ var IframeClient = ({ src }) => {
|
|
|
3194
3514
|
const handleIframeLoad = () => {
|
|
3195
3515
|
setIsDataFound(true);
|
|
3196
3516
|
};
|
|
3197
|
-
return /* @__PURE__ */
|
|
3517
|
+
return /* @__PURE__ */ jsx60(React45.Fragment, { children: /* @__PURE__ */ jsx60(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx60(
|
|
3198
3518
|
"iframe",
|
|
3199
3519
|
{
|
|
3200
3520
|
ref: iframeRef,
|
|
3201
3521
|
src,
|
|
3202
3522
|
className: "w-full h-full border-none",
|
|
3203
3523
|
scrolling: "no",
|
|
3524
|
+
style: { height: iframeHeight },
|
|
3204
3525
|
onLoad: handleIframeLoad
|
|
3205
3526
|
}
|
|
3206
3527
|
) }) });
|
|
@@ -3208,7 +3529,7 @@ var IframeClient = ({ src }) => {
|
|
|
3208
3529
|
var IframeClient_default = IframeClient;
|
|
3209
3530
|
|
|
3210
3531
|
// src/components/pageRenderingEngine/nodes/EmbedNode.tsx
|
|
3211
|
-
import { jsx as
|
|
3532
|
+
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
3212
3533
|
var EmbedNode = (props) => {
|
|
3213
3534
|
let src;
|
|
3214
3535
|
if (props.node.provider == "youtube") {
|
|
@@ -3218,106 +3539,10 @@ var EmbedNode = (props) => {
|
|
|
3218
3539
|
} else {
|
|
3219
3540
|
src = props.node.embedSrc;
|
|
3220
3541
|
}
|
|
3221
|
-
return /* @__PURE__ */
|
|
3542
|
+
return /* @__PURE__ */ jsx61("div", { className: "aspect-video", children: src && /* @__PURE__ */ jsx61(IframeClient_default, { src }) });
|
|
3222
3543
|
};
|
|
3223
3544
|
var EmbedNode_default = EmbedNode;
|
|
3224
3545
|
|
|
3225
|
-
// src/components/pageRenderingEngine/nodes/VideoNode.tsx
|
|
3226
|
-
import React45 from "react";
|
|
3227
|
-
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
3228
|
-
var VideoNode = (props) => {
|
|
3229
|
-
let src;
|
|
3230
|
-
if (props.node.provider == "youtube") {
|
|
3231
|
-
src = `https://www.youtube-nocookie.com/embed/${props.node.videoId}`;
|
|
3232
|
-
} else if (props.node.provider == "bunny") {
|
|
3233
|
-
src = `https://iframe.mediadelivery.net/embed/${props.node.videoId}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
|
|
3234
|
-
}
|
|
3235
|
-
return /* @__PURE__ */ jsx60(React45.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 }) });
|
|
3236
|
-
};
|
|
3237
|
-
var VideoNode_default = VideoNode;
|
|
3238
|
-
|
|
3239
|
-
// src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
|
|
3240
|
-
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
3241
|
-
var LayoutItemNode = (props) => {
|
|
3242
|
-
const NodeTypes2 = {
|
|
3243
|
-
["paragraph"]: ParagraphNode_default,
|
|
3244
|
-
["heading"]: HeadingNode_default,
|
|
3245
|
-
["list"]: ListNode_default,
|
|
3246
|
-
["quote"]: QuoteNode_default,
|
|
3247
|
-
["code"]: CodeNode_default,
|
|
3248
|
-
["horizontalrule"]: HorizontalRuleNode_default,
|
|
3249
|
-
["image"]: ImageNode_default,
|
|
3250
|
-
["layout-container"]: LayoutContainerNode_default,
|
|
3251
|
-
["link"]: LinkNode_default,
|
|
3252
|
-
["widget"]: WidgetNode_default,
|
|
3253
|
-
["youtube"]: VideoNode_default,
|
|
3254
|
-
["video"]: VideoNode_default,
|
|
3255
|
-
["embed"]: EmbedNode_default
|
|
3256
|
-
};
|
|
3257
|
-
let cssClasses = "";
|
|
3258
|
-
if (props.order) {
|
|
3259
|
-
cssClasses = "order-" + props.order + " lg:order-1";
|
|
3260
|
-
}
|
|
3261
|
-
if (props.node.itemBoxShadow) {
|
|
3262
|
-
{
|
|
3263
|
-
}
|
|
3264
|
-
cssClasses = cssClasses + " " + (props.node.itemBoxShadow || "");
|
|
3265
|
-
}
|
|
3266
|
-
const styles = {};
|
|
3267
|
-
if (props.node.itemBorderWidth) {
|
|
3268
|
-
styles.borderWidth = props.node.itemBorderWidth;
|
|
3269
|
-
cssClasses = cssClasses + " px-4 py-2";
|
|
3270
|
-
}
|
|
3271
|
-
if (props.node.itemBorderRadius) {
|
|
3272
|
-
styles.borderRadius = props.node.itemBorderRadius;
|
|
3273
|
-
styles.overflow = "hidden";
|
|
3274
|
-
}
|
|
3275
|
-
function removeParagraphsAtStartAndEnd(layoutItem) {
|
|
3276
|
-
let startIndex = 0;
|
|
3277
|
-
{
|
|
3278
|
-
}
|
|
3279
|
-
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) {
|
|
3280
|
-
startIndex++;
|
|
3281
|
-
}
|
|
3282
|
-
let endIndex = layoutItem.children.length - 1;
|
|
3283
|
-
{
|
|
3284
|
-
}
|
|
3285
|
-
while (endIndex >= 0 && layoutItem.children[endIndex].type === "paragraph" && layoutItem.children[endIndex].children.filter((x) => x.type == "linebreak").length == layoutItem.children[endIndex].children.length) {
|
|
3286
|
-
endIndex--;
|
|
3287
|
-
}
|
|
3288
|
-
if (startIndex <= endIndex) {
|
|
3289
|
-
layoutItem.children = layoutItem.children.slice(startIndex, endIndex + 1);
|
|
3290
|
-
} else {
|
|
3291
|
-
layoutItem.children = [];
|
|
3292
|
-
}
|
|
3293
|
-
return layoutItem;
|
|
3294
|
-
}
|
|
3295
|
-
let updatedLayout = props.node;
|
|
3296
|
-
if (props.node.itemBoxShadow || props.node.itemBorderWidth) {
|
|
3297
|
-
updatedLayout = props.node;
|
|
3298
|
-
} else {
|
|
3299
|
-
updatedLayout = removeParagraphsAtStartAndEnd(props.node);
|
|
3300
|
-
}
|
|
3301
|
-
return /* @__PURE__ */ jsx61(React46.Fragment, { children: /* @__PURE__ */ jsx61("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
|
|
3302
|
-
{
|
|
3303
|
-
}
|
|
3304
|
-
const SelectedNode = NodeTypes2[node.type];
|
|
3305
|
-
return /* @__PURE__ */ jsx61(React46.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx61(
|
|
3306
|
-
SelectedNode,
|
|
3307
|
-
{
|
|
3308
|
-
node,
|
|
3309
|
-
routeParameters: props.routeParameters,
|
|
3310
|
-
query: props.query,
|
|
3311
|
-
session: props.session,
|
|
3312
|
-
host: props.host,
|
|
3313
|
-
path: props.path,
|
|
3314
|
-
apiBaseUrl: props.apiBaseUrl
|
|
3315
|
-
}
|
|
3316
|
-
) }, index);
|
|
3317
|
-
}) }) });
|
|
3318
|
-
};
|
|
3319
|
-
var LayoutItemNode_default = LayoutItemNode;
|
|
3320
|
-
|
|
3321
3546
|
// src/components/utilities/AssetUtility.tsx
|
|
3322
3547
|
var AssetUtility = class {
|
|
3323
3548
|
constructor() {
|
|
@@ -3331,573 +3556,9 @@ var AssetUtility = class {
|
|
|
3331
3556
|
};
|
|
3332
3557
|
var AssetUtility_default = AssetUtility;
|
|
3333
3558
|
|
|
3334
|
-
// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
|
|
3335
|
-
import { Fragment as Fragment8, jsx as jsx62, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3336
|
-
var LayoutContainerNode = (props) => {
|
|
3337
|
-
const VERTICAL_ALIGNMENT_CLASSES = {
|
|
3338
|
-
start: "items-start",
|
|
3339
|
-
center: "items-center place-content-center",
|
|
3340
|
-
end: "items-end",
|
|
3341
|
-
stretch: "items-stretch",
|
|
3342
|
-
baseline: "items-baseline"
|
|
3343
|
-
};
|
|
3344
|
-
const LAYOUTGRID_COLS_CLASSES = {
|
|
3345
|
-
"1fr": "layout-grid-col-1",
|
|
3346
|
-
"1fr 1fr": "layout-grid-col-2-equal",
|
|
3347
|
-
"1fr 2fr": "layout-grid-col-2-widths-33-67",
|
|
3348
|
-
"2fr 1fr": "layout-grid-col-2-widths-67-33",
|
|
3349
|
-
"3fr 2fr": "layout-grid-col-2-widths-60-40",
|
|
3350
|
-
"3fr 1fr": "layout-grid-col-2-widths-75-25",
|
|
3351
|
-
"1fr 1fr 1fr": "layout-grid-col-3-equal",
|
|
3352
|
-
"1fr 2fr 1fr": "layout-grid-col-3-widths-25-50-25",
|
|
3353
|
-
"1fr 6fr 1fr": "layout-grid-col-3-widths-15-70-15",
|
|
3354
|
-
"1fr 1fr 1fr 1fr": "layout-grid-col-4-equal"
|
|
3355
|
-
};
|
|
3356
|
-
const sectionWidth = props.node.sectionWidth || "fixed";
|
|
3357
|
-
let gridCssClasses = LAYOUTGRID_COLS_CLASSES[props.node.templateColumns] || "";
|
|
3358
|
-
if (props.node.contentVerticalAlignment) {
|
|
3359
|
-
gridCssClasses += " " + (VERTICAL_ALIGNMENT_CLASSES[props.node.contentVerticalAlignment] || "");
|
|
3360
|
-
}
|
|
3361
|
-
const columnGap = props.node.columnGap || "0.5rem";
|
|
3362
|
-
const styles = {};
|
|
3363
|
-
let cssClasses = "layout_grid";
|
|
3364
|
-
let addPadding = false;
|
|
3365
|
-
if (props.node.backgroundColor) {
|
|
3366
|
-
styles.backgroundColor = props.node.backgroundColor;
|
|
3367
|
-
}
|
|
3368
|
-
if (props.node.borderWidth) {
|
|
3369
|
-
styles.borderWidth = props.node.borderWidth;
|
|
3370
|
-
addPadding = true;
|
|
3371
|
-
}
|
|
3372
|
-
if (props.node.borderRadius) {
|
|
3373
|
-
styles.borderRadius = props.node.borderRadius;
|
|
3374
|
-
}
|
|
3375
|
-
if (props.node.boxShadow && props.node.boxShadow !== "shadow-none") {
|
|
3376
|
-
cssClasses += " " + props.node.boxShadow;
|
|
3377
|
-
addPadding = true;
|
|
3378
|
-
}
|
|
3379
|
-
const backgroundLayers = [];
|
|
3380
|
-
if (props.node.backgroundImage) {
|
|
3381
|
-
const resolved = AssetUtility_default.resolveUrl(
|
|
3382
|
-
props.apiBaseUrl,
|
|
3383
|
-
props.node.backgroundImage
|
|
3384
|
-
);
|
|
3385
|
-
if (resolved) {
|
|
3386
|
-
backgroundLayers.push(`url('${resolved}')`);
|
|
3387
|
-
addPadding = true;
|
|
3388
|
-
}
|
|
3389
|
-
}
|
|
3390
|
-
if (props.node.gradientColor1 && props.node.gradientColor2) {
|
|
3391
|
-
backgroundLayers.push(
|
|
3392
|
-
`linear-gradient(to bottom, ${props.node.gradientColor1}, ${props.node.gradientColor2})`
|
|
3393
|
-
);
|
|
3394
|
-
addPadding = true;
|
|
3395
|
-
} else if (props.node.gradientColor1) {
|
|
3396
|
-
backgroundLayers.push(props.node.gradientColor1);
|
|
3397
|
-
addPadding = true;
|
|
3398
|
-
} else if (props.node.gradientColor2) {
|
|
3399
|
-
backgroundLayers.push(props.node.gradientColor2);
|
|
3400
|
-
addPadding = true;
|
|
3401
|
-
}
|
|
3402
|
-
if (backgroundLayers.length) {
|
|
3403
|
-
styles.background = backgroundLayers.join(", ");
|
|
3404
|
-
}
|
|
3405
|
-
const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ jsx62(
|
|
3406
|
-
LayoutItemNode_default,
|
|
3407
|
-
{
|
|
3408
|
-
node,
|
|
3409
|
-
order: props.node.smOrder === "reverse" ? props.node.children.length - index : index,
|
|
3410
|
-
routeParameters: props.routeParameters,
|
|
3411
|
-
query: props.query,
|
|
3412
|
-
session: props.session,
|
|
3413
|
-
host: props.host,
|
|
3414
|
-
path: props.path,
|
|
3415
|
-
apiBaseUrl: props.apiBaseUrl
|
|
3416
|
-
},
|
|
3417
|
-
index
|
|
3418
|
-
));
|
|
3419
|
-
return /* @__PURE__ */ jsxs29(Fragment8, { children: [
|
|
3420
|
-
sectionWidth === "mixed" && /* @__PURE__ */ jsx62("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
|
|
3421
|
-
"div",
|
|
3422
|
-
{
|
|
3423
|
-
className: `grid gap-y-4 lg:gap-y-0 ${gridCssClasses} ${addPadding ? "py-8 lg:py-6" : ""}`,
|
|
3424
|
-
style: { columnGap, minHeight: props.node.height },
|
|
3425
|
-
children: renderChildren()
|
|
3426
|
-
}
|
|
3427
|
-
) }) }),
|
|
3428
|
-
sectionWidth === "full" && /* @__PURE__ */ jsx62(
|
|
3429
|
-
"div",
|
|
3430
|
-
{
|
|
3431
|
-
className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "p-8 lg:p-0" : ""}`,
|
|
3432
|
-
style: { columnGap, ...styles },
|
|
3433
|
-
children: renderChildren()
|
|
3434
|
-
}
|
|
3435
|
-
),
|
|
3436
|
-
sectionWidth === "fixed" && /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
|
|
3437
|
-
"div",
|
|
3438
|
-
{
|
|
3439
|
-
className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "px-8 py-6 lg:px-6 lg:py-6" : ""}`,
|
|
3440
|
-
style: { columnGap, ...styles },
|
|
3441
|
-
children: renderChildren()
|
|
3442
|
-
}
|
|
3443
|
-
) })
|
|
3444
|
-
] });
|
|
3445
|
-
};
|
|
3446
|
-
var LayoutContainerNode_default = LayoutContainerNode;
|
|
3447
|
-
|
|
3448
|
-
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3449
|
-
import React47, { useRef as useRef5, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect9 } from "react";
|
|
3450
|
-
|
|
3451
|
-
// src/components/pageRenderingEngine/nodes/InputControlNode.tsx
|
|
3452
|
-
import { jsx as jsx63 } from "react/jsx-runtime";
|
|
3453
|
-
var InputControlNode = (props) => {
|
|
3454
|
-
return /* @__PURE__ */ jsx63("div", { children: /* @__PURE__ */ jsx63(
|
|
3455
|
-
InputControl_default,
|
|
3456
|
-
{
|
|
3457
|
-
name: props.node.name,
|
|
3458
|
-
controlType: "lineTextInput",
|
|
3459
|
-
value: props.value,
|
|
3460
|
-
callback: props.callback,
|
|
3461
|
-
attributes: {
|
|
3462
|
-
pattern: props.node.pattern,
|
|
3463
|
-
maxLength: props.node.maxLength,
|
|
3464
|
-
minLength: props.node.minLength,
|
|
3465
|
-
//maxValue:props.node.maxV,
|
|
3466
|
-
//minValue?: number,
|
|
3467
|
-
readOnly: props.node.readOnly,
|
|
3468
|
-
label: "name",
|
|
3469
|
-
//props.node.label,
|
|
3470
|
-
hintText: props.node.hintText,
|
|
3471
|
-
placeholder: props.node.placeholder,
|
|
3472
|
-
required: props.node.required,
|
|
3473
|
-
errorMessage: props.node.errorMessage,
|
|
3474
|
-
helpText: props.node.helpText,
|
|
3475
|
-
autoFocus: props.node.autoFocus
|
|
3476
|
-
}
|
|
3477
|
-
}
|
|
3478
|
-
) });
|
|
3479
|
-
};
|
|
3480
|
-
var InputControlNode_default = InputControlNode;
|
|
3481
|
-
|
|
3482
|
-
// src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
|
|
3483
|
-
import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3484
|
-
var FormContainerNode = (props) => {
|
|
3485
|
-
const NodeTypes2 = {
|
|
3486
|
-
["input-control"]: InputControlNode_default
|
|
3487
|
-
};
|
|
3488
|
-
const { node } = props;
|
|
3489
|
-
const formRef = useRef5(null);
|
|
3490
|
-
const initialState = {
|
|
3491
|
-
inputValues: {},
|
|
3492
|
-
lastPropertyChanged: ""
|
|
3493
|
-
};
|
|
3494
|
-
const [formState, dispatch] = useReducer2(FormReducer_default, initialState);
|
|
3495
|
-
const handleInputChange = useCallback3((updatedValues) => {
|
|
3496
|
-
dispatch({ type: FORM_INPUT_UPDATE, name: updatedValues.name, value: updatedValues.value });
|
|
3497
|
-
}, [dispatch]);
|
|
3498
|
-
const onValidate = async () => {
|
|
3499
|
-
if (formRef.current && !formRef.current.checkValidity()) {
|
|
3500
|
-
formRef.current.classList.add("validated");
|
|
3501
|
-
return false;
|
|
3502
|
-
} else {
|
|
3503
|
-
return true;
|
|
3504
|
-
}
|
|
3505
|
-
};
|
|
3506
|
-
useEffect9(() => {
|
|
3507
|
-
const fetchInitialData = async () => {
|
|
3508
|
-
if (!props.fetchData || !node.dataFetchApi) return;
|
|
3509
|
-
const response = await props.fetchData(
|
|
3510
|
-
node.dataFetchApi,
|
|
3511
|
-
props.routeParameters
|
|
3512
|
-
);
|
|
3513
|
-
if (response?.isSuccessful) {
|
|
3514
|
-
dispatch({
|
|
3515
|
-
type: FORM_INITIAL_UPDATE,
|
|
3516
|
-
values: response.result,
|
|
3517
|
-
name: "all"
|
|
3518
|
-
});
|
|
3519
|
-
}
|
|
3520
|
-
};
|
|
3521
|
-
fetchInitialData();
|
|
3522
|
-
}, [props.fetchData, node.dataFetchApi, props.routeParameters]);
|
|
3523
|
-
return /* @__PURE__ */ jsxs30("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
|
|
3524
|
-
node.children && node.children.map((node2, index) => {
|
|
3525
|
-
{
|
|
3526
|
-
}
|
|
3527
|
-
const SelectedNode = NodeTypes2[node2.type];
|
|
3528
|
-
return /* @__PURE__ */ jsx64(React47.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx64(
|
|
3529
|
-
InputControlNode_default,
|
|
3530
|
-
{
|
|
3531
|
-
value: formState.inputValues[node2.name],
|
|
3532
|
-
callback: handleInputChange,
|
|
3533
|
-
node: node2
|
|
3534
|
-
}
|
|
3535
|
-
) }, index);
|
|
3536
|
-
}),
|
|
3537
|
-
node.children.length == 0 && /* @__PURE__ */ jsx64("div", { className: "py-0.5 lg:py-1.5" })
|
|
3538
|
-
] });
|
|
3539
|
-
};
|
|
3540
|
-
var FormContainerNode_default = FormContainerNode;
|
|
3541
|
-
|
|
3542
|
-
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
3543
|
-
import React51 from "react";
|
|
3544
|
-
|
|
3545
|
-
// src/components/utilities/AnimationUtility.tsx
|
|
3546
|
-
var AnimationUtility = class {
|
|
3547
|
-
static generateAnimationCSS(config, guid) {
|
|
3548
|
-
const {
|
|
3549
|
-
duration = 700,
|
|
3550
|
-
delay = 0,
|
|
3551
|
-
easing = "ease-out",
|
|
3552
|
-
distance = 30,
|
|
3553
|
-
scaleStart = 1,
|
|
3554
|
-
scaleEnd = 1.2,
|
|
3555
|
-
repeat = 1,
|
|
3556
|
-
intensity = 20,
|
|
3557
|
-
speedPerChar = 100,
|
|
3558
|
-
cursor = true,
|
|
3559
|
-
mode = "enter",
|
|
3560
|
-
direction = "left"
|
|
3561
|
-
// Default direction
|
|
3562
|
-
} = config;
|
|
3563
|
-
let base = "", visible = "", keyframes = "";
|
|
3564
|
-
switch (config.animation) {
|
|
3565
|
-
case "Fade":
|
|
3566
|
-
base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
|
|
3567
|
-
visible = `opacity:1;`;
|
|
3568
|
-
break;
|
|
3569
|
-
case "FadeInUp":
|
|
3570
|
-
base = `opacity:0; transform:translateY(${distance}px); transition:all ${duration}ms ${easing} ${delay}ms;`;
|
|
3571
|
-
visible = `opacity:1; transform:translateY(0);`;
|
|
3572
|
-
break;
|
|
3573
|
-
case "Slide":
|
|
3574
|
-
const slideTransform = this.getSlideTransform(direction, distance);
|
|
3575
|
-
base = `opacity:0; transform:${slideTransform.start}; transition:all ${duration}ms ${easing} ${delay}ms; will-change: transform, opacity;`;
|
|
3576
|
-
visible = `opacity:1; transform:${slideTransform.end}; will-change: unset;`;
|
|
3577
|
-
break;
|
|
3578
|
-
case "ZoomIn":
|
|
3579
|
-
if (mode === "enter") {
|
|
3580
|
-
base = `opacity:0; transform:scale(${scaleStart}); transition:all ${duration}ms ${easing} ${delay}ms;`;
|
|
3581
|
-
visible = `opacity:1; transform:scale(${scaleEnd});`;
|
|
3582
|
-
} else {
|
|
3583
|
-
base = `transform:scale(${scaleStart}); transition:transform ${duration / 1e3}s ${easing} ${delay / 1e3}s;`;
|
|
3584
|
-
visible = `transform:scale(${scaleEnd});`;
|
|
3585
|
-
}
|
|
3586
|
-
break;
|
|
3587
|
-
case "Bounce":
|
|
3588
|
-
keyframes = `
|
|
3589
|
-
@keyframes bounce {
|
|
3590
|
-
0%,20%,50%,80%,100% { transform: translateY(0); }
|
|
3591
|
-
40% { transform: translateY(-${intensity}px); }
|
|
3592
|
-
60% { transform: translateY(-${intensity / 2}px); }
|
|
3593
|
-
}
|
|
3594
|
-
`;
|
|
3595
|
-
if (mode === "enter") {
|
|
3596
|
-
base = `opacity:0;`;
|
|
3597
|
-
visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
|
|
3598
|
-
} else {
|
|
3599
|
-
base = ``;
|
|
3600
|
-
visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
|
|
3601
|
-
}
|
|
3602
|
-
break;
|
|
3603
|
-
case "Typewriter":
|
|
3604
|
-
keyframes = `
|
|
3605
|
-
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
3606
|
-
@keyframes blink { 50% { border-color: transparent } }
|
|
3607
|
-
`;
|
|
3608
|
-
base = `
|
|
3609
|
-
overflow:hidden;
|
|
3610
|
-
border-right:${cursor ? "2px solid black" : "none"};
|
|
3611
|
-
white-space:nowrap;
|
|
3612
|
-
width:0;
|
|
3613
|
-
margin:0 auto;
|
|
3614
|
-
`;
|
|
3615
|
-
visible = `
|
|
3616
|
-
animation:typewriter ${speedPerChar * 30}ms steps(30,end) ${delay}ms forwards
|
|
3617
|
-
${cursor ? ", blink .75s step-end infinite" : ""};
|
|
3618
|
-
`;
|
|
3619
|
-
break;
|
|
3620
|
-
}
|
|
3621
|
-
if (mode === "hover") {
|
|
3622
|
-
return `
|
|
3623
|
-
${keyframes}
|
|
3624
|
-
${guid} { ${base} }
|
|
3625
|
-
${guid}:hover { ${visible} }
|
|
3626
|
-
`;
|
|
3627
|
-
} else {
|
|
3628
|
-
return `
|
|
3629
|
-
${keyframes}
|
|
3630
|
-
${guid} { ${base} }
|
|
3631
|
-
${guid}.visible { ${visible} }
|
|
3632
|
-
`;
|
|
3633
|
-
}
|
|
3634
|
-
}
|
|
3635
|
-
// Helper method to generate slide transforms based on direction
|
|
3636
|
-
static getSlideTransform(direction, distance) {
|
|
3637
|
-
switch (direction) {
|
|
3638
|
-
case "left":
|
|
3639
|
-
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
3640
|
-
case "right":
|
|
3641
|
-
return { start: `translateX(-${distance}px)`, end: `translateX(0)` };
|
|
3642
|
-
case "up":
|
|
3643
|
-
return { start: `translateY(${distance}px)`, end: `translateY(0)` };
|
|
3644
|
-
case "down":
|
|
3645
|
-
return { start: `translateY(-${distance}px)`, end: `translateY(0)` };
|
|
3646
|
-
default:
|
|
3647
|
-
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
3648
|
-
}
|
|
3649
|
-
}
|
|
3650
|
-
};
|
|
3651
|
-
var AnimationUtility_default = AnimationUtility;
|
|
3652
|
-
|
|
3653
|
-
// src/components/Pagination.tsx
|
|
3654
|
-
import { useMemo } from "react";
|
|
3655
|
-
import { jsx as jsx65, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3656
|
-
var Pagination = (props) => {
|
|
3657
|
-
const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
|
|
3658
|
-
const builder = useMemo(() => {
|
|
3659
|
-
const b = new OdataBuilder(path);
|
|
3660
|
-
if (query) b.setQuery(query);
|
|
3661
|
-
return b;
|
|
3662
|
-
}, [path, query]);
|
|
3663
|
-
const activePageNumber = builder.getPageNumber(Constants.pagesize);
|
|
3664
|
-
const totalItems = dataset?.count || 0;
|
|
3665
|
-
const itemsPerPage = parseInt(builder.top || Constants.pagesize.toString());
|
|
3666
|
-
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
3667
|
-
const startItem = totalItems > 0 ? (activePageNumber - 1) * itemsPerPage + 1 : 0;
|
|
3668
|
-
const endItem = Math.min(activePageNumber * itemsPerPage, totalItems);
|
|
3669
|
-
const getPaginationRange = () => {
|
|
3670
|
-
const delta = 1;
|
|
3671
|
-
const range = [];
|
|
3672
|
-
if (totalPages <= 7) {
|
|
3673
|
-
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
3674
|
-
}
|
|
3675
|
-
range.push(1);
|
|
3676
|
-
let start = Math.max(2, activePageNumber - delta);
|
|
3677
|
-
let end = Math.min(totalPages - 1, activePageNumber + delta);
|
|
3678
|
-
if (activePageNumber - delta <= 2) {
|
|
3679
|
-
end = Math.min(totalPages - 1, 4);
|
|
3680
|
-
}
|
|
3681
|
-
if (activePageNumber + delta >= totalPages - 1) {
|
|
3682
|
-
start = Math.max(2, totalPages - 4);
|
|
3683
|
-
}
|
|
3684
|
-
if (start > 2) {
|
|
3685
|
-
range.push("...");
|
|
3686
|
-
}
|
|
3687
|
-
for (let i = start; i <= end; i++) {
|
|
3688
|
-
range.push(i);
|
|
3689
|
-
}
|
|
3690
|
-
if (end < totalPages - 1) {
|
|
3691
|
-
range.push("...");
|
|
3692
|
-
}
|
|
3693
|
-
if (totalPages > 1) {
|
|
3694
|
-
range.push(totalPages);
|
|
3695
|
-
}
|
|
3696
|
-
return range;
|
|
3697
|
-
};
|
|
3698
|
-
const paginationRange = getPaginationRange();
|
|
3699
|
-
const PageButton = ({ page, children }) => /* @__PURE__ */ jsx65(
|
|
3700
|
-
Hyperlink,
|
|
3701
|
-
{
|
|
3702
|
-
linkType: "Link" /* Link */,
|
|
3703
|
-
className: `
|
|
3704
|
-
min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2.5 md:px-3
|
|
3705
|
-
border text-sm font-medium transition-colors duration-150
|
|
3706
|
-
${activePageNumber === page ? "bg-primary-base font-semibold" : ""}
|
|
3707
|
-
`,
|
|
3708
|
-
href: builder.getNewPageUrl(page),
|
|
3709
|
-
children
|
|
3710
|
-
}
|
|
3711
|
-
);
|
|
3712
|
-
const NavigationButton = ({ page, disabled, children }) => {
|
|
3713
|
-
if (disabled) {
|
|
3714
|
-
return /* @__PURE__ */ jsx65("span", { className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border bg-neutral-base cursor-not-allowed", children });
|
|
3715
|
-
}
|
|
3716
|
-
return /* @__PURE__ */ jsx65(
|
|
3717
|
-
Hyperlink,
|
|
3718
|
-
{
|
|
3719
|
-
className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border transition-colors duration-150",
|
|
3720
|
-
href: builder.getNewPageUrl(page),
|
|
3721
|
-
children
|
|
3722
|
-
}
|
|
3723
|
-
);
|
|
3724
|
-
};
|
|
3725
|
-
if (totalPages <= 1 && totalItems === 0) return null;
|
|
3726
|
-
return /* @__PURE__ */ jsxs31("div", { className: "py-6 border-t bg-default", children: [
|
|
3727
|
-
/* @__PURE__ */ jsxs31("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
|
|
3728
|
-
/* @__PURE__ */ jsxs31("div", { className: "text-sm", children: [
|
|
3729
|
-
"Showing ",
|
|
3730
|
-
/* @__PURE__ */ jsxs31("span", { className: "font-semibold", children: [
|
|
3731
|
-
startItem,
|
|
3732
|
-
"-",
|
|
3733
|
-
endItem
|
|
3734
|
-
] }),
|
|
3735
|
-
" ",
|
|
3736
|
-
"out of ",
|
|
3737
|
-
/* @__PURE__ */ jsx65("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
|
|
3738
|
-
" results"
|
|
3739
|
-
] }),
|
|
3740
|
-
totalPages > 1 && /* @__PURE__ */ jsxs31("div", { className: "flex items-center space-x-1", children: [
|
|
3741
|
-
/* @__PURE__ */ jsxs31(
|
|
3742
|
-
NavigationButton,
|
|
3743
|
-
{
|
|
3744
|
-
page: activePageNumber - 1,
|
|
3745
|
-
disabled: activePageNumber === 1,
|
|
3746
|
-
children: [
|
|
3747
|
-
/* @__PURE__ */ jsx65("span", { children: /* @__PURE__ */ jsx65(Icon_default, { name: "chevronLeft", className: "w-4 h-4 mr-1" }) }),
|
|
3748
|
-
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Prev" })
|
|
3749
|
-
]
|
|
3750
|
-
}
|
|
3751
|
-
),
|
|
3752
|
-
paginationRange.map((item, index) => {
|
|
3753
|
-
if (item === "...") {
|
|
3754
|
-
return /* @__PURE__ */ jsx65(
|
|
3755
|
-
"span",
|
|
3756
|
-
{
|
|
3757
|
-
className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center text-gray-500",
|
|
3758
|
-
children: "..."
|
|
3759
|
-
},
|
|
3760
|
-
`ellipsis-${index}`
|
|
3761
|
-
);
|
|
3762
|
-
}
|
|
3763
|
-
const page = item;
|
|
3764
|
-
return /* @__PURE__ */ jsx65(PageButton, { page, children: page }, page);
|
|
3765
|
-
}),
|
|
3766
|
-
/* @__PURE__ */ jsxs31(
|
|
3767
|
-
NavigationButton,
|
|
3768
|
-
{
|
|
3769
|
-
page: activePageNumber + 1,
|
|
3770
|
-
disabled: activePageNumber === totalPages,
|
|
3771
|
-
children: [
|
|
3772
|
-
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Next" }),
|
|
3773
|
-
/* @__PURE__ */ jsx65("span", { children: /* @__PURE__ */ jsx65(Icon_default, { name: "chevronRight", className: "w-4 h-4 ml-1" }) })
|
|
3774
|
-
]
|
|
3775
|
-
}
|
|
3776
|
-
)
|
|
3777
|
-
] }),
|
|
3778
|
-
showJumpToPage && totalPages > 5 && /* @__PURE__ */ jsxs31("div", { className: "flex items-center space-x-2", children: [
|
|
3779
|
-
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Go to:" }),
|
|
3780
|
-
/* @__PURE__ */ jsx65("div", { className: "relative", children: /* @__PURE__ */ jsx65(
|
|
3781
|
-
"input",
|
|
3782
|
-
{
|
|
3783
|
-
type: "number",
|
|
3784
|
-
min: "1",
|
|
3785
|
-
max: totalPages,
|
|
3786
|
-
defaultValue: activePageNumber,
|
|
3787
|
-
className: "w-20 h-10 px-3 border rounded text-sm focus:outline-none focus:ring-2 focus:border-transparent",
|
|
3788
|
-
onKeyDown: (e) => {
|
|
3789
|
-
if (e.key === "Enter") {
|
|
3790
|
-
const input = e.target;
|
|
3791
|
-
const page = parseInt(input.value);
|
|
3792
|
-
if (page >= 1 && page <= totalPages && page !== activePageNumber) {
|
|
3793
|
-
window.location.href = builder.getNewPageUrl(page);
|
|
3794
|
-
}
|
|
3795
|
-
}
|
|
3796
|
-
}
|
|
3797
|
-
}
|
|
3798
|
-
) })
|
|
3799
|
-
] })
|
|
3800
|
-
] }),
|
|
3801
|
-
showPageSizeSelector && /* @__PURE__ */ jsx65("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-center space-x-2", children: [
|
|
3802
|
-
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Show:" }),
|
|
3803
|
-
/* @__PURE__ */ jsx65("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ jsx65(
|
|
3804
|
-
Hyperlink,
|
|
3805
|
-
{
|
|
3806
|
-
className: `
|
|
3807
|
-
px-3 py-1 text-sm rounded border transition-colors duration-150
|
|
3808
|
-
${itemsPerPage === size ? "bg-primary-base font-medium" : "bg-neutral-weak"}
|
|
3809
|
-
`,
|
|
3810
|
-
href: builder.getNewPageSizeUrl(size),
|
|
3811
|
-
children: size
|
|
3812
|
-
},
|
|
3813
|
-
size
|
|
3814
|
-
)) }),
|
|
3815
|
-
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "per page" })
|
|
3816
|
-
] }) })
|
|
3817
|
-
] });
|
|
3818
|
-
};
|
|
3819
|
-
var Pagination_default = Pagination;
|
|
3820
|
-
|
|
3821
|
-
// src/components/utilities/PathUtility.tsx
|
|
3822
|
-
var PathUtility = class {
|
|
3823
|
-
constructor() {
|
|
3824
|
-
}
|
|
3825
|
-
normalizePath(path) {
|
|
3826
|
-
if (path == null) {
|
|
3827
|
-
return "/";
|
|
3828
|
-
}
|
|
3829
|
-
const trimmedPath = path.replace(/^\/|\/$/g, "");
|
|
3830
|
-
return trimmedPath === "" ? "/" : "/" + trimmedPath + "/";
|
|
3831
|
-
}
|
|
3832
|
-
joinAndNormalizePaths(path1, path2) {
|
|
3833
|
-
path1 = path1.replace(/\/$/, "");
|
|
3834
|
-
path2 = path2.replace(/^\//, "");
|
|
3835
|
-
const joinedPath = `${path1}/${path2}`;
|
|
3836
|
-
const normalizedPath = joinedPath.replace(/\/{2,}/g, "/");
|
|
3837
|
-
return normalizedPath === "" ? "/" : "/" + normalizedPath;
|
|
3838
|
-
}
|
|
3839
|
-
removeLeadingAndTrailingSlashes(path) {
|
|
3840
|
-
if (path == null) {
|
|
3841
|
-
return "/";
|
|
3842
|
-
}
|
|
3843
|
-
const trimmedPath = path.replace(/^\/|\/$/g, "");
|
|
3844
|
-
return trimmedPath;
|
|
3845
|
-
}
|
|
3846
|
-
removeTrailingSlash(path) {
|
|
3847
|
-
if (path == null) {
|
|
3848
|
-
return "/";
|
|
3849
|
-
}
|
|
3850
|
-
const trimmedPath = path.replace(/\/$/, "");
|
|
3851
|
-
return trimmedPath;
|
|
3852
|
-
}
|
|
3853
|
-
joinPaths(path1, path2) {
|
|
3854
|
-
if (!path1.endsWith("/") && !path2.startsWith("/")) {
|
|
3855
|
-
return `${path1}/${path2}`;
|
|
3856
|
-
} else if (path1.endsWith("/") && path2.startsWith("/")) {
|
|
3857
|
-
return `${path1}${path2.substr(1)}`;
|
|
3858
|
-
} else {
|
|
3859
|
-
return `${path1}${path2}`;
|
|
3860
|
-
}
|
|
3861
|
-
}
|
|
3862
|
-
getFirstSegment(path) {
|
|
3863
|
-
if (!path || path === "/") {
|
|
3864
|
-
return "";
|
|
3865
|
-
}
|
|
3866
|
-
const segments = path.split("/").filter(Boolean);
|
|
3867
|
-
return segments.length > 0 ? segments[0] : "";
|
|
3868
|
-
}
|
|
3869
|
-
};
|
|
3870
|
-
var PathUtility_default = new PathUtility();
|
|
3871
|
-
|
|
3872
|
-
// src/components/pageRenderingEngine/nodes/EnterAnimationClient.tsx
|
|
3873
|
-
import React49, { useEffect as useEffect10, useRef as useRef6 } from "react";
|
|
3874
|
-
import { Fragment as Fragment9, jsx as jsx66 } from "react/jsx-runtime";
|
|
3875
|
-
function EnterAnimationClient({ hasEnterAnimation, children }) {
|
|
3876
|
-
const ref = useRef6(null);
|
|
3877
|
-
useEffect10(() => {
|
|
3878
|
-
if (!hasEnterAnimation || !ref.current) return;
|
|
3879
|
-
const observer = new IntersectionObserver(
|
|
3880
|
-
(entries) => {
|
|
3881
|
-
entries.forEach((entry) => {
|
|
3882
|
-
if (entry.isIntersecting) {
|
|
3883
|
-
entry.target.classList.add("visible");
|
|
3884
|
-
observer.unobserve(entry.target);
|
|
3885
|
-
}
|
|
3886
|
-
});
|
|
3887
|
-
},
|
|
3888
|
-
{ threshold: 0.1 }
|
|
3889
|
-
);
|
|
3890
|
-
observer.observe(ref.current);
|
|
3891
|
-
return () => observer.disconnect();
|
|
3892
|
-
}, [hasEnterAnimation]);
|
|
3893
|
-
return /* @__PURE__ */ jsx66(Fragment9, { children: children && // enforce passing the ref to Wrapper
|
|
3894
|
-
//@ts-ignore
|
|
3895
|
-
React49.cloneElement(children, { ref }) });
|
|
3896
|
-
}
|
|
3897
|
-
|
|
3898
3559
|
// src/components/Slider.tsx
|
|
3899
|
-
import
|
|
3900
|
-
import { Fragment as
|
|
3560
|
+
import React46, { useState as useState10, useEffect as useEffect10, Children, cloneElement } from "react";
|
|
3561
|
+
import { Fragment as Fragment8, jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3901
3562
|
var Slider = ({
|
|
3902
3563
|
children,
|
|
3903
3564
|
slidesToShow = 4,
|
|
@@ -3915,13 +3576,13 @@ var Slider = ({
|
|
|
3915
3576
|
pillStyle = "cumulative",
|
|
3916
3577
|
progressPosition = "bottom"
|
|
3917
3578
|
}) => {
|
|
3918
|
-
const [currentSlide, setCurrentSlide] =
|
|
3919
|
-
const [transition, setTransition] =
|
|
3920
|
-
const [slidesToShowState, setSlidesToShowState] =
|
|
3579
|
+
const [currentSlide, setCurrentSlide] = useState10(0);
|
|
3580
|
+
const [transition, setTransition] = useState10(true);
|
|
3581
|
+
const [slidesToShowState, setSlidesToShowState] = useState10(
|
|
3921
3582
|
typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
|
|
3922
3583
|
);
|
|
3923
|
-
const [isPlaying, setIsPlaying] =
|
|
3924
|
-
|
|
3584
|
+
const [isPlaying, setIsPlaying] = useState10(autoplay);
|
|
3585
|
+
useEffect10(() => {
|
|
3925
3586
|
if (typeof slidesToShow === "number") return;
|
|
3926
3587
|
const handleResize = () => {
|
|
3927
3588
|
if (window.innerWidth >= 1024) {
|
|
@@ -3936,7 +3597,7 @@ var Slider = ({
|
|
|
3936
3597
|
window.addEventListener("resize", handleResize);
|
|
3937
3598
|
return () => window.removeEventListener("resize", handleResize);
|
|
3938
3599
|
}, [slidesToShow]);
|
|
3939
|
-
|
|
3600
|
+
useEffect10(() => {
|
|
3940
3601
|
if (!autoplay) return;
|
|
3941
3602
|
const timer = setInterval(() => {
|
|
3942
3603
|
if (isPlaying) {
|
|
@@ -3991,10 +3652,10 @@ var Slider = ({
|
|
|
3991
3652
|
};
|
|
3992
3653
|
const translateX = -currentSlide * (100 / slidesToShowState);
|
|
3993
3654
|
const slides = Children.map(children, (child, index) => {
|
|
3994
|
-
if (!
|
|
3655
|
+
if (!React46.isValidElement(child)) return null;
|
|
3995
3656
|
const childProps = child.props;
|
|
3996
3657
|
const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
|
|
3997
|
-
return /* @__PURE__ */
|
|
3658
|
+
return /* @__PURE__ */ jsx62(
|
|
3998
3659
|
"div",
|
|
3999
3660
|
{
|
|
4000
3661
|
className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
|
|
@@ -4017,14 +3678,14 @@ var Slider = ({
|
|
|
4017
3678
|
return "bottom-4";
|
|
4018
3679
|
}
|
|
4019
3680
|
};
|
|
4020
|
-
return /* @__PURE__ */
|
|
3681
|
+
return /* @__PURE__ */ jsxs30(
|
|
4021
3682
|
"div",
|
|
4022
3683
|
{
|
|
4023
3684
|
className: `relative w-full overflow-hidden ${className}`,
|
|
4024
3685
|
onMouseEnter: handleMouseEnter,
|
|
4025
3686
|
onMouseLeave: handleMouseLeave,
|
|
4026
3687
|
children: [
|
|
4027
|
-
/* @__PURE__ */
|
|
3688
|
+
/* @__PURE__ */ jsx62(
|
|
4028
3689
|
"div",
|
|
4029
3690
|
{
|
|
4030
3691
|
className: "flex h-full",
|
|
@@ -4035,18 +3696,18 @@ var Slider = ({
|
|
|
4035
3696
|
children: slides
|
|
4036
3697
|
}
|
|
4037
3698
|
),
|
|
4038
|
-
show_arrows && /* @__PURE__ */
|
|
4039
|
-
/* @__PURE__ */
|
|
3699
|
+
show_arrows && /* @__PURE__ */ jsxs30(Fragment8, { children: [
|
|
3700
|
+
/* @__PURE__ */ jsx62(
|
|
4040
3701
|
ArrowButton,
|
|
4041
3702
|
{
|
|
4042
3703
|
direction: "left",
|
|
4043
3704
|
onClick: prevSlide,
|
|
4044
3705
|
visible: infinite_scroll || currentSlide > 0,
|
|
4045
3706
|
className: arrowClassName,
|
|
4046
|
-
children: /* @__PURE__ */
|
|
3707
|
+
children: /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx62("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
|
|
4047
3708
|
}
|
|
4048
3709
|
),
|
|
4049
|
-
/* @__PURE__ */
|
|
3710
|
+
/* @__PURE__ */ jsxs30(
|
|
4050
3711
|
ArrowButton,
|
|
4051
3712
|
{
|
|
4052
3713
|
direction: "right",
|
|
@@ -4054,13 +3715,13 @@ var Slider = ({
|
|
|
4054
3715
|
visible: infinite_scroll || currentSlide < maxSlide,
|
|
4055
3716
|
className: arrowClassName,
|
|
4056
3717
|
children: [
|
|
4057
|
-
/* @__PURE__ */
|
|
3718
|
+
/* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx62("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
|
|
4058
3719
|
" "
|
|
4059
3720
|
]
|
|
4060
3721
|
}
|
|
4061
3722
|
)
|
|
4062
3723
|
] }),
|
|
4063
|
-
show_dots && /* @__PURE__ */
|
|
3724
|
+
show_dots && /* @__PURE__ */ jsx62("div", { className: `absolute left-1/2 -translate-x-1/2 flex justify-center space-x-1.5 ${getProgressPositionClass()}`, children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx62(
|
|
4064
3725
|
ProgressPill,
|
|
4065
3726
|
{
|
|
4066
3727
|
active: index === currentSlide,
|
|
@@ -4086,7 +3747,7 @@ var ArrowButton = ({
|
|
|
4086
3747
|
visible,
|
|
4087
3748
|
children,
|
|
4088
3749
|
className = ""
|
|
4089
|
-
}) => /* @__PURE__ */
|
|
3750
|
+
}) => /* @__PURE__ */ jsx62(
|
|
4090
3751
|
"button",
|
|
4091
3752
|
{
|
|
4092
3753
|
className: `
|
|
@@ -4112,13 +3773,13 @@ var ProgressPill = ({
|
|
|
4112
3773
|
currentSlide,
|
|
4113
3774
|
totalSlides
|
|
4114
3775
|
}) => {
|
|
4115
|
-
const [progress, setProgress] =
|
|
4116
|
-
|
|
3776
|
+
const [progress, setProgress] = useState10(0);
|
|
3777
|
+
useEffect10(() => {
|
|
4117
3778
|
if (active) {
|
|
4118
3779
|
setProgress(0);
|
|
4119
3780
|
}
|
|
4120
3781
|
}, [active, index]);
|
|
4121
|
-
|
|
3782
|
+
useEffect10(() => {
|
|
4122
3783
|
if (!active || !isPlaying) {
|
|
4123
3784
|
if (!active) {
|
|
4124
3785
|
setProgress(0);
|
|
@@ -4169,53 +3830,238 @@ var ProgressPill = ({
|
|
|
4169
3830
|
hover:w-8
|
|
4170
3831
|
`;
|
|
4171
3832
|
}
|
|
4172
|
-
};
|
|
4173
|
-
const renderProgressBar = () => {
|
|
4174
|
-
if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
|
|
4175
|
-
const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
|
|
4176
|
-
return /* @__PURE__ */
|
|
4177
|
-
"div",
|
|
4178
|
-
{
|
|
4179
|
-
className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
|
|
4180
|
-
style: { width: `${displayProgress}%` }
|
|
4181
|
-
}
|
|
4182
|
-
);
|
|
3833
|
+
};
|
|
3834
|
+
const renderProgressBar = () => {
|
|
3835
|
+
if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
|
|
3836
|
+
const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
|
|
3837
|
+
return /* @__PURE__ */ jsx62(
|
|
3838
|
+
"div",
|
|
3839
|
+
{
|
|
3840
|
+
className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
|
|
3841
|
+
style: { width: `${displayProgress}%` }
|
|
3842
|
+
}
|
|
3843
|
+
);
|
|
3844
|
+
}
|
|
3845
|
+
return null;
|
|
3846
|
+
};
|
|
3847
|
+
const renderCumulativeFill = () => {
|
|
3848
|
+
if (style === "cumulative" && isFilled && !isActive) {
|
|
3849
|
+
return /* @__PURE__ */ jsx62(
|
|
3850
|
+
"div",
|
|
3851
|
+
{
|
|
3852
|
+
className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
|
|
3853
|
+
style: { width: "100%" }
|
|
3854
|
+
}
|
|
3855
|
+
);
|
|
3856
|
+
}
|
|
3857
|
+
return null;
|
|
3858
|
+
};
|
|
3859
|
+
return /* @__PURE__ */ jsxs30(
|
|
3860
|
+
"button",
|
|
3861
|
+
{
|
|
3862
|
+
className: `${baseClasses} ${getStyleClasses()}`,
|
|
3863
|
+
onClick,
|
|
3864
|
+
"aria-label": `Go to slide ${index + 1}`,
|
|
3865
|
+
"aria-current": isActive ? "true" : "false",
|
|
3866
|
+
children: [
|
|
3867
|
+
renderProgressBar(),
|
|
3868
|
+
renderCumulativeFill()
|
|
3869
|
+
]
|
|
3870
|
+
}
|
|
3871
|
+
);
|
|
3872
|
+
};
|
|
3873
|
+
var Slider_default = Slider;
|
|
3874
|
+
|
|
3875
|
+
// src/components/utilities/AnimationUtility.tsx
|
|
3876
|
+
var AnimationUtility = class {
|
|
3877
|
+
static generateAnimationCSS(config, guid) {
|
|
3878
|
+
const {
|
|
3879
|
+
duration = 700,
|
|
3880
|
+
delay = 0,
|
|
3881
|
+
easing = "ease-out",
|
|
3882
|
+
distance = 30,
|
|
3883
|
+
scaleStart = 1,
|
|
3884
|
+
scaleEnd = 1.2,
|
|
3885
|
+
repeat = 1,
|
|
3886
|
+
intensity = 20,
|
|
3887
|
+
speedPerChar = 100,
|
|
3888
|
+
cursor = true,
|
|
3889
|
+
mode = "enter",
|
|
3890
|
+
direction = "left"
|
|
3891
|
+
// Default direction
|
|
3892
|
+
} = config;
|
|
3893
|
+
let base = "", visible = "", keyframes = "";
|
|
3894
|
+
switch (config.animation) {
|
|
3895
|
+
case "Fade":
|
|
3896
|
+
base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
|
|
3897
|
+
visible = `opacity:1;`;
|
|
3898
|
+
break;
|
|
3899
|
+
case "FadeInUp":
|
|
3900
|
+
base = `opacity:0; transform:translateY(${distance}px); transition:all ${duration}ms ${easing} ${delay}ms;`;
|
|
3901
|
+
visible = `opacity:1; transform:translateY(0);`;
|
|
3902
|
+
break;
|
|
3903
|
+
case "Slide":
|
|
3904
|
+
const slideTransform = this.getSlideTransform(direction, distance);
|
|
3905
|
+
base = `opacity:0; transform:${slideTransform.start}; transition:all ${duration}ms ${easing} ${delay}ms; will-change: transform, opacity;`;
|
|
3906
|
+
visible = `opacity:1; transform:${slideTransform.end}; will-change: unset;`;
|
|
3907
|
+
break;
|
|
3908
|
+
case "ZoomIn":
|
|
3909
|
+
if (mode === "enter") {
|
|
3910
|
+
base = `opacity:0; transform:scale(${scaleStart}); transition:all ${duration}ms ${easing} ${delay}ms;`;
|
|
3911
|
+
visible = `opacity:1; transform:scale(${scaleEnd});`;
|
|
3912
|
+
} else {
|
|
3913
|
+
base = `transform:scale(${scaleStart}); transition:transform ${duration / 1e3}s ${easing} ${delay / 1e3}s;`;
|
|
3914
|
+
visible = `transform:scale(${scaleEnd});`;
|
|
3915
|
+
}
|
|
3916
|
+
break;
|
|
3917
|
+
case "Bounce":
|
|
3918
|
+
keyframes = `
|
|
3919
|
+
@keyframes bounce {
|
|
3920
|
+
0%,20%,50%,80%,100% { transform: translateY(0); }
|
|
3921
|
+
40% { transform: translateY(-${intensity}px); }
|
|
3922
|
+
60% { transform: translateY(-${intensity / 2}px); }
|
|
3923
|
+
}
|
|
3924
|
+
`;
|
|
3925
|
+
if (mode === "enter") {
|
|
3926
|
+
base = `opacity:0;`;
|
|
3927
|
+
visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
|
|
3928
|
+
} else {
|
|
3929
|
+
base = ``;
|
|
3930
|
+
visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
|
|
3931
|
+
}
|
|
3932
|
+
break;
|
|
3933
|
+
case "Typewriter":
|
|
3934
|
+
keyframes = `
|
|
3935
|
+
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
3936
|
+
@keyframes blink { 50% { border-color: transparent } }
|
|
3937
|
+
`;
|
|
3938
|
+
base = `
|
|
3939
|
+
overflow:hidden;
|
|
3940
|
+
border-right:${cursor ? "2px solid black" : "none"};
|
|
3941
|
+
white-space:nowrap;
|
|
3942
|
+
width:0;
|
|
3943
|
+
margin:0 auto;
|
|
3944
|
+
`;
|
|
3945
|
+
visible = `
|
|
3946
|
+
animation:typewriter ${speedPerChar * 30}ms steps(30,end) ${delay}ms forwards
|
|
3947
|
+
${cursor ? ", blink .75s step-end infinite" : ""};
|
|
3948
|
+
`;
|
|
3949
|
+
break;
|
|
3950
|
+
}
|
|
3951
|
+
if (mode === "hover") {
|
|
3952
|
+
return `
|
|
3953
|
+
${keyframes}
|
|
3954
|
+
${guid} { ${base} }
|
|
3955
|
+
${guid}:hover { ${visible} }
|
|
3956
|
+
`;
|
|
3957
|
+
} else {
|
|
3958
|
+
return `
|
|
3959
|
+
${keyframes}
|
|
3960
|
+
${guid} { ${base} }
|
|
3961
|
+
${guid}.visible { ${visible} }
|
|
3962
|
+
`;
|
|
3963
|
+
}
|
|
3964
|
+
}
|
|
3965
|
+
// Helper method to generate slide transforms based on direction
|
|
3966
|
+
static getSlideTransform(direction, distance) {
|
|
3967
|
+
switch (direction) {
|
|
3968
|
+
case "left":
|
|
3969
|
+
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
3970
|
+
case "right":
|
|
3971
|
+
return { start: `translateX(-${distance}px)`, end: `translateX(0)` };
|
|
3972
|
+
case "up":
|
|
3973
|
+
return { start: `translateY(${distance}px)`, end: `translateY(0)` };
|
|
3974
|
+
case "down":
|
|
3975
|
+
return { start: `translateY(-${distance}px)`, end: `translateY(0)` };
|
|
3976
|
+
default:
|
|
3977
|
+
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
3978
|
+
}
|
|
3979
|
+
}
|
|
3980
|
+
};
|
|
3981
|
+
var AnimationUtility_default = AnimationUtility;
|
|
3982
|
+
|
|
3983
|
+
// src/components/pageRenderingEngine/nodes/EnterAnimationClient.tsx
|
|
3984
|
+
import React47, { useEffect as useEffect11, useRef as useRef6 } from "react";
|
|
3985
|
+
import { Fragment as Fragment9, jsx as jsx63 } from "react/jsx-runtime";
|
|
3986
|
+
function EnterAnimationClient({ hasEnterAnimation, children }) {
|
|
3987
|
+
const ref = useRef6(null);
|
|
3988
|
+
useEffect11(() => {
|
|
3989
|
+
if (!hasEnterAnimation || !ref.current) return;
|
|
3990
|
+
const observer = new IntersectionObserver(
|
|
3991
|
+
(entries) => {
|
|
3992
|
+
entries.forEach((entry) => {
|
|
3993
|
+
if (entry.isIntersecting) {
|
|
3994
|
+
entry.target.classList.add("visible");
|
|
3995
|
+
observer.unobserve(entry.target);
|
|
3996
|
+
}
|
|
3997
|
+
});
|
|
3998
|
+
},
|
|
3999
|
+
{ threshold: 0.1 }
|
|
4000
|
+
);
|
|
4001
|
+
observer.observe(ref.current);
|
|
4002
|
+
return () => observer.disconnect();
|
|
4003
|
+
}, [hasEnterAnimation]);
|
|
4004
|
+
return /* @__PURE__ */ jsx63(Fragment9, { children: children && // enforce passing the ref to Wrapper
|
|
4005
|
+
//@ts-ignore
|
|
4006
|
+
React47.cloneElement(children, { ref }) });
|
|
4007
|
+
}
|
|
4008
|
+
|
|
4009
|
+
// src/components/utilities/PathUtility.tsx
|
|
4010
|
+
var PathUtility = class {
|
|
4011
|
+
constructor() {
|
|
4012
|
+
}
|
|
4013
|
+
normalizePath(path) {
|
|
4014
|
+
if (path == null) {
|
|
4015
|
+
return "/";
|
|
4016
|
+
}
|
|
4017
|
+
const trimmedPath = path.replace(/^\/|\/$/g, "");
|
|
4018
|
+
return trimmedPath === "" ? "/" : "/" + trimmedPath + "/";
|
|
4019
|
+
}
|
|
4020
|
+
joinAndNormalizePaths(path1, path2) {
|
|
4021
|
+
path1 = path1.replace(/\/$/, "");
|
|
4022
|
+
path2 = path2.replace(/^\//, "");
|
|
4023
|
+
const joinedPath = `${path1}/${path2}`;
|
|
4024
|
+
const normalizedPath = joinedPath.replace(/\/{2,}/g, "/");
|
|
4025
|
+
return normalizedPath === "" ? "/" : "/" + normalizedPath;
|
|
4026
|
+
}
|
|
4027
|
+
removeLeadingAndTrailingSlashes(path) {
|
|
4028
|
+
if (path == null) {
|
|
4029
|
+
return "/";
|
|
4183
4030
|
}
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
{
|
|
4191
|
-
className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
|
|
4192
|
-
style: { width: "100%" }
|
|
4193
|
-
}
|
|
4194
|
-
);
|
|
4031
|
+
const trimmedPath = path.replace(/^\/|\/$/g, "");
|
|
4032
|
+
return trimmedPath;
|
|
4033
|
+
}
|
|
4034
|
+
removeTrailingSlash(path) {
|
|
4035
|
+
if (path == null) {
|
|
4036
|
+
return "/";
|
|
4195
4037
|
}
|
|
4196
|
-
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4200
|
-
{
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
renderProgressBar(),
|
|
4207
|
-
renderCumulativeFill()
|
|
4208
|
-
]
|
|
4038
|
+
const trimmedPath = path.replace(/\/$/, "");
|
|
4039
|
+
return trimmedPath;
|
|
4040
|
+
}
|
|
4041
|
+
joinPaths(path1, path2) {
|
|
4042
|
+
if (!path1.endsWith("/") && !path2.startsWith("/")) {
|
|
4043
|
+
return `${path1}/${path2}`;
|
|
4044
|
+
} else if (path1.endsWith("/") && path2.startsWith("/")) {
|
|
4045
|
+
return `${path1}${path2.substr(1)}`;
|
|
4046
|
+
} else {
|
|
4047
|
+
return `${path1}${path2}`;
|
|
4209
4048
|
}
|
|
4210
|
-
|
|
4049
|
+
}
|
|
4050
|
+
getFirstSegment(path) {
|
|
4051
|
+
if (!path || path === "/") {
|
|
4052
|
+
return "";
|
|
4053
|
+
}
|
|
4054
|
+
const segments = path.split("/").filter(Boolean);
|
|
4055
|
+
return segments.length > 0 ? segments[0] : "";
|
|
4056
|
+
}
|
|
4211
4057
|
};
|
|
4212
|
-
var
|
|
4058
|
+
var PathUtility_default = new PathUtility();
|
|
4213
4059
|
|
|
4214
4060
|
// src/components/NoDataFound.tsx
|
|
4215
|
-
import { jsx as
|
|
4061
|
+
import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
4216
4062
|
var NoDataFound = () => {
|
|
4217
|
-
return /* @__PURE__ */
|
|
4218
|
-
/* @__PURE__ */
|
|
4063
|
+
return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center bg-neutral-weak", children: [
|
|
4064
|
+
/* @__PURE__ */ jsx64("div", { className: "mb-5", children: /* @__PURE__ */ jsx64("div", { className: "mx-auto w-20 h-20 rounded-full flex items-center justify-center bg-neutral-soft", children: /* @__PURE__ */ jsx64(
|
|
4219
4065
|
"svg",
|
|
4220
4066
|
{
|
|
4221
4067
|
className: "w-10 h-10",
|
|
@@ -4223,7 +4069,7 @@ var NoDataFound = () => {
|
|
|
4223
4069
|
stroke: "currentColor",
|
|
4224
4070
|
viewBox: "0 0 24 24",
|
|
4225
4071
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4226
|
-
children: /* @__PURE__ */
|
|
4072
|
+
children: /* @__PURE__ */ jsx64(
|
|
4227
4073
|
"path",
|
|
4228
4074
|
{
|
|
4229
4075
|
strokeLinecap: "round",
|
|
@@ -4234,14 +4080,182 @@ var NoDataFound = () => {
|
|
|
4234
4080
|
)
|
|
4235
4081
|
}
|
|
4236
4082
|
) }) }),
|
|
4237
|
-
/* @__PURE__ */
|
|
4238
|
-
/* @__PURE__ */
|
|
4083
|
+
/* @__PURE__ */ jsx64("h3", { className: "text-lg font-medium mb-2", children: "No data available" }),
|
|
4084
|
+
/* @__PURE__ */ jsx64("p", { className: " max-w-sm mb-0", children: "No records found. Data may be empty or not available at the moment." })
|
|
4239
4085
|
] });
|
|
4240
4086
|
};
|
|
4241
4087
|
var NoDataFound_default = NoDataFound;
|
|
4242
4088
|
|
|
4089
|
+
// src/components/Pagination.tsx
|
|
4090
|
+
import { useMemo } from "react";
|
|
4091
|
+
import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
4092
|
+
var Pagination = (props) => {
|
|
4093
|
+
const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
|
|
4094
|
+
const builder = useMemo(() => {
|
|
4095
|
+
const b = new OdataBuilder(path);
|
|
4096
|
+
if (query) b.setQuery(query);
|
|
4097
|
+
return b;
|
|
4098
|
+
}, [path, query]);
|
|
4099
|
+
const activePageNumber = builder.getPageNumber(Constants.pagesize);
|
|
4100
|
+
const totalItems = dataset?.count || 0;
|
|
4101
|
+
const itemsPerPage = parseInt(builder.top || Constants.pagesize.toString());
|
|
4102
|
+
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
4103
|
+
const startItem = totalItems > 0 ? (activePageNumber - 1) * itemsPerPage + 1 : 0;
|
|
4104
|
+
const endItem = Math.min(activePageNumber * itemsPerPage, totalItems);
|
|
4105
|
+
const getPaginationRange = () => {
|
|
4106
|
+
const delta = 1;
|
|
4107
|
+
const range = [];
|
|
4108
|
+
if (totalPages <= 7) {
|
|
4109
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
4110
|
+
}
|
|
4111
|
+
range.push(1);
|
|
4112
|
+
let start = Math.max(2, activePageNumber - delta);
|
|
4113
|
+
let end = Math.min(totalPages - 1, activePageNumber + delta);
|
|
4114
|
+
if (activePageNumber - delta <= 2) {
|
|
4115
|
+
end = Math.min(totalPages - 1, 4);
|
|
4116
|
+
}
|
|
4117
|
+
if (activePageNumber + delta >= totalPages - 1) {
|
|
4118
|
+
start = Math.max(2, totalPages - 4);
|
|
4119
|
+
}
|
|
4120
|
+
if (start > 2) {
|
|
4121
|
+
range.push("...");
|
|
4122
|
+
}
|
|
4123
|
+
for (let i = start; i <= end; i++) {
|
|
4124
|
+
range.push(i);
|
|
4125
|
+
}
|
|
4126
|
+
if (end < totalPages - 1) {
|
|
4127
|
+
range.push("...");
|
|
4128
|
+
}
|
|
4129
|
+
if (totalPages > 1) {
|
|
4130
|
+
range.push(totalPages);
|
|
4131
|
+
}
|
|
4132
|
+
return range;
|
|
4133
|
+
};
|
|
4134
|
+
const paginationRange = getPaginationRange();
|
|
4135
|
+
const PageButton = ({ page, children }) => /* @__PURE__ */ jsx65(
|
|
4136
|
+
Hyperlink,
|
|
4137
|
+
{
|
|
4138
|
+
linkType: "Link" /* Link */,
|
|
4139
|
+
className: `
|
|
4140
|
+
min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2.5 md:px-3
|
|
4141
|
+
border text-sm font-medium transition-colors duration-150
|
|
4142
|
+
${activePageNumber === page ? "bg-primary-base font-semibold" : ""}
|
|
4143
|
+
`,
|
|
4144
|
+
href: builder.getNewPageUrl(page),
|
|
4145
|
+
children
|
|
4146
|
+
}
|
|
4147
|
+
);
|
|
4148
|
+
const NavigationButton = ({ page, disabled, children }) => {
|
|
4149
|
+
if (disabled) {
|
|
4150
|
+
return /* @__PURE__ */ jsx65("span", { className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border bg-neutral-base cursor-not-allowed", children });
|
|
4151
|
+
}
|
|
4152
|
+
return /* @__PURE__ */ jsx65(
|
|
4153
|
+
Hyperlink,
|
|
4154
|
+
{
|
|
4155
|
+
className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border transition-colors duration-150",
|
|
4156
|
+
href: builder.getNewPageUrl(page),
|
|
4157
|
+
children
|
|
4158
|
+
}
|
|
4159
|
+
);
|
|
4160
|
+
};
|
|
4161
|
+
if (totalPages <= 1 && totalItems === 0) return null;
|
|
4162
|
+
return /* @__PURE__ */ jsxs32("div", { className: "py-6 border-t bg-default", children: [
|
|
4163
|
+
/* @__PURE__ */ jsxs32("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
|
|
4164
|
+
/* @__PURE__ */ jsxs32("div", { className: "text-sm", children: [
|
|
4165
|
+
"Showing ",
|
|
4166
|
+
/* @__PURE__ */ jsxs32("span", { className: "font-semibold", children: [
|
|
4167
|
+
startItem,
|
|
4168
|
+
"-",
|
|
4169
|
+
endItem
|
|
4170
|
+
] }),
|
|
4171
|
+
" ",
|
|
4172
|
+
"out of ",
|
|
4173
|
+
/* @__PURE__ */ jsx65("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
|
|
4174
|
+
" results"
|
|
4175
|
+
] }),
|
|
4176
|
+
totalPages > 1 && /* @__PURE__ */ jsxs32("div", { className: "flex items-center space-x-1", children: [
|
|
4177
|
+
/* @__PURE__ */ jsxs32(
|
|
4178
|
+
NavigationButton,
|
|
4179
|
+
{
|
|
4180
|
+
page: activePageNumber - 1,
|
|
4181
|
+
disabled: activePageNumber === 1,
|
|
4182
|
+
children: [
|
|
4183
|
+
/* @__PURE__ */ jsx65("span", { children: /* @__PURE__ */ jsx65(Icon_default, { name: "chevronLeft", className: "w-4 h-4 mr-1" }) }),
|
|
4184
|
+
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Prev" })
|
|
4185
|
+
]
|
|
4186
|
+
}
|
|
4187
|
+
),
|
|
4188
|
+
paginationRange.map((item, index) => {
|
|
4189
|
+
if (item === "...") {
|
|
4190
|
+
return /* @__PURE__ */ jsx65(
|
|
4191
|
+
"span",
|
|
4192
|
+
{
|
|
4193
|
+
className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center text-gray-500",
|
|
4194
|
+
children: "..."
|
|
4195
|
+
},
|
|
4196
|
+
`ellipsis-${index}`
|
|
4197
|
+
);
|
|
4198
|
+
}
|
|
4199
|
+
const page = item;
|
|
4200
|
+
return /* @__PURE__ */ jsx65(PageButton, { page, children: page }, page);
|
|
4201
|
+
}),
|
|
4202
|
+
/* @__PURE__ */ jsxs32(
|
|
4203
|
+
NavigationButton,
|
|
4204
|
+
{
|
|
4205
|
+
page: activePageNumber + 1,
|
|
4206
|
+
disabled: activePageNumber === totalPages,
|
|
4207
|
+
children: [
|
|
4208
|
+
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Next" }),
|
|
4209
|
+
/* @__PURE__ */ jsx65("span", { children: /* @__PURE__ */ jsx65(Icon_default, { name: "chevronRight", className: "w-4 h-4 ml-1" }) })
|
|
4210
|
+
]
|
|
4211
|
+
}
|
|
4212
|
+
)
|
|
4213
|
+
] }),
|
|
4214
|
+
showJumpToPage && totalPages > 5 && /* @__PURE__ */ jsxs32("div", { className: "flex items-center space-x-2", children: [
|
|
4215
|
+
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Go to:" }),
|
|
4216
|
+
/* @__PURE__ */ jsx65("div", { className: "relative", children: /* @__PURE__ */ jsx65(
|
|
4217
|
+
"input",
|
|
4218
|
+
{
|
|
4219
|
+
type: "number",
|
|
4220
|
+
min: "1",
|
|
4221
|
+
max: totalPages,
|
|
4222
|
+
defaultValue: activePageNumber,
|
|
4223
|
+
className: "w-20 h-10 px-3 border rounded text-sm focus:outline-none focus:ring-2 focus:border-transparent",
|
|
4224
|
+
onKeyDown: (e) => {
|
|
4225
|
+
if (e.key === "Enter") {
|
|
4226
|
+
const input = e.target;
|
|
4227
|
+
const page = parseInt(input.value);
|
|
4228
|
+
if (page >= 1 && page <= totalPages && page !== activePageNumber) {
|
|
4229
|
+
window.location.href = builder.getNewPageUrl(page);
|
|
4230
|
+
}
|
|
4231
|
+
}
|
|
4232
|
+
}
|
|
4233
|
+
}
|
|
4234
|
+
) })
|
|
4235
|
+
] })
|
|
4236
|
+
] }),
|
|
4237
|
+
showPageSizeSelector && /* @__PURE__ */ jsx65("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-center space-x-2", children: [
|
|
4238
|
+
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Show:" }),
|
|
4239
|
+
/* @__PURE__ */ jsx65("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ jsx65(
|
|
4240
|
+
Hyperlink,
|
|
4241
|
+
{
|
|
4242
|
+
className: `
|
|
4243
|
+
px-3 py-1 text-sm rounded border transition-colors duration-150
|
|
4244
|
+
${itemsPerPage === size ? "bg-primary-base font-medium" : "bg-neutral-weak"}
|
|
4245
|
+
`,
|
|
4246
|
+
href: builder.getNewPageSizeUrl(size),
|
|
4247
|
+
children: size
|
|
4248
|
+
},
|
|
4249
|
+
size
|
|
4250
|
+
)) }),
|
|
4251
|
+
/* @__PURE__ */ jsx65("span", { className: "text-sm", children: "per page" })
|
|
4252
|
+
] }) })
|
|
4253
|
+
] });
|
|
4254
|
+
};
|
|
4255
|
+
var Pagination_default = Pagination;
|
|
4256
|
+
|
|
4243
4257
|
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
4244
|
-
import { jsx as
|
|
4258
|
+
import { jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
4245
4259
|
function toCamelCase(str) {
|
|
4246
4260
|
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
|
4247
4261
|
}
|
|
@@ -4258,18 +4272,23 @@ function convertKeysToCamelCase(obj) {
|
|
|
4258
4272
|
var getNestedValue = (obj, path) => {
|
|
4259
4273
|
if (!obj || !path) return void 0;
|
|
4260
4274
|
return path.split(".").reduce((current, key) => {
|
|
4275
|
+
{
|
|
4276
|
+
}
|
|
4261
4277
|
return current && current[key] !== void 0 ? current[key] : void 0;
|
|
4262
4278
|
}, obj);
|
|
4263
4279
|
};
|
|
4264
|
-
|
|
4280
|
+
{
|
|
4281
|
+
}
|
|
4282
|
+
function generateCompleteBackgroundString(layers, apiBaseUrl) {
|
|
4265
4283
|
if (!layers || !Array.isArray(layers)) return "";
|
|
4266
4284
|
return layers.filter((layer) => layer && layer.type && layer.value).map((layer) => {
|
|
4267
4285
|
if (layer.type === "image" && typeof layer.value === "object") {
|
|
4268
4286
|
const imageValue = layer.value;
|
|
4269
4287
|
if (!imageValue.assetUrl) return "";
|
|
4270
|
-
const
|
|
4271
|
-
|
|
4272
|
-
|
|
4288
|
+
const url = `url('${AssetUtility_default.resolveUrl(
|
|
4289
|
+
apiBaseUrl,
|
|
4290
|
+
imageValue.assetUrl
|
|
4291
|
+
)}')`;
|
|
4273
4292
|
const repeat = layer.repeat || "no-repeat";
|
|
4274
4293
|
const position = layer.position || "center";
|
|
4275
4294
|
const size = layer.size || "auto";
|
|
@@ -4288,12 +4307,16 @@ function generateCompleteBackgroundString(layers, resolveAssetUrl, apiBaseUrl) {
|
|
|
4288
4307
|
}).filter((bg) => bg.trim() !== "").join(", ");
|
|
4289
4308
|
}
|
|
4290
4309
|
var generateCssString = (guid, stylesObject, mobileStylesObject) => {
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
|
|
4294
|
-
|
|
4295
|
-
|
|
4296
|
-
|
|
4310
|
+
{
|
|
4311
|
+
}
|
|
4312
|
+
const gridColumns = stylesObject.gridTemplateColumns ? stylesObject.gridTemplateColumns.match(/\d+/g) : [];
|
|
4313
|
+
const hasGridProperties = gridColumns.length > 0;
|
|
4314
|
+
const largeCols = hasGridProperties ? parseInt(gridColumns[0]) : 4;
|
|
4315
|
+
const tabletColumns = hasGridProperties ? Math.ceil(parseInt(gridColumns[0]) / 2) : 2;
|
|
4316
|
+
const mobileColumns = 1;
|
|
4317
|
+
{
|
|
4318
|
+
}
|
|
4319
|
+
const cssRules = Object.entries(stylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
|
|
4297
4320
|
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
4298
4321
|
return `${cssKey}: ${value};`;
|
|
4299
4322
|
});
|
|
@@ -4303,7 +4326,7 @@ ${cssRules.join(
|
|
|
4303
4326
|
)}
|
|
4304
4327
|
transition: all 0.3s ease-in-out; }`;
|
|
4305
4328
|
if (mobileStylesObject) {
|
|
4306
|
-
|
|
4329
|
+
const mobileCssRules = Object.entries(mobileStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
|
|
4307
4330
|
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
4308
4331
|
return `${cssKey}: ${value};`;
|
|
4309
4332
|
});
|
|
@@ -4341,7 +4364,6 @@ var DivContainer = async (props) => {
|
|
|
4341
4364
|
code: CodeNode_default,
|
|
4342
4365
|
image: ImageNode_default,
|
|
4343
4366
|
horizontalrule: HorizontalRuleNode_default,
|
|
4344
|
-
"layout-container": LayoutContainerNode_default,
|
|
4345
4367
|
widget: WidgetNode_default,
|
|
4346
4368
|
embed: EmbedNode_default,
|
|
4347
4369
|
"div-container": DivContainer,
|
|
@@ -4353,17 +4375,15 @@ var DivContainer = async (props) => {
|
|
|
4353
4375
|
const mobileStyles = props.node.mobileCssProperties;
|
|
4354
4376
|
const dataBindingProperties = props.node.dataBinding;
|
|
4355
4377
|
const updatedStyles = convertKeysToCamelCase(styles);
|
|
4356
|
-
|
|
4357
|
-
props.node.backgroundLayers,
|
|
4358
|
-
props.resolveAssetUrl,
|
|
4359
|
-
props.apiBaseUrl
|
|
4360
|
-
);
|
|
4378
|
+
const background = generateCompleteBackgroundString(props.node.backgroundLayers, props.apiBaseUrl);
|
|
4361
4379
|
let containerPaddingClass = "";
|
|
4362
4380
|
if (props.node.containerPadding == "small") {
|
|
4363
4381
|
containerPaddingClass = "container-small";
|
|
4364
4382
|
} else if (props.node.containerPadding == "large") {
|
|
4365
4383
|
containerPaddingClass = "container-large";
|
|
4366
4384
|
}
|
|
4385
|
+
{
|
|
4386
|
+
}
|
|
4367
4387
|
const updatedStyle = { ...updatedStyles };
|
|
4368
4388
|
const backgroundStyle = background && background !== "" ? { background } : {};
|
|
4369
4389
|
const combinedStyles = {
|
|
@@ -4394,13 +4414,30 @@ var DivContainer = async (props) => {
|
|
|
4394
4414
|
return fieldValue !== void 0 && fieldValue === false;
|
|
4395
4415
|
};
|
|
4396
4416
|
const isHidden = shouldHideContainer();
|
|
4397
|
-
|
|
4398
|
-
let
|
|
4399
|
-
let
|
|
4417
|
+
let odataString = void 0;
|
|
4418
|
+
let endpoint = void 0;
|
|
4419
|
+
let result = null;
|
|
4420
|
+
let response = null;
|
|
4400
4421
|
let childCollectionData = null;
|
|
4401
4422
|
if (dataBindingProperties) {
|
|
4402
|
-
|
|
4403
|
-
|
|
4423
|
+
const serviceClient = new ServiceClient_default(props.apiBaseUrl, props.session);
|
|
4424
|
+
endpoint = dataBindingProperties.dataSource;
|
|
4425
|
+
{
|
|
4426
|
+
}
|
|
4427
|
+
endpoint = endpoint.replace(/\{(\w+)\}/g, (_, key) => {
|
|
4428
|
+
return props.routeParameters?.[key] ?? `{${key}}`;
|
|
4429
|
+
});
|
|
4430
|
+
if (dataBindingProperties.applyODataParams) {
|
|
4431
|
+
odataString = OdataBuilder.getOdataQueryString(props.query);
|
|
4432
|
+
if (odataString) {
|
|
4433
|
+
const separator = endpoint.includes("?") ? "&" : "?";
|
|
4434
|
+
endpoint += separator + odataString;
|
|
4435
|
+
}
|
|
4436
|
+
}
|
|
4437
|
+
response = await serviceClient.get(endpoint);
|
|
4438
|
+
result = response?.result;
|
|
4439
|
+
if (dataBindingProperties.showNoResultsMessage && (result === void 0 || result.length == 0)) {
|
|
4440
|
+
return /* @__PURE__ */ jsx66(NoDataFound_default, {});
|
|
4404
4441
|
}
|
|
4405
4442
|
if (dataBindingProperties.childCollectionName && props.dataitem) {
|
|
4406
4443
|
childCollectionData = getNestedValue(props.dataitem, dataBindingProperties.childCollectionName);
|
|
@@ -4408,9 +4445,11 @@ var DivContainer = async (props) => {
|
|
|
4408
4445
|
}
|
|
4409
4446
|
const cssResult = generateCssString(guid, updatedStyle, mobileStyles);
|
|
4410
4447
|
function renderNode(node, props2, dataitem, key, href) {
|
|
4448
|
+
{
|
|
4449
|
+
}
|
|
4411
4450
|
const SelectedNode = NodeTypes2[node.type];
|
|
4412
4451
|
if (!SelectedNode) return null;
|
|
4413
|
-
return /* @__PURE__ */
|
|
4452
|
+
return /* @__PURE__ */ jsx66(React49.Fragment, { children: /* @__PURE__ */ jsx66(
|
|
4414
4453
|
SelectedNode,
|
|
4415
4454
|
{
|
|
4416
4455
|
node,
|
|
@@ -4421,11 +4460,9 @@ var DivContainer = async (props) => {
|
|
|
4421
4460
|
host: props2.host,
|
|
4422
4461
|
path: props2.path,
|
|
4423
4462
|
apiBaseUrl: props2.apiBaseUrl,
|
|
4424
|
-
resolveAssetUrl: props2.resolveAssetUrl,
|
|
4425
4463
|
breadcrumb: props2.breadcrumb,
|
|
4426
4464
|
dataitem,
|
|
4427
|
-
href
|
|
4428
|
-
dataMap: props2.dataMap
|
|
4465
|
+
href
|
|
4429
4466
|
}
|
|
4430
4467
|
) }, key);
|
|
4431
4468
|
}
|
|
@@ -4463,6 +4500,8 @@ var DivContainer = async (props) => {
|
|
|
4463
4500
|
return [props.dataitem];
|
|
4464
4501
|
})();
|
|
4465
4502
|
const renderLink = result && props.node.dataBinding?.responseType === "array" ? true : false;
|
|
4503
|
+
{
|
|
4504
|
+
}
|
|
4466
4505
|
let Wrapper;
|
|
4467
4506
|
let wrapperProps;
|
|
4468
4507
|
switch (true) {
|
|
@@ -4491,6 +4530,8 @@ var DivContainer = async (props) => {
|
|
|
4491
4530
|
const replacementTag = props.node.replaceDivTagWith;
|
|
4492
4531
|
const allowedTags = ["div", "section", "article", "details", "summary"];
|
|
4493
4532
|
if (replacementTag && allowedTags.includes(replacementTag)) {
|
|
4533
|
+
{
|
|
4534
|
+
}
|
|
4494
4535
|
Wrapper = replacementTag;
|
|
4495
4536
|
} else {
|
|
4496
4537
|
Wrapper = "div";
|
|
@@ -4507,9 +4548,9 @@ var DivContainer = async (props) => {
|
|
|
4507
4548
|
props.node.autoFormat && "auto-format",
|
|
4508
4549
|
props.node.bgClass
|
|
4509
4550
|
].filter(Boolean).join(" ");
|
|
4510
|
-
return /* @__PURE__ */
|
|
4511
|
-
/* @__PURE__ */
|
|
4512
|
-
/* @__PURE__ */
|
|
4551
|
+
return /* @__PURE__ */ jsxs33(React49.Fragment, { children: [
|
|
4552
|
+
/* @__PURE__ */ jsx66("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
|
|
4553
|
+
/* @__PURE__ */ jsx66(EnterAnimationClient, { hasEnterAnimation: !!props.node.enterAnimation, children: /* @__PURE__ */ jsx66(React49.Fragment, { children: /* @__PURE__ */ jsx66(
|
|
4513
4554
|
Wrapper,
|
|
4514
4555
|
{
|
|
4515
4556
|
id: guid,
|
|
@@ -4518,18 +4559,18 @@ var DivContainer = async (props) => {
|
|
|
4518
4559
|
...wrapperProps,
|
|
4519
4560
|
children: dataToRender.map(
|
|
4520
4561
|
(item, idx) => item?.links?.view && renderLink ? renderChildren(props.node.children, props, item, idx, props.href ? void 0 : item?.links?.view)?.map(
|
|
4521
|
-
(child, i) => /* @__PURE__ */
|
|
4562
|
+
(child, i) => /* @__PURE__ */ jsx66(React49.Fragment, { children: child }, i)
|
|
4522
4563
|
) : renderChildren(props.node.children, props, item, idx)
|
|
4523
4564
|
)
|
|
4524
4565
|
}
|
|
4525
4566
|
) }) }),
|
|
4526
|
-
dataBindingProperties && props.node.dataBinding.enablePagination && /* @__PURE__ */
|
|
4567
|
+
dataBindingProperties && props.node.dataBinding.enablePagination && /* @__PURE__ */ jsx66("div", { children: /* @__PURE__ */ jsx66(Pagination_default, { path: props.path, query: props.query, dataset: response }) })
|
|
4527
4568
|
] });
|
|
4528
4569
|
};
|
|
4529
4570
|
var DivContainer_default = DivContainer;
|
|
4530
4571
|
|
|
4531
4572
|
// src/components/pageRenderingEngine/PageBodyRenderer.tsx
|
|
4532
|
-
import { jsx as
|
|
4573
|
+
import { jsx as jsx67 } from "react/jsx-runtime";
|
|
4533
4574
|
var NodeTypes = {
|
|
4534
4575
|
["paragraph"]: ParagraphNode_default,
|
|
4535
4576
|
["heading"]: HeadingNode_default,
|
|
@@ -4538,7 +4579,6 @@ var NodeTypes = {
|
|
|
4538
4579
|
["code"]: CodeNode_default,
|
|
4539
4580
|
["image"]: ImageNode_default,
|
|
4540
4581
|
["horizontalrule"]: HorizontalRuleNode_default,
|
|
4541
|
-
["layout-container"]: LayoutContainerNode_default,
|
|
4542
4582
|
["widget"]: WidgetNode_default,
|
|
4543
4583
|
["form-container"]: FormContainerNode_default,
|
|
4544
4584
|
["div-container"]: DivContainer_default,
|
|
@@ -4557,11 +4597,11 @@ var PageBodyRenderer = (props) => {
|
|
|
4557
4597
|
if (pageBodyTree && pageBodyTree.root) {
|
|
4558
4598
|
rootNode = pageBodyTree.root;
|
|
4559
4599
|
}
|
|
4560
|
-
return /* @__PURE__ */
|
|
4600
|
+
return /* @__PURE__ */ jsx67(React50.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
|
|
4561
4601
|
{
|
|
4562
4602
|
}
|
|
4563
4603
|
const SelectedNode = NodeTypes[node.type];
|
|
4564
|
-
return /* @__PURE__ */
|
|
4604
|
+
return /* @__PURE__ */ jsx67(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx67(React50.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx67(React50.Fragment, { children: /* @__PURE__ */ jsx67(
|
|
4565
4605
|
SelectedNode,
|
|
4566
4606
|
{
|
|
4567
4607
|
node,
|
|
@@ -4572,12 +4612,10 @@ var PageBodyRenderer = (props) => {
|
|
|
4572
4612
|
host: props.host,
|
|
4573
4613
|
path: props.path,
|
|
4574
4614
|
apiBaseUrl: props.apiBaseUrl,
|
|
4575
|
-
widgetRegistry: props.widgetRegistry,
|
|
4576
4615
|
serviceClient: props.serviceClient,
|
|
4577
|
-
|
|
4578
|
-
dataMap: props.dataMap
|
|
4616
|
+
assetBaseUrl: props.assetBaseUrl
|
|
4579
4617
|
}
|
|
4580
|
-
) }) : /* @__PURE__ */
|
|
4618
|
+
) }) : /* @__PURE__ */ jsx67(React50.Fragment, { children: /* @__PURE__ */ jsx67(
|
|
4581
4619
|
SelectedNode,
|
|
4582
4620
|
{
|
|
4583
4621
|
node,
|
|
@@ -4587,10 +4625,8 @@ var PageBodyRenderer = (props) => {
|
|
|
4587
4625
|
host: props.host,
|
|
4588
4626
|
path: props.path,
|
|
4589
4627
|
apiBaseUrl: props.apiBaseUrl,
|
|
4590
|
-
widgetRegistry: props.widgetRegistry,
|
|
4591
4628
|
serviceClient: props.serviceClient,
|
|
4592
|
-
|
|
4593
|
-
dataMap: props.dataMap
|
|
4629
|
+
assetBaseUrl: props.assetBaseUrl
|
|
4594
4630
|
}
|
|
4595
4631
|
) }) }) }, index);
|
|
4596
4632
|
}) });
|