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