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