@builder.io/sdk-solid 0.13.0 → 0.13.2

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/lib/node/dev.jsx CHANGED
@@ -917,7 +917,7 @@ function BlockStyles(props) {
917
917
  }
918
918
  return true;
919
919
  }
920
- function css4() {
920
+ function css5() {
921
921
  const processedBlock = getProcessedBlock({
922
922
  block: props.block,
923
923
  localState: props.context.localState,
@@ -960,7 +960,7 @@ function BlockStyles(props) {
960
960
  }) : "";
961
961
  return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
962
962
  }
963
- return <Show2 when={TARGET !== "reactNative" && css4() && canShowBlock()}><Inlined_styles_default styles={css4()} /></Show2>;
963
+ return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
964
964
  }
965
965
  var Block_styles_default = BlockStyles;
966
966
 
@@ -1249,10 +1249,10 @@ function Block(props) {
1249
1249
  componentOptions: {
1250
1250
  ...getBlockComponentOptions(processedBlock()),
1251
1251
  builderContext: props.context,
1252
- ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
1252
+ ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
1253
1253
  builderLinkComponent: props.linkComponent
1254
1254
  } : {},
1255
- ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
1255
+ ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
1256
1256
  builderComponents: props.registeredComponents
1257
1257
  } : {}
1258
1258
  },
@@ -1724,10 +1724,10 @@ function SectionComponent(props) {
1724
1724
  var section_default = SectionComponent;
1725
1725
 
1726
1726
  // src/blocks/symbol/symbol.tsx
1727
- import { onMount as onMount5, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
1727
+ import { onMount as onMount5, on as on3, createEffect as createEffect3, createSignal as createSignal15 } from "solid-js";
1728
1728
 
1729
1729
  // src/components/content-variants/content-variants.tsx
1730
- import { Show as Show11, For as For5, onMount as onMount4, createSignal as createSignal13 } from "solid-js";
1730
+ import { Show as Show12, For as For7, onMount as onMount4, createSignal as createSignal14 } from "solid-js";
1731
1731
 
1732
1732
  // src/helpers/url.ts
1733
1733
  var getTopLevelDomain = (host) => {
@@ -1921,7 +1921,7 @@ var handleABTesting = async ({
1921
1921
  var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
1922
1922
 
1923
1923
  // src/components/content/content.tsx
1924
- import { Show as Show10, createSignal as createSignal12 } from "solid-js";
1924
+ import { Show as Show11, createSignal as createSignal13 } from "solid-js";
1925
1925
 
1926
1926
  // src/blocks/button/component-info.ts
1927
1927
  var componentInfo = {
@@ -2179,164 +2179,8 @@ var componentInfo2 = {
2179
2179
  }]
2180
2180
  };
2181
2181
 
2182
- // src/blocks/custom-code/component-info.ts
2183
- var componentInfo3 = {
2184
- name: "Custom Code",
2185
- static: true,
2186
- requiredPermissions: ["editCode"],
2187
- inputs: [{
2188
- name: "code",
2189
- type: "html",
2190
- required: true,
2191
- defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2192
- code: true
2193
- }, {
2194
- name: "replaceNodes",
2195
- type: "boolean",
2196
- helperText: "Preserve server rendered dom nodes",
2197
- advanced: true
2198
- }, {
2199
- name: "scriptsClientOnly",
2200
- type: "boolean",
2201
- defaultValue: false,
2202
- helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2203
- advanced: true
2204
- }]
2205
- };
2206
-
2207
- // src/blocks/custom-code/custom-code.tsx
2208
- import { onMount as onMount2, createSignal as createSignal7 } from "solid-js";
2209
- function CustomCode(props) {
2210
- const [scriptsInserted, setScriptsInserted] = createSignal7([]);
2211
- const [scriptsRun, setScriptsRun] = createSignal7([]);
2212
- let elementRef;
2213
- onMount2(() => {
2214
- if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
2215
- return;
2216
- }
2217
- const scripts = elementRef.getElementsByTagName("script");
2218
- for (let i = 0; i < scripts.length; i++) {
2219
- const script = scripts[i];
2220
- if (script.src) {
2221
- if (scriptsInserted().includes(script.src)) {
2222
- continue;
2223
- }
2224
- scriptsInserted().push(script.src);
2225
- const newScript = document.createElement("script");
2226
- newScript.async = true;
2227
- newScript.src = script.src;
2228
- document.head.appendChild(newScript);
2229
- } else if (!script.type || [
2230
- "text/javascript",
2231
- "application/javascript",
2232
- "application/ecmascript"
2233
- ].includes(script.type)) {
2234
- if (scriptsRun().includes(script.innerText)) {
2235
- continue;
2236
- }
2237
- try {
2238
- scriptsRun().push(script.innerText);
2239
- new Function(script.innerText)();
2240
- } catch (error2) {
2241
- console.warn("`CustomCode`: Error running script:", error2);
2242
- }
2243
- }
2244
- }
2245
- });
2246
- return <div
2247
- class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
2248
- ref={elementRef}
2249
- innerHTML={props.code}
2250
- />;
2251
- }
2252
- var custom_code_default = CustomCode;
2253
-
2254
- // src/blocks/embed/component-info.ts
2255
- var componentInfo4 = {
2256
- name: "Embed",
2257
- static: true,
2258
- inputs: [{
2259
- name: "url",
2260
- type: "url",
2261
- required: true,
2262
- defaultValue: "",
2263
- helperText: "e.g. enter a youtube url, google map, etc",
2264
- onChange: (options) => {
2265
- const url = options.get("url");
2266
- if (url) {
2267
- options.set("content", "Loading...");
2268
- const apiKey = "ae0e60e78201a3f2b0de4b";
2269
- return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
2270
- if (options.get("url") === url) {
2271
- if (data.html) {
2272
- options.set("content", data.html);
2273
- } else {
2274
- options.set("content", "Invalid url, please try another");
2275
- }
2276
- }
2277
- }).catch((_err) => {
2278
- options.set("content", "There was an error embedding this URL, please try again or another URL");
2279
- });
2280
- } else {
2281
- options.delete("content");
2282
- }
2283
- }
2284
- }, {
2285
- name: "content",
2286
- type: "html",
2287
- defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
2288
- hideFromUI: true
2289
- }]
2290
- };
2291
-
2292
- // src/blocks/embed/embed.tsx
2293
- import { on, createEffect, createSignal as createSignal8 } from "solid-js";
2294
-
2295
- // src/blocks/embed/helpers.ts
2296
- var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
2297
- var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
2298
-
2299
- // src/blocks/embed/embed.tsx
2300
- function Embed(props) {
2301
- const [scriptsInserted, setScriptsInserted] = createSignal8([]);
2302
- const [scriptsRun, setScriptsRun] = createSignal8([]);
2303
- const [ranInitFn, setRanInitFn] = createSignal8(false);
2304
- function findAndRunScripts() {
2305
- if (!elem || !elem.getElementsByTagName)
2306
- return;
2307
- const scripts = elem.getElementsByTagName("script");
2308
- for (let i = 0; i < scripts.length; i++) {
2309
- const script = scripts[i];
2310
- if (script.src && !scriptsInserted().includes(script.src)) {
2311
- scriptsInserted().push(script.src);
2312
- const newScript = document.createElement("script");
2313
- newScript.async = true;
2314
- newScript.src = script.src;
2315
- document.head.appendChild(newScript);
2316
- } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
2317
- try {
2318
- scriptsRun().push(script.innerText);
2319
- new Function(script.innerText)();
2320
- } catch (error2) {
2321
- console.warn("`Embed`: Error running script:", error2);
2322
- }
2323
- }
2324
- }
2325
- }
2326
- let elem;
2327
- function onUpdateFn_0() {
2328
- if (elem && !ranInitFn()) {
2329
- setRanInitFn(true);
2330
- findAndRunScripts();
2331
- }
2332
- }
2333
- createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
2334
- return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
2335
- }
2336
- var embed_default = Embed;
2337
-
2338
2182
  // src/blocks/fragment/component-info.ts
2339
- var componentInfo5 = {
2183
+ var componentInfo3 = {
2340
2184
  name: "Fragment",
2341
2185
  static: true,
2342
2186
  hidden: true,
@@ -2345,7 +2189,7 @@ var componentInfo5 = {
2345
2189
  };
2346
2190
 
2347
2191
  // src/blocks/image/component-info.ts
2348
- var componentInfo6 = {
2192
+ var componentInfo4 = {
2349
2193
  name: "Image",
2350
2194
  static: true,
2351
2195
  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",
@@ -2467,41 +2311,8 @@ var componentInfo6 = {
2467
2311
  }]
2468
2312
  };
2469
2313
 
2470
- // src/blocks/img/component-info.ts
2471
- var componentInfo7 = {
2472
- // friendlyName?
2473
- name: "Raw:Img",
2474
- hideFromInsertMenu: true,
2475
- 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",
2476
- inputs: [{
2477
- name: "image",
2478
- bubble: true,
2479
- type: "file",
2480
- allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
2481
- required: true
2482
- }],
2483
- noWrap: true,
2484
- static: true
2485
- };
2486
-
2487
- // src/blocks/img/img.tsx
2488
- function ImgComponent(props) {
2489
- return <img
2490
- style={{
2491
- "object-fit": props.backgroundSize || "cover",
2492
- "object-position": props.backgroundPosition || "center"
2493
- }}
2494
- key={isEditing() && props.imgSrc || "default-key"}
2495
- alt={props.altText}
2496
- src={props.imgSrc || props.image}
2497
- {...{}}
2498
- {...props.attributes}
2499
- />;
2500
- }
2501
- var img_default = ImgComponent;
2502
-
2503
2314
  // src/blocks/section/component-info.ts
2504
- var componentInfo8 = {
2315
+ var componentInfo5 = {
2505
2316
  name: "Core:Section",
2506
2317
  static: true,
2507
2318
  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -2543,7 +2354,7 @@ var componentInfo8 = {
2543
2354
  };
2544
2355
 
2545
2356
  // src/blocks/slot/component-info.ts
2546
- var componentInfo9 = {
2357
+ var componentInfo6 = {
2547
2358
  name: "Slot",
2548
2359
  isRSC: true,
2549
2360
  description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -2577,7 +2388,7 @@ function Slot(props) {
2577
2388
  var slot_default = Slot;
2578
2389
 
2579
2390
  // src/blocks/symbol/component-info.ts
2580
- var componentInfo10 = {
2391
+ var componentInfo7 = {
2581
2392
  name: "Symbol",
2582
2393
  noWrap: true,
2583
2394
  static: true,
@@ -2613,7 +2424,7 @@ var componentInfo10 = {
2613
2424
  };
2614
2425
 
2615
2426
  // src/blocks/text/component-info.ts
2616
- var componentInfo11 = {
2427
+ var componentInfo8 = {
2617
2428
  name: "Text",
2618
2429
  static: true,
2619
2430
  isRSC: true,
@@ -2645,52 +2456,894 @@ function Text(props) {
2645
2456
  }
2646
2457
  var text_default = Text;
2647
2458
 
2648
- // src/blocks/video/component-info.ts
2649
- var componentInfo12 = {
2650
- name: "Video",
2651
- canHaveChildren: true,
2652
- defaultStyles: {
2653
- minHeight: "20px",
2654
- minWidth: "20px"
2655
- },
2656
- 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",
2459
+ // src/blocks/custom-code/component-info.ts
2460
+ var componentInfo9 = {
2461
+ name: "Custom Code",
2462
+ static: true,
2463
+ requiredPermissions: ["editCode"],
2657
2464
  inputs: [{
2658
- name: "video",
2659
- type: "file",
2660
- allowedFileTypes: ["mp4"],
2661
- bubble: true,
2662
- defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
2663
- required: true
2664
- }, {
2665
- name: "posterImage",
2666
- type: "file",
2667
- allowedFileTypes: ["jpeg", "png"],
2668
- helperText: "Image to show before the video plays"
2669
- }, {
2670
- name: "autoPlay",
2671
- type: "boolean",
2672
- defaultValue: true
2673
- }, {
2674
- name: "controls",
2675
- type: "boolean",
2676
- defaultValue: false
2677
- }, {
2678
- name: "muted",
2679
- type: "boolean",
2680
- defaultValue: true
2465
+ name: "code",
2466
+ type: "html",
2467
+ required: true,
2468
+ defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2469
+ code: true
2681
2470
  }, {
2682
- name: "loop",
2471
+ name: "replaceNodes",
2683
2472
  type: "boolean",
2684
- defaultValue: true
2473
+ helperText: "Preserve server rendered dom nodes",
2474
+ advanced: true
2685
2475
  }, {
2686
- name: "playsInline",
2476
+ name: "scriptsClientOnly",
2687
2477
  type: "boolean",
2688
- defaultValue: true
2689
- }, {
2690
- name: "fit",
2691
- type: "text",
2692
- defaultValue: "cover",
2693
- enum: ["contain", "cover", "fill", "auto"]
2478
+ defaultValue: false,
2479
+ helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2480
+ advanced: true
2481
+ }]
2482
+ };
2483
+
2484
+ // src/blocks/custom-code/custom-code.tsx
2485
+ import { onMount as onMount2, createSignal as createSignal7 } from "solid-js";
2486
+ function CustomCode(props) {
2487
+ const [scriptsInserted, setScriptsInserted] = createSignal7([]);
2488
+ const [scriptsRun, setScriptsRun] = createSignal7([]);
2489
+ let elementRef;
2490
+ onMount2(() => {
2491
+ if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
2492
+ return;
2493
+ }
2494
+ const scripts = elementRef.getElementsByTagName("script");
2495
+ for (let i = 0; i < scripts.length; i++) {
2496
+ const script = scripts[i];
2497
+ if (script.src) {
2498
+ if (scriptsInserted().includes(script.src)) {
2499
+ continue;
2500
+ }
2501
+ scriptsInserted().push(script.src);
2502
+ const newScript = document.createElement("script");
2503
+ newScript.async = true;
2504
+ newScript.src = script.src;
2505
+ document.head.appendChild(newScript);
2506
+ } else if (!script.type || [
2507
+ "text/javascript",
2508
+ "application/javascript",
2509
+ "application/ecmascript"
2510
+ ].includes(script.type)) {
2511
+ if (scriptsRun().includes(script.innerText)) {
2512
+ continue;
2513
+ }
2514
+ try {
2515
+ scriptsRun().push(script.innerText);
2516
+ new Function(script.innerText)();
2517
+ } catch (error2) {
2518
+ console.warn("`CustomCode`: Error running script:", error2);
2519
+ }
2520
+ }
2521
+ }
2522
+ });
2523
+ return <div
2524
+ class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
2525
+ ref={elementRef}
2526
+ innerHTML={props.code}
2527
+ />;
2528
+ }
2529
+ var custom_code_default = CustomCode;
2530
+
2531
+ // src/blocks/embed/component-info.ts
2532
+ var componentInfo10 = {
2533
+ name: "Embed",
2534
+ static: true,
2535
+ inputs: [{
2536
+ name: "url",
2537
+ type: "url",
2538
+ required: true,
2539
+ defaultValue: "",
2540
+ helperText: "e.g. enter a youtube url, google map, etc",
2541
+ onChange: (options) => {
2542
+ const url = options.get("url");
2543
+ if (url) {
2544
+ options.set("content", "Loading...");
2545
+ const apiKey = "ae0e60e78201a3f2b0de4b";
2546
+ return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
2547
+ if (options.get("url") === url) {
2548
+ if (data.html) {
2549
+ options.set("content", data.html);
2550
+ } else {
2551
+ options.set("content", "Invalid url, please try another");
2552
+ }
2553
+ }
2554
+ }).catch((_err) => {
2555
+ options.set("content", "There was an error embedding this URL, please try again or another URL");
2556
+ });
2557
+ } else {
2558
+ options.delete("content");
2559
+ }
2560
+ }
2561
+ }, {
2562
+ name: "content",
2563
+ type: "html",
2564
+ defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
2565
+ hideFromUI: true
2566
+ }]
2567
+ };
2568
+
2569
+ // src/blocks/embed/embed.tsx
2570
+ import { on, createEffect, createSignal as createSignal8 } from "solid-js";
2571
+
2572
+ // src/blocks/embed/helpers.ts
2573
+ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
2574
+ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
2575
+
2576
+ // src/blocks/embed/embed.tsx
2577
+ function Embed(props) {
2578
+ const [scriptsInserted, setScriptsInserted] = createSignal8([]);
2579
+ const [scriptsRun, setScriptsRun] = createSignal8([]);
2580
+ const [ranInitFn, setRanInitFn] = createSignal8(false);
2581
+ function findAndRunScripts() {
2582
+ if (!elem || !elem.getElementsByTagName)
2583
+ return;
2584
+ const scripts = elem.getElementsByTagName("script");
2585
+ for (let i = 0; i < scripts.length; i++) {
2586
+ const script = scripts[i];
2587
+ if (script.src && !scriptsInserted().includes(script.src)) {
2588
+ scriptsInserted().push(script.src);
2589
+ const newScript = document.createElement("script");
2590
+ newScript.async = true;
2591
+ newScript.src = script.src;
2592
+ document.head.appendChild(newScript);
2593
+ } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
2594
+ try {
2595
+ scriptsRun().push(script.innerText);
2596
+ new Function(script.innerText)();
2597
+ } catch (error2) {
2598
+ console.warn("`Embed`: Error running script:", error2);
2599
+ }
2600
+ }
2601
+ }
2602
+ }
2603
+ let elem;
2604
+ function onUpdateFn_0() {
2605
+ if (elem && !ranInitFn()) {
2606
+ setRanInitFn(true);
2607
+ findAndRunScripts();
2608
+ }
2609
+ }
2610
+ createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
2611
+ return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
2612
+ }
2613
+ var embed_default = Embed;
2614
+
2615
+ // src/blocks/form/form/component-info.ts
2616
+ var componentInfo11 = {
2617
+ name: "Form:Form",
2618
+ // editableTags: ['builder-form-error']
2619
+ defaults: {
2620
+ responsiveStyles: {
2621
+ large: {
2622
+ marginTop: "15px",
2623
+ paddingBottom: "15px"
2624
+ }
2625
+ }
2626
+ },
2627
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
2628
+ inputs: [{
2629
+ name: "sendSubmissionsTo",
2630
+ type: "string",
2631
+ // TODO: save to builder data and user can download as csv
2632
+ // TODO: easy for mode too or computed add/remove fields form mode
2633
+ // so you can edit details and high level mode at same time...
2634
+ // Later - more integrations like mailchimp
2635
+ // /api/v1/form-submit?to=mailchimp
2636
+ enum: [{
2637
+ label: "Send to email",
2638
+ value: "email",
2639
+ helperText: "Send form submissions to the email address of your choosing"
2640
+ }, {
2641
+ label: "Custom",
2642
+ value: "custom",
2643
+ helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
2644
+ }],
2645
+ defaultValue: "email"
2646
+ }, {
2647
+ name: "sendSubmissionsToEmail",
2648
+ type: "string",
2649
+ required: true,
2650
+ // TODO: required: () => options.get("sendSubmissionsTo") === "email"
2651
+ defaultValue: "your@email.com",
2652
+ showIf: 'options.get("sendSubmissionsTo") === "email"'
2653
+ }, {
2654
+ name: "sendWithJs",
2655
+ type: "boolean",
2656
+ helperText: "Set to false to use basic html form action",
2657
+ defaultValue: true,
2658
+ showIf: 'options.get("sendSubmissionsTo") === "custom"'
2659
+ }, {
2660
+ name: "name",
2661
+ type: "string",
2662
+ defaultValue: "My form"
2663
+ // advanced: true
2664
+ }, {
2665
+ name: "action",
2666
+ type: "string",
2667
+ helperText: "URL to send the form data to",
2668
+ showIf: 'options.get("sendSubmissionsTo") === "custom"'
2669
+ }, {
2670
+ name: "contentType",
2671
+ type: "string",
2672
+ defaultValue: "application/json",
2673
+ advanced: true,
2674
+ // TODO: do automatically if file input
2675
+ enum: ["application/json", "multipart/form-data", "application/x-www-form-urlencoded"],
2676
+ showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
2677
+ }, {
2678
+ name: "method",
2679
+ type: "string",
2680
+ showIf: 'options.get("sendSubmissionsTo") === "custom"',
2681
+ defaultValue: "POST",
2682
+ advanced: true
2683
+ }, {
2684
+ name: "previewState",
2685
+ type: "string",
2686
+ // TODO: persist: false flag
2687
+ enum: ["unsubmitted", "sending", "success", "error"],
2688
+ defaultValue: "unsubmitted",
2689
+ helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
2690
+ showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
2691
+ }, {
2692
+ name: "successUrl",
2693
+ type: "url",
2694
+ helperText: "Optional URL to redirect the user to on form submission success",
2695
+ showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
2696
+ }, {
2697
+ name: "resetFormOnSubmit",
2698
+ type: "boolean",
2699
+ showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
2700
+ advanced: true
2701
+ }, {
2702
+ name: "successMessage",
2703
+ type: "uiBlocks",
2704
+ hideFromUI: true,
2705
+ defaultValue: [{
2706
+ "@type": "@builder.io/sdk:Element",
2707
+ responsiveStyles: {
2708
+ large: {
2709
+ marginTop: "10px"
2710
+ }
2711
+ },
2712
+ component: {
2713
+ name: "Text",
2714
+ options: {
2715
+ text: "<span>Thanks!</span>"
2716
+ }
2717
+ }
2718
+ }]
2719
+ }, {
2720
+ name: "validate",
2721
+ type: "boolean",
2722
+ defaultValue: true,
2723
+ advanced: true
2724
+ }, {
2725
+ name: "errorMessagePath",
2726
+ type: "text",
2727
+ advanced: true,
2728
+ helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
2729
+ }, {
2730
+ name: "errorMessage",
2731
+ type: "uiBlocks",
2732
+ hideFromUI: true,
2733
+ defaultValue: [{
2734
+ "@type": "@builder.io/sdk:Element",
2735
+ responsiveStyles: {
2736
+ large: {
2737
+ marginTop: "10px"
2738
+ }
2739
+ },
2740
+ bindings: {
2741
+ "component.options.text": "state.formErrorMessage || block.component.options.text"
2742
+ },
2743
+ component: {
2744
+ name: "Text",
2745
+ options: {
2746
+ text: "<span>Form submission error :( Please check your answers and try again</span>"
2747
+ }
2748
+ }
2749
+ }]
2750
+ }, {
2751
+ name: "sendingMessage",
2752
+ type: "uiBlocks",
2753
+ hideFromUI: true,
2754
+ defaultValue: [{
2755
+ "@type": "@builder.io/sdk:Element",
2756
+ responsiveStyles: {
2757
+ large: {
2758
+ marginTop: "10px"
2759
+ }
2760
+ },
2761
+ component: {
2762
+ name: "Text",
2763
+ options: {
2764
+ text: "<span>Sending...</span>"
2765
+ }
2766
+ }
2767
+ }]
2768
+ }, {
2769
+ name: "customHeaders",
2770
+ type: "map",
2771
+ valueType: {
2772
+ type: "string"
2773
+ },
2774
+ advanced: true,
2775
+ showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
2776
+ }],
2777
+ noWrap: true,
2778
+ canHaveChildren: true,
2779
+ defaultChildren: [{
2780
+ "@type": "@builder.io/sdk:Element",
2781
+ responsiveStyles: {
2782
+ large: {
2783
+ marginTop: "10px"
2784
+ }
2785
+ },
2786
+ component: {
2787
+ name: "Text",
2788
+ options: {
2789
+ text: "<span>Enter your name</span>"
2790
+ }
2791
+ }
2792
+ }, {
2793
+ "@type": "@builder.io/sdk:Element",
2794
+ responsiveStyles: {
2795
+ large: {
2796
+ marginTop: "10px"
2797
+ }
2798
+ },
2799
+ component: {
2800
+ name: "Form:Input",
2801
+ options: {
2802
+ name: "name",
2803
+ placeholder: "Jane Doe"
2804
+ }
2805
+ }
2806
+ }, {
2807
+ "@type": "@builder.io/sdk:Element",
2808
+ responsiveStyles: {
2809
+ large: {
2810
+ marginTop: "10px"
2811
+ }
2812
+ },
2813
+ component: {
2814
+ name: "Text",
2815
+ options: {
2816
+ text: "<span>Enter your email</span>"
2817
+ }
2818
+ }
2819
+ }, {
2820
+ "@type": "@builder.io/sdk:Element",
2821
+ responsiveStyles: {
2822
+ large: {
2823
+ marginTop: "10px"
2824
+ }
2825
+ },
2826
+ component: {
2827
+ name: "Form:Input",
2828
+ options: {
2829
+ name: "email",
2830
+ placeholder: "jane@doe.com"
2831
+ }
2832
+ }
2833
+ }, {
2834
+ "@type": "@builder.io/sdk:Element",
2835
+ responsiveStyles: {
2836
+ large: {
2837
+ marginTop: "10px"
2838
+ }
2839
+ },
2840
+ component: {
2841
+ name: "Form:SubmitButton",
2842
+ options: {
2843
+ text: "Submit"
2844
+ }
2845
+ }
2846
+ }]
2847
+ };
2848
+
2849
+ // src/blocks/form/form/form.tsx
2850
+ import { Show as Show8, For as For5, createSignal as createSignal9 } from "solid-js";
2851
+ import { css as css4 } from "solid-styled-components";
2852
+
2853
+ // src/functions/get-env.ts
2854
+ var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
2855
+ var getEnv = () => {
2856
+ const env = "development";
2857
+ return validEnvList.includes(env) ? env : "production";
2858
+ };
2859
+
2860
+ // src/functions/get.ts
2861
+ var get = (obj, path, defaultValue) => {
2862
+ const result = String.prototype.split.call(path, /[,[\].]+?/).filter(Boolean).reduce((res, key) => res !== null && res !== void 0 ? res[key] : res, obj);
2863
+ return result === void 0 || result === obj ? defaultValue : result;
2864
+ };
2865
+
2866
+ // src/blocks/form/form/form.tsx
2867
+ function FormComponent(props) {
2868
+ const [formState, setFormState] = createSignal9("unsubmitted");
2869
+ const [responseData, setResponseData] = createSignal9(null);
2870
+ const [formErrorMessage, setFormErrorMessage] = createSignal9("");
2871
+ function mergeNewRootState(newData) {
2872
+ const combinedState = {
2873
+ ...props.builderContext.rootState,
2874
+ ...newData
2875
+ };
2876
+ if (props.builderContext.rootSetState) {
2877
+ props.builderContext.rootSetState?.(combinedState);
2878
+ } else {
2879
+ props.builderContext.rootState = combinedState;
2880
+ }
2881
+ }
2882
+ function submissionState() {
2883
+ return isEditing() && props.previewState || formState();
2884
+ }
2885
+ function onSubmit(event) {
2886
+ const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
2887
+ if (props.sendSubmissionsTo === "zapier") {
2888
+ event.preventDefault();
2889
+ } else if (sendWithJsProp) {
2890
+ if (!(props.action || props.sendSubmissionsTo === "email")) {
2891
+ event.preventDefault();
2892
+ return;
2893
+ }
2894
+ event.preventDefault();
2895
+ const el = event.currentTarget;
2896
+ const headers = props.customHeaders || {};
2897
+ let body;
2898
+ const formData = new FormData(el);
2899
+ const formPairs = Array.from(
2900
+ event.currentTarget.querySelectorAll("input,select,textarea")
2901
+ ).filter((el2) => !!el2.name).map((el2) => {
2902
+ let value;
2903
+ const key = el2.name;
2904
+ if (el2 instanceof HTMLInputElement) {
2905
+ if (el2.type === "radio") {
2906
+ if (el2.checked) {
2907
+ value = el2.name;
2908
+ return {
2909
+ key,
2910
+ value
2911
+ };
2912
+ }
2913
+ } else if (el2.type === "checkbox") {
2914
+ value = el2.checked;
2915
+ } else if (el2.type === "number" || el2.type === "range") {
2916
+ const num = el2.valueAsNumber;
2917
+ if (!isNaN(num)) {
2918
+ value = num;
2919
+ }
2920
+ } else if (el2.type === "file") {
2921
+ value = el2.files;
2922
+ } else {
2923
+ value = el2.value;
2924
+ }
2925
+ } else {
2926
+ value = el2.value;
2927
+ }
2928
+ return {
2929
+ key,
2930
+ value
2931
+ };
2932
+ });
2933
+ let formContentType = props.contentType;
2934
+ if (props.sendSubmissionsTo === "email") {
2935
+ formContentType = "multipart/form-data";
2936
+ }
2937
+ Array.from(formPairs).forEach(({ value }) => {
2938
+ if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
2939
+ formContentType = "multipart/form-data";
2940
+ }
2941
+ });
2942
+ if (formContentType !== "application/json") {
2943
+ body = formData;
2944
+ } else {
2945
+ const json = {};
2946
+ Array.from(formPairs).forEach(({ value, key }) => {
2947
+ set(json, key, value);
2948
+ });
2949
+ body = JSON.stringify(json);
2950
+ }
2951
+ if (formContentType && formContentType !== "multipart/form-data") {
2952
+ if (
2953
+ /* Zapier doesn't allow content-type header to be sent from browsers */
2954
+ !(sendWithJsProp && props.action?.includes("zapier.com"))
2955
+ ) {
2956
+ headers["content-type"] = formContentType;
2957
+ }
2958
+ }
2959
+ const presubmitEvent = new CustomEvent("presubmit", {
2960
+ detail: {
2961
+ body
2962
+ }
2963
+ });
2964
+ if (formRef) {
2965
+ formRef.dispatchEvent(presubmitEvent);
2966
+ if (presubmitEvent.defaultPrevented) {
2967
+ return;
2968
+ }
2969
+ }
2970
+ setFormState("sending");
2971
+ const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(
2972
+ props.sendSubmissionsToEmail || ""
2973
+ )}&name=${encodeURIComponent(props.name || "")}`;
2974
+ fetch(
2975
+ props.sendSubmissionsTo === "email" ? formUrl : props.action,
2976
+ {
2977
+ body,
2978
+ headers,
2979
+ method: props.method || "post"
2980
+ }
2981
+ ).then(
2982
+ async (res) => {
2983
+ let body2;
2984
+ const contentType = res.headers.get("content-type");
2985
+ if (contentType && contentType.indexOf("application/json") !== -1) {
2986
+ body2 = await res.json();
2987
+ } else {
2988
+ body2 = await res.text();
2989
+ }
2990
+ if (!res.ok && props.errorMessagePath) {
2991
+ let message = get(body2, props.errorMessagePath);
2992
+ if (message) {
2993
+ if (typeof message !== "string") {
2994
+ message = JSON.stringify(message);
2995
+ }
2996
+ setFormErrorMessage(message);
2997
+ mergeNewRootState({
2998
+ formErrorMessage: message
2999
+ });
3000
+ }
3001
+ }
3002
+ setResponseData(body2);
3003
+ setFormState(res.ok ? "success" : "error");
3004
+ if (res.ok) {
3005
+ const submitSuccessEvent = new CustomEvent("submit:success", {
3006
+ detail: {
3007
+ res,
3008
+ body: body2
3009
+ }
3010
+ });
3011
+ if (formRef) {
3012
+ formRef.dispatchEvent(submitSuccessEvent);
3013
+ if (submitSuccessEvent.defaultPrevented) {
3014
+ return;
3015
+ }
3016
+ if (props.resetFormOnSubmit !== false) {
3017
+ formRef.reset();
3018
+ }
3019
+ }
3020
+ if (props.successUrl) {
3021
+ if (formRef) {
3022
+ const event2 = new CustomEvent("route", {
3023
+ detail: {
3024
+ url: props.successUrl
3025
+ }
3026
+ });
3027
+ formRef.dispatchEvent(event2);
3028
+ if (!event2.defaultPrevented) {
3029
+ location.href = props.successUrl;
3030
+ }
3031
+ } else {
3032
+ location.href = props.successUrl;
3033
+ }
3034
+ }
3035
+ }
3036
+ },
3037
+ (err) => {
3038
+ const submitErrorEvent = new CustomEvent("submit:error", {
3039
+ detail: {
3040
+ error: err
3041
+ }
3042
+ });
3043
+ if (formRef) {
3044
+ formRef.dispatchEvent(submitErrorEvent);
3045
+ if (submitErrorEvent.defaultPrevented) {
3046
+ return;
3047
+ }
3048
+ }
3049
+ setResponseData(err);
3050
+ setFormState("error");
3051
+ }
3052
+ );
3053
+ }
3054
+ }
3055
+ let formRef;
3056
+ return <form
3057
+ validate={props.validate}
3058
+ ref={formRef}
3059
+ action={!props.sendWithJs && props.action}
3060
+ method={props.method}
3061
+ name={props.name}
3062
+ onSubmit={(event) => onSubmit(event)}
3063
+ {...{}}
3064
+ {...props.attributes}
3065
+ >
3066
+ <Show8 when={props.builderBlock && props.builderBlock.children}><For5 each={props.builderBlock?.children}>{(block, _index) => {
3067
+ const idx = _index();
3068
+ return <Block_default
3069
+ key={`form-block-${idx}`}
3070
+ block={block}
3071
+ context={props.builderContext}
3072
+ registeredComponents={props.builderComponents}
3073
+ linkComponent={props.builderLinkComponent}
3074
+ />;
3075
+ }}</For5></Show8>
3076
+ <Show8 when={submissionState() === "error"}><Blocks_default
3077
+ path="errorMessage"
3078
+ blocks={props.errorMessage}
3079
+ context={props.builderContext}
3080
+ /></Show8>
3081
+ <Show8 when={submissionState() === "sending"}><Blocks_default
3082
+ path="sendingMessage"
3083
+ blocks={props.sendingMessage}
3084
+ context={props.builderContext}
3085
+ /></Show8>
3086
+ <Show8 when={submissionState() === "error" && responseData()}><pre
3087
+ class={"builder-form-error-text " + css4({
3088
+ padding: "10px",
3089
+ color: "red",
3090
+ textAlign: "center"
3091
+ })}
3092
+ >{JSON.stringify(responseData(), null, 2)}</pre></Show8>
3093
+ <Show8 when={submissionState() === "success"}><Blocks_default
3094
+ path="successMessage"
3095
+ blocks={props.successMessage}
3096
+ context={props.builderContext}
3097
+ /></Show8>
3098
+ </form>;
3099
+ }
3100
+ var form_default = FormComponent;
3101
+
3102
+ // src/blocks/form/input/component-info.ts
3103
+ var componentInfo12 = {
3104
+ name: "Form:Input",
3105
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
3106
+ inputs: [
3107
+ {
3108
+ name: "type",
3109
+ type: "text",
3110
+ enum: ["text", "number", "email", "url", "checkbox", "radio", "range", "date", "datetime-local", "search", "tel", "time", "file", "month", "week", "password", "color", "hidden"],
3111
+ defaultValue: "text"
3112
+ },
3113
+ {
3114
+ name: "name",
3115
+ type: "string",
3116
+ required: true,
3117
+ helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
3118
+ },
3119
+ {
3120
+ name: "placeholder",
3121
+ type: "string",
3122
+ defaultValue: "Hello there",
3123
+ helperText: "Text to display when there is no value"
3124
+ },
3125
+ // TODO: handle value vs default value automatically like ng-model
3126
+ {
3127
+ name: "defaultValue",
3128
+ type: "string"
3129
+ },
3130
+ {
3131
+ name: "value",
3132
+ type: "string",
3133
+ advanced: true
3134
+ },
3135
+ {
3136
+ name: "required",
3137
+ type: "boolean",
3138
+ helperText: "Is this input required to be filled out to submit a form",
3139
+ defaultValue: false
3140
+ }
3141
+ ],
3142
+ noWrap: true,
3143
+ static: true,
3144
+ defaultStyles: {
3145
+ paddingTop: "10px",
3146
+ paddingBottom: "10px",
3147
+ paddingLeft: "10px",
3148
+ paddingRight: "10px",
3149
+ borderRadius: "3px",
3150
+ borderWidth: "1px",
3151
+ borderStyle: "solid",
3152
+ borderColor: "#ccc"
3153
+ }
3154
+ };
3155
+
3156
+ // src/blocks/form/input/input.tsx
3157
+ function FormInputComponent(props) {
3158
+ return <input
3159
+ {...{}}
3160
+ {...props.attributes}
3161
+ key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
3162
+ placeholder={props.placeholder}
3163
+ type={props.type}
3164
+ name={props.name}
3165
+ value={props.value}
3166
+ defaultValue={props.defaultValue}
3167
+ required={props.required}
3168
+ />;
3169
+ }
3170
+ var input_default = FormInputComponent;
3171
+
3172
+ // src/blocks/form/select/component-info.ts
3173
+ var componentInfo13 = {
3174
+ name: "Form:Select",
3175
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
3176
+ defaultStyles: {
3177
+ alignSelf: "flex-start"
3178
+ },
3179
+ inputs: [{
3180
+ name: "options",
3181
+ type: "list",
3182
+ required: true,
3183
+ subFields: [{
3184
+ name: "value",
3185
+ type: "text",
3186
+ required: true
3187
+ }, {
3188
+ name: "name",
3189
+ type: "text"
3190
+ }],
3191
+ defaultValue: [{
3192
+ value: "option 1"
3193
+ }, {
3194
+ value: "option 2"
3195
+ }]
3196
+ }, {
3197
+ name: "name",
3198
+ type: "string",
3199
+ required: true,
3200
+ helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
3201
+ }, {
3202
+ name: "defaultValue",
3203
+ type: "string"
3204
+ }, {
3205
+ name: "value",
3206
+ type: "string",
3207
+ advanced: true
3208
+ }, {
3209
+ name: "required",
3210
+ type: "boolean",
3211
+ defaultValue: false
3212
+ }],
3213
+ static: true,
3214
+ noWrap: true
3215
+ };
3216
+
3217
+ // src/blocks/form/select/select.tsx
3218
+ import { For as For6 } from "solid-js";
3219
+ function SelectComponent(props) {
3220
+ return <select
3221
+ {...{}}
3222
+ {...props.attributes}
3223
+ value={props.value}
3224
+ key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
3225
+ defaultValue={props.defaultValue}
3226
+ name={props.name}
3227
+ ><For6 each={props.options}>{(option, _index) => {
3228
+ const index = _index();
3229
+ return <option value={option.value}>{option.name || option.value}</option>;
3230
+ }}</For6></select>;
3231
+ }
3232
+ var select_default = SelectComponent;
3233
+
3234
+ // src/blocks/form/submit-button/component-info.ts
3235
+ var componentInfo14 = {
3236
+ name: "Form:SubmitButton",
3237
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
3238
+ defaultStyles: {
3239
+ appearance: "none",
3240
+ paddingTop: "15px",
3241
+ paddingBottom: "15px",
3242
+ paddingLeft: "25px",
3243
+ paddingRight: "25px",
3244
+ backgroundColor: "#3898EC",
3245
+ color: "white",
3246
+ borderRadius: "4px",
3247
+ cursor: "pointer"
3248
+ },
3249
+ inputs: [{
3250
+ name: "text",
3251
+ type: "text",
3252
+ defaultValue: "Click me"
3253
+ }],
3254
+ static: true,
3255
+ noWrap: true
3256
+ // TODO: optional children? maybe as optional form input
3257
+ // that only shows if advanced setting is flipped
3258
+ // TODO: defaultChildren
3259
+ // canHaveChildren: true,
3260
+ };
3261
+
3262
+ // src/blocks/form/submit-button/submit-button.tsx
3263
+ function SubmitButton(props) {
3264
+ return <button type="submit" {...{}} {...props.attributes}>{props.text}</button>;
3265
+ }
3266
+ var submit_button_default = SubmitButton;
3267
+
3268
+ // src/blocks/img/component-info.ts
3269
+ var componentInfo15 = {
3270
+ // friendlyName?
3271
+ name: "Raw:Img",
3272
+ hideFromInsertMenu: true,
3273
+ 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",
3274
+ inputs: [{
3275
+ name: "image",
3276
+ bubble: true,
3277
+ type: "file",
3278
+ allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
3279
+ required: true
3280
+ }],
3281
+ noWrap: true,
3282
+ static: true
3283
+ };
3284
+
3285
+ // src/blocks/img/img.tsx
3286
+ function ImgComponent(props) {
3287
+ return <img
3288
+ style={{
3289
+ "object-fit": props.backgroundSize || "cover",
3290
+ "object-position": props.backgroundPosition || "center"
3291
+ }}
3292
+ key={isEditing() && props.imgSrc || "default-key"}
3293
+ alt={props.altText}
3294
+ src={props.imgSrc || props.image}
3295
+ {...{}}
3296
+ {...props.attributes}
3297
+ />;
3298
+ }
3299
+ var img_default = ImgComponent;
3300
+
3301
+ // src/blocks/video/component-info.ts
3302
+ var componentInfo16 = {
3303
+ name: "Video",
3304
+ canHaveChildren: true,
3305
+ defaultStyles: {
3306
+ minHeight: "20px",
3307
+ minWidth: "20px"
3308
+ },
3309
+ 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",
3310
+ inputs: [{
3311
+ name: "video",
3312
+ type: "file",
3313
+ allowedFileTypes: ["mp4"],
3314
+ bubble: true,
3315
+ defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
3316
+ required: true
3317
+ }, {
3318
+ name: "posterImage",
3319
+ type: "file",
3320
+ allowedFileTypes: ["jpeg", "png"],
3321
+ helperText: "Image to show before the video plays"
3322
+ }, {
3323
+ name: "autoPlay",
3324
+ type: "boolean",
3325
+ defaultValue: true
3326
+ }, {
3327
+ name: "controls",
3328
+ type: "boolean",
3329
+ defaultValue: false
3330
+ }, {
3331
+ name: "muted",
3332
+ type: "boolean",
3333
+ defaultValue: true
3334
+ }, {
3335
+ name: "loop",
3336
+ type: "boolean",
3337
+ defaultValue: true
3338
+ }, {
3339
+ name: "playsInline",
3340
+ type: "boolean",
3341
+ defaultValue: true
3342
+ }, {
3343
+ name: "fit",
3344
+ type: "text",
3345
+ defaultValue: "cover",
3346
+ enum: ["contain", "cover", "fill", "auto"]
2694
3347
  }, {
2695
3348
  name: "preload",
2696
3349
  type: "text",
@@ -2730,7 +3383,7 @@ var componentInfo12 = {
2730
3383
  };
2731
3384
 
2732
3385
  // src/blocks/video/video.tsx
2733
- import { Show as Show8 } from "solid-js";
3386
+ import { Show as Show9 } from "solid-js";
2734
3387
  function Video(props) {
2735
3388
  function videoProps() {
2736
3389
  return {
@@ -2781,8 +3434,8 @@ function Video(props) {
2781
3434
  }}
2782
3435
  src={props.video || "no-src"}
2783
3436
  poster={props.posterImage}
2784
- ><Show8 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show8></video>
2785
- <Show8
3437
+ ><Show9 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show9></video>
3438
+ <Show9
2786
3439
  when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
2787
3440
  ><div
2788
3441
  style={{
@@ -2791,15 +3444,15 @@ function Video(props) {
2791
3444
  "pointer-events": "none",
2792
3445
  "font-size": "0px"
2793
3446
  }}
2794
- /></Show8>
2795
- <Show8 when={props.builderBlock?.children?.length && props.fitContent}><div
3447
+ /></Show9>
3448
+ <Show9 when={props.builderBlock?.children?.length && props.fitContent}><div
2796
3449
  style={{
2797
3450
  display: "flex",
2798
3451
  "flex-direction": "column",
2799
3452
  "align-items": "stretch"
2800
3453
  }}
2801
- >{props.children}</div></Show8>
2802
- <Show8 when={props.builderBlock?.children?.length && !props.fitContent}><div
3454
+ >{props.children}</div></Show9>
3455
+ <Show9 when={props.builderBlock?.children?.length && !props.fitContent}><div
2803
3456
  style={{
2804
3457
  "pointer-events": "none",
2805
3458
  display: "flex",
@@ -2811,11 +3464,38 @@ function Video(props) {
2811
3464
  width: "100%",
2812
3465
  height: "100%"
2813
3466
  }}
2814
- >{props.children}</div></Show8>
3467
+ >{props.children}</div></Show9>
2815
3468
  </div>;
2816
3469
  }
2817
3470
  var video_default = Video;
2818
3471
 
3472
+ // src/constants/extra-components.ts
3473
+ var getExtraComponents = () => [{
3474
+ component: custom_code_default,
3475
+ ...componentInfo9
3476
+ }, {
3477
+ component: embed_default,
3478
+ ...componentInfo10
3479
+ }, ...TARGET === "rsc" ? [] : [{
3480
+ component: form_default,
3481
+ ...componentInfo11
3482
+ }, {
3483
+ component: input_default,
3484
+ ...componentInfo12
3485
+ }, {
3486
+ component: submit_button_default,
3487
+ ...componentInfo14
3488
+ }, {
3489
+ component: select_default,
3490
+ ...componentInfo13
3491
+ }], {
3492
+ component: img_default,
3493
+ ...componentInfo15
3494
+ }, {
3495
+ component: video_default,
3496
+ ...componentInfo16
3497
+ }];
3498
+
2819
3499
  // src/constants/builder-registered-components.ts
2820
3500
  var getDefaultRegisteredComponents = () => [{
2821
3501
  component: button_default,
@@ -2824,36 +3504,24 @@ var getDefaultRegisteredComponents = () => [{
2824
3504
  component: columns_default,
2825
3505
  ...componentInfo2
2826
3506
  }, {
2827
- component: custom_code_default,
3507
+ component: fragment_default,
2828
3508
  ...componentInfo3
2829
3509
  }, {
2830
- component: embed_default,
3510
+ component: image_default,
2831
3511
  ...componentInfo4
2832
3512
  }, {
2833
- component: fragment_default,
3513
+ component: section_default,
2834
3514
  ...componentInfo5
2835
3515
  }, {
2836
- component: image_default,
3516
+ component: slot_default,
2837
3517
  ...componentInfo6
2838
- }, {
2839
- component: img_default,
2840
- ...componentInfo7
2841
- }, {
2842
- component: section_default,
2843
- ...componentInfo8
2844
3518
  }, {
2845
3519
  component: symbol_default,
2846
- ...componentInfo10
3520
+ ...componentInfo7
2847
3521
  }, {
2848
3522
  component: text_default,
2849
- ...componentInfo11
2850
- }, {
2851
- component: video_default,
2852
- ...componentInfo12
2853
- }, {
2854
- component: slot_default,
2855
- ...componentInfo9
2856
- }];
3523
+ ...componentInfo8
3524
+ }, ...getExtraComponents()];
2857
3525
 
2858
3526
  // src/functions/register-component.ts
2859
3527
  var components = [];
@@ -2931,7 +3599,7 @@ function InlinedScript(props) {
2931
3599
  var Inlined_script_default = InlinedScript;
2932
3600
 
2933
3601
  // src/components/content/components/enable-editor.tsx
2934
- import { Show as Show9, onMount as onMount3, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
3602
+ import { Show as Show10, onMount as onMount3, on as on2, createEffect as createEffect2, createSignal as createSignal11 } from "solid-js";
2935
3603
  import { Dynamic as Dynamic5 } from "solid-js/web";
2936
3604
 
2937
3605
  // src/helpers/preview-lru-cache/get.ts
@@ -3426,7 +4094,7 @@ function isFromTrustedHost(trustedHosts, e) {
3426
4094
  }
3427
4095
 
3428
4096
  // src/constants/sdk-version.ts
3429
- var SDK_VERSION = "0.13.0";
4097
+ var SDK_VERSION = "0.13.2";
3430
4098
 
3431
4099
  // src/functions/register.ts
3432
4100
  var registry = {};
@@ -3625,15 +4293,15 @@ var subscribeToEditor = (model, callback, options) => {
3625
4293
 
3626
4294
  // src/components/content/components/enable-editor.tsx
3627
4295
  function EnableEditor(props) {
3628
- const [forceReRenderCount, setForceReRenderCount] = createSignal10(0);
3629
- const [firstRender, setFirstRender] = createSignal10(true);
3630
- const [lastUpdated, setLastUpdated] = createSignal10(0);
3631
- const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal10(false);
3632
- const [ContentWrapper, setContentWrapper] = createSignal10(
4296
+ const [forceReRenderCount, setForceReRenderCount] = createSignal11(0);
4297
+ const [firstRender, setFirstRender] = createSignal11(true);
4298
+ const [lastUpdated, setLastUpdated] = createSignal11(0);
4299
+ const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal11(false);
4300
+ const [ContentWrapper, setContentWrapper] = createSignal11(
3633
4301
  props.contentWrapper || "div"
3634
4302
  );
3635
- const [httpReqsData, setHttpReqsData] = createSignal10({});
3636
- const [clicked, setClicked] = createSignal10(false);
4303
+ const [httpReqsData, setHttpReqsData] = createSignal11({});
4304
+ const [clicked, setClicked] = createSignal11(false);
3637
4305
  function mergeNewRootState(newData) {
3638
4306
  const combinedState = {
3639
4307
  ...props.builderContextSignal.rootState,
@@ -3897,7 +4565,7 @@ function EnableEditor(props) {
3897
4565
  }
3898
4566
  }
3899
4567
  createEffect2(on2(() => [props.locale], onUpdateFn_6));
3900
- return <builder_context_default.Provider value={props.builderContextSignal}><Show9 when={props.builderContextSignal.content}><Dynamic5
4568
+ return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
3901
4569
  class={`variant-${props.content?.testVariationId || props.content?.id}`}
3902
4570
  {...{}}
3903
4571
  key={forceReRenderCount()}
@@ -3912,12 +4580,12 @@ function EnableEditor(props) {
3912
4580
  }}
3913
4581
  {...props.contentWrapperProps}
3914
4582
  component={ContentWrapper()}
3915
- >{props.children}</Dynamic5></Show9></builder_context_default.Provider>;
4583
+ >{props.children}</Dynamic5></Show10></builder_context_default.Provider>;
3916
4584
  }
3917
4585
  var Enable_editor_default = EnableEditor;
3918
4586
 
3919
4587
  // src/components/content/components/styles.tsx
3920
- import { createSignal as createSignal11 } from "solid-js";
4588
+ import { createSignal as createSignal12 } from "solid-js";
3921
4589
 
3922
4590
  // src/components/content/components/styles.helpers.ts
3923
4591
  var getCssFromFont = (font) => {
@@ -3976,7 +4644,7 @@ var getCss = ({
3976
4644
 
3977
4645
  // src/components/content/components/styles.tsx
3978
4646
  function ContentStyles(props) {
3979
- const [injectedStyles, setInjectedStyles] = createSignal11(
4647
+ const [injectedStyles, setInjectedStyles] = createSignal12(
3980
4648
  `
3981
4649
  ${getCss({
3982
4650
  cssCode: props.cssCode,
@@ -4046,7 +4714,7 @@ var getContentInitialValue = ({
4046
4714
 
4047
4715
  // src/components/content/content.tsx
4048
4716
  function ContentComponent(props) {
4049
- const [scriptStr, setScriptStr] = createSignal12(
4717
+ const [scriptStr, setScriptStr] = createSignal13(
4050
4718
  getUpdateVariantVisibilityScript({
4051
4719
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
4052
4720
  variationId: props.content?.testVariationId,
@@ -4054,7 +4722,7 @@ function ContentComponent(props) {
4054
4722
  contentId: props.content?.id
4055
4723
  })
4056
4724
  );
4057
- const [registeredComponents, setRegisteredComponents] = createSignal12(
4725
+ const [registeredComponents, setRegisteredComponents] = createSignal13(
4058
4726
  [
4059
4727
  ...getDefaultRegisteredComponents(),
4060
4728
  // While this `components` object is deprecated, we must maintain support for it.
@@ -4075,7 +4743,7 @@ function ContentComponent(props) {
4075
4743
  {}
4076
4744
  )
4077
4745
  );
4078
- const [builderContextSignal, setBuilderContextSignal] = createSignal12({
4746
+ const [builderContextSignal, setBuilderContextSignal] = createSignal13({
4079
4747
  content: getContentInitialValue({
4080
4748
  content: props.content,
4081
4749
  data: props.data
@@ -4140,12 +4808,12 @@ function ContentComponent(props) {
4140
4808
  setBuilderContextSignal
4141
4809
  }}
4142
4810
  >
4143
- <Show10 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show10>
4144
- <Show10 when={TARGET !== "reactNative"}><Styles_default
4811
+ <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
4812
+ <Show11 when={TARGET !== "reactNative"}><Styles_default
4145
4813
  contentId={builderContextSignal().content?.id}
4146
4814
  cssCode={builderContextSignal().content?.data?.cssCode}
4147
4815
  customFonts={builderContextSignal().content?.data?.customFonts}
4148
- /></Show10>
4816
+ /></Show11>
4149
4817
  <Blocks_default
4150
4818
  blocks={builderContextSignal().content?.data?.blocks}
4151
4819
  context={builderContextSignal()}
@@ -4158,7 +4826,7 @@ var Content_default = ContentComponent;
4158
4826
 
4159
4827
  // src/components/content-variants/content-variants.tsx
4160
4828
  function ContentVariants(props) {
4161
- const [shouldRenderVariants, setShouldRenderVariants] = createSignal13(
4829
+ const [shouldRenderVariants, setShouldRenderVariants] = createSignal14(
4162
4830
  checkShouldRenderVariants({
4163
4831
  canTrack: getDefaultCanTrack(props.canTrack),
4164
4832
  content: props.content
@@ -4189,8 +4857,8 @@ function ContentVariants(props) {
4189
4857
  setShouldRenderVariants(false);
4190
4858
  });
4191
4859
  return <>
4192
- <Show11 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show11>
4193
- <Show11 when={shouldRenderVariants()}>
4860
+ <Show12 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
4861
+ <Show12 when={shouldRenderVariants()}>
4194
4862
  <Inlined_styles_default
4195
4863
  id={`variants-styles-${props.content?.id}`}
4196
4864
  styles={hideVariantsStyleString()}
@@ -4198,7 +4866,7 @@ function ContentVariants(props) {
4198
4866
  <Inlined_script_default
4199
4867
  scriptStr={updateCookieAndStylesScriptStr()}
4200
4868
  />
4201
- <For5 each={getVariants(props.content)}>{(variant, _index) => {
4869
+ <For7 each={getVariants(props.content)}>{(variant, _index) => {
4202
4870
  const index = _index();
4203
4871
  return <Content_default
4204
4872
  key={variant.testVariationId}
@@ -4222,8 +4890,8 @@ function ContentVariants(props) {
4222
4890
  contentWrapperProps={props.contentWrapperProps}
4223
4891
  trustedHosts={props.trustedHosts}
4224
4892
  />;
4225
- }}</For5>
4226
- </Show11>
4893
+ }}</For7>
4894
+ </Show12>
4227
4895
  <Content_default
4228
4896
  {...{}}
4229
4897
  content={defaultContent()}
@@ -4276,7 +4944,7 @@ var fetchSymbolContent = async ({
4276
4944
 
4277
4945
  // src/blocks/symbol/symbol.tsx
4278
4946
  function Symbol(props) {
4279
- const [contentToUse, setContentToUse] = createSignal14(props.symbol?.content);
4947
+ const [contentToUse, setContentToUse] = createSignal15(props.symbol?.content);
4280
4948
  function className() {
4281
4949
  return [
4282
4950
  ...[props.attributes[getClassPropName()]],