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