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