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