@builder.io/sdk-qwik 0.5.3-2 → 0.5.3-4

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.
@@ -1,4096 +0,0 @@
1
- import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, createContextId, _jsxQ, _jsxBranch, useStore, useComputedQrl, useLexicalScope, _IMMUTABLE, Slot, useContextProvider, _wrapProp, useContext, createElement, Fragment as Fragment$1, useSignal, useTaskQrl, useVisibleTaskQrl } from "@builder.io/qwik";
2
- import { Fragment } from "@builder.io/qwik/jsx-runtime";
3
- const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
4
- useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
5
- return /* @__PURE__ */ _jsxC(Fragment, {
6
- children: props.link ? /* @__PURE__ */ _jsxS("a", {
7
- ...props.attributes,
8
- children: _fnSignal((p0) => p0.text, [
9
- props
10
- ], "p0.text")
11
- }, {
12
- role: "button",
13
- href: _fnSignal((p0) => p0.link, [
14
- props
15
- ], "p0.link"),
16
- target: _fnSignal((p0) => p0.openLinkInNewTab ? "_blank" : void 0, [
17
- props
18
- ], 'p0.openLinkInNewTab?"_blank":undefined')
19
- }, 0, "jc_0") : /* @__PURE__ */ _jsxS("button", {
20
- ...props.attributes,
21
- children: _fnSignal((p0) => p0.text, [
22
- props
23
- ], "p0.text")
24
- }, {
25
- style: _fnSignal((p0) => p0.attributes.style, [
26
- props
27
- ], "p0.attributes.style"),
28
- class: _fnSignal((p0) => p0.attributes.class + " button-Button", [
29
- props
30
- ], 'p0.attributes.class+" button-Button"')
31
- }, 0, null)
32
- }, 1, "jc_1");
33
- }, "Button_component_gJoMUICXoUQ"));
34
- const STYLES$3 = `
35
- .button-Button {
36
- all: unset;
37
- }
38
- `;
39
- const builderContext = createContextId("Builder");
40
- const ComponentsContext = createContextId("Components");
41
- function getBlockComponentOptions(block) {
42
- return {
43
- ...block.component?.options,
44
- ...block.options,
45
- builderBlock: block
46
- };
47
- }
48
- const MSG_PREFIX = "[Builder.io]: ";
49
- const logger = {
50
- log: (...message) => console.log(MSG_PREFIX, ...message),
51
- error: (...message) => console.error(MSG_PREFIX, ...message),
52
- warn: (...message) => console.warn(MSG_PREFIX, ...message),
53
- debug: (...message) => console.debug(MSG_PREFIX, ...message)
54
- };
55
- function isBrowser() {
56
- return typeof window !== "undefined" && typeof document !== "undefined";
57
- }
58
- const TARGET = "qwik";
59
- function isIframe() {
60
- return isBrowser() && window.self !== window.top;
61
- }
62
- function isEditing() {
63
- return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
64
- }
65
- function isNonNodeServer() {
66
- const hasNode = () => typeof process !== "undefined" && process?.versions?.node;
67
- return !isBrowser() && !hasNode();
68
- }
69
- let runInNonNode;
70
- (async () => {
71
- if (!isBrowser()) {
72
- console.log("importing edge runtime");
73
- import("./non-node-runtime.18086743.js").then((x) => {
74
- console.log("success edge runtime");
75
- runInNonNode = x.runInNonNode;
76
- }).catch((e) => {
77
- console.error("error importing edge runtime", e);
78
- });
79
- }
80
- })();
81
- function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
82
- if (code === "") {
83
- logger.warn("Skipping evaluation of empty code block.");
84
- return;
85
- }
86
- const builder = {
87
- isEditing: isEditing(),
88
- isBrowser: isBrowser(),
89
- isServer: !isBrowser()
90
- };
91
- const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
92
- const useCode = useReturn ? `return (${code});` : code;
93
- const args = {
94
- useCode,
95
- builder,
96
- context,
97
- event,
98
- rootSetState,
99
- rootState,
100
- localState
101
- };
102
- if (isBrowser())
103
- return runInBrowser(args);
104
- if (isNonNodeServer())
105
- return runInNonNode(args);
106
- return runInNonNode(args);
107
- }
108
- const runInBrowser = ({ useCode, builder, context, event, localState, rootSetState, rootState }) => {
109
- const state = flattenState(rootState, localState, rootSetState);
110
- try {
111
- return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
112
- } catch (e) {
113
- logger.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
114
- }
115
- };
116
- function flattenState(rootState, localState, rootSetState) {
117
- if (rootState === localState)
118
- throw new Error("rootState === localState");
119
- return new Proxy(rootState, {
120
- get: (_, prop) => {
121
- if (localState && prop in localState)
122
- return localState[prop];
123
- return rootState[prop];
124
- },
125
- set: (_, prop, value) => {
126
- if (localState && prop in localState)
127
- throw new Error("Writing to local state is not allowed as it is read-only.");
128
- rootState[prop] = value;
129
- rootSetState?.(rootState);
130
- return true;
131
- }
132
- });
133
- }
134
- const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
135
- const set = (obj, _path, value) => {
136
- if (Object(obj) !== obj)
137
- return obj;
138
- const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
139
- 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;
140
- return obj;
141
- };
142
- function transformBlock(block) {
143
- return block;
144
- }
145
- const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
146
- if (!block.bindings)
147
- return block;
148
- const copy = fastClone(block);
149
- const copied = {
150
- ...copy,
151
- properties: {
152
- ...copy.properties
153
- },
154
- actions: {
155
- ...copy.actions
156
- }
157
- };
158
- for (const binding in block.bindings) {
159
- const expression = block.bindings[binding];
160
- const value = evaluate({
161
- code: expression,
162
- localState,
163
- rootState,
164
- rootSetState,
165
- context
166
- });
167
- set(copied, binding, value);
168
- }
169
- return copied;
170
- };
171
- function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
172
- const transformedBlock = transformBlock(block);
173
- if (shouldEvaluateBindings)
174
- return evaluateBindings({
175
- block: transformedBlock,
176
- localState,
177
- rootState,
178
- rootSetState,
179
- context
180
- });
181
- else
182
- return transformedBlock;
183
- }
184
- const EMPTY_HTML_ELEMENTS = [
185
- "area",
186
- "base",
187
- "br",
188
- "col",
189
- "embed",
190
- "hr",
191
- "img",
192
- "input",
193
- "keygen",
194
- "link",
195
- "meta",
196
- "param",
197
- "source",
198
- "track",
199
- "wbr"
200
- ];
201
- const isEmptyHtmlElement = (tagName) => {
202
- return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
203
- };
204
- const getComponent = ({ block, context, registeredComponents }) => {
205
- const componentName = getProcessedBlock({
206
- block,
207
- localState: context.localState,
208
- rootState: context.rootState,
209
- rootSetState: context.rootSetState,
210
- context: context.context,
211
- shouldEvaluateBindings: false
212
- }).component?.name;
213
- if (!componentName)
214
- return null;
215
- const ref = registeredComponents[componentName];
216
- if (!ref) {
217
- console.warn(`
218
- Could not find a registered component named "${componentName}".
219
- If you registered it, is the file that registered it imported by the file that needs to render it?`);
220
- return void 0;
221
- } else
222
- return ref;
223
- };
224
- const getRepeatItemData = ({ block, context }) => {
225
- const { repeat, ...blockWithoutRepeat } = block;
226
- if (!repeat?.collection)
227
- return void 0;
228
- const itemsArray = evaluate({
229
- code: repeat.collection,
230
- localState: context.localState,
231
- rootState: context.rootState,
232
- rootSetState: context.rootSetState,
233
- context: context.context
234
- });
235
- if (!Array.isArray(itemsArray))
236
- return void 0;
237
- const collectionName = repeat.collection.split(".").pop();
238
- const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
239
- const repeatArray = itemsArray.map((item, index) => ({
240
- context: {
241
- ...context,
242
- localState: {
243
- ...context.localState,
244
- $index: index,
245
- $item: item,
246
- [itemNameToUse]: item,
247
- [`$${itemNameToUse}Index`]: index
248
- }
249
- },
250
- block: blockWithoutRepeat
251
- }));
252
- return repeatArray;
253
- };
254
- const SIZES = {
255
- small: {
256
- min: 320,
257
- default: 321,
258
- max: 640
259
- },
260
- medium: {
261
- min: 641,
262
- default: 642,
263
- max: 991
264
- },
265
- large: {
266
- min: 990,
267
- default: 991,
268
- max: 1200
269
- }
270
- };
271
- const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
272
- const getSizesForBreakpoints = ({ small, medium }) => {
273
- const newSizes = fastClone(SIZES);
274
- if (!small || !medium)
275
- return newSizes;
276
- const smallMin = Math.floor(small / 2);
277
- newSizes.small = {
278
- max: small,
279
- min: smallMin,
280
- default: smallMin + 1
281
- };
282
- const mediumMin = newSizes.small.max + 1;
283
- newSizes.medium = {
284
- max: medium,
285
- min: mediumMin,
286
- default: mediumMin + 1
287
- };
288
- const largeMin = newSizes.medium.max + 1;
289
- newSizes.large = {
290
- max: 2e3,
291
- min: largeMin,
292
- default: largeMin + 1
293
- };
294
- return newSizes;
295
- };
296
- const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
297
- const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
298
- const convertStyleMapToCSSArray = (style) => {
299
- const cssProps = Object.entries(style).map(([key, value]) => {
300
- if (typeof value === "string")
301
- return `${camelToKebabCase(key)}: ${value};`;
302
- else
303
- return void 0;
304
- });
305
- return cssProps.filter(checkIsDefined);
306
- };
307
- const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
308
- const createCssClass = ({ mediaQuery, className, styles }) => {
309
- const cssClass = `.${className} {
310
- ${convertStyleMapToCSS(styles)}
311
- }`;
312
- if (mediaQuery)
313
- return `${mediaQuery} {
314
- ${cssClass}
315
- }`;
316
- else
317
- return cssClass;
318
- };
319
- const InlinedStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
320
- return /* @__PURE__ */ _jsxQ("style", null, {
321
- dangerouslySetInnerHTML: _fnSignal((p0) => p0.styles, [
322
- props
323
- ], "p0.styles"),
324
- id: _fnSignal((p0) => p0.id, [
325
- props
326
- ], "p0.id")
327
- }, null, 3, "NG_0");
328
- }, "InlinedStyles_component_IOsg46hMexk"));
329
- const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
330
- _jsxBranch();
331
- const state = useStore({
332
- processedBlock: getProcessedBlock({
333
- block: props.block,
334
- localState: props.context.localState,
335
- rootState: props.context.rootState,
336
- rootSetState: props.context.rootSetState,
337
- context: props.context.context,
338
- shouldEvaluateBindings: true
339
- })
340
- });
341
- const canShowBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
342
- const [state2] = useLexicalScope();
343
- if (checkIsDefined(state2.processedBlock.hide))
344
- return !state2.processedBlock.hide;
345
- if (checkIsDefined(state2.processedBlock.show))
346
- return state2.processedBlock.show;
347
- return true;
348
- }, "BlockStyles_component_canShowBlock_useComputed_YHoS9Lak9z4", [
349
- state
350
- ]));
351
- const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
352
- const [props2, state2] = useLexicalScope();
353
- const styles = state2.processedBlock.responsiveStyles;
354
- const content = props2.context.content;
355
- const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
356
- const largeStyles = styles?.large;
357
- const mediumStyles = styles?.medium;
358
- const smallStyles = styles?.small;
359
- const className = state2.processedBlock.id;
360
- if (!className)
361
- return "";
362
- const largeStylesClass = largeStyles ? createCssClass({
363
- className,
364
- styles: largeStyles
365
- }) : "";
366
- const mediumStylesClass = mediumStyles ? createCssClass({
367
- className,
368
- styles: mediumStyles,
369
- mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
370
- }) : "";
371
- const smallStylesClass = smallStyles ? createCssClass({
372
- className,
373
- styles: smallStyles,
374
- mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
375
- }) : "";
376
- return [
377
- largeStylesClass,
378
- mediumStylesClass,
379
- smallStylesClass
380
- ].join(" ");
381
- }, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
382
- props,
383
- state
384
- ]));
385
- return /* @__PURE__ */ _jsxC(Fragment, {
386
- children: css.value && canShowBlock.value ? /* @__PURE__ */ _jsxC(InlinedStyles, {
387
- get styles() {
388
- return css.value;
389
- },
390
- [_IMMUTABLE]: {
391
- styles: _fnSignal((p0) => p0.value, [
392
- css
393
- ], "p0.value")
394
- }
395
- }, 3, "8B_0") : null
396
- }, 1, "8B_1");
397
- }, "BlockStyles_component_0lZeirBI638"));
398
- function capitalizeFirstLetter(string) {
399
- return string.charAt(0).toUpperCase() + string.slice(1);
400
- }
401
- const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}$`;
402
- function createEventHandler(value, options) {
403
- return /* @__PURE__ */ inlinedQrl((event) => {
404
- const [options2, value2] = useLexicalScope();
405
- return evaluate({
406
- code: value2,
407
- context: options2.context,
408
- localState: options2.localState,
409
- rootState: options2.rootState,
410
- rootSetState: options2.rootSetState,
411
- event
412
- });
413
- }, "createEventHandler_7wCAiJVliNE", [
414
- options,
415
- value
416
- ]);
417
- }
418
- function getBlockActions(options) {
419
- const obj = {};
420
- const optionActions = options.block.actions ?? {};
421
- for (const key in optionActions) {
422
- if (!optionActions.hasOwnProperty(key))
423
- continue;
424
- const value = optionActions[key];
425
- let eventHandlerName = getEventHandlerName(key);
426
- if (options.stripPrefix)
427
- switch (TARGET) {
428
- case "vue2":
429
- case "vue3":
430
- eventHandlerName = eventHandlerName.replace("v-on:", "");
431
- break;
432
- case "svelte":
433
- eventHandlerName = eventHandlerName.replace("on:", "");
434
- break;
435
- }
436
- obj[eventHandlerName] = createEventHandler(value, options);
437
- }
438
- return obj;
439
- }
440
- function transformBlockProperties(properties) {
441
- return properties;
442
- }
443
- const extractRelevantRootBlockProperties = (block) => {
444
- return {
445
- href: block.href
446
- };
447
- };
448
- function getBlockProperties({ block, context }) {
449
- const properties = {
450
- ...extractRelevantRootBlockProperties(block),
451
- ...block.properties,
452
- "builder-id": block.id,
453
- style: block.style ? getStyleAttribute(block.style) : void 0,
454
- class: [
455
- block.id,
456
- "builder-block",
457
- block.class,
458
- block.properties?.class
459
- ].filter(Boolean).join(" ")
460
- };
461
- return transformBlockProperties(properties);
462
- }
463
- function getStyleAttribute(style) {
464
- switch (TARGET) {
465
- case "svelte":
466
- case "vue2":
467
- case "vue3":
468
- case "solid":
469
- return convertStyleMapToCSSArray(style).join(" ");
470
- case "qwik":
471
- case "reactNative":
472
- case "react":
473
- case "rsc":
474
- return style;
475
- }
476
- }
477
- const BlockWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
478
- _jsxBranch();
479
- return /* @__PURE__ */ _jsxC(Fragment, {
480
- children: props.hasChildren ? /* @__PURE__ */ _jsxC(props.Wrapper, {
481
- ...getBlockProperties({
482
- block: props.block,
483
- context: props.context
484
- }),
485
- ...getBlockActions({
486
- block: props.block,
487
- rootState: props.context.rootState,
488
- rootSetState: props.context.rootSetState,
489
- localState: props.context.localState,
490
- context: props.context.context,
491
- stripPrefix: true
492
- }),
493
- children: /* @__PURE__ */ _jsxC(Slot, null, 3, "87_0")
494
- }, 0, "87_1") : /* @__PURE__ */ _jsxC(props.Wrapper, {
495
- ...getBlockProperties({
496
- block: props.block,
497
- context: props.context
498
- }),
499
- ...getBlockActions({
500
- block: props.block,
501
- rootState: props.context.rootState,
502
- rootSetState: props.context.rootSetState,
503
- localState: props.context.localState,
504
- context: props.context.context,
505
- stripPrefix: true
506
- })
507
- }, 0, "87_2")
508
- }, 1, "87_3");
509
- }, "BlockWrapper_component_kOI0j0aW8Nw"));
510
- const InteractiveElement = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
511
- return /* @__PURE__ */ _jsxC(props.Wrapper, {
512
- ...props.wrapperProps,
513
- attributes: {
514
- ...getBlockProperties({
515
- block: props.block,
516
- context: props.context
517
- }),
518
- ...getBlockActions({
519
- block: props.block,
520
- rootState: props.context.rootState,
521
- rootSetState: props.context.rootSetState,
522
- localState: props.context.localState,
523
- context: props.context.context
524
- })
525
- },
526
- children: /* @__PURE__ */ _jsxC(Slot, null, 3, "q0_0")
527
- }, 0, "q0_1");
528
- }, "InteractiveElement_component_0UqfJpjhn0g"));
529
- const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
530
- const interactiveElementProps = {
531
- Wrapper: componentRef,
532
- block: builderBlock,
533
- context,
534
- wrapperProps: componentOptions
535
- };
536
- return isInteractive ? interactiveElementProps : {
537
- ...componentOptions,
538
- ...includeBlockProps ? {
539
- attributes: getBlockProperties({
540
- block: builderBlock,
541
- context: contextValue
542
- })
543
- } : {}
544
- };
545
- };
546
- const ComponentRef = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
547
- const state = useStore({
548
- Wrapper: props.isInteractive ? InteractiveElement : props.componentRef
549
- });
550
- return /* @__PURE__ */ _jsxC(Fragment, {
551
- children: props.componentRef ? /* @__PURE__ */ _jsxC(state.Wrapper, {
552
- ...getWrapperProps({
553
- componentOptions: props.componentOptions,
554
- builderBlock: props.builderBlock,
555
- context: props.context,
556
- componentRef: props.componentRef,
557
- includeBlockProps: props.includeBlockProps,
558
- isInteractive: props.isInteractive,
559
- contextValue: props.context
560
- }),
561
- children: [
562
- (props.blockChildren || []).map(function(child) {
563
- return /* @__PURE__ */ _jsxC(Block, {
564
- block: child,
565
- get context() {
566
- return props.context;
567
- },
568
- get registeredComponents() {
569
- return props.registeredComponents;
570
- },
571
- [_IMMUTABLE]: {
572
- context: _fnSignal((p0) => p0.context, [
573
- props
574
- ], "p0.context"),
575
- registeredComponents: _fnSignal((p0) => p0.registeredComponents, [
576
- props
577
- ], "p0.registeredComponents")
578
- }
579
- }, 3, "block-" + child.id);
580
- }),
581
- (props.blockChildren || []).map(function(child) {
582
- return /* @__PURE__ */ _jsxC(BlockStyles, {
583
- block: child,
584
- get context() {
585
- return props.context;
586
- },
587
- [_IMMUTABLE]: {
588
- context: _fnSignal((p0) => p0.context, [
589
- props
590
- ], "p0.context")
591
- }
592
- }, 3, "block-style-" + child.id);
593
- })
594
- ]
595
- }, 0, "z6_0") : null
596
- }, 1, "z6_1");
597
- }, "ComponentRef_component_tFQoBV6UFdc"));
598
- const RepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
599
- const state = useStore({
600
- store: props.repeatContext
601
- });
602
- useContextProvider(builderContext, state.store);
603
- return /* @__PURE__ */ _jsxC(Block, {
604
- get block() {
605
- return props.block;
606
- },
607
- get context() {
608
- return state.store;
609
- },
610
- get registeredComponents() {
611
- return props.registeredComponents;
612
- },
613
- [_IMMUTABLE]: {
614
- block: _fnSignal((p0) => p0.block, [
615
- props
616
- ], "p0.block"),
617
- context: _fnSignal((p0) => p0.store, [
618
- state
619
- ], "p0.store"),
620
- registeredComponents: _fnSignal((p0) => p0.registeredComponents, [
621
- props
622
- ], "p0.registeredComponents")
623
- }
624
- }, 3, "GO_0");
625
- }, "RepeatedBlock_component_JK1l2jKcfwA"));
626
- const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
627
- _jsxBranch();
628
- const state = useStore({
629
- childrenContext: props.context
630
- });
631
- const blockComponent = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
632
- const [props2] = useLexicalScope();
633
- return getComponent({
634
- block: props2.block,
635
- context: props2.context,
636
- registeredComponents: props2.registeredComponents
637
- });
638
- }, "Block_component_blockComponent_useComputed_83sGy9Xlsi0", [
639
- props
640
- ]));
641
- const repeatItem = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
642
- const [props2] = useLexicalScope();
643
- return getRepeatItemData({
644
- block: props2.block,
645
- context: props2.context
646
- });
647
- }, "Block_component_repeatItem_useComputed_j31Y3wFqSCM", [
648
- props
649
- ]));
650
- const processedBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
651
- const [props2, repeatItem2] = useLexicalScope();
652
- return repeatItem2.value ? props2.block : getProcessedBlock({
653
- block: props2.block,
654
- localState: props2.context.localState,
655
- rootState: props2.context.rootState,
656
- rootSetState: props2.context.rootSetState,
657
- context: props2.context.context,
658
- shouldEvaluateBindings: true
659
- });
660
- }, "Block_component_processedBlock_useComputed_ESKw0l5FcBc", [
661
- props,
662
- repeatItem
663
- ]));
664
- const Tag = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
665
- const [props2] = useLexicalScope();
666
- return props2.block.tagName || "div";
667
- }, "Block_component_Tag_useComputed_eQnDgbcBW2A", [
668
- props
669
- ]));
670
- const canShowBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
671
- const [processedBlock2] = useLexicalScope();
672
- if ("hide" in processedBlock2.value)
673
- return !processedBlock2.value.hide;
674
- if ("show" in processedBlock2.value)
675
- return processedBlock2.value.show;
676
- return true;
677
- }, "Block_component_canShowBlock_useComputed_NJEFz8ICF08", [
678
- processedBlock
679
- ]));
680
- const childrenWithoutParentComponent = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
681
- const [blockComponent2, processedBlock2, repeatItem2] = useLexicalScope();
682
- const shouldRenderChildrenOutsideRef = !blockComponent2.value?.component && !repeatItem2.value;
683
- return shouldRenderChildrenOutsideRef ? processedBlock2.value.children ?? [] : [];
684
- }, "Block_component_childrenWithoutParentComponent_useComputed_0WENYGElWnc", [
685
- blockComponent,
686
- processedBlock,
687
- repeatItem
688
- ]));
689
- const componentRefProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
690
- const [blockComponent2, processedBlock2, props2, state2] = useLexicalScope();
691
- return {
692
- blockChildren: processedBlock2.value.children ?? [],
693
- componentRef: blockComponent2.value?.component,
694
- componentOptions: {
695
- ...getBlockComponentOptions(processedBlock2.value),
696
- builderContext: props2.context,
697
- ...blockComponent2.value?.name === "Symbol" || blockComponent2.value?.name === "Columns" ? {
698
- builderComponents: props2.registeredComponents
699
- } : {}
700
- },
701
- context: state2.childrenContext,
702
- registeredComponents: props2.registeredComponents,
703
- builderBlock: processedBlock2.value,
704
- includeBlockProps: blockComponent2.value?.noWrap === true,
705
- isInteractive: !blockComponent2.value?.isRSC
706
- };
707
- }, "Block_component_componentRefProps_useComputed_Ikbl8VO04ho", [
708
- blockComponent,
709
- processedBlock,
710
- props,
711
- state
712
- ]));
713
- return /* @__PURE__ */ _jsxC(Fragment, {
714
- children: canShowBlock.value ? !blockComponent.value?.noWrap ? /* @__PURE__ */ _jsxC(Fragment, {
715
- children: [
716
- isEmptyHtmlElement(Tag.value) ? /* @__PURE__ */ _jsxC(BlockWrapper, {
717
- get Wrapper() {
718
- return Tag.value;
719
- },
720
- get block() {
721
- return processedBlock.value;
722
- },
723
- get context() {
724
- return props.context;
725
- },
726
- hasChildren: false,
727
- [_IMMUTABLE]: {
728
- Wrapper: _fnSignal((p0) => p0.value, [
729
- Tag
730
- ], "p0.value"),
731
- block: _fnSignal((p0) => p0.value, [
732
- processedBlock
733
- ], "p0.value"),
734
- context: _fnSignal((p0) => p0.context, [
735
- props
736
- ], "p0.context"),
737
- hasChildren: _IMMUTABLE
738
- }
739
- }, 3, "jN_0") : null,
740
- !isEmptyHtmlElement(Tag.value) && repeatItem.value ? (repeatItem.value || []).map(function(data, index) {
741
- return /* @__PURE__ */ _jsxC(RepeatedBlock, {
742
- get repeatContext() {
743
- return data.context;
744
- },
745
- get block() {
746
- return data.block;
747
- },
748
- get registeredComponents() {
749
- return props.registeredComponents;
750
- },
751
- [_IMMUTABLE]: {
752
- repeatContext: _wrapProp(data, "context"),
753
- block: _wrapProp(data, "block"),
754
- registeredComponents: _fnSignal((p0) => p0.registeredComponents, [
755
- props
756
- ], "p0.registeredComponents")
757
- }
758
- }, 3, index);
759
- }) : null,
760
- !isEmptyHtmlElement(Tag.value) && !repeatItem.value ? /* @__PURE__ */ _jsxC(BlockWrapper, {
761
- get Wrapper() {
762
- return Tag.value;
763
- },
764
- get block() {
765
- return processedBlock.value;
766
- },
767
- get context() {
768
- return props.context;
769
- },
770
- hasChildren: true,
771
- children: [
772
- /* @__PURE__ */ _jsxC(ComponentRef, {
773
- ...componentRefProps.value
774
- }, 0, "jN_1"),
775
- (childrenWithoutParentComponent.value || []).map(function(child) {
776
- return /* @__PURE__ */ _jsxC(Block, {
777
- block: child,
778
- get context() {
779
- return state.childrenContext;
780
- },
781
- get registeredComponents() {
782
- return props.registeredComponents;
783
- },
784
- [_IMMUTABLE]: {
785
- context: _fnSignal((p0) => p0.childrenContext, [
786
- state
787
- ], "p0.childrenContext"),
788
- registeredComponents: _fnSignal((p0) => p0.registeredComponents, [
789
- props
790
- ], "p0.registeredComponents")
791
- }
792
- }, 3, "block-" + child.id);
793
- }),
794
- (childrenWithoutParentComponent.value || []).map(function(child) {
795
- return /* @__PURE__ */ _jsxC(BlockStyles, {
796
- block: child,
797
- get context() {
798
- return state.childrenContext;
799
- },
800
- [_IMMUTABLE]: {
801
- context: _fnSignal((p0) => p0.childrenContext, [
802
- state
803
- ], "p0.childrenContext")
804
- }
805
- }, 3, "block-style-" + child.id);
806
- })
807
- ],
808
- [_IMMUTABLE]: {
809
- Wrapper: _fnSignal((p0) => p0.value, [
810
- Tag
811
- ], "p0.value"),
812
- block: _fnSignal((p0) => p0.value, [
813
- processedBlock
814
- ], "p0.value"),
815
- context: _fnSignal((p0) => p0.context, [
816
- props
817
- ], "p0.context"),
818
- hasChildren: _IMMUTABLE
819
- }
820
- }, 1, "jN_2") : null
821
- ]
822
- }, 1, "jN_3") : /* @__PURE__ */ _jsxC(ComponentRef, {
823
- ...componentRefProps.value
824
- }, 0, "jN_4") : null
825
- }, 1, "jN_5");
826
- }, "Block_component_nnPv0RY0U0k"));
827
- const onClick$1 = function onClick2(props, state) {
828
- if (isEditing() && !props.blocks?.length)
829
- window.parent?.postMessage({
830
- type: "builder.clickEmptyBlocks",
831
- data: {
832
- parentElementId: props.parent,
833
- dataPath: props.path
834
- }
835
- }, "*");
836
- };
837
- const onMouseEnter = function onMouseEnter2(props, state) {
838
- if (isEditing() && !props.blocks?.length)
839
- window.parent?.postMessage({
840
- type: "builder.hoverEmptyBlocks",
841
- data: {
842
- parentElementId: props.parent,
843
- dataPath: props.path
844
- }
845
- }, "*");
846
- };
847
- const BlocksWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
848
- useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$2, "BlocksWrapper_component_useStylesScoped_Kj0S9AOXQ0o"));
849
- const className = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
850
- const [props2] = useLexicalScope();
851
- return "builder-blocks" + (!props2.blocks?.length ? " no-blocks" : "");
852
- }, "BlocksWrapper_component_className_useComputed_J5SSSH2Xf08", [
853
- props
854
- ]));
855
- const state = {};
856
- return /* @__PURE__ */ _jsxQ("div", {
857
- onClick$: /* @__PURE__ */ inlinedQrl((event) => {
858
- const [props2, state2] = useLexicalScope();
859
- return onClick$1(props2);
860
- }, "BlocksWrapper_component_div_onClick_1NkidSBS3D0", [
861
- props,
862
- state
863
- ]),
864
- onMouseEnter$: /* @__PURE__ */ inlinedQrl((event) => {
865
- const [props2, state2] = useLexicalScope();
866
- return onMouseEnter(props2);
867
- }, "BlocksWrapper_component_div_onMouseEnter_TxzAP5tI9Zc", [
868
- props,
869
- state
870
- ]),
871
- onKeyPress$: /* @__PURE__ */ inlinedQrl((event) => {
872
- const [props2, state2] = useLexicalScope();
873
- return onClick$1(props2);
874
- }, "BlocksWrapper_component_div_onKeyPress_Aaf0oNYOi80", [
875
- props,
876
- state
877
- ])
878
- }, {
879
- class: _fnSignal((p0) => p0.value + " div-BlocksWrapper", [
880
- className
881
- ], 'p0.value+" div-BlocksWrapper"'),
882
- "builder-path": _fnSignal((p0) => p0.path, [
883
- props
884
- ], "p0.path"),
885
- "builder-parent-id": _fnSignal((p0) => p0.parent, [
886
- props
887
- ], "p0.parent"),
888
- style: _fnSignal((p0) => p0.styleProp, [
889
- props
890
- ], "p0.styleProp")
891
- }, /* @__PURE__ */ _jsxC(Slot, null, 3, "3u_0"), 0, "3u_1");
892
- }, "BlocksWrapper_component_45hR0o6abzg"));
893
- const STYLES$2 = `
894
- .div-BlocksWrapper {
895
- display: flex;
896
- flex-direction: column;
897
- align-items: stretch;
898
- }
899
- `;
900
- const Blocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
901
- const builderContext$1 = useContext(builderContext);
902
- const componentsContext = useContext(ComponentsContext);
903
- return /* @__PURE__ */ _jsxC(BlocksWrapper, {
904
- get blocks() {
905
- return props.blocks;
906
- },
907
- get parent() {
908
- return props.parent;
909
- },
910
- get path() {
911
- return props.path;
912
- },
913
- get styleProp() {
914
- return props.styleProp;
915
- },
916
- children: [
917
- props.blocks ? (props.blocks || []).map(function(block) {
918
- return /* @__PURE__ */ _jsxC(Block, {
919
- block,
920
- get context() {
921
- return props.context || builderContext$1;
922
- },
923
- get registeredComponents() {
924
- return props.registeredComponents || componentsContext.registeredComponents;
925
- },
926
- [_IMMUTABLE]: {
927
- context: _fnSignal((p0, p1) => p1.context || p0, [
928
- builderContext$1,
929
- props
930
- ], "p1.context||p0"),
931
- registeredComponents: _fnSignal((p0, p1) => p1.registeredComponents || p0.registeredComponents, [
932
- componentsContext,
933
- props
934
- ], "p1.registeredComponents||p0.registeredComponents")
935
- }
936
- }, 3, "render-block-" + block.id);
937
- }) : null,
938
- props.blocks ? (props.blocks || []).map(function(block) {
939
- return /* @__PURE__ */ _jsxC(BlockStyles, {
940
- block,
941
- get context() {
942
- return props.context || builderContext$1;
943
- },
944
- [_IMMUTABLE]: {
945
- context: _fnSignal((p0, p1) => p1.context || p0, [
946
- builderContext$1,
947
- props
948
- ], "p1.context||p0")
949
- }
950
- }, 3, "block-style-" + block.id);
951
- }) : null
952
- ],
953
- [_IMMUTABLE]: {
954
- blocks: _fnSignal((p0) => p0.blocks, [
955
- props
956
- ], "p0.blocks"),
957
- parent: _fnSignal((p0) => p0.parent, [
958
- props
959
- ], "p0.parent"),
960
- path: _fnSignal((p0) => p0.path, [
961
- props
962
- ], "p0.path"),
963
- styleProp: _fnSignal((p0) => p0.styleProp, [
964
- props
965
- ], "p0.styleProp")
966
- }
967
- }, 1, "0n_0");
968
- }, "Blocks_component_PI1ErWPzPEg"));
969
- const getWidth = function getWidth2(props, state, index) {
970
- return state.cols[index]?.width || 100 / state.cols.length;
971
- };
972
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
973
- const subtractWidth = state.gutterSize * (state.cols.length - 1) / state.cols.length;
974
- return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
975
- };
976
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
977
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
978
- };
979
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
980
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
981
- };
982
- const columnCssVars = function columnCssVars2(props, state, index) {
983
- const gutter = index === 0 ? 0 : state.gutterSize;
984
- const width = getColumnCssWidth(props, state, index);
985
- const gutterPixels = `${gutter}px`;
986
- const mobileWidth = "100%";
987
- const mobileMarginLeft = 0;
988
- const marginLeftKey = "margin-left";
989
- return {
990
- width,
991
- [marginLeftKey]: gutterPixels,
992
- "--column-width-mobile": getMobileStyle(props, state, {
993
- stackedStyle: mobileWidth,
994
- desktopStyle: width
995
- }),
996
- "--column-margin-left-mobile": getMobileStyle(props, state, {
997
- stackedStyle: mobileMarginLeft,
998
- desktopStyle: gutterPixels
999
- }),
1000
- "--column-width-tablet": getTabletStyle(props, state, {
1001
- stackedStyle: mobileWidth,
1002
- desktopStyle: width
1003
- }),
1004
- "--column-margin-left-tablet": getTabletStyle(props, state, {
1005
- stackedStyle: mobileMarginLeft,
1006
- desktopStyle: gutterPixels
1007
- })
1008
- };
1009
- };
1010
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
1011
- const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
1012
- return breakpointSizes[size].max;
1013
- };
1014
- const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
1015
- _jsxBranch();
1016
- const state = useStore({
1017
- cols: props.columns || [],
1018
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
1019
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
1020
- stackAt: props.stackColumnsAt || "tablet"
1021
- });
1022
- useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
1023
- const columnsCssVars = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
1024
- const [props2, state2] = useLexicalScope();
1025
- return {
1026
- "--flex-dir": state2.flexDir,
1027
- "--flex-dir-tablet": getTabletStyle(props2, state2, {
1028
- stackedStyle: state2.flexDir,
1029
- desktopStyle: "row"
1030
- })
1031
- };
1032
- }, "Columns_component_columnsCssVars_useComputed_adFEq2RWT9s", [
1033
- props,
1034
- state
1035
- ]));
1036
- const columnsStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
1037
- const [props2, state2] = useLexicalScope();
1038
- return `
1039
- @media (max-width: ${getWidthForBreakpointSize(props2, state2, "medium")}px) {
1040
- .${props2.builderBlock.id}-breakpoints {
1041
- flex-direction: var(--flex-dir-tablet);
1042
- align-items: stretch;
1043
- }
1044
-
1045
- .${props2.builderBlock.id}-breakpoints > .builder-column {
1046
- width: var(--column-width-tablet) !important;
1047
- margin-left: var(--column-margin-left-tablet) !important;
1048
- }
1049
- }
1050
-
1051
- @media (max-width: ${getWidthForBreakpointSize(props2, state2, "small")}px) {
1052
- .${props2.builderBlock.id}-breakpoints {
1053
- flex-direction: var(--flex-dir);
1054
- align-items: stretch;
1055
- }
1056
-
1057
- .${props2.builderBlock.id}-breakpoints > .builder-column {
1058
- width: var(--column-width-mobile) !important;
1059
- margin-left: var(--column-margin-left-mobile) !important;
1060
- }
1061
- },
1062
- `;
1063
- }, "Columns_component_columnsStyles_useComputed_nBtMPbzd1Wc", [
1064
- props,
1065
- state
1066
- ]));
1067
- return /* @__PURE__ */ _jsxQ("div", null, {
1068
- class: _fnSignal((p0) => `builder-columns ${p0.builderBlock.id}-breakpoints div-Columns`, [
1069
- props
1070
- ], '`builder-columns ${p0.builderBlock.id}-breakpoints`+" div-Columns"'),
1071
- style: _fnSignal((p0) => p0.value, [
1072
- columnsCssVars
1073
- ], "p0.value")
1074
- }, [
1075
- /* @__PURE__ */ _jsxC(InlinedStyles, {
1076
- get styles() {
1077
- return columnsStyles.value;
1078
- },
1079
- [_IMMUTABLE]: {
1080
- styles: _fnSignal((p0) => p0.value, [
1081
- columnsStyles
1082
- ], "p0.value")
1083
- }
1084
- }, 3, "c0_0"),
1085
- (props.columns || []).map(function(column, index) {
1086
- return /* @__PURE__ */ createElement("div", {
1087
- class: "builder-column div-Columns-2",
1088
- style: columnCssVars(props, state, index),
1089
- key: index
1090
- }, /* @__PURE__ */ _jsxC(Blocks, {
1091
- get blocks() {
1092
- return column.blocks;
1093
- },
1094
- path: `component.options.columns.${index}.blocks`,
1095
- get parent() {
1096
- return props.builderBlock.id;
1097
- },
1098
- styleProp: {
1099
- flexGrow: "1"
1100
- },
1101
- get context() {
1102
- return props.builderContext;
1103
- },
1104
- get registeredComponents() {
1105
- return props.builderComponents;
1106
- },
1107
- [_IMMUTABLE]: {
1108
- blocks: _wrapProp(column, "blocks"),
1109
- parent: _fnSignal((p0) => p0.builderBlock.id, [
1110
- props
1111
- ], "p0.builderBlock.id"),
1112
- context: _fnSignal((p0) => p0.builderContext, [
1113
- props
1114
- ], "p0.builderContext"),
1115
- registeredComponents: _fnSignal((p0) => p0.builderComponents, [
1116
- props
1117
- ], "p0.builderComponents")
1118
- }
1119
- }, 3, "c0_1"));
1120
- })
1121
- ], 1, "c0_2");
1122
- }, "Columns_component_7yLj4bxdI6c"));
1123
- const STYLES$1 = `
1124
- .div-Columns {
1125
- display: flex;
1126
- line-height: normal;
1127
- }
1128
- .div-Columns-2 {
1129
- display: flex;
1130
- flex-direction: column;
1131
- align-items: stretch;
1132
- }
1133
- `;
1134
- const FragmentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
1135
- return /* @__PURE__ */ _jsxQ("span", null, null, /* @__PURE__ */ _jsxC(Slot, null, 3, "oj_0"), 1, "oj_1");
1136
- }, "FragmentComponent_component_T0AypnadAK0"));
1137
- function removeProtocol(path) {
1138
- return path.replace(/http(s)?:/, "");
1139
- }
1140
- function updateQueryParam(uri = "", key, value) {
1141
- const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
1142
- const separator = uri.indexOf("?") !== -1 ? "&" : "?";
1143
- if (uri.match(re))
1144
- return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
1145
- return uri + separator + key + "=" + encodeURIComponent(value);
1146
- }
1147
- function getShopifyImageUrl(src, size) {
1148
- if (!src || !src?.match(/cdn\.shopify\.com/) || !size)
1149
- return src;
1150
- if (size === "master")
1151
- return removeProtocol(src);
1152
- const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
1153
- if (match) {
1154
- const prefix = src.split(match[0]);
1155
- const suffix = match[3];
1156
- const useSize = size.match("x") ? size : `${size}x`;
1157
- return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
1158
- }
1159
- return null;
1160
- }
1161
- function getSrcSet(url) {
1162
- if (!url)
1163
- return url;
1164
- const sizes = [
1165
- 100,
1166
- 200,
1167
- 400,
1168
- 800,
1169
- 1200,
1170
- 1600,
1171
- 2e3
1172
- ];
1173
- if (url.match(/builder\.io/)) {
1174
- let srcUrl = url;
1175
- const widthInSrc = Number(url.split("?width=")[1]);
1176
- if (!isNaN(widthInSrc))
1177
- srcUrl = `${srcUrl} ${widthInSrc}w`;
1178
- return sizes.filter((size) => size !== widthInSrc).map((size) => `${updateQueryParam(url, "width", size)} ${size}w`).concat([
1179
- srcUrl
1180
- ]).join(", ");
1181
- }
1182
- if (url.match(/cdn\.shopify\.com/))
1183
- return sizes.map((size) => [
1184
- getShopifyImageUrl(url, `${size}x${size}`),
1185
- size
1186
- ]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([
1187
- url
1188
- ]).join(", ");
1189
- return url;
1190
- }
1191
- const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
1192
- _jsxBranch();
1193
- useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
1194
- const srcSetToUse = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
1195
- const [props2] = useLexicalScope();
1196
- const imageToUse = props2.image || props2.src;
1197
- const url = imageToUse;
1198
- if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
1199
- return props2.srcset;
1200
- if (props2.srcset && props2.image?.includes("builder.io/api/v1/image")) {
1201
- if (!props2.srcset.includes(props2.image.split("?")[0])) {
1202
- console.debug("Removed given srcset");
1203
- return getSrcSet(url);
1204
- }
1205
- } else if (props2.image && !props2.srcset)
1206
- return getSrcSet(url);
1207
- return getSrcSet(url);
1208
- }, "Image_component_srcSetToUse_useComputed_TZMibf9Gpvw", [
1209
- props
1210
- ]));
1211
- const webpSrcSet = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
1212
- const [props2, srcSetToUse2] = useLexicalScope();
1213
- if (srcSetToUse2.value?.match(/builder\.io/) && !props2.noWebp)
1214
- return srcSetToUse2.value.replace(/\?/g, "?format=webp&");
1215
- else
1216
- return "";
1217
- }, "Image_component_webpSrcSet_useComputed_01YCu72BBtA", [
1218
- props,
1219
- srcSetToUse
1220
- ]));
1221
- const aspectRatioCss = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
1222
- const [props2] = useLexicalScope();
1223
- const aspectRatioStyles = {
1224
- position: "absolute",
1225
- height: "100%",
1226
- width: "100%",
1227
- left: "0px",
1228
- top: "0px"
1229
- };
1230
- const out = props2.aspectRatio ? aspectRatioStyles : void 0;
1231
- return out;
1232
- }, "Image_component_aspectRatioCss_useComputed_yJ1jG0g5fbw", [
1233
- props
1234
- ]));
1235
- return /* @__PURE__ */ _jsxC(Fragment$1, {
1236
- children: [
1237
- /* @__PURE__ */ _jsxQ("picture", null, null, [
1238
- webpSrcSet.value ? /* @__PURE__ */ _jsxQ("source", null, {
1239
- type: "image/webp",
1240
- srcSet: _fnSignal((p0) => p0.value, [
1241
- webpSrcSet
1242
- ], "p0.value")
1243
- }, null, 3, "0A_0") : null,
1244
- /* @__PURE__ */ _jsxQ("img", null, {
1245
- loading: "lazy",
1246
- alt: _fnSignal((p0) => p0.altText, [
1247
- props
1248
- ], "p0.altText"),
1249
- role: _fnSignal((p0) => p0.altText ? "presentation" : void 0, [
1250
- props
1251
- ], 'p0.altText?"presentation":undefined'),
1252
- style: _fnSignal((p0, p1) => ({
1253
- objectPosition: p1.backgroundPosition || "center",
1254
- objectFit: p1.backgroundSize || "cover",
1255
- ...p0.value
1256
- }), [
1257
- aspectRatioCss,
1258
- props
1259
- ], '{objectPosition:p1.backgroundPosition||"center",objectFit:p1.backgroundSize||"cover",...p0.value}'),
1260
- class: _fnSignal((p0) => "builder-image" + (p0.className ? " " + p0.className : "") + " img-Image", [
1261
- props
1262
- ], '"builder-image"+(p0.className?" "+p0.className:"")+" img-Image"'),
1263
- src: _fnSignal((p0) => p0.image, [
1264
- props
1265
- ], "p0.image"),
1266
- srcSet: _fnSignal((p0) => p0.value, [
1267
- srcSetToUse
1268
- ], "p0.value"),
1269
- sizes: _fnSignal((p0) => p0.sizes, [
1270
- props
1271
- ], "p0.sizes")
1272
- }, null, 3, null)
1273
- ], 1, null),
1274
- props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /* @__PURE__ */ _jsxQ("div", null, {
1275
- class: "builder-image-sizer div-Image",
1276
- style: _fnSignal((p0) => ({
1277
- paddingTop: p0.aspectRatio * 100 + "%"
1278
- }), [
1279
- props
1280
- ], '{paddingTop:p0.aspectRatio*100+"%"}')
1281
- }, null, 3, "0A_1") : null,
1282
- props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ _jsxC(Slot, null, 3, "0A_2") : null,
1283
- !props.fitContent && props.children ? /* @__PURE__ */ _jsxQ("div", null, {
1284
- class: "div-Image-2"
1285
- }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0A_3"), 1, "0A_4") : null
1286
- ]
1287
- }, 1, "0A_5");
1288
- }, "Image_component_LRxDkFa1EfU"));
1289
- const STYLES = `
1290
- .img-Image {
1291
- opacity: 1;
1292
- transition: opacity 0.2s ease-in-out;
1293
- }
1294
- .div-Image {
1295
- width: 100%;
1296
- pointer-events: none;
1297
- font-size: 0;
1298
- }
1299
- .div-Image-2 {
1300
- display: flex;
1301
- flex-direction: column;
1302
- align-items: stretch;
1303
- position: absolute;
1304
- top: 0;
1305
- left: 0;
1306
- width: 100%;
1307
- height: 100%;
1308
- }
1309
- `;
1310
- const SectionComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
1311
- return /* @__PURE__ */ _jsxS("section", {
1312
- ...props.attributes,
1313
- style: {
1314
- width: "100%",
1315
- alignSelf: "stretch",
1316
- flexGrow: 1,
1317
- boxSizing: "border-box",
1318
- maxWidth: props.maxWidth || 1200,
1319
- display: "flex",
1320
- flexDirection: "column",
1321
- alignItems: "stretch",
1322
- marginLeft: "auto",
1323
- marginRight: "auto"
1324
- },
1325
- children: /* @__PURE__ */ _jsxC(Slot, null, 3, "2Y_0")
1326
- }, null, 0, "2Y_1");
1327
- }, "SectionComponent_component_ZWF9iD5WeLg"));
1328
- const getTopLevelDomain = (host) => {
1329
- if (host === "localhost" || host === "127.0.0.1")
1330
- return host;
1331
- const parts = host.split(".");
1332
- if (parts.length > 2)
1333
- return parts.slice(1).join(".");
1334
- return host;
1335
- };
1336
- const getCookieSync = ({ name, canTrack }) => {
1337
- try {
1338
- if (!canTrack)
1339
- return void 0;
1340
- return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
1341
- } catch (err) {
1342
- logger.warn("[COOKIE] GET error: ", err?.message || err);
1343
- return void 0;
1344
- }
1345
- };
1346
- const getCookie = async (args) => getCookieSync(args);
1347
- const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
1348
- const SECURE_CONFIG = [
1349
- [
1350
- "secure",
1351
- ""
1352
- ],
1353
- [
1354
- "SameSite",
1355
- "None"
1356
- ]
1357
- ];
1358
- const createCookieString = ({ name, value, expires }) => {
1359
- const secure = isBrowser() ? location.protocol === "https:" : true;
1360
- const secureObj = secure ? SECURE_CONFIG : [
1361
- []
1362
- ];
1363
- const expiresObj = expires ? [
1364
- [
1365
- "expires",
1366
- expires.toUTCString()
1367
- ]
1368
- ] : [
1369
- []
1370
- ];
1371
- const cookieValue = [
1372
- [
1373
- name,
1374
- value
1375
- ],
1376
- ...expiresObj,
1377
- [
1378
- "path",
1379
- "/"
1380
- ],
1381
- [
1382
- "domain",
1383
- getTopLevelDomain(window.location.hostname)
1384
- ],
1385
- ...secureObj
1386
- ];
1387
- const cookie = stringifyCookie(cookieValue);
1388
- return cookie;
1389
- };
1390
- const setCookie = async ({ name, value, expires, canTrack }) => {
1391
- try {
1392
- if (!canTrack)
1393
- return;
1394
- const cookie = createCookieString({
1395
- name,
1396
- value,
1397
- expires
1398
- });
1399
- document.cookie = cookie;
1400
- } catch (err) {
1401
- logger.warn("[COOKIE] SET error: ", err?.message || err);
1402
- }
1403
- };
1404
- const BUILDER_STORE_PREFIX = "builder.tests";
1405
- const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
1406
- const getContentVariationCookie = ({ contentId }) => getCookie({
1407
- name: getContentTestKey(contentId),
1408
- canTrack: true
1409
- });
1410
- const getContentVariationCookieSync = ({ contentId }) => getCookieSync({
1411
- name: getContentTestKey(contentId),
1412
- canTrack: true
1413
- });
1414
- const setContentVariationCookie = ({ contentId, value }) => setCookie({
1415
- name: getContentTestKey(contentId),
1416
- value,
1417
- canTrack: true
1418
- });
1419
- const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
1420
- const getRandomVariationId = ({ id, variations }) => {
1421
- let n = 0;
1422
- const random = Math.random();
1423
- for (const id2 in variations) {
1424
- const testRatio = variations[id2]?.testRatio;
1425
- n += testRatio;
1426
- if (random < n)
1427
- return id2;
1428
- }
1429
- return id;
1430
- };
1431
- const getAndSetVariantId = (args) => {
1432
- const randomVariationId = getRandomVariationId(args);
1433
- setContentVariationCookie({
1434
- contentId: args.id,
1435
- value: randomVariationId
1436
- }).catch((err) => {
1437
- logger.error("could not store A/B test variation: ", err);
1438
- });
1439
- return randomVariationId;
1440
- };
1441
- const getTestFields = ({ item, testGroupId }) => {
1442
- const variationValue = item.variations[testGroupId];
1443
- if (testGroupId === item.id || !variationValue)
1444
- return {
1445
- testVariationId: item.id,
1446
- testVariationName: "Default"
1447
- };
1448
- else
1449
- return {
1450
- data: variationValue.data,
1451
- testVariationId: variationValue.id,
1452
- testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
1453
- };
1454
- };
1455
- const handleABTestingSync = ({ item, canTrack }) => {
1456
- if (!canTrack)
1457
- return item;
1458
- if (!item)
1459
- return void 0;
1460
- if (!checkIsBuilderContentWithVariations(item))
1461
- return item;
1462
- const testGroupId = getContentVariationCookieSync({
1463
- contentId: item.id
1464
- }) || getAndSetVariantId({
1465
- variations: item.variations,
1466
- id: item.id
1467
- });
1468
- const variationValue = getTestFields({
1469
- item,
1470
- testGroupId
1471
- });
1472
- return {
1473
- ...item,
1474
- ...variationValue
1475
- };
1476
- };
1477
- const handleABTesting = async ({ item, canTrack }) => {
1478
- if (!canTrack)
1479
- return item;
1480
- if (!checkIsBuilderContentWithVariations(item))
1481
- return item;
1482
- const cookieValue = await getContentVariationCookie({
1483
- contentId: item.id
1484
- });
1485
- const testGroupId = cookieValue || getAndSetVariantId({
1486
- variations: item.variations,
1487
- id: item.id
1488
- });
1489
- const variationValue = getTestFields({
1490
- item,
1491
- testGroupId
1492
- });
1493
- return {
1494
- ...item,
1495
- ...variationValue
1496
- };
1497
- };
1498
- const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
1499
- const componentInfo$a = {
1500
- name: "Core:Button",
1501
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
1502
- defaultStyles: {
1503
- appearance: "none",
1504
- paddingTop: "15px",
1505
- paddingBottom: "15px",
1506
- paddingLeft: "25px",
1507
- paddingRight: "25px",
1508
- backgroundColor: "#000000",
1509
- color: "white",
1510
- borderRadius: "4px",
1511
- textAlign: "center",
1512
- cursor: "pointer"
1513
- },
1514
- inputs: [
1515
- {
1516
- name: "text",
1517
- type: "text",
1518
- defaultValue: "Click me!",
1519
- bubble: true
1520
- },
1521
- {
1522
- name: "link",
1523
- type: "url",
1524
- bubble: true
1525
- },
1526
- {
1527
- name: "openLinkInNewTab",
1528
- type: "boolean",
1529
- defaultValue: false,
1530
- friendlyName: "Open link in new tab"
1531
- }
1532
- ],
1533
- static: true,
1534
- noWrap: true
1535
- };
1536
- const componentInfo$9 = {
1537
- name: "Columns",
1538
- isRSC: true,
1539
- inputs: [
1540
- {
1541
- name: "columns",
1542
- type: "array",
1543
- broadcast: true,
1544
- subFields: [
1545
- {
1546
- name: "blocks",
1547
- type: "array",
1548
- hideFromUI: true,
1549
- defaultValue: [
1550
- {
1551
- "@type": "@builder.io/sdk:Element",
1552
- responsiveStyles: {
1553
- large: {
1554
- display: "flex",
1555
- flexDirection: "column",
1556
- alignItems: "stretch",
1557
- flexShrink: "0",
1558
- position: "relative",
1559
- marginTop: "30px",
1560
- textAlign: "center",
1561
- lineHeight: "normal",
1562
- height: "auto",
1563
- minHeight: "20px",
1564
- minWidth: "20px",
1565
- overflow: "hidden"
1566
- }
1567
- },
1568
- component: {
1569
- name: "Image",
1570
- options: {
1571
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
1572
- backgroundPosition: "center",
1573
- backgroundSize: "cover",
1574
- aspectRatio: 0.7004048582995948
1575
- }
1576
- }
1577
- },
1578
- {
1579
- "@type": "@builder.io/sdk:Element",
1580
- responsiveStyles: {
1581
- large: {
1582
- display: "flex",
1583
- flexDirection: "column",
1584
- alignItems: "stretch",
1585
- flexShrink: "0",
1586
- position: "relative",
1587
- marginTop: "30px",
1588
- textAlign: "center",
1589
- lineHeight: "normal",
1590
- height: "auto"
1591
- }
1592
- },
1593
- component: {
1594
- name: "Text",
1595
- options: {
1596
- text: "<p>Enter some text...</p>"
1597
- }
1598
- }
1599
- }
1600
- ]
1601
- },
1602
- {
1603
- name: "width",
1604
- type: "number",
1605
- hideFromUI: true,
1606
- helperText: "Width %, e.g. set to 50 to fill half of the space"
1607
- },
1608
- {
1609
- name: "link",
1610
- type: "url",
1611
- helperText: "Optionally set a url that clicking this column will link to"
1612
- }
1613
- ],
1614
- defaultValue: [
1615
- {
1616
- blocks: [
1617
- {
1618
- "@type": "@builder.io/sdk:Element",
1619
- responsiveStyles: {
1620
- large: {
1621
- display: "flex",
1622
- flexDirection: "column",
1623
- alignItems: "stretch",
1624
- flexShrink: "0",
1625
- position: "relative",
1626
- marginTop: "30px",
1627
- textAlign: "center",
1628
- lineHeight: "normal",
1629
- height: "auto",
1630
- minHeight: "20px",
1631
- minWidth: "20px",
1632
- overflow: "hidden"
1633
- }
1634
- },
1635
- component: {
1636
- name: "Image",
1637
- options: {
1638
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
1639
- backgroundPosition: "center",
1640
- backgroundSize: "cover",
1641
- aspectRatio: 0.7004048582995948
1642
- }
1643
- }
1644
- },
1645
- {
1646
- "@type": "@builder.io/sdk:Element",
1647
- responsiveStyles: {
1648
- large: {
1649
- display: "flex",
1650
- flexDirection: "column",
1651
- alignItems: "stretch",
1652
- flexShrink: "0",
1653
- position: "relative",
1654
- marginTop: "30px",
1655
- textAlign: "center",
1656
- lineHeight: "normal",
1657
- height: "auto"
1658
- }
1659
- },
1660
- component: {
1661
- name: "Text",
1662
- options: {
1663
- text: "<p>Enter some text...</p>"
1664
- }
1665
- }
1666
- }
1667
- ]
1668
- },
1669
- {
1670
- blocks: [
1671
- {
1672
- "@type": "@builder.io/sdk:Element",
1673
- responsiveStyles: {
1674
- large: {
1675
- display: "flex",
1676
- flexDirection: "column",
1677
- alignItems: "stretch",
1678
- flexShrink: "0",
1679
- position: "relative",
1680
- marginTop: "30px",
1681
- textAlign: "center",
1682
- lineHeight: "normal",
1683
- height: "auto",
1684
- minHeight: "20px",
1685
- minWidth: "20px",
1686
- overflow: "hidden"
1687
- }
1688
- },
1689
- component: {
1690
- name: "Image",
1691
- options: {
1692
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
1693
- backgroundPosition: "center",
1694
- backgroundSize: "cover",
1695
- aspectRatio: 0.7004048582995948
1696
- }
1697
- }
1698
- },
1699
- {
1700
- "@type": "@builder.io/sdk:Element",
1701
- responsiveStyles: {
1702
- large: {
1703
- display: "flex",
1704
- flexDirection: "column",
1705
- alignItems: "stretch",
1706
- flexShrink: "0",
1707
- position: "relative",
1708
- marginTop: "30px",
1709
- textAlign: "center",
1710
- lineHeight: "normal",
1711
- height: "auto"
1712
- }
1713
- },
1714
- component: {
1715
- name: "Text",
1716
- options: {
1717
- text: "<p>Enter some text...</p>"
1718
- }
1719
- }
1720
- }
1721
- ]
1722
- }
1723
- ],
1724
- onChange: (options) => {
1725
- function clearWidths() {
1726
- columns.forEach((col) => {
1727
- col.delete("width");
1728
- });
1729
- }
1730
- const columns = options.get("columns");
1731
- if (Array.isArray(columns)) {
1732
- const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
1733
- if (containsColumnWithWidth) {
1734
- const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
1735
- if (containsColumnWithoutWidth)
1736
- clearWidths();
1737
- else {
1738
- const sumWidths = columns.reduce((memo, col) => {
1739
- return memo + col.get("width");
1740
- }, 0);
1741
- const widthsDontAddUp = sumWidths !== 100;
1742
- if (widthsDontAddUp)
1743
- clearWidths();
1744
- }
1745
- }
1746
- }
1747
- }
1748
- },
1749
- {
1750
- name: "space",
1751
- type: "number",
1752
- defaultValue: 20,
1753
- helperText: "Size of gap between columns",
1754
- advanced: true
1755
- },
1756
- {
1757
- name: "stackColumnsAt",
1758
- type: "string",
1759
- defaultValue: "tablet",
1760
- helperText: "Convert horizontal columns to vertical at what device size",
1761
- enum: [
1762
- "tablet",
1763
- "mobile",
1764
- "never"
1765
- ],
1766
- advanced: true
1767
- },
1768
- {
1769
- name: "reverseColumnsWhenStacked",
1770
- type: "boolean",
1771
- defaultValue: false,
1772
- helperText: "When stacking columns for mobile devices, reverse the ordering",
1773
- advanced: true
1774
- }
1775
- ]
1776
- };
1777
- const componentInfo$8 = {
1778
- name: "Fragment",
1779
- static: true,
1780
- hidden: true,
1781
- canHaveChildren: true,
1782
- noWrap: true
1783
- };
1784
- const componentInfo$7 = {
1785
- name: "Image",
1786
- static: true,
1787
- 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",
1788
- defaultStyles: {
1789
- position: "relative",
1790
- minHeight: "20px",
1791
- minWidth: "20px",
1792
- overflow: "hidden"
1793
- },
1794
- canHaveChildren: true,
1795
- inputs: [
1796
- {
1797
- name: "image",
1798
- type: "file",
1799
- bubble: true,
1800
- allowedFileTypes: [
1801
- "jpeg",
1802
- "jpg",
1803
- "png",
1804
- "svg"
1805
- ],
1806
- required: true,
1807
- defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
1808
- onChange: (options) => {
1809
- const DEFAULT_ASPECT_RATIO = 0.7041;
1810
- options.delete("srcset");
1811
- options.delete("noWebp");
1812
- function loadImage(url, timeout = 6e4) {
1813
- return new Promise((resolve, reject) => {
1814
- const img = document.createElement("img");
1815
- let loaded = false;
1816
- img.onload = () => {
1817
- loaded = true;
1818
- resolve(img);
1819
- };
1820
- img.addEventListener("error", (event) => {
1821
- console.warn("Image load failed", event.error);
1822
- reject(event.error);
1823
- });
1824
- img.src = url;
1825
- setTimeout(() => {
1826
- if (!loaded)
1827
- reject(new Error("Image load timed out"));
1828
- }, timeout);
1829
- });
1830
- }
1831
- function round2(num) {
1832
- return Math.round(num * 1e3) / 1e3;
1833
- }
1834
- const value = options.get("image");
1835
- const aspectRatio = options.get("aspectRatio");
1836
- fetch(value).then((res) => res.blob()).then((blob) => {
1837
- if (blob.type.includes("svg"))
1838
- options.set("noWebp", true);
1839
- });
1840
- if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
1841
- return loadImage(value).then((img) => {
1842
- const possiblyUpdatedAspectRatio = options.get("aspectRatio");
1843
- if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
1844
- if (img.width && img.height) {
1845
- options.set("aspectRatio", round2(img.height / img.width));
1846
- options.set("height", img.height);
1847
- options.set("width", img.width);
1848
- }
1849
- }
1850
- });
1851
- }
1852
- },
1853
- {
1854
- name: "backgroundSize",
1855
- type: "text",
1856
- defaultValue: "cover",
1857
- enum: [
1858
- {
1859
- label: "contain",
1860
- value: "contain",
1861
- helperText: "The image should never get cropped"
1862
- },
1863
- {
1864
- label: "cover",
1865
- value: "cover",
1866
- helperText: "The image should fill it's box, cropping when needed"
1867
- }
1868
- ]
1869
- },
1870
- {
1871
- name: "backgroundPosition",
1872
- type: "text",
1873
- defaultValue: "center",
1874
- enum: [
1875
- "center",
1876
- "top",
1877
- "left",
1878
- "right",
1879
- "bottom",
1880
- "top left",
1881
- "top right",
1882
- "bottom left",
1883
- "bottom right"
1884
- ]
1885
- },
1886
- {
1887
- name: "altText",
1888
- type: "string",
1889
- helperText: "Text to display when the user has images off"
1890
- },
1891
- {
1892
- name: "height",
1893
- type: "number",
1894
- hideFromUI: true
1895
- },
1896
- {
1897
- name: "width",
1898
- type: "number",
1899
- hideFromUI: true
1900
- },
1901
- {
1902
- name: "sizes",
1903
- type: "string",
1904
- hideFromUI: true
1905
- },
1906
- {
1907
- name: "srcset",
1908
- type: "string",
1909
- hideFromUI: true
1910
- },
1911
- {
1912
- name: "lazy",
1913
- type: "boolean",
1914
- defaultValue: true,
1915
- hideFromUI: true
1916
- },
1917
- {
1918
- name: "fitContent",
1919
- type: "boolean",
1920
- helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
1921
- defaultValue: true
1922
- },
1923
- {
1924
- name: "aspectRatio",
1925
- type: "number",
1926
- 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",
1927
- advanced: true,
1928
- defaultValue: 0.7041
1929
- }
1930
- ]
1931
- };
1932
- const componentInfo$6 = {
1933
- name: "Core:Section",
1934
- static: true,
1935
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
1936
- inputs: [
1937
- {
1938
- name: "maxWidth",
1939
- type: "number",
1940
- defaultValue: 1200
1941
- },
1942
- {
1943
- name: "lazyLoad",
1944
- type: "boolean",
1945
- defaultValue: false,
1946
- advanced: true,
1947
- description: "Only render this section when in view"
1948
- }
1949
- ],
1950
- defaultStyles: {
1951
- paddingLeft: "20px",
1952
- paddingRight: "20px",
1953
- paddingTop: "50px",
1954
- paddingBottom: "50px",
1955
- marginTop: "0px",
1956
- width: "100vw",
1957
- marginLeft: "calc(50% - 50vw)"
1958
- },
1959
- canHaveChildren: true,
1960
- defaultChildren: [
1961
- {
1962
- "@type": "@builder.io/sdk:Element",
1963
- responsiveStyles: {
1964
- large: {
1965
- textAlign: "center"
1966
- }
1967
- },
1968
- component: {
1969
- name: "Text",
1970
- options: {
1971
- 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>"
1972
- }
1973
- }
1974
- }
1975
- ]
1976
- };
1977
- const componentInfo$5 = {
1978
- name: "Symbol",
1979
- noWrap: true,
1980
- static: true,
1981
- isRSC: true,
1982
- inputs: [
1983
- {
1984
- name: "symbol",
1985
- type: "uiSymbol"
1986
- },
1987
- {
1988
- name: "dataOnly",
1989
- helperText: "Make this a data symbol that doesn't display any UI",
1990
- type: "boolean",
1991
- defaultValue: false,
1992
- advanced: true,
1993
- hideFromUI: true
1994
- },
1995
- {
1996
- name: "inheritState",
1997
- helperText: "Inherit the parent component state and data",
1998
- type: "boolean",
1999
- defaultValue: false,
2000
- advanced: true
2001
- },
2002
- {
2003
- name: "renderToLiquid",
2004
- helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
2005
- type: "boolean",
2006
- defaultValue: false,
2007
- advanced: true,
2008
- hideFromUI: true
2009
- },
2010
- {
2011
- name: "useChildren",
2012
- hideFromUI: true,
2013
- type: "boolean"
2014
- }
2015
- ]
2016
- };
2017
- const componentInfo$4 = {
2018
- name: "Text",
2019
- static: true,
2020
- isRSC: true,
2021
- 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",
2022
- inputs: [
2023
- {
2024
- name: "text",
2025
- type: "html",
2026
- required: true,
2027
- autoFocus: true,
2028
- bubble: true,
2029
- defaultValue: "Enter some text..."
2030
- }
2031
- ],
2032
- defaultStyles: {
2033
- lineHeight: "normal",
2034
- height: "auto",
2035
- textAlign: "center"
2036
- }
2037
- };
2038
- const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2039
- return /* @__PURE__ */ _jsxQ("span", {
2040
- style: {
2041
- outline: "none"
2042
- }
2043
- }, {
2044
- class: "builder-text",
2045
- dangerouslySetInnerHTML: _fnSignal((p0) => p0.text?.toString() || "", [
2046
- props
2047
- ], 'p0.text?.toString()||""')
2048
- }, null, 3, "yO_0");
2049
- }, "Text_component_15p0cKUxgIE"));
2050
- const componentInfo$3 = {
2051
- name: "Video",
2052
- canHaveChildren: true,
2053
- defaultStyles: {
2054
- minHeight: "20px",
2055
- minWidth: "20px"
2056
- },
2057
- 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",
2058
- inputs: [
2059
- {
2060
- name: "video",
2061
- type: "file",
2062
- allowedFileTypes: [
2063
- "mp4"
2064
- ],
2065
- bubble: true,
2066
- defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
2067
- required: true
2068
- },
2069
- {
2070
- name: "posterImage",
2071
- type: "file",
2072
- allowedFileTypes: [
2073
- "jpeg",
2074
- "png"
2075
- ],
2076
- helperText: "Image to show before the video plays"
2077
- },
2078
- {
2079
- name: "autoPlay",
2080
- type: "boolean",
2081
- defaultValue: true
2082
- },
2083
- {
2084
- name: "controls",
2085
- type: "boolean",
2086
- defaultValue: false
2087
- },
2088
- {
2089
- name: "muted",
2090
- type: "boolean",
2091
- defaultValue: true
2092
- },
2093
- {
2094
- name: "loop",
2095
- type: "boolean",
2096
- defaultValue: true
2097
- },
2098
- {
2099
- name: "playsInline",
2100
- type: "boolean",
2101
- defaultValue: true
2102
- },
2103
- {
2104
- name: "fit",
2105
- type: "text",
2106
- defaultValue: "cover",
2107
- enum: [
2108
- "contain",
2109
- "cover",
2110
- "fill",
2111
- "auto"
2112
- ]
2113
- },
2114
- {
2115
- name: "preload",
2116
- type: "text",
2117
- defaultValue: "metadata",
2118
- enum: [
2119
- "auto",
2120
- "metadata",
2121
- "none"
2122
- ]
2123
- },
2124
- {
2125
- name: "fitContent",
2126
- type: "boolean",
2127
- helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
2128
- defaultValue: true,
2129
- advanced: true
2130
- },
2131
- {
2132
- name: "position",
2133
- type: "text",
2134
- defaultValue: "center",
2135
- enum: [
2136
- "center",
2137
- "top",
2138
- "left",
2139
- "right",
2140
- "bottom",
2141
- "top left",
2142
- "top right",
2143
- "bottom left",
2144
- "bottom right"
2145
- ]
2146
- },
2147
- {
2148
- name: "height",
2149
- type: "number",
2150
- advanced: true
2151
- },
2152
- {
2153
- name: "width",
2154
- type: "number",
2155
- advanced: true
2156
- },
2157
- {
2158
- name: "aspectRatio",
2159
- type: "number",
2160
- advanced: true,
2161
- defaultValue: 0.7004048582995948
2162
- },
2163
- {
2164
- name: "lazyLoad",
2165
- type: "boolean",
2166
- helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
2167
- defaultValue: true,
2168
- advanced: true
2169
- }
2170
- ]
2171
- };
2172
- const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2173
- const videoProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2174
- const [props2] = useLexicalScope();
2175
- return {
2176
- ...props2.autoPlay === true ? {
2177
- autoPlay: true
2178
- } : {},
2179
- ...props2.muted === true ? {
2180
- muted: true
2181
- } : {},
2182
- ...props2.controls === true ? {
2183
- controls: true
2184
- } : {},
2185
- ...props2.loop === true ? {
2186
- loop: true
2187
- } : {},
2188
- ...props2.playsInline === true ? {
2189
- playsInline: true
2190
- } : {}
2191
- };
2192
- }, "Video_component_videoProps_useComputed_60AadUGY06E", [
2193
- props
2194
- ]));
2195
- const spreadProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2196
- const [props2, videoProps2] = useLexicalScope();
2197
- return {
2198
- ...props2.attributes,
2199
- ...videoProps2.value
2200
- };
2201
- }, "Video_component_spreadProps_useComputed_ZdLsx18NYH4", [
2202
- props,
2203
- videoProps
2204
- ]));
2205
- return /* @__PURE__ */ _jsxS("video", {
2206
- ...spreadProps.value
2207
- }, {
2208
- preload: _fnSignal((p0) => p0.preload || "metadata", [
2209
- props
2210
- ], 'p0.preload||"metadata"'),
2211
- style: _fnSignal((p0) => ({
2212
- width: "100%",
2213
- height: "100%",
2214
- ...p0.attributes?.style,
2215
- objectFit: p0.fit,
2216
- objectPosition: p0.position,
2217
- borderRadius: 1
2218
- }), [
2219
- props
2220
- ], '{width:"100%",height:"100%",...p0.attributes?.style,objectFit:p0.fit,objectPosition:p0.position,borderRadius:1}'),
2221
- src: _fnSignal((p0) => p0.video || "no-src", [
2222
- props
2223
- ], 'p0.video||"no-src"'),
2224
- poster: _fnSignal((p0) => p0.posterImage, [
2225
- props
2226
- ], "p0.posterImage")
2227
- }, 0, "j7_0");
2228
- }, "Video_component_qdcTZflYyoQ"));
2229
- const componentInfo$2 = {
2230
- name: "Embed",
2231
- static: true,
2232
- inputs: [
2233
- {
2234
- name: "url",
2235
- type: "url",
2236
- required: true,
2237
- defaultValue: "",
2238
- helperText: "e.g. enter a youtube url, google map, etc",
2239
- onChange: (options) => {
2240
- const url = options.get("url");
2241
- if (url) {
2242
- options.set("content", "Loading...");
2243
- const apiKey = "ae0e60e78201a3f2b0de4b";
2244
- return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
2245
- if (options.get("url") === url) {
2246
- if (data.html)
2247
- options.set("content", data.html);
2248
- else
2249
- options.set("content", "Invalid url, please try another");
2250
- }
2251
- }).catch((_err) => {
2252
- options.set("content", "There was an error embedding this URL, please try again or another URL");
2253
- });
2254
- } else
2255
- options.delete("content");
2256
- }
2257
- },
2258
- {
2259
- name: "content",
2260
- type: "html",
2261
- defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
2262
- hideFromUI: true
2263
- }
2264
- ]
2265
- };
2266
- const SCRIPT_MIME_TYPES = [
2267
- "text/javascript",
2268
- "application/javascript",
2269
- "application/ecmascript"
2270
- ];
2271
- const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
2272
- const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
2273
- if (!elem.value || !elem.value.getElementsByTagName)
2274
- return;
2275
- const scripts = elem.value.getElementsByTagName("script");
2276
- for (let i = 0; i < scripts.length; i++) {
2277
- const script = scripts[i];
2278
- if (script.src && !state.scriptsInserted.includes(script.src)) {
2279
- state.scriptsInserted.push(script.src);
2280
- const newScript = document.createElement("script");
2281
- newScript.async = true;
2282
- newScript.src = script.src;
2283
- document.head.appendChild(newScript);
2284
- } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
2285
- try {
2286
- state.scriptsRun.push(script.innerText);
2287
- new Function(script.innerText)();
2288
- } catch (error) {
2289
- console.warn("`Embed`: Error running script:", error);
2290
- }
2291
- }
2292
- };
2293
- const Embed = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2294
- const elem = useSignal();
2295
- const state = useStore({
2296
- ranInitFn: false,
2297
- scriptsInserted: [],
2298
- scriptsRun: []
2299
- });
2300
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
2301
- const [elem2, props2, state2] = useLexicalScope();
2302
- track2(() => elem2.value);
2303
- track2(() => state2.ranInitFn);
2304
- if (elem2.value && !state2.ranInitFn) {
2305
- state2.ranInitFn = true;
2306
- findAndRunScripts$1(props2, state2, elem2);
2307
- }
2308
- }, "Embed_component_useTask_bg7ez0XUtiM", [
2309
- elem,
2310
- props,
2311
- state
2312
- ]));
2313
- return /* @__PURE__ */ _jsxQ("div", {
2314
- ref: elem
2315
- }, {
2316
- class: "builder-embed",
2317
- dangerouslySetInnerHTML: _fnSignal((p0) => p0.content, [
2318
- props
2319
- ], "p0.content")
2320
- }, null, 3, "9r_0");
2321
- }, "Embed_component_Uji08ORjXbE"));
2322
- const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2323
- return /* @__PURE__ */ _jsxS("img", {
2324
- ...props.attributes
2325
- }, {
2326
- style: _fnSignal((p0) => ({
2327
- objectFit: p0.backgroundSize || "cover",
2328
- objectPosition: p0.backgroundPosition || "center"
2329
- }), [
2330
- props
2331
- ], '{objectFit:p0.backgroundSize||"cover",objectPosition:p0.backgroundPosition||"center"}'),
2332
- alt: _fnSignal((p0) => p0.altText, [
2333
- props
2334
- ], "p0.altText"),
2335
- src: _fnSignal((p0) => p0.imgSrc || p0.image, [
2336
- props
2337
- ], "p0.imgSrc||p0.image")
2338
- }, 0, isEditing() && props.imgSrc || "default-key");
2339
- }, "ImgComponent_component_FXvIDBSffO8"));
2340
- const componentInfo$1 = {
2341
- name: "Raw:Img",
2342
- hideFromInsertMenu: true,
2343
- 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",
2344
- inputs: [
2345
- {
2346
- name: "image",
2347
- bubble: true,
2348
- type: "file",
2349
- allowedFileTypes: [
2350
- "jpeg",
2351
- "jpg",
2352
- "png",
2353
- "svg",
2354
- "gif",
2355
- "webp"
2356
- ],
2357
- required: true
2358
- }
2359
- ],
2360
- noWrap: true,
2361
- static: true
2362
- };
2363
- const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
2364
- if (elem.value && elem.value.getElementsByTagName && typeof window !== "undefined") {
2365
- const scripts = elem.value.getElementsByTagName("script");
2366
- for (let i = 0; i < scripts.length; i++) {
2367
- const script = scripts[i];
2368
- if (script.src) {
2369
- if (state.scriptsInserted.includes(script.src))
2370
- continue;
2371
- state.scriptsInserted.push(script.src);
2372
- const newScript = document.createElement("script");
2373
- newScript.async = true;
2374
- newScript.src = script.src;
2375
- document.head.appendChild(newScript);
2376
- } else if (!script.type || [
2377
- "text/javascript",
2378
- "application/javascript",
2379
- "application/ecmascript"
2380
- ].includes(script.type)) {
2381
- if (state.scriptsRun.includes(script.innerText))
2382
- continue;
2383
- try {
2384
- state.scriptsRun.push(script.innerText);
2385
- new Function(script.innerText)();
2386
- } catch (error) {
2387
- console.warn("`CustomCode`: Error running script:", error);
2388
- }
2389
- }
2390
- }
2391
- }
2392
- };
2393
- const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2394
- const elem = useSignal();
2395
- const state = useStore({
2396
- scriptsInserted: [],
2397
- scriptsRun: []
2398
- });
2399
- useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
2400
- const [elem2, props2, state2] = useLexicalScope();
2401
- findAndRunScripts(props2, state2, elem2);
2402
- }, "CustomCode_component_useVisibleTask_S5QgEQZj6YE", [
2403
- elem,
2404
- props,
2405
- state
2406
- ]));
2407
- return /* @__PURE__ */ _jsxQ("div", {
2408
- ref: elem
2409
- }, {
2410
- class: _fnSignal((p0) => "builder-custom-code" + (p0.replaceNodes ? " replace-nodes" : ""), [
2411
- props
2412
- ], '"builder-custom-code"+(p0.replaceNodes?" replace-nodes":"")'),
2413
- dangerouslySetInnerHTML: _fnSignal((p0) => p0.code, [
2414
- props
2415
- ], "p0.code")
2416
- }, null, 3, "bY_0");
2417
- }, "CustomCode_component_uYOSy7w7Zqw"));
2418
- const componentInfo = {
2419
- name: "Custom Code",
2420
- static: true,
2421
- requiredPermissions: [
2422
- "editCode"
2423
- ],
2424
- inputs: [
2425
- {
2426
- name: "code",
2427
- type: "html",
2428
- required: true,
2429
- defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2430
- code: true
2431
- },
2432
- {
2433
- name: "replaceNodes",
2434
- type: "boolean",
2435
- helperText: "Preserve server rendered dom nodes",
2436
- advanced: true
2437
- },
2438
- {
2439
- name: "scriptsClientOnly",
2440
- type: "boolean",
2441
- defaultValue: false,
2442
- helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2443
- advanced: true
2444
- }
2445
- ]
2446
- };
2447
- const getDefaultRegisteredComponents = () => [
2448
- {
2449
- component: Button,
2450
- ...componentInfo$a
2451
- },
2452
- {
2453
- component: Columns,
2454
- ...componentInfo$9
2455
- },
2456
- {
2457
- component: CustomCode,
2458
- ...componentInfo
2459
- },
2460
- {
2461
- component: Embed,
2462
- ...componentInfo$2
2463
- },
2464
- {
2465
- component: FragmentComponent,
2466
- ...componentInfo$8
2467
- },
2468
- {
2469
- component: Image,
2470
- ...componentInfo$7
2471
- },
2472
- {
2473
- component: ImgComponent,
2474
- ...componentInfo$1
2475
- },
2476
- {
2477
- component: SectionComponent,
2478
- ...componentInfo$6
2479
- },
2480
- {
2481
- component: Symbol$1,
2482
- ...componentInfo$5
2483
- },
2484
- {
2485
- component: Text,
2486
- ...componentInfo$4
2487
- },
2488
- {
2489
- component: Video,
2490
- ...componentInfo$3
2491
- }
2492
- ];
2493
- const components = [];
2494
- const createRegisterComponentMessage = (info) => ({
2495
- type: "builder.registerComponent",
2496
- data: info
2497
- });
2498
- const serializeFn = (fnValue) => {
2499
- const fnStr = fnValue.toString().trim();
2500
- const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
2501
- return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
2502
- };
2503
- const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
2504
- const serializeComponentInfo = ({ inputs, ...info }) => ({
2505
- ...fastClone(info),
2506
- inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
2507
- ...acc,
2508
- [key]: serializeValue(value)
2509
- }), {}))
2510
- });
2511
- const getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
2512
- ...variant,
2513
- testVariationId: variant.id,
2514
- id: content?.id
2515
- }));
2516
- const checkShouldRunVariants = ({ canTrack, content }) => {
2517
- const hasVariants = getVariants(content).length > 0;
2518
- if (!hasVariants)
2519
- return false;
2520
- if (!canTrack)
2521
- return false;
2522
- if (isBrowser())
2523
- return false;
2524
- return true;
2525
- };
2526
- function bldrAbTest(contentId, variants, isHydrationTarget2) {
2527
- function getAndSetVariantId2() {
2528
- function setCookie2(name, value, days) {
2529
- let expires = "";
2530
- if (days) {
2531
- const date = new Date();
2532
- date.setTime(date.getTime() + days * 864e5);
2533
- expires = "; expires=" + date.toUTCString();
2534
- }
2535
- document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
2536
- }
2537
- function getCookie2(name) {
2538
- const nameEQ = name + "=";
2539
- const ca = document.cookie.split(";");
2540
- for (let i = 0; i < ca.length; i++) {
2541
- let c = ca[i];
2542
- while (c.charAt(0) === " ")
2543
- c = c.substring(1, c.length);
2544
- if (c.indexOf(nameEQ) === 0)
2545
- return c.substring(nameEQ.length, c.length);
2546
- }
2547
- return null;
2548
- }
2549
- const cookieName = `builder.tests.${contentId}`;
2550
- const variantInCookie = getCookie2(cookieName);
2551
- const availableIDs = variants.map((vr) => vr.id).concat(contentId);
2552
- if (variantInCookie && availableIDs.includes(variantInCookie))
2553
- return variantInCookie;
2554
- let n = 0;
2555
- const random = Math.random();
2556
- for (let i = 0; i < variants.length; i++) {
2557
- const variant = variants[i];
2558
- const testRatio = variant.testRatio;
2559
- n += testRatio;
2560
- if (random < n) {
2561
- setCookie2(cookieName, variant.id);
2562
- return variant.id;
2563
- }
2564
- }
2565
- setCookie2(cookieName, contentId);
2566
- return contentId;
2567
- }
2568
- const winningVariantId = getAndSetVariantId2();
2569
- const styleEl = document.currentScript?.previousElementSibling;
2570
- if (isHydrationTarget2) {
2571
- styleEl.remove();
2572
- const thisScriptEl = document.currentScript;
2573
- thisScriptEl?.remove();
2574
- } else {
2575
- const newStyleStr = variants.concat({
2576
- id: contentId
2577
- }).filter((variant) => variant.id !== winningVariantId).map((value) => {
2578
- return `.variant-${value.id} { display: none; }
2579
- `;
2580
- }).join("");
2581
- styleEl.innerHTML = newStyleStr;
2582
- }
2583
- }
2584
- function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
2585
- if (!navigator.cookieEnabled)
2586
- return;
2587
- function getCookie2(name) {
2588
- const nameEQ = name + "=";
2589
- const ca = document.cookie.split(";");
2590
- for (let i = 0; i < ca.length; i++) {
2591
- let c = ca[i];
2592
- while (c.charAt(0) === " ")
2593
- c = c.substring(1, c.length);
2594
- if (c.indexOf(nameEQ) === 0)
2595
- return c.substring(nameEQ.length, c.length);
2596
- }
2597
- return null;
2598
- }
2599
- const cookieName = `builder.tests.${defaultContentId}`;
2600
- const variantId = getCookie2(cookieName);
2601
- const parentDiv = document.currentScript?.parentElement;
2602
- const variantIsDefaultContent = variantContentId === defaultContentId;
2603
- if (variantId === variantContentId) {
2604
- if (variantIsDefaultContent)
2605
- return;
2606
- parentDiv?.removeAttribute("hidden");
2607
- parentDiv?.removeAttribute("aria-hidden");
2608
- } else {
2609
- if (variantIsDefaultContent) {
2610
- if (isHydrationTarget2)
2611
- parentDiv?.remove();
2612
- else {
2613
- parentDiv?.setAttribute("hidden", "true");
2614
- parentDiv?.setAttribute("aria-hidden", "true");
2615
- }
2616
- }
2617
- return;
2618
- }
2619
- return;
2620
- }
2621
- const getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
2622
- const isHydrationTarget = getIsHydrationTarget(TARGET);
2623
- const AB_TEST_FN_NAME = "builderIoAbTest";
2624
- const CONTENT_FN_NAME = "builderIoRenderContent";
2625
- const getScriptString = () => {
2626
- const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
2627
- const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
2628
- return `
2629
- window.${AB_TEST_FN_NAME} = ${fnStr}
2630
- window.${CONTENT_FN_NAME} = ${fnStr2}
2631
- `;
2632
- };
2633
- const getVariantsScriptString = (variants, contentId) => {
2634
- return `
2635
- window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
2636
- };
2637
- const getRenderContentScriptString = ({ contentId, variationId }) => {
2638
- return `
2639
- window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
2640
- };
2641
- const InlinedScript = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2642
- return /* @__PURE__ */ _jsxQ("script", null, {
2643
- dangerouslySetInnerHTML: _fnSignal((p0) => p0.scriptStr, [
2644
- props
2645
- ], "p0.scriptStr"),
2646
- id: _fnSignal((p0) => p0.id, [
2647
- props
2648
- ], "p0.id")
2649
- }, null, 3, "WO_0");
2650
- }, "InlinedScript_component_hwThBdhA8rw"));
2651
- function getGlobalThis() {
2652
- if (typeof globalThis !== "undefined")
2653
- return globalThis;
2654
- if (typeof window !== "undefined")
2655
- return window;
2656
- if (typeof global !== "undefined")
2657
- return global;
2658
- if (typeof self !== "undefined")
2659
- return self;
2660
- return globalThis;
2661
- }
2662
- function getFetch() {
2663
- const globalFetch = getGlobalThis().fetch;
2664
- if (typeof globalFetch === "undefined") {
2665
- console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project.
2666
- For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
2667
- throw new Error("Builder SDK could not find a global `fetch` function");
2668
- }
2669
- return globalFetch;
2670
- }
2671
- const fetch$1 = getFetch();
2672
- function flatten(object, path = null, separator = ".") {
2673
- return Object.keys(object).reduce((acc, key) => {
2674
- const value = object[key];
2675
- const newPath = [
2676
- path,
2677
- key
2678
- ].filter(Boolean).join(separator);
2679
- const isObject = [
2680
- typeof value === "object",
2681
- value !== null,
2682
- !(Array.isArray(value) && value.length === 0)
2683
- ].every(Boolean);
2684
- return isObject ? {
2685
- ...acc,
2686
- ...flatten(value, newPath, separator)
2687
- } : {
2688
- ...acc,
2689
- [newPath]: value
2690
- };
2691
- }, {});
2692
- }
2693
- const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
2694
- const BUILDER_OPTIONS_PREFIX = "options.";
2695
- const convertSearchParamsToQueryObject = (searchParams) => {
2696
- const options = {};
2697
- searchParams.forEach((value, key) => {
2698
- options[key] = value;
2699
- });
2700
- return options;
2701
- };
2702
- const getBuilderSearchParams = (_options) => {
2703
- if (!_options)
2704
- return {};
2705
- const options = normalizeSearchParams(_options);
2706
- const newOptions = {};
2707
- Object.keys(options).forEach((key) => {
2708
- if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
2709
- const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
2710
- newOptions[trimmedKey] = options[key];
2711
- }
2712
- });
2713
- return newOptions;
2714
- };
2715
- const getBuilderSearchParamsFromWindow = () => {
2716
- if (!isBrowser())
2717
- return {};
2718
- const searchParams = new URLSearchParams(window.location.search);
2719
- return getBuilderSearchParams(searchParams);
2720
- };
2721
- const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
2722
- const DEFAULT_API_VERSION = "v3";
2723
- const generateContentUrl = (options) => {
2724
- const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, enrich, locale, apiVersion = DEFAULT_API_VERSION } = options;
2725
- if (!apiKey)
2726
- throw new Error("Missing API key");
2727
- if (![
2728
- "v2",
2729
- "v3"
2730
- ].includes(apiVersion))
2731
- throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
2732
- const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}${enrich ? `&enrich=${enrich}` : ""}`);
2733
- const queryOptions = {
2734
- ...getBuilderSearchParamsFromWindow(),
2735
- ...normalizeSearchParams(options.options || {})
2736
- };
2737
- const flattened = flatten(queryOptions);
2738
- for (const key in flattened)
2739
- url.searchParams.set(key, String(flattened[key]));
2740
- if (userAttributes)
2741
- url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
2742
- if (query) {
2743
- const flattened2 = flatten({
2744
- query
2745
- });
2746
- for (const key in flattened2)
2747
- url.searchParams.set(key, JSON.stringify(flattened2[key]));
2748
- }
2749
- return url;
2750
- };
2751
- const checkContentHasResults = (content) => "results" in content;
2752
- async function getContent(options) {
2753
- const allContent = await getAllContent({
2754
- ...options,
2755
- limit: 1
2756
- });
2757
- if (allContent)
2758
- return allContent.results[0] || null;
2759
- return null;
2760
- }
2761
- const fetchContent$1 = async (options) => {
2762
- const url = generateContentUrl(options);
2763
- const res = await fetch$1(url.href);
2764
- const content = await res.json();
2765
- return content;
2766
- };
2767
- const processContentResult = async (options, content, url = generateContentUrl(options)) => {
2768
- const canTrack = getDefaultCanTrack(options.canTrack);
2769
- url.search.includes(`preview=`);
2770
- if (!canTrack)
2771
- return content;
2772
- if (!(isBrowser() || TARGET === "reactNative"))
2773
- return content;
2774
- try {
2775
- const newResults = [];
2776
- for (const item of content.results)
2777
- newResults.push(await handleABTesting({
2778
- item,
2779
- canTrack
2780
- }));
2781
- content.results = newResults;
2782
- } catch (e) {
2783
- logger.error("Could not process A/B tests. ", e);
2784
- }
2785
- return content;
2786
- };
2787
- async function getAllContent(options) {
2788
- try {
2789
- const url = generateContentUrl(options);
2790
- const content = await fetchContent$1(options);
2791
- if (!checkContentHasResults(content)) {
2792
- logger.error("Error fetching data. ", {
2793
- url,
2794
- content,
2795
- options
2796
- });
2797
- return null;
2798
- }
2799
- return processContentResult(options, content);
2800
- } catch (error) {
2801
- logger.error("Error fetching data. ", error);
2802
- return null;
2803
- }
2804
- }
2805
- function isPreviewing() {
2806
- if (!isBrowser())
2807
- return false;
2808
- if (isEditing())
2809
- return false;
2810
- return Boolean(location.search.indexOf("builder.preview=") !== -1);
2811
- }
2812
- function uuidv4() {
2813
- return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
2814
- const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
2815
- return v.toString(16);
2816
- });
2817
- }
2818
- function uuid() {
2819
- return uuidv4().replace(/-/g, "");
2820
- }
2821
- const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
2822
- const getSessionId = async ({ canTrack }) => {
2823
- if (!canTrack)
2824
- return void 0;
2825
- const sessionId = await getCookie({
2826
- name: SESSION_LOCAL_STORAGE_KEY,
2827
- canTrack
2828
- });
2829
- if (checkIsDefined(sessionId))
2830
- return sessionId;
2831
- else {
2832
- const newSessionId = createSessionId();
2833
- setSessionId({
2834
- id: newSessionId,
2835
- canTrack
2836
- });
2837
- return newSessionId;
2838
- }
2839
- };
2840
- const createSessionId = () => uuid();
2841
- const setSessionId = ({ id, canTrack }) => setCookie({
2842
- name: SESSION_LOCAL_STORAGE_KEY,
2843
- value: id,
2844
- canTrack
2845
- });
2846
- const getLocalStorage = () => isBrowser() && typeof localStorage !== "undefined" ? localStorage : void 0;
2847
- const getLocalStorageItem = ({ key, canTrack }) => {
2848
- try {
2849
- if (canTrack)
2850
- return getLocalStorage()?.getItem(key);
2851
- return void 0;
2852
- } catch (err) {
2853
- console.debug("[LocalStorage] GET error: ", err);
2854
- return void 0;
2855
- }
2856
- };
2857
- const setLocalStorageItem = ({ key, canTrack, value }) => {
2858
- try {
2859
- if (canTrack)
2860
- getLocalStorage()?.setItem(key, value);
2861
- } catch (err) {
2862
- console.debug("[LocalStorage] SET error: ", err);
2863
- }
2864
- };
2865
- const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
2866
- const getVisitorId = ({ canTrack }) => {
2867
- if (!canTrack)
2868
- return void 0;
2869
- const visitorId = getLocalStorageItem({
2870
- key: VISITOR_LOCAL_STORAGE_KEY,
2871
- canTrack
2872
- });
2873
- if (checkIsDefined(visitorId))
2874
- return visitorId;
2875
- else {
2876
- const newVisitorId = createVisitorId();
2877
- setVisitorId({
2878
- id: newVisitorId,
2879
- canTrack
2880
- });
2881
- return newVisitorId;
2882
- }
2883
- };
2884
- const createVisitorId = () => uuid();
2885
- const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
2886
- key: VISITOR_LOCAL_STORAGE_KEY,
2887
- value: id,
2888
- canTrack
2889
- });
2890
- const getLocation = () => {
2891
- if (isBrowser()) {
2892
- const parsedLocation = new URL(location.href);
2893
- if (parsedLocation.pathname === "")
2894
- parsedLocation.pathname = "/";
2895
- return parsedLocation;
2896
- } else {
2897
- console.warn("Cannot get location for tracking in non-browser environment");
2898
- return null;
2899
- }
2900
- };
2901
- const getUserAgent = () => typeof navigator === "object" && navigator.userAgent || "";
2902
- const getUserAttributes = () => {
2903
- const userAgent = getUserAgent();
2904
- const isMobile = {
2905
- Android() {
2906
- return userAgent.match(/Android/i);
2907
- },
2908
- BlackBerry() {
2909
- return userAgent.match(/BlackBerry/i);
2910
- },
2911
- iOS() {
2912
- return userAgent.match(/iPhone|iPod/i);
2913
- },
2914
- Opera() {
2915
- return userAgent.match(/Opera Mini/i);
2916
- },
2917
- Windows() {
2918
- return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
2919
- },
2920
- any() {
2921
- return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === "reactNative";
2922
- }
2923
- };
2924
- const isTablet = userAgent.match(/Tablet|iPad/i);
2925
- const url = getLocation();
2926
- return {
2927
- urlPath: url?.pathname,
2928
- host: url?.host || url?.hostname,
2929
- device: isTablet ? "tablet" : isMobile.any() ? "mobile" : "desktop"
2930
- };
2931
- };
2932
- const getTrackingEventData = async ({ canTrack }) => {
2933
- if (!canTrack)
2934
- return {
2935
- visitorId: void 0,
2936
- sessionId: void 0
2937
- };
2938
- const sessionId = await getSessionId({
2939
- canTrack
2940
- });
2941
- const visitorId = getVisitorId({
2942
- canTrack
2943
- });
2944
- return {
2945
- sessionId,
2946
- visitorId
2947
- };
2948
- };
2949
- const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
2950
- type: eventType,
2951
- data: {
2952
- ...properties,
2953
- metadata: {
2954
- url: location.href,
2955
- ...metadata
2956
- },
2957
- ...await getTrackingEventData({
2958
- canTrack
2959
- }),
2960
- userAttributes: getUserAttributes(),
2961
- ownerId: apiKey
2962
- }
2963
- });
2964
- async function _track(eventProps) {
2965
- if (!eventProps.apiKey) {
2966
- logger.error("Missing API key for track call. Please provide your API key.");
2967
- return;
2968
- }
2969
- if (!eventProps.canTrack)
2970
- return;
2971
- if (isEditing())
2972
- return;
2973
- if (!(isBrowser() || TARGET === "reactNative"))
2974
- return;
2975
- return fetch(`https://cdn.builder.io/api/v1/track`, {
2976
- method: "POST",
2977
- body: JSON.stringify({
2978
- events: [
2979
- await createEvent(eventProps)
2980
- ]
2981
- }),
2982
- headers: {
2983
- "content-type": "application/json"
2984
- },
2985
- mode: "cors"
2986
- }).catch((err) => {
2987
- console.error("Failed to track: ", err);
2988
- });
2989
- }
2990
- const track = (args) => _track({
2991
- ...args,
2992
- canTrack: true
2993
- });
2994
- function round(num) {
2995
- return Math.round(num * 1e3) / 1e3;
2996
- }
2997
- const findParentElement = (target, callback, checkElement = true) => {
2998
- if (!(target instanceof HTMLElement))
2999
- return null;
3000
- let parent2 = checkElement ? target : target.parentElement;
3001
- do {
3002
- if (!parent2)
3003
- return null;
3004
- const matches = callback(parent2);
3005
- if (matches)
3006
- return parent2;
3007
- } while (parent2 = parent2.parentElement);
3008
- return null;
3009
- };
3010
- const findBuilderParent = (target) => findParentElement(target, (el) => {
3011
- const id = el.getAttribute("builder-id") || el.id;
3012
- return Boolean(id?.indexOf("builder-") === 0);
3013
- });
3014
- const computeOffset = ({ event, target }) => {
3015
- const targetRect = target.getBoundingClientRect();
3016
- const xOffset = event.clientX - targetRect.left;
3017
- const yOffset = event.clientY - targetRect.top;
3018
- const xRatio = round(xOffset / targetRect.width);
3019
- const yRatio = round(yOffset / targetRect.height);
3020
- return {
3021
- x: xRatio,
3022
- y: yRatio
3023
- };
3024
- };
3025
- const getInteractionPropertiesForEvent = (event) => {
3026
- const target = event.target;
3027
- const targetBuilderElement = target && findBuilderParent(target);
3028
- const builderId = targetBuilderElement?.getAttribute("builder-id") || targetBuilderElement?.id;
3029
- return {
3030
- targetBuilderElement: builderId || void 0,
3031
- metadata: {
3032
- targetOffset: target ? computeOffset({
3033
- event,
3034
- target
3035
- }) : void 0,
3036
- builderTargetOffset: targetBuilderElement ? computeOffset({
3037
- event,
3038
- target: targetBuilderElement
3039
- }) : void 0,
3040
- builderElementIndex: targetBuilderElement && builderId ? [].slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : void 0
3041
- }
3042
- };
3043
- };
3044
- const SDK_VERSION = "0.5.3-2";
3045
- const registry = {};
3046
- function register(type, info) {
3047
- let typeList = registry[type];
3048
- if (!typeList)
3049
- typeList = registry[type] = [];
3050
- typeList.push(info);
3051
- if (isBrowser()) {
3052
- const message = {
3053
- type: "builder.register",
3054
- data: {
3055
- type,
3056
- info
3057
- }
3058
- };
3059
- try {
3060
- parent.postMessage(message, "*");
3061
- if (parent !== window)
3062
- window.postMessage(message, "*");
3063
- } catch (err) {
3064
- console.debug("Could not postmessage", err);
3065
- }
3066
- }
3067
- }
3068
- const registerInsertMenu = () => {
3069
- register("insertMenu", {
3070
- name: "_default",
3071
- default: true,
3072
- items: [
3073
- {
3074
- name: "Box"
3075
- },
3076
- {
3077
- name: "Text"
3078
- },
3079
- {
3080
- name: "Image"
3081
- },
3082
- {
3083
- name: "Columns"
3084
- },
3085
- ...[
3086
- {
3087
- name: "Core:Section"
3088
- },
3089
- {
3090
- name: "Core:Button"
3091
- },
3092
- {
3093
- name: "Embed"
3094
- },
3095
- {
3096
- name: "Custom Code"
3097
- }
3098
- ]
3099
- ]
3100
- });
3101
- };
3102
- let isSetupForEditing = false;
3103
- const setupBrowserForEditing = (options = {}) => {
3104
- if (isSetupForEditing)
3105
- return;
3106
- isSetupForEditing = true;
3107
- if (isBrowser()) {
3108
- window.parent?.postMessage({
3109
- type: "builder.sdkInfo",
3110
- data: {
3111
- target: TARGET,
3112
- version: SDK_VERSION,
3113
- supportsPatchUpdates: false,
3114
- supportsAddBlockScoping: true,
3115
- supportsCustomBreakpoints: true
3116
- }
3117
- }, "*");
3118
- window.parent?.postMessage({
3119
- type: "builder.updateContent",
3120
- data: {
3121
- options
3122
- }
3123
- }, "*");
3124
- window.addEventListener("message", ({ data }) => {
3125
- if (!data?.type)
3126
- return;
3127
- switch (data.type) {
3128
- case "builder.evaluate": {
3129
- const text = data.data.text;
3130
- const args = data.data.arguments || [];
3131
- const id = data.data.id;
3132
- const fn = new Function(text);
3133
- let result;
3134
- let error = null;
3135
- try {
3136
- result = fn.apply(null, args);
3137
- } catch (err) {
3138
- error = err;
3139
- }
3140
- if (error)
3141
- window.parent?.postMessage({
3142
- type: "builder.evaluateError",
3143
- data: {
3144
- id,
3145
- error: error.message
3146
- }
3147
- }, "*");
3148
- else if (result && typeof result.then === "function")
3149
- result.then((finalResult) => {
3150
- window.parent?.postMessage({
3151
- type: "builder.evaluateResult",
3152
- data: {
3153
- id,
3154
- result: finalResult
3155
- }
3156
- }, "*");
3157
- }).catch(console.error);
3158
- else
3159
- window.parent?.postMessage({
3160
- type: "builder.evaluateResult",
3161
- data: {
3162
- result,
3163
- id
3164
- }
3165
- }, "*");
3166
- break;
3167
- }
3168
- }
3169
- });
3170
- }
3171
- };
3172
- const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
3173
- const newContentValue = {
3174
- ...props.builderContextSignal.content,
3175
- ...newContent,
3176
- data: {
3177
- ...props.builderContextSignal.content?.data,
3178
- ...newContent?.data
3179
- },
3180
- meta: {
3181
- ...props.builderContextSignal.content?.meta,
3182
- ...newContent?.meta,
3183
- breakpoints: newContent?.meta?.breakpoints || props.builderContextSignal.content?.meta?.breakpoints
3184
- }
3185
- };
3186
- props.builderContextSignal.content = newContentValue;
3187
- };
3188
- const processMessage = function processMessage2(props, state, elementRef, event) {
3189
- const { data } = event;
3190
- if (data)
3191
- switch (data.type) {
3192
- case "builder.configureSdk": {
3193
- const messageContent = data.data;
3194
- const { breakpoints, contentId } = messageContent;
3195
- if (!contentId || contentId !== props.builderContextSignal.content?.id)
3196
- return;
3197
- if (breakpoints)
3198
- mergeNewContent(props, state, elementRef, {
3199
- meta: {
3200
- breakpoints
3201
- }
3202
- });
3203
- state.forceReRenderCount = state.forceReRenderCount + 1;
3204
- break;
3205
- }
3206
- case "builder.contentUpdate": {
3207
- const messageContent = data.data;
3208
- const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
3209
- const contentData = messageContent.data;
3210
- if (key === props.model) {
3211
- mergeNewContent(props, state, elementRef, contentData);
3212
- state.forceReRenderCount = state.forceReRenderCount + 1;
3213
- }
3214
- break;
3215
- }
3216
- }
3217
- };
3218
- const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
3219
- const jsCode = props.builderContextSignal.content?.data?.jsCode;
3220
- if (jsCode)
3221
- evaluate({
3222
- code: jsCode,
3223
- context: props.context || {},
3224
- localState: void 0,
3225
- rootState: props.builderContextSignal.rootState,
3226
- rootSetState: props.builderContextSignal.rootSetState
3227
- });
3228
- };
3229
- const onClick = function onClick22(props, state, elementRef, event) {
3230
- if (props.builderContextSignal.content) {
3231
- const variationId = props.builderContextSignal.content?.testVariationId;
3232
- const contentId = props.builderContextSignal.content?.id;
3233
- _track({
3234
- type: "click",
3235
- canTrack: state.canTrackToUse,
3236
- contentId,
3237
- apiKey: props.apiKey,
3238
- variationId: variationId !== contentId ? variationId : void 0,
3239
- ...getInteractionPropertiesForEvent(event),
3240
- unique: !state.clicked
3241
- });
3242
- }
3243
- if (!state.clicked)
3244
- state.clicked = true;
3245
- };
3246
- const evalExpression = function evalExpression2(props, state, elementRef, expression) {
3247
- return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
3248
- code: group,
3249
- context: props.context || {},
3250
- localState: void 0,
3251
- rootState: props.builderContextSignal.rootState,
3252
- rootSetState: props.builderContextSignal.rootSetState
3253
- }));
3254
- };
3255
- const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
3256
- fetch$1(url).then((response) => response.json()).then((json) => {
3257
- const newState = {
3258
- ...props.builderContextSignal.rootState,
3259
- [key]: json
3260
- };
3261
- props.builderContextSignal.rootSetState?.(newState);
3262
- state.httpReqsData[key] = true;
3263
- }).catch((err) => {
3264
- console.error("error fetching dynamic data", url, err);
3265
- });
3266
- };
3267
- const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
3268
- const requests = props.builderContextSignal.content?.data?.httpRequests ?? {};
3269
- Object.entries(requests).forEach(([key, url]) => {
3270
- if (url && (!state.httpReqsData[key] || isEditing())) {
3271
- const evaluatedUrl = evalExpression(props, state, elementRef, url);
3272
- handleRequest(props, state, elementRef, {
3273
- url: evaluatedUrl,
3274
- key
3275
- });
3276
- }
3277
- });
3278
- };
3279
- const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
3280
- if (isEditing())
3281
- window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
3282
- detail: {
3283
- state: props.builderContextSignal.rootState,
3284
- ref: {
3285
- name: props.model
3286
- }
3287
- }
3288
- }));
3289
- };
3290
- const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3291
- _jsxBranch();
3292
- const elementRef = useSignal();
3293
- const state = useStore({
3294
- canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
3295
- clicked: false,
3296
- forceReRenderCount: 0,
3297
- httpReqsData: {},
3298
- lastUpdated: 0,
3299
- shouldSendResetCookie: false
3300
- }, {
3301
- deep: true
3302
- });
3303
- useContextProvider(builderContext, props.builderContextSignal);
3304
- useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
3305
- const [elementRef2, props2, state2] = useLexicalScope();
3306
- if (!props2.apiKey)
3307
- logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
3308
- if (isBrowser()) {
3309
- if (isEditing()) {
3310
- state2.forceReRenderCount = state2.forceReRenderCount + 1;
3311
- window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
3312
- registerInsertMenu();
3313
- setupBrowserForEditing({
3314
- ...props2.locale ? {
3315
- locale: props2.locale
3316
- } : {},
3317
- ...props2.includeRefs ? {
3318
- includeRefs: props2.includeRefs
3319
- } : {},
3320
- ...props2.enrich ? {
3321
- enrich: props2.enrich
3322
- } : {}
3323
- });
3324
- Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
3325
- const message = createRegisterComponentMessage(registeredComponent);
3326
- window.parent?.postMessage(message, "*");
3327
- });
3328
- window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
3329
- }
3330
- if (props2.builderContextSignal.content) {
3331
- const variationId = props2.builderContextSignal.content?.testVariationId;
3332
- const contentId = props2.builderContextSignal.content?.id;
3333
- _track({
3334
- type: "impression",
3335
- canTrack: state2.canTrackToUse,
3336
- contentId,
3337
- apiKey: props2.apiKey,
3338
- variationId: variationId !== contentId ? variationId : void 0
3339
- });
3340
- }
3341
- if (isPreviewing()) {
3342
- const searchParams = new URL(location.href).searchParams;
3343
- const searchParamPreviewModel = searchParams.get("builder.preview");
3344
- const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
3345
- const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
3346
- if (searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
3347
- getContent({
3348
- model: props2.model,
3349
- apiKey: props2.apiKey,
3350
- apiVersion: props2.builderContextSignal.apiVersion
3351
- }).then((content) => {
3352
- if (content)
3353
- mergeNewContent(props2, state2, elementRef2, content);
3354
- });
3355
- }
3356
- evaluateJsCode(props2);
3357
- runHttpRequests(props2, state2, elementRef2);
3358
- emitStateUpdate(props2);
3359
- }
3360
- }, "EnableEditor_component_useVisibleTask_Olaxc9jCOFk", [
3361
- elementRef,
3362
- props,
3363
- state
3364
- ]));
3365
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
3366
- const [elementRef2, props2, state2] = useLexicalScope();
3367
- track2(() => props2.content);
3368
- if (props2.content)
3369
- mergeNewContent(props2, state2, elementRef2, props2.content);
3370
- }, "EnableEditor_component_useTask_Nb2VI04qp0M", [
3371
- elementRef,
3372
- props,
3373
- state
3374
- ]));
3375
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
3376
- const [state2] = useLexicalScope();
3377
- track2(() => state2.shouldSendResetCookie);
3378
- }, "EnableEditor_component_useTask_1_m0y1Z9vk4eQ", [
3379
- state
3380
- ]));
3381
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
3382
- const [elementRef2, props2, state2] = useLexicalScope();
3383
- track2(() => props2.builderContextSignal.content?.data?.jsCode);
3384
- track2(() => props2.builderContextSignal.rootState);
3385
- evaluateJsCode(props2);
3386
- }, "EnableEditor_component_useTask_2_xVyv0tDqZLs", [
3387
- elementRef,
3388
- props,
3389
- state
3390
- ]));
3391
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
3392
- const [elementRef2, props2, state2] = useLexicalScope();
3393
- track2(() => props2.builderContextSignal.content?.data?.httpRequests);
3394
- runHttpRequests(props2, state2, elementRef2);
3395
- }, "EnableEditor_component_useTask_3_bQ0e5LHZwWE", [
3396
- elementRef,
3397
- props,
3398
- state
3399
- ]));
3400
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
3401
- const [elementRef2, props2, state2] = useLexicalScope();
3402
- track2(() => props2.builderContextSignal.rootState);
3403
- emitStateUpdate(props2);
3404
- }, "EnableEditor_component_useTask_4_moHYZG8uNVU", [
3405
- elementRef,
3406
- props,
3407
- state
3408
- ]));
3409
- return /* @__PURE__ */ _jsxC(Fragment, {
3410
- children: props.builderContextSignal.content ? /* @__PURE__ */ _jsxS("div", {
3411
- ref: elementRef,
3412
- ...props.showContent ? {} : {
3413
- hidden: true,
3414
- "aria-hidden": true
3415
- },
3416
- children: /* @__PURE__ */ _jsxC(Slot, null, 3, "06_0"),
3417
- onClick$: /* @__PURE__ */ inlinedQrl((event) => {
3418
- const [elementRef2, props2, state2] = useLexicalScope();
3419
- return onClick(props2, state2, elementRef2, event);
3420
- }, "EnableEditor_component__Fragment_div_onClick_1QOkLijjH0M", [
3421
- elementRef,
3422
- props,
3423
- state
3424
- ])
3425
- }, {
3426
- "builder-content-id": _fnSignal((p0) => p0.builderContextSignal.content?.id, [
3427
- props
3428
- ], "p0.builderContextSignal.content?.id"),
3429
- "builder-model": _fnSignal((p0) => p0.model, [
3430
- props
3431
- ], "p0.model"),
3432
- class: _fnSignal((p0) => p0.classNameProp, [
3433
- props
3434
- ], "p0.classNameProp")
3435
- }, 0, state.forceReRenderCount) : null
3436
- }, 1, "06_1");
3437
- }, "EnableEditor_component_ko1mO8oaj8k"));
3438
- const getCssFromFont = (font) => {
3439
- const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
3440
- const name = family.split(",")[0];
3441
- const url = font.fileUrl ?? font?.files?.regular;
3442
- let str = "";
3443
- if (url && family && name)
3444
- str += `
3445
- @font-face {
3446
- font-family: "${family}";
3447
- src: local("${name}"), url('${url}') format('woff2');
3448
- font-display: fallback;
3449
- font-weight: 400;
3450
- }
3451
- `.trim();
3452
- if (font.files)
3453
- for (const weight in font.files) {
3454
- const isNumber = String(Number(weight)) === weight;
3455
- if (!isNumber)
3456
- continue;
3457
- const weightUrl = font.files[weight];
3458
- if (weightUrl && weightUrl !== url)
3459
- str += `
3460
- @font-face {
3461
- font-family: "${family}";
3462
- src: url('${weightUrl}') format('woff2');
3463
- font-display: fallback;
3464
- font-weight: ${weight};
3465
- }
3466
- `.trim();
3467
- }
3468
- return str;
3469
- };
3470
- const getFontCss = ({ customFonts }) => {
3471
- return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
3472
- };
3473
- const getCss = ({ cssCode, contentId }) => {
3474
- if (!cssCode)
3475
- return "";
3476
- if (!contentId)
3477
- return cssCode;
3478
- return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
3479
- };
3480
- const ContentStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3481
- const state = useStore({
3482
- injectedStyles: `
3483
- ${getCss({
3484
- cssCode: props.cssCode,
3485
- contentId: props.contentId
3486
- })}
3487
- ${getFontCss({
3488
- customFonts: props.customFonts
3489
- })}
3490
-
3491
- .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
3492
- margin: 0;
3493
- }
3494
- .builder-text > p, .builder-text > .builder-paragraph {
3495
- color: inherit;
3496
- line-height: inherit;
3497
- letter-spacing: inherit;
3498
- font-weight: inherit;
3499
- font-size: inherit;
3500
- text-align: inherit;
3501
- font-family: inherit;
3502
- }
3503
- `.trim()
3504
- });
3505
- return /* @__PURE__ */ _jsxC(InlinedStyles, {
3506
- get styles() {
3507
- return state.injectedStyles;
3508
- },
3509
- [_IMMUTABLE]: {
3510
- styles: _fnSignal((p0) => p0.injectedStyles, [
3511
- state
3512
- ], "p0.injectedStyles")
3513
- }
3514
- }, 3, "8O_0");
3515
- }, "ContentStyles_component_Qbhu1myPWm0"));
3516
- const getContextStateInitialValue = ({ content, data, locale }) => {
3517
- const defaultValues = {};
3518
- content?.data?.inputs?.forEach((input) => {
3519
- if (input.name && input.defaultValue !== void 0 && content?.data?.state && content.data.state[input.name] === void 0)
3520
- defaultValues[input.name] = input.defaultValue;
3521
- });
3522
- const stateToUse = {
3523
- ...content?.data?.state,
3524
- ...data,
3525
- ...locale ? {
3526
- locale
3527
- } : {}
3528
- };
3529
- return {
3530
- ...defaultValues,
3531
- ...stateToUse
3532
- };
3533
- };
3534
- const getContentInitialValue = ({ content, data }) => {
3535
- return !content ? void 0 : {
3536
- ...content,
3537
- data: {
3538
- ...content?.data,
3539
- ...data
3540
- },
3541
- meta: content?.meta
3542
- };
3543
- };
3544
- const ContentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3545
- _jsxBranch();
3546
- const state = useStore({
3547
- builderContextSignal: {
3548
- content: getContentInitialValue({
3549
- content: props.content,
3550
- data: props.data
3551
- }),
3552
- localState: void 0,
3553
- rootState: getContextStateInitialValue({
3554
- content: props.content,
3555
- data: props.data,
3556
- locale: props.locale
3557
- }),
3558
- rootSetState: void 0,
3559
- context: props.context || {},
3560
- apiKey: props.apiKey,
3561
- apiVersion: props.apiVersion,
3562
- componentInfos: [
3563
- ...getDefaultRegisteredComponents(),
3564
- ...components,
3565
- ...props.customComponents || []
3566
- ].reduce((acc, { component: _, ...info }) => ({
3567
- ...acc,
3568
- [info.name]: serializeComponentInfo(info)
3569
- }), {}),
3570
- inheritedStyles: {}
3571
- },
3572
- registeredComponents: [
3573
- ...getDefaultRegisteredComponents(),
3574
- ...components,
3575
- ...props.customComponents || []
3576
- ].reduce((acc, { component, ...info }) => ({
3577
- ...acc,
3578
- [info.name]: {
3579
- component,
3580
- ...serializeComponentInfo(info)
3581
- }
3582
- }), {}),
3583
- scriptStr: getRenderContentScriptString({
3584
- variationId: props.content?.testVariationId,
3585
- contentId: props.content?.id
3586
- })
3587
- }, {
3588
- deep: true
3589
- });
3590
- useContextProvider(ComponentsContext, useStore({
3591
- registeredComponents: state.registeredComponents
3592
- }));
3593
- return /* @__PURE__ */ _jsxC(EnableEditor, {
3594
- get content() {
3595
- return props.content;
3596
- },
3597
- get model() {
3598
- return props.model;
3599
- },
3600
- get context() {
3601
- return props.context;
3602
- },
3603
- get apiKey() {
3604
- return props.apiKey;
3605
- },
3606
- get canTrack() {
3607
- return props.canTrack;
3608
- },
3609
- get locale() {
3610
- return props.locale;
3611
- },
3612
- get includeRefs() {
3613
- return props.includeRefs;
3614
- },
3615
- get enrich() {
3616
- return props.enrich;
3617
- },
3618
- get classNameProp() {
3619
- return props.classNameProp;
3620
- },
3621
- get showContent() {
3622
- return props.showContent;
3623
- },
3624
- get builderContextSignal() {
3625
- return state.builderContextSignal;
3626
- },
3627
- children: [
3628
- props.isSsrAbTest ? /* @__PURE__ */ _jsxC(InlinedScript, {
3629
- get scriptStr() {
3630
- return state.scriptStr;
3631
- },
3632
- [_IMMUTABLE]: {
3633
- scriptStr: _fnSignal((p0) => p0.scriptStr, [
3634
- state
3635
- ], "p0.scriptStr")
3636
- }
3637
- }, 3, "LQ_0") : null,
3638
- /* @__PURE__ */ _jsxC(ContentStyles, {
3639
- get contentId() {
3640
- return state.builderContextSignal.content?.id;
3641
- },
3642
- get cssCode() {
3643
- return state.builderContextSignal.content?.data?.cssCode;
3644
- },
3645
- get customFonts() {
3646
- return state.builderContextSignal.content?.data?.customFonts;
3647
- },
3648
- [_IMMUTABLE]: {
3649
- contentId: _fnSignal((p0) => p0.builderContextSignal.content?.id, [
3650
- state
3651
- ], "p0.builderContextSignal.content?.id"),
3652
- cssCode: _fnSignal((p0) => p0.builderContextSignal.content?.data?.cssCode, [
3653
- state
3654
- ], "p0.builderContextSignal.content?.data?.cssCode"),
3655
- customFonts: _fnSignal((p0) => p0.builderContextSignal.content?.data?.customFonts, [
3656
- state
3657
- ], "p0.builderContextSignal.content?.data?.customFonts")
3658
- }
3659
- }, 3, "LQ_1"),
3660
- /* @__PURE__ */ _jsxC(Blocks, {
3661
- get blocks() {
3662
- return state.builderContextSignal.content?.data?.blocks;
3663
- },
3664
- get context() {
3665
- return state.builderContextSignal;
3666
- },
3667
- get registeredComponents() {
3668
- return state.registeredComponents;
3669
- },
3670
- [_IMMUTABLE]: {
3671
- blocks: _fnSignal((p0) => p0.builderContextSignal.content?.data?.blocks, [
3672
- state
3673
- ], "p0.builderContextSignal.content?.data?.blocks"),
3674
- context: _fnSignal((p0) => p0.builderContextSignal, [
3675
- state
3676
- ], "p0.builderContextSignal"),
3677
- registeredComponents: _fnSignal((p0) => p0.registeredComponents, [
3678
- state
3679
- ], "p0.registeredComponents")
3680
- }
3681
- }, 3, "LQ_2")
3682
- ],
3683
- [_IMMUTABLE]: {
3684
- content: _fnSignal((p0) => p0.content, [
3685
- props
3686
- ], "p0.content"),
3687
- model: _fnSignal((p0) => p0.model, [
3688
- props
3689
- ], "p0.model"),
3690
- context: _fnSignal((p0) => p0.context, [
3691
- props
3692
- ], "p0.context"),
3693
- apiKey: _fnSignal((p0) => p0.apiKey, [
3694
- props
3695
- ], "p0.apiKey"),
3696
- canTrack: _fnSignal((p0) => p0.canTrack, [
3697
- props
3698
- ], "p0.canTrack"),
3699
- locale: _fnSignal((p0) => p0.locale, [
3700
- props
3701
- ], "p0.locale"),
3702
- includeRefs: _fnSignal((p0) => p0.includeRefs, [
3703
- props
3704
- ], "p0.includeRefs"),
3705
- enrich: _fnSignal((p0) => p0.enrich, [
3706
- props
3707
- ], "p0.enrich"),
3708
- classNameProp: _fnSignal((p0) => p0.classNameProp, [
3709
- props
3710
- ], "p0.classNameProp"),
3711
- showContent: _fnSignal((p0) => p0.showContent, [
3712
- props
3713
- ], "p0.showContent"),
3714
- builderContextSignal: _fnSignal((p0) => p0.builderContextSignal, [
3715
- state
3716
- ], "p0.builderContextSignal")
3717
- }
3718
- }, 1, "LQ_3");
3719
- }, "ContentComponent_component_HIsczUcxjCE"));
3720
- const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3721
- _jsxBranch();
3722
- const variantScriptStr = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3723
- const [props2] = useLexicalScope();
3724
- return getVariantsScriptString(getVariants(props2.content).map((value) => ({
3725
- id: value.testVariationId,
3726
- testRatio: value.testRatio
3727
- })), props2.content?.id || "");
3728
- }, "ContentVariants_component_variantScriptStr_useComputed_ldWqWafT8Ww", [
3729
- props
3730
- ]));
3731
- const hideVariantsStyleString = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3732
- const [props2] = useLexicalScope();
3733
- return getVariants(props2.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
3734
- }, "ContentVariants_component_hideVariantsStyleString_useComputed_fQIC0fJqAl4", [
3735
- props
3736
- ]));
3737
- const state = useStore({
3738
- shouldRenderVariants: checkShouldRunVariants({
3739
- canTrack: getDefaultCanTrack(props.canTrack),
3740
- content: props.content
3741
- })
3742
- });
3743
- useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
3744
- }, "ContentVariants_component_useVisibleTask_10cWAqcJ45I"));
3745
- return /* @__PURE__ */ _jsxC(Fragment$1, {
3746
- children: [
3747
- !props.__isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ _jsxC(InlinedScript, {
3748
- scriptStr: getScriptString()
3749
- }, 3, "XM_0") : null,
3750
- state.shouldRenderVariants ? /* @__PURE__ */ _jsxC(Fragment, {
3751
- children: [
3752
- /* @__PURE__ */ _jsxC(InlinedStyles, {
3753
- get id() {
3754
- return `variants-styles-${props.content?.id}`;
3755
- },
3756
- get styles() {
3757
- return hideVariantsStyleString.value;
3758
- },
3759
- [_IMMUTABLE]: {
3760
- id: _fnSignal((p0) => `variants-styles-${p0.content?.id}`, [
3761
- props
3762
- ], "`variants-styles-${p0.content?.id}`"),
3763
- styles: _fnSignal((p0) => p0.value, [
3764
- hideVariantsStyleString
3765
- ], "p0.value")
3766
- }
3767
- }, 3, "XM_1"),
3768
- /* @__PURE__ */ _jsxC(InlinedScript, {
3769
- get scriptStr() {
3770
- return variantScriptStr.value;
3771
- },
3772
- [_IMMUTABLE]: {
3773
- scriptStr: _fnSignal((p0) => p0.value, [
3774
- variantScriptStr
3775
- ], "p0.value")
3776
- }
3777
- }, 3, "XM_2"),
3778
- (getVariants(props.content) || []).map(function(variant) {
3779
- return /* @__PURE__ */ _jsxC(ContentComponent, {
3780
- content: variant,
3781
- showContent: false,
3782
- classNameProp: void 0,
3783
- get model() {
3784
- return props.model;
3785
- },
3786
- get data() {
3787
- return props.data;
3788
- },
3789
- get context() {
3790
- return props.context;
3791
- },
3792
- get apiKey() {
3793
- return props.apiKey;
3794
- },
3795
- get apiVersion() {
3796
- return props.apiVersion;
3797
- },
3798
- get customComponents() {
3799
- return props.customComponents;
3800
- },
3801
- get canTrack() {
3802
- return props.canTrack;
3803
- },
3804
- get locale() {
3805
- return props.locale;
3806
- },
3807
- get includeRefs() {
3808
- return props.includeRefs;
3809
- },
3810
- get enrich() {
3811
- return props.enrich;
3812
- },
3813
- get isSsrAbTest() {
3814
- return state.shouldRenderVariants;
3815
- },
3816
- [_IMMUTABLE]: {
3817
- showContent: _IMMUTABLE,
3818
- model: _fnSignal((p0) => p0.model, [
3819
- props
3820
- ], "p0.model"),
3821
- data: _fnSignal((p0) => p0.data, [
3822
- props
3823
- ], "p0.data"),
3824
- context: _fnSignal((p0) => p0.context, [
3825
- props
3826
- ], "p0.context"),
3827
- apiKey: _fnSignal((p0) => p0.apiKey, [
3828
- props
3829
- ], "p0.apiKey"),
3830
- apiVersion: _fnSignal((p0) => p0.apiVersion, [
3831
- props
3832
- ], "p0.apiVersion"),
3833
- customComponents: _fnSignal((p0) => p0.customComponents, [
3834
- props
3835
- ], "p0.customComponents"),
3836
- canTrack: _fnSignal((p0) => p0.canTrack, [
3837
- props
3838
- ], "p0.canTrack"),
3839
- locale: _fnSignal((p0) => p0.locale, [
3840
- props
3841
- ], "p0.locale"),
3842
- includeRefs: _fnSignal((p0) => p0.includeRefs, [
3843
- props
3844
- ], "p0.includeRefs"),
3845
- enrich: _fnSignal((p0) => p0.enrich, [
3846
- props
3847
- ], "p0.enrich"),
3848
- isSsrAbTest: _fnSignal((p0) => p0.shouldRenderVariants, [
3849
- state
3850
- ], "p0.shouldRenderVariants")
3851
- }
3852
- }, 3, variant.testVariationId);
3853
- })
3854
- ]
3855
- }, 1, "XM_3") : null,
3856
- /* @__PURE__ */ _jsxC(ContentComponent, {
3857
- content: state.shouldRenderVariants ? props.content : handleABTestingSync({
3858
- item: props.content,
3859
- canTrack: getDefaultCanTrack(props.canTrack)
3860
- }),
3861
- get classNameProp() {
3862
- return `variant-${props.content?.id}`;
3863
- },
3864
- showContent: true,
3865
- get model() {
3866
- return props.model;
3867
- },
3868
- get data() {
3869
- return props.data;
3870
- },
3871
- get context() {
3872
- return props.context;
3873
- },
3874
- get apiKey() {
3875
- return props.apiKey;
3876
- },
3877
- get apiVersion() {
3878
- return props.apiVersion;
3879
- },
3880
- get customComponents() {
3881
- return props.customComponents;
3882
- },
3883
- get canTrack() {
3884
- return props.canTrack;
3885
- },
3886
- get locale() {
3887
- return props.locale;
3888
- },
3889
- get includeRefs() {
3890
- return props.includeRefs;
3891
- },
3892
- get enrich() {
3893
- return props.enrich;
3894
- },
3895
- get isSsrAbTest() {
3896
- return state.shouldRenderVariants;
3897
- },
3898
- [_IMMUTABLE]: {
3899
- classNameProp: _fnSignal((p0) => `variant-${p0.content?.id}`, [
3900
- props
3901
- ], "`variant-${p0.content?.id}`"),
3902
- showContent: _IMMUTABLE,
3903
- model: _fnSignal((p0) => p0.model, [
3904
- props
3905
- ], "p0.model"),
3906
- data: _fnSignal((p0) => p0.data, [
3907
- props
3908
- ], "p0.data"),
3909
- context: _fnSignal((p0) => p0.context, [
3910
- props
3911
- ], "p0.context"),
3912
- apiKey: _fnSignal((p0) => p0.apiKey, [
3913
- props
3914
- ], "p0.apiKey"),
3915
- apiVersion: _fnSignal((p0) => p0.apiVersion, [
3916
- props
3917
- ], "p0.apiVersion"),
3918
- customComponents: _fnSignal((p0) => p0.customComponents, [
3919
- props
3920
- ], "p0.customComponents"),
3921
- canTrack: _fnSignal((p0) => p0.canTrack, [
3922
- props
3923
- ], "p0.canTrack"),
3924
- locale: _fnSignal((p0) => p0.locale, [
3925
- props
3926
- ], "p0.locale"),
3927
- includeRefs: _fnSignal((p0) => p0.includeRefs, [
3928
- props
3929
- ], "p0.includeRefs"),
3930
- enrich: _fnSignal((p0) => p0.enrich, [
3931
- props
3932
- ], "p0.enrich"),
3933
- isSsrAbTest: _fnSignal((p0) => p0.shouldRenderVariants, [
3934
- state
3935
- ], "p0.shouldRenderVariants")
3936
- }
3937
- }, 3, "XM_4")
3938
- ]
3939
- }, 1, "XM_5");
3940
- }, "ContentVariants_component_4tFRiQMMEfM"));
3941
- const fetchContent = async ({ builderContextValue, symbol }) => {
3942
- if (symbol?.model && builderContextValue?.apiKey)
3943
- return getContent({
3944
- model: symbol.model,
3945
- apiKey: builderContextValue.apiKey,
3946
- apiVersion: builderContextValue.apiVersion,
3947
- ...symbol?.entry && {
3948
- query: {
3949
- id: symbol.entry
3950
- }
3951
- }
3952
- }).catch((err) => {
3953
- logger.error("Could not fetch symbol content: ", err);
3954
- return void 0;
3955
- });
3956
- return void 0;
3957
- };
3958
- const setContent = function setContent2(props, state) {
3959
- if (state.contentToUse)
3960
- return;
3961
- fetchContent({
3962
- symbol: props.symbol,
3963
- builderContextValue: props.builderContext
3964
- }).then((newContent) => {
3965
- if (newContent)
3966
- state.contentToUse = newContent;
3967
- });
3968
- };
3969
- const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3970
- const className = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3971
- const [props2] = useLexicalScope();
3972
- return [
3973
- props2.attributes.class,
3974
- "builder-symbol",
3975
- props2.symbol?.inline ? "builder-inline-symbol" : void 0,
3976
- props2.symbol?.dynamic || props2.dynamic ? "builder-dynamic-symbol" : void 0
3977
- ].filter(Boolean).join(" ");
3978
- }, "Symbol_component_className_useComputed_Wb6GqgtDHpE", [
3979
- props
3980
- ]));
3981
- const state = useStore({
3982
- contentToUse: props.symbol?.content
3983
- });
3984
- useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
3985
- const [props2, state2] = useLexicalScope();
3986
- setContent(props2, state2);
3987
- }, "Symbol_component_useVisibleTask_oMPs8W5ZhwE", [
3988
- props,
3989
- state
3990
- ]));
3991
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
3992
- const [props2, state2] = useLexicalScope();
3993
- track2(() => props2.symbol);
3994
- setContent(props2, state2);
3995
- }, "Symbol_component_useTask_NIAWAC1bMBo", [
3996
- props,
3997
- state
3998
- ]));
3999
- return /* @__PURE__ */ _jsxS("div", {
4000
- ...props.attributes,
4001
- children: /* @__PURE__ */ _jsxC(ContentVariants, {
4002
- get apiVersion() {
4003
- return props.builderContext.apiVersion;
4004
- },
4005
- get apiKey() {
4006
- return props.builderContext.apiKey;
4007
- },
4008
- get context() {
4009
- return props.builderContext.context;
4010
- },
4011
- get customComponents() {
4012
- return Object.values(props.builderComponents);
4013
- },
4014
- get data() {
4015
- return {
4016
- ...props.symbol?.data,
4017
- ...props.builderContext.localState,
4018
- ...state.contentToUse?.data?.state
4019
- };
4020
- },
4021
- get model() {
4022
- return props.symbol?.model;
4023
- },
4024
- get content() {
4025
- return state.contentToUse;
4026
- },
4027
- [_IMMUTABLE]: {
4028
- apiVersion: _fnSignal((p0) => p0.builderContext.apiVersion, [
4029
- props
4030
- ], "p0.builderContext.apiVersion"),
4031
- apiKey: _fnSignal((p0) => p0.builderContext.apiKey, [
4032
- props
4033
- ], "p0.builderContext.apiKey"),
4034
- context: _fnSignal((p0) => p0.builderContext.context, [
4035
- props
4036
- ], "p0.builderContext.context"),
4037
- customComponents: _fnSignal((p0) => Object.values(p0.builderComponents), [
4038
- props
4039
- ], "Object.values(p0.builderComponents)"),
4040
- data: _fnSignal((p0, p1) => ({
4041
- ...p0.symbol?.data,
4042
- ...p0.builderContext.localState,
4043
- ...p1.contentToUse?.data?.state
4044
- }), [
4045
- props,
4046
- state
4047
- ], "{...p0.symbol?.data,...p0.builderContext.localState,...p1.contentToUse?.data?.state}"),
4048
- model: _fnSignal((p0) => p0.symbol?.model, [
4049
- props
4050
- ], "p0.symbol?.model"),
4051
- content: _fnSignal((p0) => p0.contentToUse, [
4052
- state
4053
- ], "p0.contentToUse")
4054
- }
4055
- }, 3, "Wt_0")
4056
- }, {
4057
- class: _fnSignal((p0) => p0.value, [
4058
- className
4059
- ], "p0.value")
4060
- }, 0, "Wt_1");
4061
- }, "Symbol_component_WVvggdkUPdk"));
4062
- const settings = {};
4063
- function setEditorSettings(newSettings) {
4064
- if (isBrowser()) {
4065
- Object.assign(settings, newSettings);
4066
- const message = {
4067
- type: "builder.settingsChange",
4068
- data: settings
4069
- };
4070
- parent.postMessage(message, "*");
4071
- }
4072
- }
4073
- export {
4074
- Button as B,
4075
- Columns as C,
4076
- FragmentComponent as F,
4077
- Image as I,
4078
- SectionComponent as S,
4079
- Text as T,
4080
- Video as V,
4081
- isPreviewing as a,
4082
- setEditorSettings as b,
4083
- createRegisterComponentMessage as c,
4084
- getContent as d,
4085
- getBuilderSearchParams as e,
4086
- Blocks as f,
4087
- getAllContent as g,
4088
- Symbol$1 as h,
4089
- isEditing as i,
4090
- ContentVariants as j,
4091
- logger as l,
4092
- processContentResult as p,
4093
- register as r,
4094
- set as s,
4095
- track as t
4096
- };