@builder.io/sdk-qwik 0.0.26 → 0.0.28
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/README.md +3 -4
- package/package.json +1 -1
- package/types/blocks/BaseText.d.ts +5 -0
- package/types/blocks/avatar/avatar.d.ts +267 -0
- package/types/blocks/avatar/avatar.model.d.ts +19 -0
- package/types/blocks/image/image.d.ts +1 -1
- package/types/blocks/symbol/symbol.d.ts +1 -0
- package/types/blocks/util.d.ts +4 -1
- package/types/blocks/video/video.d.ts +1 -0
- package/types/components/render-block/render-block.d.ts +22 -7
- package/types/components/render-block/render-component-with-context.d.ts +3 -0
- package/types/components/render-blocks.d.ts +1 -1
- package/types/components/render-content/builder-editing.d.ts +2 -0
- package/types/components/render-inlined-styles.d.ts +1 -1
- package/types/constants/device-sizes.d.ts +12 -1
- package/types/context/types.d.ts +1 -0
- package/types/functions/extract-text-styles.d.ts +4 -0
- package/types/functions/fast-clone.d.ts +4 -0
- package/types/functions/get-content/types.d.ts +4 -0
- package/types/functions/get-react-native-block-styles.d.ts +6 -0
- package/types/functions/mark-mutable.d.ts +2 -2
- package/types/functions/register-component.d.ts +1 -1
- package/types/functions/sanitize-react-native-block-styles.d.ts +3 -0
- package/types/functions/track.d.ts +35 -5
- package/types/helpers/css.d.ts +5 -1
- package/types/index.d.ts +4 -1
- package/types/types/builder-content.d.ts +7 -0
- package/lib/index.qwik.cjs +0 -2656
- package/lib/index.qwik.mjs +0 -2656
package/lib/index.qwik.cjs
DELETED
|
@@ -1,2656 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const qwik = require("@builder.io/qwik");
|
|
4
|
-
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
5
|
-
const TARGET = "qwik";
|
|
6
|
-
function isBrowser() {
|
|
7
|
-
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
8
|
-
}
|
|
9
|
-
const registry = {};
|
|
10
|
-
function register(type, info) {
|
|
11
|
-
let typeList = registry[type];
|
|
12
|
-
if (!typeList)
|
|
13
|
-
typeList = registry[type] = [];
|
|
14
|
-
typeList.push(info);
|
|
15
|
-
if (isBrowser()) {
|
|
16
|
-
const message = {
|
|
17
|
-
type: "builder.register",
|
|
18
|
-
data: {
|
|
19
|
-
type,
|
|
20
|
-
info
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
try {
|
|
24
|
-
parent.postMessage(message, "*");
|
|
25
|
-
if (parent !== window)
|
|
26
|
-
window.postMessage(message, "*");
|
|
27
|
-
} catch (err) {
|
|
28
|
-
console.debug("Could not postmessage", err);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
const registerInsertMenu = () => {
|
|
33
|
-
register("insertMenu", {
|
|
34
|
-
name: "_default",
|
|
35
|
-
default: true,
|
|
36
|
-
items: [
|
|
37
|
-
{
|
|
38
|
-
name: "Box"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
name: "Text"
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
name: "Image"
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
name: "Columns"
|
|
48
|
-
},
|
|
49
|
-
...TARGET === "reactNative" ? [] : [
|
|
50
|
-
{
|
|
51
|
-
name: "Core:Section"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
name: "Core:Button"
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
name: "Embed"
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
name: "Custom Code"
|
|
61
|
-
}
|
|
62
|
-
]
|
|
63
|
-
]
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
const setupBrowserForEditing = () => {
|
|
67
|
-
if (isBrowser()) {
|
|
68
|
-
window.parent?.postMessage({
|
|
69
|
-
type: "builder.sdkInfo",
|
|
70
|
-
data: {
|
|
71
|
-
target: TARGET,
|
|
72
|
-
supportsPatchUpdates: false
|
|
73
|
-
}
|
|
74
|
-
}, "*");
|
|
75
|
-
window.addEventListener("message", ({ data }) => {
|
|
76
|
-
if (data)
|
|
77
|
-
switch (data.type) {
|
|
78
|
-
case "builder.evaluate": {
|
|
79
|
-
const text = data.data.text;
|
|
80
|
-
const args = data.data.arguments || [];
|
|
81
|
-
const id = data.data.id;
|
|
82
|
-
const fn = new Function(text);
|
|
83
|
-
let result;
|
|
84
|
-
let error = null;
|
|
85
|
-
try {
|
|
86
|
-
result = fn.apply(null, args);
|
|
87
|
-
} catch (err) {
|
|
88
|
-
error = err;
|
|
89
|
-
}
|
|
90
|
-
if (error)
|
|
91
|
-
window.parent?.postMessage({
|
|
92
|
-
type: "builder.evaluateError",
|
|
93
|
-
data: {
|
|
94
|
-
id,
|
|
95
|
-
error: error.message
|
|
96
|
-
}
|
|
97
|
-
}, "*");
|
|
98
|
-
else if (result && typeof result.then === "function")
|
|
99
|
-
result.then((finalResult) => {
|
|
100
|
-
window.parent?.postMessage({
|
|
101
|
-
type: "builder.evaluateResult",
|
|
102
|
-
data: {
|
|
103
|
-
id,
|
|
104
|
-
result: finalResult
|
|
105
|
-
}
|
|
106
|
-
}, "*");
|
|
107
|
-
}).catch(console.error);
|
|
108
|
-
else
|
|
109
|
-
window.parent?.postMessage({
|
|
110
|
-
type: "builder.evaluateResult",
|
|
111
|
-
data: {
|
|
112
|
-
result,
|
|
113
|
-
id
|
|
114
|
-
}
|
|
115
|
-
}, "*");
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
const BuilderContext = qwik.createContext("Builder");
|
|
123
|
-
function isIframe() {
|
|
124
|
-
return isBrowser() && window.self !== window.top;
|
|
125
|
-
}
|
|
126
|
-
function isEditing() {
|
|
127
|
-
return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
|
|
128
|
-
}
|
|
129
|
-
const SIZES = {
|
|
130
|
-
small: {
|
|
131
|
-
min: 320,
|
|
132
|
-
default: 321,
|
|
133
|
-
max: 640
|
|
134
|
-
},
|
|
135
|
-
medium: {
|
|
136
|
-
min: 641,
|
|
137
|
-
default: 642,
|
|
138
|
-
max: 991
|
|
139
|
-
},
|
|
140
|
-
large: {
|
|
141
|
-
min: 990,
|
|
142
|
-
default: 991,
|
|
143
|
-
max: 1200
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
|
|
147
|
-
function evaluate({ code, context, state, event }) {
|
|
148
|
-
if (code === "") {
|
|
149
|
-
console.warn("Skipping evaluation of empty code block.");
|
|
150
|
-
return;
|
|
151
|
-
}
|
|
152
|
-
const builder = {
|
|
153
|
-
isEditing: isEditing(),
|
|
154
|
-
isBrowser: isBrowser(),
|
|
155
|
-
isServer: !isBrowser()
|
|
156
|
-
};
|
|
157
|
-
const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
|
|
158
|
-
const useCode = useReturn ? `return (${code});` : code;
|
|
159
|
-
try {
|
|
160
|
-
return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
|
|
161
|
-
} catch (e) {
|
|
162
|
-
console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
const set = (obj, _path, value) => {
|
|
166
|
-
if (Object(obj) !== obj)
|
|
167
|
-
return obj;
|
|
168
|
-
const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
|
|
169
|
-
path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
|
|
170
|
-
return obj;
|
|
171
|
-
};
|
|
172
|
-
function transformBlock(block) {
|
|
173
|
-
return block;
|
|
174
|
-
}
|
|
175
|
-
const evaluateBindings = ({ block, context, state }) => {
|
|
176
|
-
if (!block.bindings)
|
|
177
|
-
return block;
|
|
178
|
-
const copied = {
|
|
179
|
-
...block,
|
|
180
|
-
properties: {
|
|
181
|
-
...block.properties
|
|
182
|
-
},
|
|
183
|
-
actions: {
|
|
184
|
-
...block.actions
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
for (const binding in block.bindings) {
|
|
188
|
-
const expression = block.bindings[binding];
|
|
189
|
-
const value = evaluate({
|
|
190
|
-
code: expression,
|
|
191
|
-
state,
|
|
192
|
-
context
|
|
193
|
-
});
|
|
194
|
-
set(copied, binding, value);
|
|
195
|
-
}
|
|
196
|
-
return copied;
|
|
197
|
-
};
|
|
198
|
-
function getProcessedBlock({ block, context, shouldEvaluateBindings, state }) {
|
|
199
|
-
const transformedBlock = transformBlock(block);
|
|
200
|
-
if (shouldEvaluateBindings)
|
|
201
|
-
return evaluateBindings({
|
|
202
|
-
block: transformedBlock,
|
|
203
|
-
state,
|
|
204
|
-
context
|
|
205
|
-
});
|
|
206
|
-
else
|
|
207
|
-
return transformedBlock;
|
|
208
|
-
}
|
|
209
|
-
const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
|
|
210
|
-
const convertStyleMaptoCSS = (style) => {
|
|
211
|
-
const cssProps = Object.entries(style).map(([key, value]) => {
|
|
212
|
-
if (typeof value === "string")
|
|
213
|
-
return `${camelToKebabCase(key)}: ${value};`;
|
|
214
|
-
});
|
|
215
|
-
return cssProps.join("\n");
|
|
216
|
-
};
|
|
217
|
-
const tagName$1 = function tagName(props, state) {
|
|
218
|
-
return "style";
|
|
219
|
-
};
|
|
220
|
-
const RenderInlinedStyles = (props) => {
|
|
221
|
-
const state = {
|
|
222
|
-
tagName: ""
|
|
223
|
-
};
|
|
224
|
-
state.tagName = tagName$1();
|
|
225
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
226
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
|
|
227
|
-
children: props.styles
|
|
228
|
-
})
|
|
229
|
-
});
|
|
230
|
-
};
|
|
231
|
-
const RenderInlinedStyles$1 = RenderInlinedStyles;
|
|
232
|
-
const useBlock$1 = function useBlock(props, state) {
|
|
233
|
-
return getProcessedBlock({
|
|
234
|
-
block: props.block,
|
|
235
|
-
state: props.context.state,
|
|
236
|
-
context: props.context.context,
|
|
237
|
-
shouldEvaluateBindings: true
|
|
238
|
-
});
|
|
239
|
-
};
|
|
240
|
-
const css = function css2(props, state) {
|
|
241
|
-
const styles = useBlock$1(props).responsiveStyles;
|
|
242
|
-
const largeStyles = styles?.large;
|
|
243
|
-
const mediumStyles = styles?.medium;
|
|
244
|
-
const smallStyles = styles?.small;
|
|
245
|
-
return `
|
|
246
|
-
${largeStyles ? `.${useBlock$1(props).id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
|
|
247
|
-
${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
|
|
248
|
-
.${useBlock$1(props).id} {${convertStyleMaptoCSS(mediumStyles)}}
|
|
249
|
-
}` : ""}
|
|
250
|
-
${smallStyles ? `${getMaxWidthQueryForSize("small")} {
|
|
251
|
-
.${useBlock$1(props).id} {${convertStyleMaptoCSS(smallStyles)}}
|
|
252
|
-
}` : ""}
|
|
253
|
-
}`;
|
|
254
|
-
};
|
|
255
|
-
const BlockStyles = (props) => {
|
|
256
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
257
|
-
children: TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" || TARGET === "qwik" ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
|
|
258
|
-
styles: css(props)
|
|
259
|
-
}) : null
|
|
260
|
-
});
|
|
261
|
-
};
|
|
262
|
-
const BlockStyles$1 = BlockStyles;
|
|
263
|
-
function capitalizeFirstLetter(string) {
|
|
264
|
-
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
265
|
-
}
|
|
266
|
-
const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}$`;
|
|
267
|
-
function crateEventHandler(value, options) {
|
|
268
|
-
return qwik.inlinedQrl((event) => {
|
|
269
|
-
const [options2, value2] = qwik.useLexicalScope();
|
|
270
|
-
return evaluate({
|
|
271
|
-
code: value2,
|
|
272
|
-
context: options2.context,
|
|
273
|
-
state: options2.state,
|
|
274
|
-
event
|
|
275
|
-
});
|
|
276
|
-
}, "crateEventHandler_wgxT8Hlq4s8", [
|
|
277
|
-
options,
|
|
278
|
-
value
|
|
279
|
-
]);
|
|
280
|
-
}
|
|
281
|
-
function getBlockActions(options) {
|
|
282
|
-
const obj = {};
|
|
283
|
-
const optionActions = options.block.actions ?? {};
|
|
284
|
-
for (const key in optionActions) {
|
|
285
|
-
if (!optionActions.hasOwnProperty(key))
|
|
286
|
-
continue;
|
|
287
|
-
const value = optionActions[key];
|
|
288
|
-
obj[getEventHandlerName(key)] = crateEventHandler(value, options);
|
|
289
|
-
}
|
|
290
|
-
return obj;
|
|
291
|
-
}
|
|
292
|
-
function getBlockComponentOptions(block) {
|
|
293
|
-
return {
|
|
294
|
-
...block.component?.options,
|
|
295
|
-
...block.options,
|
|
296
|
-
builderBlock: block
|
|
297
|
-
};
|
|
298
|
-
}
|
|
299
|
-
function getBlockProperties(block) {
|
|
300
|
-
return {
|
|
301
|
-
...block.properties,
|
|
302
|
-
"builder-id": block.id,
|
|
303
|
-
class: [
|
|
304
|
-
block.id,
|
|
305
|
-
"builder-block",
|
|
306
|
-
block.class,
|
|
307
|
-
block.properties?.class
|
|
308
|
-
].filter(Boolean).join(" ")
|
|
309
|
-
};
|
|
310
|
-
}
|
|
311
|
-
const convertStyleObject = (obj) => {
|
|
312
|
-
return obj;
|
|
313
|
-
};
|
|
314
|
-
const sanitizeBlockStyles = (styles) => styles;
|
|
315
|
-
const getStyleForTarget = (styles) => {
|
|
316
|
-
switch (TARGET) {
|
|
317
|
-
case "reactNative":
|
|
318
|
-
return {
|
|
319
|
-
...styles.large ? convertStyleObject(styles.large) : {},
|
|
320
|
-
...styles.medium ? convertStyleObject(styles.medium) : {},
|
|
321
|
-
...styles.small ? convertStyleObject(styles.small) : {}
|
|
322
|
-
};
|
|
323
|
-
default:
|
|
324
|
-
return {
|
|
325
|
-
...styles.large ? convertStyleObject(styles.large) : {},
|
|
326
|
-
...styles.medium ? {
|
|
327
|
-
[getMaxWidthQueryForSize("medium")]: convertStyleObject(styles.medium)
|
|
328
|
-
} : {},
|
|
329
|
-
...styles.small ? {
|
|
330
|
-
[getMaxWidthQueryForSize("small")]: convertStyleObject(styles.small)
|
|
331
|
-
} : {}
|
|
332
|
-
};
|
|
333
|
-
}
|
|
334
|
-
};
|
|
335
|
-
function getBlockStyles(block) {
|
|
336
|
-
if (!block.responsiveStyles)
|
|
337
|
-
return {};
|
|
338
|
-
const styles = getStyleForTarget(block.responsiveStyles);
|
|
339
|
-
const newStyles = sanitizeBlockStyles(styles);
|
|
340
|
-
return newStyles;
|
|
341
|
-
}
|
|
342
|
-
function getBlockTag(block) {
|
|
343
|
-
return block.tagName || "div";
|
|
344
|
-
}
|
|
345
|
-
const EMPTY_HTML_ELEMENTS = [
|
|
346
|
-
"area",
|
|
347
|
-
"base",
|
|
348
|
-
"br",
|
|
349
|
-
"col",
|
|
350
|
-
"embed",
|
|
351
|
-
"hr",
|
|
352
|
-
"img",
|
|
353
|
-
"input",
|
|
354
|
-
"keygen",
|
|
355
|
-
"link",
|
|
356
|
-
"meta",
|
|
357
|
-
"param",
|
|
358
|
-
"source",
|
|
359
|
-
"track",
|
|
360
|
-
"wbr"
|
|
361
|
-
];
|
|
362
|
-
const isEmptyHtmlElement = (tagName4) => {
|
|
363
|
-
return typeof tagName4 === "string" && EMPTY_HTML_ELEMENTS.includes(tagName4.toLowerCase());
|
|
364
|
-
};
|
|
365
|
-
function markMutable(value) {
|
|
366
|
-
return qwik.mutable(value);
|
|
367
|
-
}
|
|
368
|
-
function markPropsMutable(props) {
|
|
369
|
-
Object.keys(props).forEach((key) => {
|
|
370
|
-
props[key] = qwik.mutable(props[key]);
|
|
371
|
-
});
|
|
372
|
-
return props;
|
|
373
|
-
}
|
|
374
|
-
const RenderComponent = (props) => {
|
|
375
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
376
|
-
children: props.componentRef ? /* @__PURE__ */ jsxRuntime.jsxs(props.componentRef, {
|
|
377
|
-
...markPropsMutable(props.componentOptions),
|
|
378
|
-
children: [
|
|
379
|
-
(props.blockChildren || []).map(function(child) {
|
|
380
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
|
|
381
|
-
block: child,
|
|
382
|
-
context: props.context
|
|
383
|
-
}, "render-block-" + child.id);
|
|
384
|
-
}),
|
|
385
|
-
(props.blockChildren || []).map(function(child) {
|
|
386
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
|
|
387
|
-
block: child,
|
|
388
|
-
context: props.context
|
|
389
|
-
}, "block-style-" + child.id);
|
|
390
|
-
})
|
|
391
|
-
]
|
|
392
|
-
}) : null
|
|
393
|
-
});
|
|
394
|
-
};
|
|
395
|
-
const RenderComponent$1 = RenderComponent;
|
|
396
|
-
const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
397
|
-
qwik.useContextProvider(BuilderContext, qwik.useStore({
|
|
398
|
-
content: (() => {
|
|
399
|
-
return props.repeatContext.content;
|
|
400
|
-
})(),
|
|
401
|
-
state: (() => {
|
|
402
|
-
return props.repeatContext.state;
|
|
403
|
-
})(),
|
|
404
|
-
context: (() => {
|
|
405
|
-
return props.repeatContext.context;
|
|
406
|
-
})(),
|
|
407
|
-
apiKey: (() => {
|
|
408
|
-
return props.repeatContext.apiKey;
|
|
409
|
-
})(),
|
|
410
|
-
registeredComponents: (() => {
|
|
411
|
-
return props.repeatContext.registeredComponents;
|
|
412
|
-
})()
|
|
413
|
-
}));
|
|
414
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
|
|
415
|
-
block: props.block,
|
|
416
|
-
context: props.repeatContext
|
|
417
|
-
});
|
|
418
|
-
}, "RenderRepeatedBlock_component_nRyVBtbGKc8"));
|
|
419
|
-
const RenderRepeatedBlock$1 = RenderRepeatedBlock;
|
|
420
|
-
const component = function component2(props, state) {
|
|
421
|
-
const componentName = getProcessedBlock({
|
|
422
|
-
block: props.block,
|
|
423
|
-
state: props.context.state,
|
|
424
|
-
context: props.context.context,
|
|
425
|
-
shouldEvaluateBindings: false
|
|
426
|
-
}).component?.name;
|
|
427
|
-
if (!componentName)
|
|
428
|
-
return null;
|
|
429
|
-
const ref = props.context.registeredComponents[componentName];
|
|
430
|
-
if (!ref) {
|
|
431
|
-
console.warn(`
|
|
432
|
-
Could not find a registered component named "${componentName}".
|
|
433
|
-
If you registered it, is the file that registered it imported by the file that needs to render it?`);
|
|
434
|
-
return void 0;
|
|
435
|
-
} else
|
|
436
|
-
return ref;
|
|
437
|
-
};
|
|
438
|
-
const componentInfo$b = function componentInfo(props, state) {
|
|
439
|
-
if (component(props)) {
|
|
440
|
-
const { component: _, ...info } = component(props);
|
|
441
|
-
return info;
|
|
442
|
-
} else
|
|
443
|
-
return void 0;
|
|
444
|
-
};
|
|
445
|
-
const componentRef = function componentRef2(props, state) {
|
|
446
|
-
return component(props)?.component;
|
|
447
|
-
};
|
|
448
|
-
const tagName2 = function tagName3(props, state) {
|
|
449
|
-
return getBlockTag(useBlock2(props));
|
|
450
|
-
};
|
|
451
|
-
const useBlock2 = function useBlock3(props, state) {
|
|
452
|
-
return repeatItemData(props) ? props.block : getProcessedBlock({
|
|
453
|
-
block: props.block,
|
|
454
|
-
state: props.context.state,
|
|
455
|
-
context: props.context.context,
|
|
456
|
-
shouldEvaluateBindings: true
|
|
457
|
-
});
|
|
458
|
-
};
|
|
459
|
-
const attributes = function attributes2(props, state) {
|
|
460
|
-
return {
|
|
461
|
-
...getBlockProperties(useBlock2(props)),
|
|
462
|
-
...getBlockActions({
|
|
463
|
-
block: useBlock2(props),
|
|
464
|
-
state: props.context.state,
|
|
465
|
-
context: props.context.context
|
|
466
|
-
}),
|
|
467
|
-
style: getBlockStyles(useBlock2(props))
|
|
468
|
-
};
|
|
469
|
-
};
|
|
470
|
-
const shouldWrap = function shouldWrap2(props, state) {
|
|
471
|
-
return !componentInfo$b(props)?.noWrap;
|
|
472
|
-
};
|
|
473
|
-
const componentOptions = function componentOptions2(props, state) {
|
|
474
|
-
return {
|
|
475
|
-
...getBlockComponentOptions(useBlock2(props)),
|
|
476
|
-
...shouldWrap(props) ? {} : {
|
|
477
|
-
attributes: attributes(props)
|
|
478
|
-
}
|
|
479
|
-
};
|
|
480
|
-
};
|
|
481
|
-
const renderComponentProps = function renderComponentProps2(props, state) {
|
|
482
|
-
return {
|
|
483
|
-
blockChildren: children(props),
|
|
484
|
-
componentRef: componentRef(props),
|
|
485
|
-
componentOptions: componentOptions(props),
|
|
486
|
-
context: props.context
|
|
487
|
-
};
|
|
488
|
-
};
|
|
489
|
-
const children = function children2(props, state) {
|
|
490
|
-
return useBlock2(props).children ?? [];
|
|
491
|
-
};
|
|
492
|
-
const childrenWithoutParentComponent = function childrenWithoutParentComponent2(props, state) {
|
|
493
|
-
const shouldRenderChildrenOutsideRef = !componentRef(props) && !repeatItemData(props);
|
|
494
|
-
return shouldRenderChildrenOutsideRef ? children(props) : [];
|
|
495
|
-
};
|
|
496
|
-
const repeatItemData = function repeatItemData2(props, state) {
|
|
497
|
-
const { repeat, ...blockWithoutRepeat } = props.block;
|
|
498
|
-
if (!repeat?.collection)
|
|
499
|
-
return void 0;
|
|
500
|
-
const itemsArray = evaluate({
|
|
501
|
-
code: repeat.collection,
|
|
502
|
-
state: props.context.state,
|
|
503
|
-
context: props.context.context
|
|
504
|
-
});
|
|
505
|
-
if (!Array.isArray(itemsArray))
|
|
506
|
-
return void 0;
|
|
507
|
-
const collectionName = repeat.collection.split(".").pop();
|
|
508
|
-
const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
|
|
509
|
-
const repeatArray = itemsArray.map((item, index) => ({
|
|
510
|
-
context: {
|
|
511
|
-
...props.context,
|
|
512
|
-
state: {
|
|
513
|
-
...props.context.state,
|
|
514
|
-
$index: index,
|
|
515
|
-
$item: item,
|
|
516
|
-
[itemNameToUse]: item,
|
|
517
|
-
[`$${itemNameToUse}Index`]: index
|
|
518
|
-
}
|
|
519
|
-
},
|
|
520
|
-
block: blockWithoutRepeat
|
|
521
|
-
}));
|
|
522
|
-
return repeatArray;
|
|
523
|
-
};
|
|
524
|
-
const RenderBlock = (props) => {
|
|
525
|
-
const state = {
|
|
526
|
-
tagName: ""
|
|
527
|
-
};
|
|
528
|
-
state.tagName = tagName2(props);
|
|
529
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
530
|
-
children: shouldWrap(props) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
531
|
-
children: [
|
|
532
|
-
isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
|
|
533
|
-
...attributes(props)
|
|
534
|
-
}) : null,
|
|
535
|
-
!isEmptyHtmlElement(tagName2(props)) && TARGET === "vue2" && repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
536
|
-
class: "vue2-root-element-workaround",
|
|
537
|
-
children: (repeatItemData(props) || []).map(function(data, index) {
|
|
538
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
|
|
539
|
-
repeatContext: data.context,
|
|
540
|
-
block: data.block
|
|
541
|
-
}, index);
|
|
542
|
-
})
|
|
543
|
-
}) : null,
|
|
544
|
-
!isEmptyHtmlElement(tagName2(props)) && TARGET !== "vue2" && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
|
|
545
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
|
|
546
|
-
repeatContext: data.context,
|
|
547
|
-
block: data.block
|
|
548
|
-
}, index);
|
|
549
|
-
}) : null,
|
|
550
|
-
!isEmptyHtmlElement(tagName2(props)) && !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
|
|
551
|
-
...attributes(props),
|
|
552
|
-
children: [
|
|
553
|
-
/* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
|
|
554
|
-
...renderComponentProps(props)
|
|
555
|
-
}),
|
|
556
|
-
(childrenWithoutParentComponent(props) || []).map(function(child) {
|
|
557
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock, {
|
|
558
|
-
block: child,
|
|
559
|
-
context: props.context
|
|
560
|
-
}, "render-block-" + child.id);
|
|
561
|
-
}),
|
|
562
|
-
(childrenWithoutParentComponent(props) || []).map(function(child) {
|
|
563
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
|
|
564
|
-
block: child,
|
|
565
|
-
context: props.context
|
|
566
|
-
}, "block-style-" + child.id);
|
|
567
|
-
})
|
|
568
|
-
]
|
|
569
|
-
}) : null
|
|
570
|
-
]
|
|
571
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
|
|
572
|
-
...renderComponentProps(props),
|
|
573
|
-
context: props.context
|
|
574
|
-
})
|
|
575
|
-
});
|
|
576
|
-
};
|
|
577
|
-
const RenderBlock$1 = RenderBlock;
|
|
578
|
-
const className = function className2(props, state, builderContext) {
|
|
579
|
-
return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
|
|
580
|
-
};
|
|
581
|
-
const onClick$1 = function onClick(props, state, builderContext) {
|
|
582
|
-
if (isEditing() && !props.blocks?.length)
|
|
583
|
-
window.parent?.postMessage({
|
|
584
|
-
type: "builder.clickEmptyBlocks",
|
|
585
|
-
data: {
|
|
586
|
-
parentElementId: props.parent,
|
|
587
|
-
dataPath: props.path
|
|
588
|
-
}
|
|
589
|
-
}, "*");
|
|
590
|
-
};
|
|
591
|
-
const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
|
|
592
|
-
if (isEditing() && !props.blocks?.length)
|
|
593
|
-
window.parent?.postMessage({
|
|
594
|
-
type: "builder.hoverEmptyBlocks",
|
|
595
|
-
data: {
|
|
596
|
-
parentElementId: props.parent,
|
|
597
|
-
dataPath: props.path
|
|
598
|
-
}
|
|
599
|
-
}, "*");
|
|
600
|
-
};
|
|
601
|
-
const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
602
|
-
qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
|
|
603
|
-
const builderContext = qwik.useContext(BuilderContext);
|
|
604
|
-
const state = {
|
|
605
|
-
tagName: ""
|
|
606
|
-
};
|
|
607
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
608
|
-
class: className(props) + " div-RenderBlocks",
|
|
609
|
-
"builder-path": props.path,
|
|
610
|
-
"builder-parent-id": props.parent,
|
|
611
|
-
style: props.style,
|
|
612
|
-
onClick$: qwik.inlinedQrl((event) => {
|
|
613
|
-
const [builderContext2, props2, state2] = qwik.useLexicalScope();
|
|
614
|
-
return onClick$1(props2);
|
|
615
|
-
}, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
|
|
616
|
-
builderContext,
|
|
617
|
-
props,
|
|
618
|
-
state
|
|
619
|
-
]),
|
|
620
|
-
onMouseEnter$: qwik.inlinedQrl((event) => {
|
|
621
|
-
const [builderContext2, props2, state2] = qwik.useLexicalScope();
|
|
622
|
-
return onMouseEnter(props2);
|
|
623
|
-
}, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
|
|
624
|
-
builderContext,
|
|
625
|
-
props,
|
|
626
|
-
state
|
|
627
|
-
]),
|
|
628
|
-
children: [
|
|
629
|
-
props.blocks ? (props.blocks || []).map(function(block) {
|
|
630
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
|
|
631
|
-
block,
|
|
632
|
-
context: builderContext
|
|
633
|
-
}, "render-block-" + block.id);
|
|
634
|
-
}) : null,
|
|
635
|
-
props.blocks ? (props.blocks || []).map(function(block) {
|
|
636
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
|
|
637
|
-
block,
|
|
638
|
-
context: builderContext
|
|
639
|
-
}, "block-style-" + block.id);
|
|
640
|
-
}) : null
|
|
641
|
-
]
|
|
642
|
-
});
|
|
643
|
-
}, "RenderBlocks_component_MYUZ0j1uLsw"));
|
|
644
|
-
const RenderBlocks$1 = RenderBlocks;
|
|
645
|
-
const STYLES$3 = `.div-RenderBlocks {
|
|
646
|
-
display: flex;
|
|
647
|
-
flex-direction: column;
|
|
648
|
-
align-items: stretch; }`;
|
|
649
|
-
const getGutterSize = function getGutterSize2(props, state) {
|
|
650
|
-
return typeof props.space === "number" ? props.space || 0 : 20;
|
|
651
|
-
};
|
|
652
|
-
const getColumns = function getColumns2(props, state) {
|
|
653
|
-
return props.columns || [];
|
|
654
|
-
};
|
|
655
|
-
const getWidth = function getWidth2(props, state, index) {
|
|
656
|
-
const columns = getColumns(props);
|
|
657
|
-
return columns[index]?.width || 100 / columns.length;
|
|
658
|
-
};
|
|
659
|
-
const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
|
|
660
|
-
const columns = getColumns(props);
|
|
661
|
-
const gutterSize = getGutterSize(props);
|
|
662
|
-
const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
|
|
663
|
-
return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
|
|
664
|
-
};
|
|
665
|
-
const maybeApplyForTablet = function maybeApplyForTablet2(props, state, prop) {
|
|
666
|
-
const _stackColumnsAt = props.stackColumnsAt || "tablet";
|
|
667
|
-
return _stackColumnsAt === "tablet" ? prop : "inherit";
|
|
668
|
-
};
|
|
669
|
-
const columnsCssVars = function columnsCssVars2(props, state) {
|
|
670
|
-
const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
|
|
671
|
-
return {
|
|
672
|
-
"--flex-dir": flexDir,
|
|
673
|
-
"--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir)
|
|
674
|
-
};
|
|
675
|
-
};
|
|
676
|
-
const columnCssVars = function columnCssVars2(props, state) {
|
|
677
|
-
const width = "100%";
|
|
678
|
-
const marginLeft = "0";
|
|
679
|
-
return {
|
|
680
|
-
"--column-width": width,
|
|
681
|
-
"--column-margin-left": marginLeft,
|
|
682
|
-
"--column-width-tablet": maybeApplyForTablet(props, state, width),
|
|
683
|
-
"--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
|
|
684
|
-
};
|
|
685
|
-
};
|
|
686
|
-
const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
687
|
-
qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
|
|
688
|
-
const state = {
|
|
689
|
-
tagName: ""
|
|
690
|
-
};
|
|
691
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
692
|
-
class: "builder-columns div-Columns",
|
|
693
|
-
style: columnsCssVars(props, state),
|
|
694
|
-
children: (props.columns || []).map(function(column, index) {
|
|
695
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
696
|
-
class: "builder-column div-Columns-2",
|
|
697
|
-
style: {
|
|
698
|
-
width: getColumnCssWidth(props, state, index),
|
|
699
|
-
marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
|
|
700
|
-
...columnCssVars(props, state)
|
|
701
|
-
},
|
|
702
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks$1, {
|
|
703
|
-
blocks: markMutable(column.blocks),
|
|
704
|
-
path: `component.options.columns.${index}.blocks`,
|
|
705
|
-
parent: props.builderBlock.id,
|
|
706
|
-
style: {
|
|
707
|
-
flexGrow: "1"
|
|
708
|
-
}
|
|
709
|
-
})
|
|
710
|
-
}, index);
|
|
711
|
-
})
|
|
712
|
-
});
|
|
713
|
-
}, "Columns_component_7yLj4bxdI6c"));
|
|
714
|
-
const Columns$1 = Columns;
|
|
715
|
-
const STYLES$2 = `.div-Columns {
|
|
716
|
-
display: flex;
|
|
717
|
-
align-items: stretch;
|
|
718
|
-
line-height: normal; }@media (max-width: 991px) { .div-Columns {
|
|
719
|
-
flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns {
|
|
720
|
-
flex-direction: var(--flex-dir); } }.div-Columns-2 {
|
|
721
|
-
display: flex;
|
|
722
|
-
flex-direction: column;
|
|
723
|
-
align-items: stretch; }@media (max-width: 991px) { .div-Columns-2 {
|
|
724
|
-
width: var(--column-width-tablet) !important;
|
|
725
|
-
margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 {
|
|
726
|
-
width: var(--column-width) !important;
|
|
727
|
-
margin-left: var(--column-margin-left) !important; } }`;
|
|
728
|
-
function removeProtocol(path) {
|
|
729
|
-
return path.replace(/http(s)?:/, "");
|
|
730
|
-
}
|
|
731
|
-
function updateQueryParam(uri = "", key, value) {
|
|
732
|
-
const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
|
|
733
|
-
const separator = uri.indexOf("?") !== -1 ? "&" : "?";
|
|
734
|
-
if (uri.match(re))
|
|
735
|
-
return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
|
|
736
|
-
return uri + separator + key + "=" + encodeURIComponent(value);
|
|
737
|
-
}
|
|
738
|
-
function getShopifyImageUrl(src, size) {
|
|
739
|
-
if (!src || !src?.match(/cdn\.shopify\.com/) || !size)
|
|
740
|
-
return src;
|
|
741
|
-
if (size === "master")
|
|
742
|
-
return removeProtocol(src);
|
|
743
|
-
const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
|
|
744
|
-
if (match) {
|
|
745
|
-
const prefix = src.split(match[0]);
|
|
746
|
-
const suffix = match[3];
|
|
747
|
-
const useSize = size.match("x") ? size : `${size}x`;
|
|
748
|
-
return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
|
|
749
|
-
}
|
|
750
|
-
return null;
|
|
751
|
-
}
|
|
752
|
-
function getSrcSet(url) {
|
|
753
|
-
if (!url)
|
|
754
|
-
return url;
|
|
755
|
-
const sizes = [
|
|
756
|
-
100,
|
|
757
|
-
200,
|
|
758
|
-
400,
|
|
759
|
-
800,
|
|
760
|
-
1200,
|
|
761
|
-
1600,
|
|
762
|
-
2e3
|
|
763
|
-
];
|
|
764
|
-
if (url.match(/builder\.io/)) {
|
|
765
|
-
let srcUrl = url;
|
|
766
|
-
const widthInSrc = Number(url.split("?width=")[1]);
|
|
767
|
-
if (!isNaN(widthInSrc))
|
|
768
|
-
srcUrl = `${srcUrl} ${widthInSrc}w`;
|
|
769
|
-
return sizes.filter((size) => size !== widthInSrc).map((size) => `${updateQueryParam(url, "width", size)} ${size}w`).concat([
|
|
770
|
-
srcUrl
|
|
771
|
-
]).join(", ");
|
|
772
|
-
}
|
|
773
|
-
if (url.match(/cdn\.shopify\.com/))
|
|
774
|
-
return sizes.map((size) => [
|
|
775
|
-
getShopifyImageUrl(url, `${size}x${size}`),
|
|
776
|
-
size
|
|
777
|
-
]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([
|
|
778
|
-
url
|
|
779
|
-
]).join(", ");
|
|
780
|
-
return url;
|
|
781
|
-
}
|
|
782
|
-
const srcSetToUse = function srcSetToUse2(props, state) {
|
|
783
|
-
const imageToUse = props.image || props.src;
|
|
784
|
-
const url = imageToUse;
|
|
785
|
-
if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
|
|
786
|
-
return props.srcset;
|
|
787
|
-
if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
|
|
788
|
-
if (!props.srcset.includes(props.image.split("?")[0])) {
|
|
789
|
-
console.debug("Removed given srcset");
|
|
790
|
-
return getSrcSet(url);
|
|
791
|
-
}
|
|
792
|
-
} else if (props.image && !props.srcset)
|
|
793
|
-
return getSrcSet(url);
|
|
794
|
-
return getSrcSet(url);
|
|
795
|
-
};
|
|
796
|
-
const webpSrcSet = function webpSrcSet2(props, state) {
|
|
797
|
-
if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp)
|
|
798
|
-
return srcSetToUse(props).replace(/\?/g, "?format=webp&");
|
|
799
|
-
else
|
|
800
|
-
return "";
|
|
801
|
-
};
|
|
802
|
-
const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
803
|
-
qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
|
|
804
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
805
|
-
class: "div-Image",
|
|
806
|
-
children: [
|
|
807
|
-
/* @__PURE__ */ jsxRuntime.jsxs("picture", {
|
|
808
|
-
children: [
|
|
809
|
-
webpSrcSet(props) ? /* @__PURE__ */ jsxRuntime.jsx("source", {
|
|
810
|
-
type: "image/webp",
|
|
811
|
-
srcSet: webpSrcSet(props)
|
|
812
|
-
}) : null,
|
|
813
|
-
/* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
814
|
-
loading: "lazy",
|
|
815
|
-
alt: props.altText,
|
|
816
|
-
role: props.altText ? "presentation" : void 0,
|
|
817
|
-
style: {
|
|
818
|
-
objectPosition: props.backgroundSize || "center",
|
|
819
|
-
objectFit: props.backgroundSize || "cover"
|
|
820
|
-
},
|
|
821
|
-
class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
|
|
822
|
-
src: props.image,
|
|
823
|
-
srcSet: srcSetToUse(props),
|
|
824
|
-
sizes: props.sizes
|
|
825
|
-
}),
|
|
826
|
-
/* @__PURE__ */ jsxRuntime.jsx("source", {
|
|
827
|
-
srcSet: srcSetToUse(props)
|
|
828
|
-
})
|
|
829
|
-
]
|
|
830
|
-
}),
|
|
831
|
-
props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
832
|
-
class: "builder-image-sizer div-Image-2",
|
|
833
|
-
style: {
|
|
834
|
-
paddingTop: props.aspectRatio * 100 + "%"
|
|
835
|
-
}
|
|
836
|
-
}) : null,
|
|
837
|
-
props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) : null,
|
|
838
|
-
!props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
839
|
-
class: "div-Image-3",
|
|
840
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
|
|
841
|
-
}) : null
|
|
842
|
-
]
|
|
843
|
-
});
|
|
844
|
-
}, "Image_component_LRxDkFa1EfU"));
|
|
845
|
-
const Image$1 = Image;
|
|
846
|
-
const STYLES$1 = `.div-Image {
|
|
847
|
-
position: relative; }.img-Image {
|
|
848
|
-
opacity: 1;
|
|
849
|
-
transition: opacity 0.2s ease-in-out;
|
|
850
|
-
position: absolute;
|
|
851
|
-
height: 100%;
|
|
852
|
-
width: 100%;
|
|
853
|
-
top: 0px;
|
|
854
|
-
left: 0px; }.div-Image-2 {
|
|
855
|
-
width: 100%;
|
|
856
|
-
pointer-events: none;
|
|
857
|
-
font-size: 0; }.div-Image-3 {
|
|
858
|
-
display: flex;
|
|
859
|
-
flex-direction: column;
|
|
860
|
-
align-items: stretch;
|
|
861
|
-
position: absolute;
|
|
862
|
-
top: 0;
|
|
863
|
-
left: 0;
|
|
864
|
-
width: 100%;
|
|
865
|
-
height: 100%; }`;
|
|
866
|
-
const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
867
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
868
|
-
class: "builder-text",
|
|
869
|
-
dangerouslySetInnerHTML: props.text
|
|
870
|
-
});
|
|
871
|
-
}, "Text_component_15p0cKUxgIE"));
|
|
872
|
-
const Text$1 = Text;
|
|
873
|
-
const videoProps = function videoProps2(props, state) {
|
|
874
|
-
return {
|
|
875
|
-
...props.autoPlay === true ? {
|
|
876
|
-
autoPlay: true
|
|
877
|
-
} : {},
|
|
878
|
-
...props.muted === true ? {
|
|
879
|
-
muted: true
|
|
880
|
-
} : {},
|
|
881
|
-
...props.controls === true ? {
|
|
882
|
-
controls: true
|
|
883
|
-
} : {},
|
|
884
|
-
...props.loop === true ? {
|
|
885
|
-
loop: true
|
|
886
|
-
} : {},
|
|
887
|
-
...props.playsInline === true ? {
|
|
888
|
-
playsInline: true
|
|
889
|
-
} : {}
|
|
890
|
-
};
|
|
891
|
-
};
|
|
892
|
-
const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
893
|
-
return /* @__PURE__ */ jsxRuntime.jsx("video", {
|
|
894
|
-
...videoProps(props),
|
|
895
|
-
style: {
|
|
896
|
-
width: "100%",
|
|
897
|
-
height: "100%",
|
|
898
|
-
...props.attributes?.style,
|
|
899
|
-
objectFit: props.fit,
|
|
900
|
-
objectPosition: props.position,
|
|
901
|
-
borderRadius: 1
|
|
902
|
-
},
|
|
903
|
-
src: props.video || "no-src",
|
|
904
|
-
poster: props.posterImage
|
|
905
|
-
});
|
|
906
|
-
}, "Video_component_qdcTZflYyoQ"));
|
|
907
|
-
const Video$1 = Video;
|
|
908
|
-
const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
909
|
-
qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
|
|
910
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
911
|
-
children: props.link ? /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
912
|
-
role: "button",
|
|
913
|
-
...props.attributes,
|
|
914
|
-
href: props.link,
|
|
915
|
-
target: props.openLinkInNewTab ? "_blank" : void 0,
|
|
916
|
-
children: props.text
|
|
917
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
918
|
-
class: "button-Button",
|
|
919
|
-
...props.attributes,
|
|
920
|
-
children: props.text
|
|
921
|
-
})
|
|
922
|
-
});
|
|
923
|
-
}, "Button_component_gJoMUICXoUQ"));
|
|
924
|
-
const Button$1 = Button;
|
|
925
|
-
const STYLES = `.button-Button {
|
|
926
|
-
all: unset; }`;
|
|
927
|
-
const componentInfo$a = {
|
|
928
|
-
name: "Core:Button",
|
|
929
|
-
builtIn: true,
|
|
930
|
-
image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
|
|
931
|
-
defaultStyles: {
|
|
932
|
-
appearance: "none",
|
|
933
|
-
paddingTop: "15px",
|
|
934
|
-
paddingBottom: "15px",
|
|
935
|
-
paddingLeft: "25px",
|
|
936
|
-
paddingRight: "25px",
|
|
937
|
-
backgroundColor: "#000000",
|
|
938
|
-
color: "white",
|
|
939
|
-
borderRadius: "4px",
|
|
940
|
-
textAlign: "center",
|
|
941
|
-
cursor: "pointer"
|
|
942
|
-
},
|
|
943
|
-
inputs: [
|
|
944
|
-
{
|
|
945
|
-
name: "text",
|
|
946
|
-
type: "text",
|
|
947
|
-
defaultValue: "Click me!",
|
|
948
|
-
bubble: true
|
|
949
|
-
},
|
|
950
|
-
{
|
|
951
|
-
name: "link",
|
|
952
|
-
type: "url",
|
|
953
|
-
bubble: true
|
|
954
|
-
},
|
|
955
|
-
{
|
|
956
|
-
name: "openLinkInNewTab",
|
|
957
|
-
type: "boolean",
|
|
958
|
-
defaultValue: false,
|
|
959
|
-
friendlyName: "Open link in new tab"
|
|
960
|
-
}
|
|
961
|
-
],
|
|
962
|
-
static: true,
|
|
963
|
-
noWrap: true
|
|
964
|
-
};
|
|
965
|
-
function markSerializable(fn) {
|
|
966
|
-
fn.__qwik_serializable__ = true;
|
|
967
|
-
return fn;
|
|
968
|
-
}
|
|
969
|
-
const componentInfo$9 = {
|
|
970
|
-
name: "Columns",
|
|
971
|
-
builtIn: true,
|
|
972
|
-
inputs: [
|
|
973
|
-
{
|
|
974
|
-
name: "columns",
|
|
975
|
-
type: "array",
|
|
976
|
-
broadcast: true,
|
|
977
|
-
subFields: [
|
|
978
|
-
{
|
|
979
|
-
name: "blocks",
|
|
980
|
-
type: "array",
|
|
981
|
-
hideFromUI: true,
|
|
982
|
-
defaultValue: [
|
|
983
|
-
{
|
|
984
|
-
"@type": "@builder.io/sdk:Element",
|
|
985
|
-
responsiveStyles: {
|
|
986
|
-
large: {
|
|
987
|
-
display: "flex",
|
|
988
|
-
flexDirection: "column",
|
|
989
|
-
alignItems: "stretch",
|
|
990
|
-
flexShrink: "0",
|
|
991
|
-
position: "relative",
|
|
992
|
-
marginTop: "30px",
|
|
993
|
-
textAlign: "center",
|
|
994
|
-
lineHeight: "normal",
|
|
995
|
-
height: "auto",
|
|
996
|
-
minHeight: "20px",
|
|
997
|
-
minWidth: "20px",
|
|
998
|
-
overflow: "hidden"
|
|
999
|
-
}
|
|
1000
|
-
},
|
|
1001
|
-
component: {
|
|
1002
|
-
name: "Image",
|
|
1003
|
-
options: {
|
|
1004
|
-
image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
|
|
1005
|
-
backgroundPosition: "center",
|
|
1006
|
-
backgroundSize: "cover",
|
|
1007
|
-
aspectRatio: 0.7004048582995948
|
|
1008
|
-
}
|
|
1009
|
-
}
|
|
1010
|
-
},
|
|
1011
|
-
{
|
|
1012
|
-
"@type": "@builder.io/sdk:Element",
|
|
1013
|
-
responsiveStyles: {
|
|
1014
|
-
large: {
|
|
1015
|
-
display: "flex",
|
|
1016
|
-
flexDirection: "column",
|
|
1017
|
-
alignItems: "stretch",
|
|
1018
|
-
flexShrink: "0",
|
|
1019
|
-
position: "relative",
|
|
1020
|
-
marginTop: "30px",
|
|
1021
|
-
textAlign: "center",
|
|
1022
|
-
lineHeight: "normal",
|
|
1023
|
-
height: "auto"
|
|
1024
|
-
}
|
|
1025
|
-
},
|
|
1026
|
-
component: {
|
|
1027
|
-
name: "Text",
|
|
1028
|
-
options: {
|
|
1029
|
-
text: "<p>Enter some text...</p>"
|
|
1030
|
-
}
|
|
1031
|
-
}
|
|
1032
|
-
}
|
|
1033
|
-
]
|
|
1034
|
-
},
|
|
1035
|
-
{
|
|
1036
|
-
name: "width",
|
|
1037
|
-
type: "number",
|
|
1038
|
-
hideFromUI: true,
|
|
1039
|
-
helperText: "Width %, e.g. set to 50 to fill half of the space"
|
|
1040
|
-
},
|
|
1041
|
-
{
|
|
1042
|
-
name: "link",
|
|
1043
|
-
type: "url",
|
|
1044
|
-
helperText: "Optionally set a url that clicking this column will link to"
|
|
1045
|
-
}
|
|
1046
|
-
],
|
|
1047
|
-
defaultValue: [
|
|
1048
|
-
{
|
|
1049
|
-
blocks: [
|
|
1050
|
-
{
|
|
1051
|
-
"@type": "@builder.io/sdk:Element",
|
|
1052
|
-
responsiveStyles: {
|
|
1053
|
-
large: {
|
|
1054
|
-
display: "flex",
|
|
1055
|
-
flexDirection: "column",
|
|
1056
|
-
alignItems: "stretch",
|
|
1057
|
-
flexShrink: "0",
|
|
1058
|
-
position: "relative",
|
|
1059
|
-
marginTop: "30px",
|
|
1060
|
-
textAlign: "center",
|
|
1061
|
-
lineHeight: "normal",
|
|
1062
|
-
height: "auto",
|
|
1063
|
-
minHeight: "20px",
|
|
1064
|
-
minWidth: "20px",
|
|
1065
|
-
overflow: "hidden"
|
|
1066
|
-
}
|
|
1067
|
-
},
|
|
1068
|
-
component: {
|
|
1069
|
-
name: "Image",
|
|
1070
|
-
options: {
|
|
1071
|
-
image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
|
|
1072
|
-
backgroundPosition: "center",
|
|
1073
|
-
backgroundSize: "cover",
|
|
1074
|
-
aspectRatio: 0.7004048582995948
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1077
|
-
},
|
|
1078
|
-
{
|
|
1079
|
-
"@type": "@builder.io/sdk:Element",
|
|
1080
|
-
responsiveStyles: {
|
|
1081
|
-
large: {
|
|
1082
|
-
display: "flex",
|
|
1083
|
-
flexDirection: "column",
|
|
1084
|
-
alignItems: "stretch",
|
|
1085
|
-
flexShrink: "0",
|
|
1086
|
-
position: "relative",
|
|
1087
|
-
marginTop: "30px",
|
|
1088
|
-
textAlign: "center",
|
|
1089
|
-
lineHeight: "normal",
|
|
1090
|
-
height: "auto"
|
|
1091
|
-
}
|
|
1092
|
-
},
|
|
1093
|
-
component: {
|
|
1094
|
-
name: "Text",
|
|
1095
|
-
options: {
|
|
1096
|
-
text: "<p>Enter some text...</p>"
|
|
1097
|
-
}
|
|
1098
|
-
}
|
|
1099
|
-
}
|
|
1100
|
-
]
|
|
1101
|
-
},
|
|
1102
|
-
{
|
|
1103
|
-
blocks: [
|
|
1104
|
-
{
|
|
1105
|
-
"@type": "@builder.io/sdk:Element",
|
|
1106
|
-
responsiveStyles: {
|
|
1107
|
-
large: {
|
|
1108
|
-
display: "flex",
|
|
1109
|
-
flexDirection: "column",
|
|
1110
|
-
alignItems: "stretch",
|
|
1111
|
-
flexShrink: "0",
|
|
1112
|
-
position: "relative",
|
|
1113
|
-
marginTop: "30px",
|
|
1114
|
-
textAlign: "center",
|
|
1115
|
-
lineHeight: "normal",
|
|
1116
|
-
height: "auto",
|
|
1117
|
-
minHeight: "20px",
|
|
1118
|
-
minWidth: "20px",
|
|
1119
|
-
overflow: "hidden"
|
|
1120
|
-
}
|
|
1121
|
-
},
|
|
1122
|
-
component: {
|
|
1123
|
-
name: "Image",
|
|
1124
|
-
options: {
|
|
1125
|
-
image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
|
|
1126
|
-
backgroundPosition: "center",
|
|
1127
|
-
backgroundSize: "cover",
|
|
1128
|
-
aspectRatio: 0.7004048582995948
|
|
1129
|
-
}
|
|
1130
|
-
}
|
|
1131
|
-
},
|
|
1132
|
-
{
|
|
1133
|
-
"@type": "@builder.io/sdk:Element",
|
|
1134
|
-
responsiveStyles: {
|
|
1135
|
-
large: {
|
|
1136
|
-
display: "flex",
|
|
1137
|
-
flexDirection: "column",
|
|
1138
|
-
alignItems: "stretch",
|
|
1139
|
-
flexShrink: "0",
|
|
1140
|
-
position: "relative",
|
|
1141
|
-
marginTop: "30px",
|
|
1142
|
-
textAlign: "center",
|
|
1143
|
-
lineHeight: "normal",
|
|
1144
|
-
height: "auto"
|
|
1145
|
-
}
|
|
1146
|
-
},
|
|
1147
|
-
component: {
|
|
1148
|
-
name: "Text",
|
|
1149
|
-
options: {
|
|
1150
|
-
text: "<p>Enter some text...</p>"
|
|
1151
|
-
}
|
|
1152
|
-
}
|
|
1153
|
-
}
|
|
1154
|
-
]
|
|
1155
|
-
}
|
|
1156
|
-
],
|
|
1157
|
-
onChange: markSerializable((options) => {
|
|
1158
|
-
function clearWidths() {
|
|
1159
|
-
columns.forEach((col) => {
|
|
1160
|
-
col.delete("width");
|
|
1161
|
-
});
|
|
1162
|
-
}
|
|
1163
|
-
const columns = options.get("columns");
|
|
1164
|
-
if (Array.isArray(columns)) {
|
|
1165
|
-
const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
|
|
1166
|
-
if (containsColumnWithWidth) {
|
|
1167
|
-
const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
|
|
1168
|
-
if (containsColumnWithoutWidth)
|
|
1169
|
-
clearWidths();
|
|
1170
|
-
else {
|
|
1171
|
-
const sumWidths = columns.reduce((memo, col) => {
|
|
1172
|
-
return memo + col.get("width");
|
|
1173
|
-
}, 0);
|
|
1174
|
-
const widthsDontAddUp = sumWidths !== 100;
|
|
1175
|
-
if (widthsDontAddUp)
|
|
1176
|
-
clearWidths();
|
|
1177
|
-
}
|
|
1178
|
-
}
|
|
1179
|
-
}
|
|
1180
|
-
})
|
|
1181
|
-
},
|
|
1182
|
-
{
|
|
1183
|
-
name: "space",
|
|
1184
|
-
type: "number",
|
|
1185
|
-
defaultValue: 20,
|
|
1186
|
-
helperText: "Size of gap between columns",
|
|
1187
|
-
advanced: true
|
|
1188
|
-
},
|
|
1189
|
-
{
|
|
1190
|
-
name: "stackColumnsAt",
|
|
1191
|
-
type: "string",
|
|
1192
|
-
defaultValue: "tablet",
|
|
1193
|
-
helperText: "Convert horizontal columns to vertical at what device size",
|
|
1194
|
-
enum: [
|
|
1195
|
-
"tablet",
|
|
1196
|
-
"mobile",
|
|
1197
|
-
"never"
|
|
1198
|
-
],
|
|
1199
|
-
advanced: true
|
|
1200
|
-
},
|
|
1201
|
-
{
|
|
1202
|
-
name: "reverseColumnsWhenStacked",
|
|
1203
|
-
type: "boolean",
|
|
1204
|
-
defaultValue: false,
|
|
1205
|
-
helperText: "When stacking columns for mobile devices, reverse the ordering",
|
|
1206
|
-
advanced: true
|
|
1207
|
-
}
|
|
1208
|
-
]
|
|
1209
|
-
};
|
|
1210
|
-
const componentInfo$8 = {
|
|
1211
|
-
name: "Fragment",
|
|
1212
|
-
static: true,
|
|
1213
|
-
hidden: true,
|
|
1214
|
-
builtIn: true,
|
|
1215
|
-
canHaveChildren: true,
|
|
1216
|
-
noWrap: true
|
|
1217
|
-
};
|
|
1218
|
-
const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
1219
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1220
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
|
|
1221
|
-
});
|
|
1222
|
-
}, "FragmentComponent_component_T0AypnadAK0"));
|
|
1223
|
-
const Fragment = FragmentComponent;
|
|
1224
|
-
const componentInfo$7 = {
|
|
1225
|
-
name: "Image",
|
|
1226
|
-
static: true,
|
|
1227
|
-
builtIn: true,
|
|
1228
|
-
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
|
|
1229
|
-
defaultStyles: {
|
|
1230
|
-
position: "relative",
|
|
1231
|
-
minHeight: "20px",
|
|
1232
|
-
minWidth: "20px",
|
|
1233
|
-
overflow: "hidden"
|
|
1234
|
-
},
|
|
1235
|
-
canHaveChildren: true,
|
|
1236
|
-
inputs: [
|
|
1237
|
-
{
|
|
1238
|
-
name: "image",
|
|
1239
|
-
type: "file",
|
|
1240
|
-
bubble: true,
|
|
1241
|
-
allowedFileTypes: [
|
|
1242
|
-
"jpeg",
|
|
1243
|
-
"jpg",
|
|
1244
|
-
"png",
|
|
1245
|
-
"svg"
|
|
1246
|
-
],
|
|
1247
|
-
required: true,
|
|
1248
|
-
defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
|
|
1249
|
-
onChange: markSerializable((options) => {
|
|
1250
|
-
const DEFAULT_ASPECT_RATIO = 0.7041;
|
|
1251
|
-
options.delete("srcset");
|
|
1252
|
-
options.delete("noWebp");
|
|
1253
|
-
function loadImage(url, timeout = 6e4) {
|
|
1254
|
-
return new Promise((resolve, reject) => {
|
|
1255
|
-
const img = document.createElement("img");
|
|
1256
|
-
let loaded = false;
|
|
1257
|
-
img.onload = () => {
|
|
1258
|
-
loaded = true;
|
|
1259
|
-
resolve(img);
|
|
1260
|
-
};
|
|
1261
|
-
img.addEventListener("error", (event) => {
|
|
1262
|
-
console.warn("Image load failed", event.error);
|
|
1263
|
-
reject(event.error);
|
|
1264
|
-
});
|
|
1265
|
-
img.src = url;
|
|
1266
|
-
setTimeout(() => {
|
|
1267
|
-
if (!loaded)
|
|
1268
|
-
reject(new Error("Image load timed out"));
|
|
1269
|
-
}, timeout);
|
|
1270
|
-
});
|
|
1271
|
-
}
|
|
1272
|
-
function round(num) {
|
|
1273
|
-
return Math.round(num * 1e3) / 1e3;
|
|
1274
|
-
}
|
|
1275
|
-
const value = options.get("image");
|
|
1276
|
-
const aspectRatio = options.get("aspectRatio");
|
|
1277
|
-
fetch(value).then((res) => res.blob()).then((blob) => {
|
|
1278
|
-
if (blob.type.includes("svg"))
|
|
1279
|
-
options.set("noWebp", true);
|
|
1280
|
-
});
|
|
1281
|
-
if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
|
|
1282
|
-
return loadImage(value).then((img) => {
|
|
1283
|
-
const possiblyUpdatedAspectRatio = options.get("aspectRatio");
|
|
1284
|
-
if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
|
|
1285
|
-
if (img.width && img.height) {
|
|
1286
|
-
options.set("aspectRatio", round(img.height / img.width));
|
|
1287
|
-
options.set("height", img.height);
|
|
1288
|
-
options.set("width", img.width);
|
|
1289
|
-
}
|
|
1290
|
-
}
|
|
1291
|
-
});
|
|
1292
|
-
})
|
|
1293
|
-
},
|
|
1294
|
-
{
|
|
1295
|
-
name: "backgroundSize",
|
|
1296
|
-
type: "text",
|
|
1297
|
-
defaultValue: "cover",
|
|
1298
|
-
enum: [
|
|
1299
|
-
{
|
|
1300
|
-
label: "contain",
|
|
1301
|
-
value: "contain",
|
|
1302
|
-
helperText: "The image should never get cropped"
|
|
1303
|
-
},
|
|
1304
|
-
{
|
|
1305
|
-
label: "cover",
|
|
1306
|
-
value: "cover",
|
|
1307
|
-
helperText: "The image should fill it's box, cropping when needed"
|
|
1308
|
-
}
|
|
1309
|
-
]
|
|
1310
|
-
},
|
|
1311
|
-
{
|
|
1312
|
-
name: "backgroundPosition",
|
|
1313
|
-
type: "text",
|
|
1314
|
-
defaultValue: "center",
|
|
1315
|
-
enum: [
|
|
1316
|
-
"center",
|
|
1317
|
-
"top",
|
|
1318
|
-
"left",
|
|
1319
|
-
"right",
|
|
1320
|
-
"bottom",
|
|
1321
|
-
"top left",
|
|
1322
|
-
"top right",
|
|
1323
|
-
"bottom left",
|
|
1324
|
-
"bottom right"
|
|
1325
|
-
]
|
|
1326
|
-
},
|
|
1327
|
-
{
|
|
1328
|
-
name: "altText",
|
|
1329
|
-
type: "string",
|
|
1330
|
-
helperText: "Text to display when the user has images off"
|
|
1331
|
-
},
|
|
1332
|
-
{
|
|
1333
|
-
name: "height",
|
|
1334
|
-
type: "number",
|
|
1335
|
-
hideFromUI: true
|
|
1336
|
-
},
|
|
1337
|
-
{
|
|
1338
|
-
name: "width",
|
|
1339
|
-
type: "number",
|
|
1340
|
-
hideFromUI: true
|
|
1341
|
-
},
|
|
1342
|
-
{
|
|
1343
|
-
name: "sizes",
|
|
1344
|
-
type: "string",
|
|
1345
|
-
hideFromUI: true
|
|
1346
|
-
},
|
|
1347
|
-
{
|
|
1348
|
-
name: "srcset",
|
|
1349
|
-
type: "string",
|
|
1350
|
-
hideFromUI: true
|
|
1351
|
-
},
|
|
1352
|
-
{
|
|
1353
|
-
name: "lazy",
|
|
1354
|
-
type: "boolean",
|
|
1355
|
-
defaultValue: true,
|
|
1356
|
-
hideFromUI: true
|
|
1357
|
-
},
|
|
1358
|
-
{
|
|
1359
|
-
name: "fitContent",
|
|
1360
|
-
type: "boolean",
|
|
1361
|
-
helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
|
|
1362
|
-
defaultValue: true
|
|
1363
|
-
},
|
|
1364
|
-
{
|
|
1365
|
-
name: "aspectRatio",
|
|
1366
|
-
type: "number",
|
|
1367
|
-
helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
|
|
1368
|
-
advanced: true,
|
|
1369
|
-
defaultValue: 0.7041
|
|
1370
|
-
}
|
|
1371
|
-
]
|
|
1372
|
-
};
|
|
1373
|
-
const componentInfo$6 = {
|
|
1374
|
-
name: "Core:Section",
|
|
1375
|
-
static: true,
|
|
1376
|
-
builtIn: true,
|
|
1377
|
-
image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
|
|
1378
|
-
inputs: [
|
|
1379
|
-
{
|
|
1380
|
-
name: "maxWidth",
|
|
1381
|
-
type: "number",
|
|
1382
|
-
defaultValue: 1200
|
|
1383
|
-
},
|
|
1384
|
-
{
|
|
1385
|
-
name: "lazyLoad",
|
|
1386
|
-
type: "boolean",
|
|
1387
|
-
defaultValue: false,
|
|
1388
|
-
advanced: true,
|
|
1389
|
-
description: "Only render this section when in view"
|
|
1390
|
-
}
|
|
1391
|
-
],
|
|
1392
|
-
defaultStyles: {
|
|
1393
|
-
paddingLeft: "20px",
|
|
1394
|
-
paddingRight: "20px",
|
|
1395
|
-
paddingTop: "50px",
|
|
1396
|
-
paddingBottom: "50px",
|
|
1397
|
-
marginTop: "0px",
|
|
1398
|
-
width: "100vw",
|
|
1399
|
-
marginLeft: "calc(50% - 50vw)"
|
|
1400
|
-
},
|
|
1401
|
-
canHaveChildren: true,
|
|
1402
|
-
defaultChildren: [
|
|
1403
|
-
{
|
|
1404
|
-
"@type": "@builder.io/sdk:Element",
|
|
1405
|
-
responsiveStyles: {
|
|
1406
|
-
large: {
|
|
1407
|
-
textAlign: "center"
|
|
1408
|
-
}
|
|
1409
|
-
},
|
|
1410
|
-
component: {
|
|
1411
|
-
name: "Text",
|
|
1412
|
-
options: {
|
|
1413
|
-
text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>"
|
|
1414
|
-
}
|
|
1415
|
-
}
|
|
1416
|
-
}
|
|
1417
|
-
]
|
|
1418
|
-
};
|
|
1419
|
-
const SectionComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
1420
|
-
return /* @__PURE__ */ jsxRuntime.jsx("section", {
|
|
1421
|
-
...props.attributes,
|
|
1422
|
-
style: (() => {
|
|
1423
|
-
props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : void 0;
|
|
1424
|
-
})(),
|
|
1425
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
|
|
1426
|
-
});
|
|
1427
|
-
}, "SectionComponent_component_ZWF9iD5WeLg"));
|
|
1428
|
-
const Section = SectionComponent;
|
|
1429
|
-
const componentInfo$5 = {
|
|
1430
|
-
name: "Symbol",
|
|
1431
|
-
noWrap: true,
|
|
1432
|
-
static: true,
|
|
1433
|
-
builtIn: true,
|
|
1434
|
-
inputs: [
|
|
1435
|
-
{
|
|
1436
|
-
name: "symbol",
|
|
1437
|
-
type: "uiSymbol"
|
|
1438
|
-
},
|
|
1439
|
-
{
|
|
1440
|
-
name: "dataOnly",
|
|
1441
|
-
helperText: "Make this a data symbol that doesn't display any UI",
|
|
1442
|
-
type: "boolean",
|
|
1443
|
-
defaultValue: false,
|
|
1444
|
-
advanced: true,
|
|
1445
|
-
hideFromUI: true
|
|
1446
|
-
},
|
|
1447
|
-
{
|
|
1448
|
-
name: "inheritState",
|
|
1449
|
-
helperText: "Inherit the parent component state and data",
|
|
1450
|
-
type: "boolean",
|
|
1451
|
-
defaultValue: false,
|
|
1452
|
-
advanced: true
|
|
1453
|
-
},
|
|
1454
|
-
{
|
|
1455
|
-
name: "renderToLiquid",
|
|
1456
|
-
helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
|
|
1457
|
-
type: "boolean",
|
|
1458
|
-
defaultValue: false,
|
|
1459
|
-
advanced: true,
|
|
1460
|
-
hideFromUI: true
|
|
1461
|
-
},
|
|
1462
|
-
{
|
|
1463
|
-
name: "useChildren",
|
|
1464
|
-
hideFromUI: true,
|
|
1465
|
-
type: "boolean"
|
|
1466
|
-
}
|
|
1467
|
-
]
|
|
1468
|
-
};
|
|
1469
|
-
const componentInfo$4 = {
|
|
1470
|
-
name: "Text",
|
|
1471
|
-
static: true,
|
|
1472
|
-
builtIn: true,
|
|
1473
|
-
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
|
|
1474
|
-
inputs: [
|
|
1475
|
-
{
|
|
1476
|
-
name: "text",
|
|
1477
|
-
type: "html",
|
|
1478
|
-
required: true,
|
|
1479
|
-
autoFocus: true,
|
|
1480
|
-
bubble: true,
|
|
1481
|
-
defaultValue: "Enter some text..."
|
|
1482
|
-
}
|
|
1483
|
-
],
|
|
1484
|
-
defaultStyles: {
|
|
1485
|
-
lineHeight: "normal",
|
|
1486
|
-
height: "auto",
|
|
1487
|
-
textAlign: "center"
|
|
1488
|
-
}
|
|
1489
|
-
};
|
|
1490
|
-
const componentInfo$3 = {
|
|
1491
|
-
name: "Video",
|
|
1492
|
-
canHaveChildren: true,
|
|
1493
|
-
builtIn: true,
|
|
1494
|
-
defaultStyles: {
|
|
1495
|
-
minHeight: "20px",
|
|
1496
|
-
minWidth: "20px"
|
|
1497
|
-
},
|
|
1498
|
-
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
|
|
1499
|
-
inputs: [
|
|
1500
|
-
{
|
|
1501
|
-
name: "video",
|
|
1502
|
-
type: "file",
|
|
1503
|
-
allowedFileTypes: [
|
|
1504
|
-
"mp4"
|
|
1505
|
-
],
|
|
1506
|
-
bubble: true,
|
|
1507
|
-
defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
|
|
1508
|
-
required: true
|
|
1509
|
-
},
|
|
1510
|
-
{
|
|
1511
|
-
name: "posterImage",
|
|
1512
|
-
type: "file",
|
|
1513
|
-
allowedFileTypes: [
|
|
1514
|
-
"jpeg",
|
|
1515
|
-
"png"
|
|
1516
|
-
],
|
|
1517
|
-
helperText: "Image to show before the video plays"
|
|
1518
|
-
},
|
|
1519
|
-
{
|
|
1520
|
-
name: "autoPlay",
|
|
1521
|
-
type: "boolean",
|
|
1522
|
-
defaultValue: true
|
|
1523
|
-
},
|
|
1524
|
-
{
|
|
1525
|
-
name: "controls",
|
|
1526
|
-
type: "boolean",
|
|
1527
|
-
defaultValue: false
|
|
1528
|
-
},
|
|
1529
|
-
{
|
|
1530
|
-
name: "muted",
|
|
1531
|
-
type: "boolean",
|
|
1532
|
-
defaultValue: true
|
|
1533
|
-
},
|
|
1534
|
-
{
|
|
1535
|
-
name: "loop",
|
|
1536
|
-
type: "boolean",
|
|
1537
|
-
defaultValue: true
|
|
1538
|
-
},
|
|
1539
|
-
{
|
|
1540
|
-
name: "playsInline",
|
|
1541
|
-
type: "boolean",
|
|
1542
|
-
defaultValue: true
|
|
1543
|
-
},
|
|
1544
|
-
{
|
|
1545
|
-
name: "fit",
|
|
1546
|
-
type: "text",
|
|
1547
|
-
defaultValue: "cover",
|
|
1548
|
-
enum: [
|
|
1549
|
-
"contain",
|
|
1550
|
-
"cover",
|
|
1551
|
-
"fill",
|
|
1552
|
-
"auto"
|
|
1553
|
-
]
|
|
1554
|
-
},
|
|
1555
|
-
{
|
|
1556
|
-
name: "fitContent",
|
|
1557
|
-
type: "boolean",
|
|
1558
|
-
helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
|
|
1559
|
-
defaultValue: true,
|
|
1560
|
-
advanced: true
|
|
1561
|
-
},
|
|
1562
|
-
{
|
|
1563
|
-
name: "position",
|
|
1564
|
-
type: "text",
|
|
1565
|
-
defaultValue: "center",
|
|
1566
|
-
enum: [
|
|
1567
|
-
"center",
|
|
1568
|
-
"top",
|
|
1569
|
-
"left",
|
|
1570
|
-
"right",
|
|
1571
|
-
"bottom",
|
|
1572
|
-
"top left",
|
|
1573
|
-
"top right",
|
|
1574
|
-
"bottom left",
|
|
1575
|
-
"bottom right"
|
|
1576
|
-
]
|
|
1577
|
-
},
|
|
1578
|
-
{
|
|
1579
|
-
name: "height",
|
|
1580
|
-
type: "number",
|
|
1581
|
-
advanced: true
|
|
1582
|
-
},
|
|
1583
|
-
{
|
|
1584
|
-
name: "width",
|
|
1585
|
-
type: "number",
|
|
1586
|
-
advanced: true
|
|
1587
|
-
},
|
|
1588
|
-
{
|
|
1589
|
-
name: "aspectRatio",
|
|
1590
|
-
type: "number",
|
|
1591
|
-
advanced: true,
|
|
1592
|
-
defaultValue: 0.7004048582995948
|
|
1593
|
-
},
|
|
1594
|
-
{
|
|
1595
|
-
name: "lazyLoad",
|
|
1596
|
-
type: "boolean",
|
|
1597
|
-
helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
|
|
1598
|
-
defaultValue: true,
|
|
1599
|
-
advanced: true
|
|
1600
|
-
}
|
|
1601
|
-
]
|
|
1602
|
-
};
|
|
1603
|
-
const componentInfo$2 = {
|
|
1604
|
-
name: "Embed",
|
|
1605
|
-
static: true,
|
|
1606
|
-
builtIn: true,
|
|
1607
|
-
inputs: [
|
|
1608
|
-
{
|
|
1609
|
-
name: "url",
|
|
1610
|
-
type: "url",
|
|
1611
|
-
required: true,
|
|
1612
|
-
defaultValue: "",
|
|
1613
|
-
helperText: "e.g. enter a youtube url, google map, etc",
|
|
1614
|
-
onChange: markSerializable((options) => {
|
|
1615
|
-
const url = options.get("url");
|
|
1616
|
-
if (url) {
|
|
1617
|
-
options.set("content", "Loading...");
|
|
1618
|
-
const apiKey = "ae0e60e78201a3f2b0de4b";
|
|
1619
|
-
return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
|
|
1620
|
-
if (options.get("url") === url) {
|
|
1621
|
-
if (data.html)
|
|
1622
|
-
options.set("content", data.html);
|
|
1623
|
-
else
|
|
1624
|
-
options.set("content", "Invalid url, please try another");
|
|
1625
|
-
}
|
|
1626
|
-
}).catch((_err) => {
|
|
1627
|
-
options.set("content", "There was an error embedding this URL, please try again or another URL");
|
|
1628
|
-
});
|
|
1629
|
-
} else
|
|
1630
|
-
options.delete("content");
|
|
1631
|
-
})
|
|
1632
|
-
},
|
|
1633
|
-
{
|
|
1634
|
-
name: "content",
|
|
1635
|
-
type: "html",
|
|
1636
|
-
defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
|
|
1637
|
-
hideFromUI: true
|
|
1638
|
-
}
|
|
1639
|
-
]
|
|
1640
|
-
};
|
|
1641
|
-
const SCRIPT_MIME_TYPES = [
|
|
1642
|
-
"text/javascript",
|
|
1643
|
-
"application/javascript",
|
|
1644
|
-
"application/ecmascript"
|
|
1645
|
-
];
|
|
1646
|
-
const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
|
|
1647
|
-
const findAndRunScripts$1 = function findAndRunScripts(props, state, elem) {
|
|
1648
|
-
if (!elem || !elem.getElementsByTagName)
|
|
1649
|
-
return;
|
|
1650
|
-
const scripts = elem.getElementsByTagName("script");
|
|
1651
|
-
for (let i = 0; i < scripts.length; i++) {
|
|
1652
|
-
const script = scripts[i];
|
|
1653
|
-
if (script.src && !state.scriptsInserted.includes(script.src)) {
|
|
1654
|
-
state.scriptsInserted.push(script.src);
|
|
1655
|
-
const newScript = document.createElement("script");
|
|
1656
|
-
newScript.async = true;
|
|
1657
|
-
newScript.src = script.src;
|
|
1658
|
-
document.head.appendChild(newScript);
|
|
1659
|
-
} else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
|
|
1660
|
-
try {
|
|
1661
|
-
state.scriptsRun.push(script.innerText);
|
|
1662
|
-
new Function(script.innerText)();
|
|
1663
|
-
} catch (error) {
|
|
1664
|
-
console.warn("`Embed`: Error running script:", error);
|
|
1665
|
-
}
|
|
1666
|
-
}
|
|
1667
|
-
};
|
|
1668
|
-
const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
1669
|
-
const elem = qwik.useRef();
|
|
1670
|
-
const state = qwik.useStore({
|
|
1671
|
-
ranInitFn: false,
|
|
1672
|
-
scriptsInserted: [],
|
|
1673
|
-
scriptsRun: []
|
|
1674
|
-
});
|
|
1675
|
-
qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
|
|
1676
|
-
const [elem2, props2, state2] = qwik.useLexicalScope();
|
|
1677
|
-
state2 && track2(state2, "ranInitFn");
|
|
1678
|
-
if (elem2 && !state2.ranInitFn) {
|
|
1679
|
-
state2.ranInitFn = true;
|
|
1680
|
-
findAndRunScripts$1(props2, state2, elem2);
|
|
1681
|
-
}
|
|
1682
|
-
}, "Embed_component_useWatch_AxgWjrHdlAI", [
|
|
1683
|
-
elem,
|
|
1684
|
-
props,
|
|
1685
|
-
state
|
|
1686
|
-
]));
|
|
1687
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1688
|
-
class: "builder-embed",
|
|
1689
|
-
ref: elem,
|
|
1690
|
-
dangerouslySetInnerHTML: props.content
|
|
1691
|
-
});
|
|
1692
|
-
}, "Embed_component_Uji08ORjXbE"));
|
|
1693
|
-
const embed = Embed;
|
|
1694
|
-
const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
1695
|
-
return /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
1696
|
-
style: {
|
|
1697
|
-
objectFit: props.backgroundSize || "cover",
|
|
1698
|
-
objectPosition: props.backgroundPosition || "center"
|
|
1699
|
-
},
|
|
1700
|
-
alt: props.altText,
|
|
1701
|
-
src: props.imgSrc || props.image,
|
|
1702
|
-
...props.attributes
|
|
1703
|
-
}, isEditing() && props.imgSrc || "default-key");
|
|
1704
|
-
}, "ImgComponent_component_FXvIDBSffO8"));
|
|
1705
|
-
const Img = ImgComponent;
|
|
1706
|
-
const componentInfo$1 = {
|
|
1707
|
-
name: "Raw:Img",
|
|
1708
|
-
hideFromInsertMenu: true,
|
|
1709
|
-
builtIn: true,
|
|
1710
|
-
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
|
|
1711
|
-
inputs: [
|
|
1712
|
-
{
|
|
1713
|
-
name: "image",
|
|
1714
|
-
bubble: true,
|
|
1715
|
-
type: "file",
|
|
1716
|
-
allowedFileTypes: [
|
|
1717
|
-
"jpeg",
|
|
1718
|
-
"jpg",
|
|
1719
|
-
"png",
|
|
1720
|
-
"svg"
|
|
1721
|
-
],
|
|
1722
|
-
required: true
|
|
1723
|
-
}
|
|
1724
|
-
],
|
|
1725
|
-
noWrap: true,
|
|
1726
|
-
static: true
|
|
1727
|
-
};
|
|
1728
|
-
const findAndRunScripts2 = function findAndRunScripts3(props, state, elem) {
|
|
1729
|
-
if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
|
|
1730
|
-
const scripts = elem.getElementsByTagName("script");
|
|
1731
|
-
for (let i = 0; i < scripts.length; i++) {
|
|
1732
|
-
const script = scripts[i];
|
|
1733
|
-
if (script.src) {
|
|
1734
|
-
if (state.scriptsInserted.includes(script.src))
|
|
1735
|
-
continue;
|
|
1736
|
-
state.scriptsInserted.push(script.src);
|
|
1737
|
-
const newScript = document.createElement("script");
|
|
1738
|
-
newScript.async = true;
|
|
1739
|
-
newScript.src = script.src;
|
|
1740
|
-
document.head.appendChild(newScript);
|
|
1741
|
-
} else if (!script.type || [
|
|
1742
|
-
"text/javascript",
|
|
1743
|
-
"application/javascript",
|
|
1744
|
-
"application/ecmascript"
|
|
1745
|
-
].includes(script.type)) {
|
|
1746
|
-
if (state.scriptsRun.includes(script.innerText))
|
|
1747
|
-
continue;
|
|
1748
|
-
try {
|
|
1749
|
-
state.scriptsRun.push(script.innerText);
|
|
1750
|
-
new Function(script.innerText)();
|
|
1751
|
-
} catch (error) {
|
|
1752
|
-
console.warn("`CustomCode`: Error running script:", error);
|
|
1753
|
-
}
|
|
1754
|
-
}
|
|
1755
|
-
}
|
|
1756
|
-
}
|
|
1757
|
-
};
|
|
1758
|
-
const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
1759
|
-
const elem = qwik.useRef();
|
|
1760
|
-
const state = qwik.useStore({
|
|
1761
|
-
scriptsInserted: [],
|
|
1762
|
-
scriptsRun: []
|
|
1763
|
-
});
|
|
1764
|
-
qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
|
|
1765
|
-
const [elem2, props2, state2] = qwik.useLexicalScope();
|
|
1766
|
-
findAndRunScripts2(props2, state2, elem2);
|
|
1767
|
-
}, "CustomCode_component_useClientEffect_4w4c951ufB4", [
|
|
1768
|
-
elem,
|
|
1769
|
-
props,
|
|
1770
|
-
state
|
|
1771
|
-
]));
|
|
1772
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1773
|
-
ref: elem,
|
|
1774
|
-
class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
|
|
1775
|
-
dangerouslySetInnerHTML: props.code
|
|
1776
|
-
});
|
|
1777
|
-
}, "CustomCode_component_uYOSy7w7Zqw"));
|
|
1778
|
-
const customCode = CustomCode;
|
|
1779
|
-
const componentInfo2 = {
|
|
1780
|
-
name: "Custom Code",
|
|
1781
|
-
static: true,
|
|
1782
|
-
builtIn: true,
|
|
1783
|
-
requiredPermissions: [
|
|
1784
|
-
"editCode"
|
|
1785
|
-
],
|
|
1786
|
-
inputs: [
|
|
1787
|
-
{
|
|
1788
|
-
name: "code",
|
|
1789
|
-
type: "html",
|
|
1790
|
-
required: true,
|
|
1791
|
-
defaultValue: "<p>Hello there, I am custom HTML code!</p>",
|
|
1792
|
-
code: true
|
|
1793
|
-
},
|
|
1794
|
-
{
|
|
1795
|
-
name: "replaceNodes",
|
|
1796
|
-
type: "boolean",
|
|
1797
|
-
helperText: "Preserve server rendered dom nodes",
|
|
1798
|
-
advanced: true
|
|
1799
|
-
},
|
|
1800
|
-
{
|
|
1801
|
-
name: "scriptsClientOnly",
|
|
1802
|
-
type: "boolean",
|
|
1803
|
-
defaultValue: false,
|
|
1804
|
-
helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
|
|
1805
|
-
advanced: true
|
|
1806
|
-
}
|
|
1807
|
-
]
|
|
1808
|
-
};
|
|
1809
|
-
const getDefaultRegisteredComponents = () => [
|
|
1810
|
-
{
|
|
1811
|
-
component: Columns$1,
|
|
1812
|
-
...componentInfo$9
|
|
1813
|
-
},
|
|
1814
|
-
{
|
|
1815
|
-
component: Image$1,
|
|
1816
|
-
...componentInfo$7
|
|
1817
|
-
},
|
|
1818
|
-
{
|
|
1819
|
-
component: Img,
|
|
1820
|
-
...componentInfo$1
|
|
1821
|
-
},
|
|
1822
|
-
{
|
|
1823
|
-
component: Text$1,
|
|
1824
|
-
...componentInfo$4
|
|
1825
|
-
},
|
|
1826
|
-
{
|
|
1827
|
-
component: Video$1,
|
|
1828
|
-
...componentInfo$3
|
|
1829
|
-
},
|
|
1830
|
-
{
|
|
1831
|
-
component: Symbol$2,
|
|
1832
|
-
...componentInfo$5
|
|
1833
|
-
},
|
|
1834
|
-
{
|
|
1835
|
-
component: Button$1,
|
|
1836
|
-
...componentInfo$a
|
|
1837
|
-
},
|
|
1838
|
-
{
|
|
1839
|
-
component: Section,
|
|
1840
|
-
...componentInfo$6
|
|
1841
|
-
},
|
|
1842
|
-
{
|
|
1843
|
-
component: Fragment,
|
|
1844
|
-
...componentInfo$8
|
|
1845
|
-
},
|
|
1846
|
-
{
|
|
1847
|
-
component: embed,
|
|
1848
|
-
...componentInfo$2
|
|
1849
|
-
},
|
|
1850
|
-
{
|
|
1851
|
-
component: customCode,
|
|
1852
|
-
...componentInfo2
|
|
1853
|
-
}
|
|
1854
|
-
];
|
|
1855
|
-
function flatten(object, path = null, separator = ".") {
|
|
1856
|
-
return Object.keys(object).reduce((acc, key) => {
|
|
1857
|
-
const value = object[key];
|
|
1858
|
-
const newPath = [
|
|
1859
|
-
path,
|
|
1860
|
-
key
|
|
1861
|
-
].filter(Boolean).join(separator);
|
|
1862
|
-
const isObject = [
|
|
1863
|
-
typeof value === "object",
|
|
1864
|
-
value !== null,
|
|
1865
|
-
!(Array.isArray(value) && value.length === 0)
|
|
1866
|
-
].every(Boolean);
|
|
1867
|
-
return isObject ? {
|
|
1868
|
-
...acc,
|
|
1869
|
-
...flatten(value, newPath, separator)
|
|
1870
|
-
} : {
|
|
1871
|
-
...acc,
|
|
1872
|
-
[newPath]: value
|
|
1873
|
-
};
|
|
1874
|
-
}, {});
|
|
1875
|
-
}
|
|
1876
|
-
const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
|
|
1877
|
-
const convertSearchParamsToQueryObject = (searchParams) => {
|
|
1878
|
-
const options = {};
|
|
1879
|
-
searchParams.forEach((value, key) => {
|
|
1880
|
-
options[key] = value;
|
|
1881
|
-
});
|
|
1882
|
-
return options;
|
|
1883
|
-
};
|
|
1884
|
-
const getBuilderSearchParams = (_options) => {
|
|
1885
|
-
if (!_options)
|
|
1886
|
-
return {};
|
|
1887
|
-
const options = normalizeSearchParams(_options);
|
|
1888
|
-
const newOptions = {};
|
|
1889
|
-
Object.keys(options).forEach((key) => {
|
|
1890
|
-
if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
|
|
1891
|
-
const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "");
|
|
1892
|
-
newOptions[trimmedKey] = options[key];
|
|
1893
|
-
}
|
|
1894
|
-
});
|
|
1895
|
-
return newOptions;
|
|
1896
|
-
};
|
|
1897
|
-
const getBuilderSearchParamsFromWindow = () => {
|
|
1898
|
-
if (!isBrowser())
|
|
1899
|
-
return {};
|
|
1900
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
1901
|
-
return getBuilderSearchParams(searchParams);
|
|
1902
|
-
};
|
|
1903
|
-
const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
|
|
1904
|
-
function getGlobalThis() {
|
|
1905
|
-
if (typeof globalThis !== "undefined")
|
|
1906
|
-
return globalThis;
|
|
1907
|
-
if (typeof window !== "undefined")
|
|
1908
|
-
return window;
|
|
1909
|
-
if (typeof global !== "undefined")
|
|
1910
|
-
return global;
|
|
1911
|
-
if (typeof self !== "undefined")
|
|
1912
|
-
return self;
|
|
1913
|
-
return null;
|
|
1914
|
-
}
|
|
1915
|
-
async function getFetch() {
|
|
1916
|
-
const globalFetch = getGlobalThis().fetch;
|
|
1917
|
-
if (typeof globalFetch === "undefined" && typeof global !== "undefined")
|
|
1918
|
-
throw new Error("`fetch()` not found, ensure you have it as part of your polyfills.");
|
|
1919
|
-
return globalFetch.default || globalFetch;
|
|
1920
|
-
}
|
|
1921
|
-
const getTopLevelDomain = (host) => {
|
|
1922
|
-
const parts = host.split(".");
|
|
1923
|
-
if (parts.length > 2)
|
|
1924
|
-
return parts.slice(1).join(".");
|
|
1925
|
-
return host;
|
|
1926
|
-
};
|
|
1927
|
-
const getCookie = async ({ name, canTrack }) => {
|
|
1928
|
-
try {
|
|
1929
|
-
if (!canTrack)
|
|
1930
|
-
return void 0;
|
|
1931
|
-
return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
|
|
1932
|
-
} catch (err) {
|
|
1933
|
-
console.debug("[COOKIE] GET error: ", err);
|
|
1934
|
-
}
|
|
1935
|
-
};
|
|
1936
|
-
const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).join("; ");
|
|
1937
|
-
const SECURE_CONFIG = [
|
|
1938
|
-
[
|
|
1939
|
-
"secure",
|
|
1940
|
-
""
|
|
1941
|
-
],
|
|
1942
|
-
[
|
|
1943
|
-
"SameSite",
|
|
1944
|
-
"None"
|
|
1945
|
-
]
|
|
1946
|
-
];
|
|
1947
|
-
const createCookieString = ({ name, value, expires }) => {
|
|
1948
|
-
const secure = isBrowser() ? location.protocol === "https:" : true;
|
|
1949
|
-
const secureObj = secure ? SECURE_CONFIG : [
|
|
1950
|
-
[]
|
|
1951
|
-
];
|
|
1952
|
-
const expiresObj = expires ? [
|
|
1953
|
-
[
|
|
1954
|
-
"expires",
|
|
1955
|
-
expires.toUTCString()
|
|
1956
|
-
]
|
|
1957
|
-
] : [
|
|
1958
|
-
[]
|
|
1959
|
-
];
|
|
1960
|
-
const cookieValue = [
|
|
1961
|
-
[
|
|
1962
|
-
name,
|
|
1963
|
-
value
|
|
1964
|
-
],
|
|
1965
|
-
...expiresObj,
|
|
1966
|
-
[
|
|
1967
|
-
"path",
|
|
1968
|
-
"/"
|
|
1969
|
-
],
|
|
1970
|
-
[
|
|
1971
|
-
"domain",
|
|
1972
|
-
getTopLevelDomain(window.location.hostname)
|
|
1973
|
-
],
|
|
1974
|
-
...secureObj
|
|
1975
|
-
];
|
|
1976
|
-
const cookie = stringifyCookie(cookieValue);
|
|
1977
|
-
return cookie;
|
|
1978
|
-
};
|
|
1979
|
-
const setCookie = async ({ name, value, expires, canTrack }) => {
|
|
1980
|
-
try {
|
|
1981
|
-
if (!canTrack)
|
|
1982
|
-
return void 0;
|
|
1983
|
-
const cookie = createCookieString({
|
|
1984
|
-
name,
|
|
1985
|
-
value,
|
|
1986
|
-
expires
|
|
1987
|
-
});
|
|
1988
|
-
document.cookie = cookie;
|
|
1989
|
-
} catch (err) {
|
|
1990
|
-
console.warn("[COOKIE] SET error: ", err);
|
|
1991
|
-
}
|
|
1992
|
-
};
|
|
1993
|
-
const BUILDER_STORE_PREFIX = "builderio.variations";
|
|
1994
|
-
const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
|
|
1995
|
-
const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
|
|
1996
|
-
name: getContentTestKey(contentId),
|
|
1997
|
-
canTrack
|
|
1998
|
-
});
|
|
1999
|
-
const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
|
|
2000
|
-
name: getContentTestKey(contentId),
|
|
2001
|
-
value,
|
|
2002
|
-
canTrack
|
|
2003
|
-
});
|
|
2004
|
-
const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
|
|
2005
|
-
const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
|
|
2006
|
-
const getRandomVariationId = ({ id, variations }) => {
|
|
2007
|
-
let n = 0;
|
|
2008
|
-
const random = Math.random();
|
|
2009
|
-
for (const id1 in variations) {
|
|
2010
|
-
const testRatio = variations[id1]?.testRatio;
|
|
2011
|
-
n += testRatio;
|
|
2012
|
-
if (random < n)
|
|
2013
|
-
return id1;
|
|
2014
|
-
}
|
|
2015
|
-
return id;
|
|
2016
|
-
};
|
|
2017
|
-
const getTestFields = ({ item, testGroupId }) => {
|
|
2018
|
-
const variationValue = item.variations[testGroupId];
|
|
2019
|
-
if (testGroupId === item.id || !variationValue)
|
|
2020
|
-
return {
|
|
2021
|
-
testVariationId: item.id,
|
|
2022
|
-
testVariationName: "Default"
|
|
2023
|
-
};
|
|
2024
|
-
else
|
|
2025
|
-
return {
|
|
2026
|
-
data: variationValue.data,
|
|
2027
|
-
testVariationId: variationValue.id,
|
|
2028
|
-
testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
|
|
2029
|
-
};
|
|
2030
|
-
};
|
|
2031
|
-
const getContentVariation = async ({ item, canTrack }) => {
|
|
2032
|
-
const testGroupId = await getContentVariationCookie({
|
|
2033
|
-
canTrack,
|
|
2034
|
-
contentId: item.id
|
|
2035
|
-
});
|
|
2036
|
-
const testFields = testGroupId ? getTestFields({
|
|
2037
|
-
item,
|
|
2038
|
-
testGroupId
|
|
2039
|
-
}) : void 0;
|
|
2040
|
-
if (testFields)
|
|
2041
|
-
return testFields;
|
|
2042
|
-
else {
|
|
2043
|
-
const randomVariationId = getRandomVariationId({
|
|
2044
|
-
variations: item.variations,
|
|
2045
|
-
id: item.id
|
|
2046
|
-
});
|
|
2047
|
-
setContentVariationCookie({
|
|
2048
|
-
contentId: item.id,
|
|
2049
|
-
value: randomVariationId,
|
|
2050
|
-
canTrack
|
|
2051
|
-
}).catch((err) => {
|
|
2052
|
-
console.error("could not store A/B test variation: ", err);
|
|
2053
|
-
});
|
|
2054
|
-
return getTestFields({
|
|
2055
|
-
item,
|
|
2056
|
-
testGroupId: randomVariationId
|
|
2057
|
-
});
|
|
2058
|
-
}
|
|
2059
|
-
};
|
|
2060
|
-
const handleABTesting = async ({ item, canTrack }) => {
|
|
2061
|
-
if (!checkIsBuilderContentWithVariations(item))
|
|
2062
|
-
return;
|
|
2063
|
-
const variationValue = await getContentVariation({
|
|
2064
|
-
item,
|
|
2065
|
-
canTrack
|
|
2066
|
-
});
|
|
2067
|
-
Object.assign(item, variationValue);
|
|
2068
|
-
};
|
|
2069
|
-
async function getContent(options) {
|
|
2070
|
-
return (await getAllContent({
|
|
2071
|
-
...options,
|
|
2072
|
-
limit: 1
|
|
2073
|
-
})).results[0] || null;
|
|
2074
|
-
}
|
|
2075
|
-
const generateContentUrl = (options) => {
|
|
2076
|
-
const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
|
|
2077
|
-
const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
|
|
2078
|
-
const queryOptions = {
|
|
2079
|
-
...getBuilderSearchParamsFromWindow(),
|
|
2080
|
-
...normalizeSearchParams(options.options || {})
|
|
2081
|
-
};
|
|
2082
|
-
const flattened = flatten(queryOptions);
|
|
2083
|
-
for (const key in flattened)
|
|
2084
|
-
url.searchParams.set(key, String(flattened[key]));
|
|
2085
|
-
if (userAttributes)
|
|
2086
|
-
url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
|
|
2087
|
-
if (query) {
|
|
2088
|
-
const flattened1 = flatten({
|
|
2089
|
-
query
|
|
2090
|
-
});
|
|
2091
|
-
for (const key1 in flattened1)
|
|
2092
|
-
url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
|
|
2093
|
-
}
|
|
2094
|
-
return url;
|
|
2095
|
-
};
|
|
2096
|
-
async function getAllContent(options) {
|
|
2097
|
-
const url = generateContentUrl(options);
|
|
2098
|
-
const fetch2 = await getFetch();
|
|
2099
|
-
const content = await fetch2(url.href).then((res) => res.json());
|
|
2100
|
-
const canTrack = options.canTrack !== false;
|
|
2101
|
-
if (canTrack)
|
|
2102
|
-
for (const item of content.results)
|
|
2103
|
-
await handleABTesting({
|
|
2104
|
-
item,
|
|
2105
|
-
canTrack
|
|
2106
|
-
});
|
|
2107
|
-
return content;
|
|
2108
|
-
}
|
|
2109
|
-
function isPreviewing() {
|
|
2110
|
-
if (!isBrowser())
|
|
2111
|
-
return false;
|
|
2112
|
-
if (isEditing())
|
|
2113
|
-
return false;
|
|
2114
|
-
return Boolean(location.search.indexOf("builder.preview=") !== -1);
|
|
2115
|
-
}
|
|
2116
|
-
const components = [];
|
|
2117
|
-
function registerComponent(component3, info) {
|
|
2118
|
-
components.push({
|
|
2119
|
-
component: component3,
|
|
2120
|
-
...info
|
|
2121
|
-
});
|
|
2122
|
-
console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
|
|
2123
|
-
return component3;
|
|
2124
|
-
}
|
|
2125
|
-
const createRegisterComponentMessage = ({ component: _, ...info }) => ({
|
|
2126
|
-
type: "builder.registerComponent",
|
|
2127
|
-
data: prepareComponentInfoToSend(info)
|
|
2128
|
-
});
|
|
2129
|
-
const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
|
|
2130
|
-
const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
|
|
2131
|
-
const serializeFn = (fnValue) => {
|
|
2132
|
-
const fnStr = fnValue.toString().trim();
|
|
2133
|
-
const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
|
|
2134
|
-
return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
|
|
2135
|
-
};
|
|
2136
|
-
const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
|
|
2137
|
-
...fastClone(info),
|
|
2138
|
-
inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
|
|
2139
|
-
...acc,
|
|
2140
|
-
[key]: serializeValue(value)
|
|
2141
|
-
}), {}))
|
|
2142
|
-
});
|
|
2143
|
-
function uuidv4() {
|
|
2144
|
-
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
|
|
2145
|
-
const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
|
|
2146
|
-
return v.toString(16);
|
|
2147
|
-
});
|
|
2148
|
-
}
|
|
2149
|
-
function uuid() {
|
|
2150
|
-
return uuidv4().replace(/-/g, "");
|
|
2151
|
-
}
|
|
2152
|
-
const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
|
|
2153
|
-
const getSessionId = async ({ canTrack }) => {
|
|
2154
|
-
if (!canTrack)
|
|
2155
|
-
return void 0;
|
|
2156
|
-
const sessionId = await getCookie({
|
|
2157
|
-
name: SESSION_LOCAL_STORAGE_KEY,
|
|
2158
|
-
canTrack
|
|
2159
|
-
});
|
|
2160
|
-
if (checkIsDefined(sessionId))
|
|
2161
|
-
return sessionId;
|
|
2162
|
-
else {
|
|
2163
|
-
const newSessionId = createSessionId();
|
|
2164
|
-
setSessionId({
|
|
2165
|
-
id: newSessionId,
|
|
2166
|
-
canTrack
|
|
2167
|
-
});
|
|
2168
|
-
}
|
|
2169
|
-
};
|
|
2170
|
-
const createSessionId = () => uuid();
|
|
2171
|
-
const setSessionId = ({ id, canTrack }) => setCookie({
|
|
2172
|
-
name: SESSION_LOCAL_STORAGE_KEY,
|
|
2173
|
-
value: id,
|
|
2174
|
-
canTrack
|
|
2175
|
-
});
|
|
2176
|
-
const getLocalStorage = () => isBrowser() && typeof localStorage !== "undefined" ? localStorage : void 0;
|
|
2177
|
-
const getLocalStorageItem = ({ key, canTrack }) => {
|
|
2178
|
-
try {
|
|
2179
|
-
if (canTrack)
|
|
2180
|
-
return getLocalStorage()?.getItem(key);
|
|
2181
|
-
return void 0;
|
|
2182
|
-
} catch (err) {
|
|
2183
|
-
console.debug("[LocalStorage] GET error: ", err);
|
|
2184
|
-
}
|
|
2185
|
-
};
|
|
2186
|
-
const setLocalStorageItem = ({ key, canTrack, value }) => {
|
|
2187
|
-
try {
|
|
2188
|
-
if (canTrack)
|
|
2189
|
-
getLocalStorage()?.setItem(key, value);
|
|
2190
|
-
} catch (err) {
|
|
2191
|
-
console.debug("[LocalStorage] SET error: ", err);
|
|
2192
|
-
}
|
|
2193
|
-
};
|
|
2194
|
-
const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
|
|
2195
|
-
const getVisitorId = ({ canTrack }) => {
|
|
2196
|
-
if (!canTrack)
|
|
2197
|
-
return void 0;
|
|
2198
|
-
const visitorId = getLocalStorageItem({
|
|
2199
|
-
key: VISITOR_LOCAL_STORAGE_KEY,
|
|
2200
|
-
canTrack
|
|
2201
|
-
});
|
|
2202
|
-
if (checkIsDefined(visitorId))
|
|
2203
|
-
return visitorId;
|
|
2204
|
-
else {
|
|
2205
|
-
const newVisitorId = createVisitorId();
|
|
2206
|
-
setVisitorId({
|
|
2207
|
-
id: newVisitorId,
|
|
2208
|
-
canTrack
|
|
2209
|
-
});
|
|
2210
|
-
}
|
|
2211
|
-
};
|
|
2212
|
-
const createVisitorId = () => uuid();
|
|
2213
|
-
const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
|
|
2214
|
-
key: VISITOR_LOCAL_STORAGE_KEY,
|
|
2215
|
-
value: id,
|
|
2216
|
-
canTrack
|
|
2217
|
-
});
|
|
2218
|
-
const getTrackingEventData = async ({ canTrack }) => {
|
|
2219
|
-
if (!canTrack)
|
|
2220
|
-
return {
|
|
2221
|
-
visitorId: void 0,
|
|
2222
|
-
sessionId: void 0
|
|
2223
|
-
};
|
|
2224
|
-
const sessionId = await getSessionId({
|
|
2225
|
-
canTrack
|
|
2226
|
-
});
|
|
2227
|
-
const visitorId = getVisitorId({
|
|
2228
|
-
canTrack
|
|
2229
|
-
});
|
|
2230
|
-
return {
|
|
2231
|
-
sessionId,
|
|
2232
|
-
visitorId
|
|
2233
|
-
};
|
|
2234
|
-
};
|
|
2235
|
-
const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
|
|
2236
|
-
type: eventType,
|
|
2237
|
-
data: {
|
|
2238
|
-
...properties,
|
|
2239
|
-
...await getTrackingEventData({
|
|
2240
|
-
canTrack
|
|
2241
|
-
}),
|
|
2242
|
-
ownerId: orgId,
|
|
2243
|
-
contentId
|
|
2244
|
-
}
|
|
2245
|
-
});
|
|
2246
|
-
async function track(eventProps) {
|
|
2247
|
-
if (!eventProps.canTrack)
|
|
2248
|
-
return;
|
|
2249
|
-
if (isEditing())
|
|
2250
|
-
return;
|
|
2251
|
-
if (!(isBrowser() || TARGET === "reactNative"))
|
|
2252
|
-
return;
|
|
2253
|
-
return fetch(`https://builder.io/api/v1/track`, {
|
|
2254
|
-
method: "POST",
|
|
2255
|
-
body: JSON.stringify({
|
|
2256
|
-
events: [
|
|
2257
|
-
await createEvent(eventProps)
|
|
2258
|
-
]
|
|
2259
|
-
}),
|
|
2260
|
-
headers: {
|
|
2261
|
-
"content-type": "application/json"
|
|
2262
|
-
},
|
|
2263
|
-
mode: "cors"
|
|
2264
|
-
}).catch((err) => {
|
|
2265
|
-
console.error("Failed to track: ", err);
|
|
2266
|
-
});
|
|
2267
|
-
}
|
|
2268
|
-
const getCssFromFont = function getCssFromFont2(props, state, font) {
|
|
2269
|
-
const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
|
|
2270
|
-
const name = family.split(",")[0];
|
|
2271
|
-
const url = font.fileUrl ?? font?.files?.regular;
|
|
2272
|
-
let str = "";
|
|
2273
|
-
if (url && family && name)
|
|
2274
|
-
str += `
|
|
2275
|
-
@font-face {
|
|
2276
|
-
font-family: "${family}";
|
|
2277
|
-
src: local("${name}"), url('${url}') format('woff2');
|
|
2278
|
-
font-display: fallback;
|
|
2279
|
-
font-weight: 400;
|
|
2280
|
-
}
|
|
2281
|
-
`.trim();
|
|
2282
|
-
if (font.files)
|
|
2283
|
-
for (const weight in font.files) {
|
|
2284
|
-
const isNumber = String(Number(weight)) === weight;
|
|
2285
|
-
if (!isNumber)
|
|
2286
|
-
continue;
|
|
2287
|
-
const weightUrl = font.files[weight];
|
|
2288
|
-
if (weightUrl && weightUrl !== url)
|
|
2289
|
-
str += `
|
|
2290
|
-
@font-face {
|
|
2291
|
-
font-family: "${family}";
|
|
2292
|
-
src: url('${weightUrl}') format('woff2');
|
|
2293
|
-
font-display: fallback;
|
|
2294
|
-
font-weight: ${weight};
|
|
2295
|
-
}
|
|
2296
|
-
`.trim();
|
|
2297
|
-
}
|
|
2298
|
-
return str;
|
|
2299
|
-
};
|
|
2300
|
-
const getFontCss = function getFontCss2(props, state, { customFonts }) {
|
|
2301
|
-
return customFonts?.map((font) => getCssFromFont(props, state, font))?.join(" ") || "";
|
|
2302
|
-
};
|
|
2303
|
-
const injectedStyles = function injectedStyles2(props, state) {
|
|
2304
|
-
return `
|
|
2305
|
-
${props.cssCode || ""}
|
|
2306
|
-
${getFontCss(props, state, {
|
|
2307
|
-
customFonts: props.customFonts
|
|
2308
|
-
})}`;
|
|
2309
|
-
};
|
|
2310
|
-
const RenderContentStyles = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
2311
|
-
const state = {
|
|
2312
|
-
tagName: ""
|
|
2313
|
-
};
|
|
2314
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
|
|
2315
|
-
styles: injectedStyles(props, state)
|
|
2316
|
-
});
|
|
2317
|
-
}, "RenderContentStyles_component_Og0xL34Zbvc"));
|
|
2318
|
-
const RenderContentStyles$1 = RenderContentStyles;
|
|
2319
|
-
const useContent = function useContent2(props, state, elementRef) {
|
|
2320
|
-
if (!props.content && !state.overrideContent)
|
|
2321
|
-
return void 0;
|
|
2322
|
-
const mergedContent = {
|
|
2323
|
-
...props.content,
|
|
2324
|
-
...state.overrideContent,
|
|
2325
|
-
data: {
|
|
2326
|
-
...props.content?.data,
|
|
2327
|
-
...props.data,
|
|
2328
|
-
...state.overrideContent?.data
|
|
2329
|
-
}
|
|
2330
|
-
};
|
|
2331
|
-
return mergedContent;
|
|
2332
|
-
};
|
|
2333
|
-
const canTrackToUse = function canTrackToUse2(props, state, elementRef) {
|
|
2334
|
-
return props.canTrack || true;
|
|
2335
|
-
};
|
|
2336
|
-
const contentState = function contentState2(props, state, elementRef) {
|
|
2337
|
-
return {
|
|
2338
|
-
...props.content?.data?.state,
|
|
2339
|
-
...props.data,
|
|
2340
|
-
...state.overrideState
|
|
2341
|
-
};
|
|
2342
|
-
};
|
|
2343
|
-
const contextContext = function contextContext2(props, state, elementRef) {
|
|
2344
|
-
return props.context || {};
|
|
2345
|
-
};
|
|
2346
|
-
const allRegisteredComponents = function allRegisteredComponents2(props, state, elementRef) {
|
|
2347
|
-
const allComponentsArray = [
|
|
2348
|
-
...getDefaultRegisteredComponents(),
|
|
2349
|
-
...components,
|
|
2350
|
-
...props.customComponents || []
|
|
2351
|
-
];
|
|
2352
|
-
const allComponents = allComponentsArray.reduce((acc, curr) => ({
|
|
2353
|
-
...acc,
|
|
2354
|
-
[curr.name]: curr
|
|
2355
|
-
}), {});
|
|
2356
|
-
return allComponents;
|
|
2357
|
-
};
|
|
2358
|
-
const processMessage = function processMessage2(props, state, elementRef, event) {
|
|
2359
|
-
const { data } = event;
|
|
2360
|
-
if (data)
|
|
2361
|
-
switch (data.type) {
|
|
2362
|
-
case "builder.contentUpdate": {
|
|
2363
|
-
const messageContent = data.data;
|
|
2364
|
-
const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
|
|
2365
|
-
const contentData = messageContent.data;
|
|
2366
|
-
if (key === props.model) {
|
|
2367
|
-
state.overrideContent = contentData;
|
|
2368
|
-
state.forceReRenderCount = state.forceReRenderCount + 1;
|
|
2369
|
-
}
|
|
2370
|
-
break;
|
|
2371
|
-
}
|
|
2372
|
-
}
|
|
2373
|
-
};
|
|
2374
|
-
const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
|
|
2375
|
-
const jsCode = useContent(props, state)?.data?.jsCode;
|
|
2376
|
-
if (jsCode)
|
|
2377
|
-
evaluate({
|
|
2378
|
-
code: jsCode,
|
|
2379
|
-
context: contextContext(props),
|
|
2380
|
-
state: contentState(props, state)
|
|
2381
|
-
});
|
|
2382
|
-
};
|
|
2383
|
-
const httpReqsData = function httpReqsData2(props, state, elementRef) {
|
|
2384
|
-
return {};
|
|
2385
|
-
};
|
|
2386
|
-
const onClick2 = function onClick3(props, state, elementRef, _event) {
|
|
2387
|
-
if (useContent(props, state))
|
|
2388
|
-
track({
|
|
2389
|
-
type: "click",
|
|
2390
|
-
canTrack: canTrackToUse(props),
|
|
2391
|
-
contentId: useContent(props, state)?.id,
|
|
2392
|
-
orgId: props.apiKey
|
|
2393
|
-
});
|
|
2394
|
-
};
|
|
2395
|
-
const evalExpression = function evalExpression2(props, state, elementRef, expression) {
|
|
2396
|
-
return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
|
|
2397
|
-
code: group,
|
|
2398
|
-
context: contextContext(props),
|
|
2399
|
-
state: contentState(props, state)
|
|
2400
|
-
}));
|
|
2401
|
-
};
|
|
2402
|
-
const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
|
|
2403
|
-
getFetch().then((fetch2) => fetch2(url)).then((response) => response.json()).then((json) => {
|
|
2404
|
-
const newOverrideState = {
|
|
2405
|
-
...state.overrideState,
|
|
2406
|
-
[key]: json
|
|
2407
|
-
};
|
|
2408
|
-
state.overrideState = newOverrideState;
|
|
2409
|
-
}).catch((err) => {
|
|
2410
|
-
console.log("error fetching dynamic data", url, err);
|
|
2411
|
-
});
|
|
2412
|
-
};
|
|
2413
|
-
const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
|
|
2414
|
-
const requests = useContent(props, state)?.data?.httpRequests ?? {};
|
|
2415
|
-
Object.entries(requests).forEach(([key, url]) => {
|
|
2416
|
-
if (url && (!httpReqsData()[key] || isEditing())) {
|
|
2417
|
-
const evaluatedUrl = evalExpression(props, state, elementRef, url);
|
|
2418
|
-
handleRequest(props, state, elementRef, {
|
|
2419
|
-
url: evaluatedUrl,
|
|
2420
|
-
key
|
|
2421
|
-
});
|
|
2422
|
-
}
|
|
2423
|
-
});
|
|
2424
|
-
};
|
|
2425
|
-
const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
|
|
2426
|
-
if (isEditing())
|
|
2427
|
-
window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
|
|
2428
|
-
detail: {
|
|
2429
|
-
state: contentState(props, state),
|
|
2430
|
-
ref: {
|
|
2431
|
-
name: props.model
|
|
2432
|
-
}
|
|
2433
|
-
}
|
|
2434
|
-
}));
|
|
2435
|
-
};
|
|
2436
|
-
const shouldRenderContentStyles = function shouldRenderContentStyles2(props, state, elementRef) {
|
|
2437
|
-
return Boolean((useContent(props, state)?.data?.cssCode || useContent(props, state)?.data?.customFonts?.length) && TARGET !== "reactNative");
|
|
2438
|
-
};
|
|
2439
|
-
const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
2440
|
-
const elementRef = qwik.useRef();
|
|
2441
|
-
const state = qwik.useStore({
|
|
2442
|
-
forceReRenderCount: 0,
|
|
2443
|
-
overrideContent: null,
|
|
2444
|
-
overrideState: {},
|
|
2445
|
-
update: 0
|
|
2446
|
-
});
|
|
2447
|
-
qwik.useContextProvider(BuilderContext, qwik.useStore({
|
|
2448
|
-
content: (() => {
|
|
2449
|
-
return useContent(props, state);
|
|
2450
|
-
})(),
|
|
2451
|
-
state: (() => {
|
|
2452
|
-
return contentState(props, state);
|
|
2453
|
-
})(),
|
|
2454
|
-
context: (() => {
|
|
2455
|
-
return contextContext(props);
|
|
2456
|
-
})(),
|
|
2457
|
-
apiKey: (() => {
|
|
2458
|
-
return props.apiKey;
|
|
2459
|
-
})(),
|
|
2460
|
-
registeredComponents: (() => {
|
|
2461
|
-
return allRegisteredComponents(props);
|
|
2462
|
-
})()
|
|
2463
|
-
}));
|
|
2464
|
-
qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
|
|
2465
|
-
const [elementRef2, props2, state2] = qwik.useLexicalScope();
|
|
2466
|
-
if (isBrowser()) {
|
|
2467
|
-
if (isEditing()) {
|
|
2468
|
-
state2.forceReRenderCount = state2.forceReRenderCount + 1;
|
|
2469
|
-
registerInsertMenu();
|
|
2470
|
-
setupBrowserForEditing();
|
|
2471
|
-
Object.values(allRegisteredComponents(props2)).forEach((registeredComponent) => {
|
|
2472
|
-
const message = createRegisterComponentMessage(registeredComponent);
|
|
2473
|
-
window.parent?.postMessage(message, "*");
|
|
2474
|
-
});
|
|
2475
|
-
window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
|
|
2476
|
-
window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
|
|
2477
|
-
}
|
|
2478
|
-
if (useContent(props2, state2))
|
|
2479
|
-
track({
|
|
2480
|
-
type: "impression",
|
|
2481
|
-
canTrack: canTrackToUse(props2),
|
|
2482
|
-
contentId: useContent(props2, state2)?.id,
|
|
2483
|
-
orgId: props2.apiKey
|
|
2484
|
-
});
|
|
2485
|
-
if (isPreviewing()) {
|
|
2486
|
-
const searchParams = new URL(location.href).searchParams;
|
|
2487
|
-
if (props2.model && searchParams.get("builder.preview") === props2.model) {
|
|
2488
|
-
const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
|
|
2489
|
-
if (previewApiKey)
|
|
2490
|
-
getContent({
|
|
2491
|
-
model: props2.model,
|
|
2492
|
-
apiKey: previewApiKey
|
|
2493
|
-
}).then((content) => {
|
|
2494
|
-
if (content)
|
|
2495
|
-
state2.overrideContent = content;
|
|
2496
|
-
});
|
|
2497
|
-
}
|
|
2498
|
-
}
|
|
2499
|
-
evaluateJsCode(props2, state2);
|
|
2500
|
-
runHttpRequests(props2, state2, elementRef2);
|
|
2501
|
-
emitStateUpdate(props2, state2);
|
|
2502
|
-
}
|
|
2503
|
-
}, "RenderContent_component_useClientEffect_cA0sVHIkr5g", [
|
|
2504
|
-
elementRef,
|
|
2505
|
-
props,
|
|
2506
|
-
state
|
|
2507
|
-
]));
|
|
2508
|
-
qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
|
|
2509
|
-
const [elementRef2, props2, state2] = qwik.useLexicalScope();
|
|
2510
|
-
state2.useContent?.data && track2(state2.useContent?.data, "jsCode");
|
|
2511
|
-
evaluateJsCode(props2, state2);
|
|
2512
|
-
}, "RenderContent_component_useWatch_OIBatobA0hE", [
|
|
2513
|
-
elementRef,
|
|
2514
|
-
props,
|
|
2515
|
-
state
|
|
2516
|
-
]));
|
|
2517
|
-
qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
|
|
2518
|
-
const [elementRef2, props2, state2] = qwik.useLexicalScope();
|
|
2519
|
-
state2.useContent?.data && track2(state2.useContent?.data, "httpRequests");
|
|
2520
|
-
runHttpRequests(props2, state2, elementRef2);
|
|
2521
|
-
}, "RenderContent_component_useWatch_1_LQM67VNl14k", [
|
|
2522
|
-
elementRef,
|
|
2523
|
-
props,
|
|
2524
|
-
state
|
|
2525
|
-
]));
|
|
2526
|
-
qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
|
|
2527
|
-
const [elementRef2, props2, state2] = qwik.useLexicalScope();
|
|
2528
|
-
state2 && track2(state2, "contentState");
|
|
2529
|
-
emitStateUpdate(props2, state2);
|
|
2530
|
-
}, "RenderContent_component_useWatch_2_aGi0RpYNBO0", [
|
|
2531
|
-
elementRef,
|
|
2532
|
-
props,
|
|
2533
|
-
state
|
|
2534
|
-
]));
|
|
2535
|
-
qwik.useCleanupQrl(qwik.inlinedQrl(() => {
|
|
2536
|
-
const [elementRef2, props2, state2] = qwik.useLexicalScope();
|
|
2537
|
-
if (isBrowser()) {
|
|
2538
|
-
window.removeEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
|
|
2539
|
-
window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
|
|
2540
|
-
}
|
|
2541
|
-
}, "RenderContent_component_useCleanup_FwcO310HVAI", [
|
|
2542
|
-
elementRef,
|
|
2543
|
-
props,
|
|
2544
|
-
state
|
|
2545
|
-
]));
|
|
2546
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
2547
|
-
children: useContent(props, state) ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
2548
|
-
ref: elementRef,
|
|
2549
|
-
onClick$: qwik.inlinedQrl((event) => {
|
|
2550
|
-
const [elementRef2, props2, state2] = qwik.useLexicalScope();
|
|
2551
|
-
return onClick2(props2, state2);
|
|
2552
|
-
}, "RenderContent_component__Fragment_div_onClick_wLg5o3ZkpC0", [
|
|
2553
|
-
elementRef,
|
|
2554
|
-
props,
|
|
2555
|
-
state
|
|
2556
|
-
]),
|
|
2557
|
-
"builder-content-id": useContent(props, state)?.id,
|
|
2558
|
-
children: [
|
|
2559
|
-
shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsxRuntime.jsx(RenderContentStyles$1, {
|
|
2560
|
-
cssCode: useContent(props, state)?.data?.cssCode,
|
|
2561
|
-
customFonts: useContent(props, state)?.data?.customFonts
|
|
2562
|
-
}) : null,
|
|
2563
|
-
/* @__PURE__ */ jsxRuntime.jsx(RenderBlocks$1, {
|
|
2564
|
-
blocks: markMutable(useContent(props, state)?.data?.blocks)
|
|
2565
|
-
}, state.forceReRenderCount)
|
|
2566
|
-
]
|
|
2567
|
-
}) : null
|
|
2568
|
-
});
|
|
2569
|
-
}, "RenderContent_component_hEAI0ahViXM"));
|
|
2570
|
-
const RenderContent$1 = RenderContent;
|
|
2571
|
-
const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
|
|
2572
|
-
const builderContext = qwik.useContext(BuilderContext);
|
|
2573
|
-
const state = qwik.useStore({
|
|
2574
|
-
className: "builder-symbol",
|
|
2575
|
-
content: null
|
|
2576
|
-
});
|
|
2577
|
-
qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
|
|
2578
|
-
const [props2, state2] = qwik.useLexicalScope();
|
|
2579
|
-
state2.content = props2.symbol?.content;
|
|
2580
|
-
}, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
|
|
2581
|
-
props,
|
|
2582
|
-
state
|
|
2583
|
-
]));
|
|
2584
|
-
qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
|
|
2585
|
-
const [builderContext2, props2, state2] = qwik.useLexicalScope();
|
|
2586
|
-
props2 && track2(props2, "symbol");
|
|
2587
|
-
state2 && track2(state2, "content");
|
|
2588
|
-
const symbolToUse = props2.symbol;
|
|
2589
|
-
if (symbolToUse && !symbolToUse.content && !state2.content && symbolToUse.model)
|
|
2590
|
-
getContent({
|
|
2591
|
-
model: symbolToUse.model,
|
|
2592
|
-
apiKey: builderContext2.apiKey,
|
|
2593
|
-
query: {
|
|
2594
|
-
id: symbolToUse.entry
|
|
2595
|
-
}
|
|
2596
|
-
}).then((response) => {
|
|
2597
|
-
state2.content = response;
|
|
2598
|
-
});
|
|
2599
|
-
}, "Symbol_component_useWatch_9HNT04zd0Dk", [
|
|
2600
|
-
builderContext,
|
|
2601
|
-
props,
|
|
2602
|
-
state
|
|
2603
|
-
]));
|
|
2604
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
2605
|
-
...props.attributes,
|
|
2606
|
-
class: state.className,
|
|
2607
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent$1, {
|
|
2608
|
-
apiKey: builderContext.apiKey,
|
|
2609
|
-
context: builderContext.context,
|
|
2610
|
-
customComponents: markMutable(Object.values(builderContext.registeredComponents)),
|
|
2611
|
-
data: markMutable({
|
|
2612
|
-
...props.symbol?.data,
|
|
2613
|
-
...builderContext.state,
|
|
2614
|
-
...props.symbol?.content?.data?.state
|
|
2615
|
-
}),
|
|
2616
|
-
model: props.symbol?.model,
|
|
2617
|
-
content: markMutable(state.content)
|
|
2618
|
-
})
|
|
2619
|
-
});
|
|
2620
|
-
}, "Symbol_component_WVvggdkUPdk"));
|
|
2621
|
-
const Symbol$2 = Symbol$1;
|
|
2622
|
-
const settings = {};
|
|
2623
|
-
function setEditorSettings(newSettings) {
|
|
2624
|
-
if (isBrowser()) {
|
|
2625
|
-
Object.assign(settings, newSettings);
|
|
2626
|
-
const message = {
|
|
2627
|
-
type: "builder.settingsChange",
|
|
2628
|
-
data: settings
|
|
2629
|
-
};
|
|
2630
|
-
parent.postMessage(message, "*");
|
|
2631
|
-
}
|
|
2632
|
-
}
|
|
2633
|
-
exports.Button = Button$1;
|
|
2634
|
-
exports.Columns = Columns$1;
|
|
2635
|
-
exports.Fragment = Fragment;
|
|
2636
|
-
exports.Image = Image$1;
|
|
2637
|
-
exports.RenderBlocks = RenderBlocks$1;
|
|
2638
|
-
exports.RenderContent = RenderContent$1;
|
|
2639
|
-
exports.Section = Section;
|
|
2640
|
-
exports.Symbol = Symbol$2;
|
|
2641
|
-
exports.Text = Text$1;
|
|
2642
|
-
exports.Video = Video$1;
|
|
2643
|
-
exports.components = components;
|
|
2644
|
-
exports.convertSearchParamsToQueryObject = convertSearchParamsToQueryObject;
|
|
2645
|
-
exports.createRegisterComponentMessage = createRegisterComponentMessage;
|
|
2646
|
-
exports.generateContentUrl = generateContentUrl;
|
|
2647
|
-
exports.getAllContent = getAllContent;
|
|
2648
|
-
exports.getBuilderSearchParams = getBuilderSearchParams;
|
|
2649
|
-
exports.getBuilderSearchParamsFromWindow = getBuilderSearchParamsFromWindow;
|
|
2650
|
-
exports.getContent = getContent;
|
|
2651
|
-
exports.isEditing = isEditing;
|
|
2652
|
-
exports.isPreviewing = isPreviewing;
|
|
2653
|
-
exports.normalizeSearchParams = normalizeSearchParams;
|
|
2654
|
-
exports.register = register;
|
|
2655
|
-
exports.registerComponent = registerComponent;
|
|
2656
|
-
exports.setEditorSettings = setEditorSettings;
|