@builder.io/sdk-qwik 0.0.26 → 0.0.28

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