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