@builder.io/sdk-qwik 0.0.35 → 0.0.36

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