@builder.io/sdk-solid 0.13.1 → 0.13.3

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/edge/dev.jsx CHANGED
@@ -3946,7 +3946,7 @@ function BlockStyles(props) {
3946
3946
  }
3947
3947
  return true;
3948
3948
  }
3949
- function css4() {
3949
+ function css5() {
3950
3950
  const processedBlock = getProcessedBlock({
3951
3951
  block: props.block,
3952
3952
  localState: props.context.localState,
@@ -3989,7 +3989,7 @@ function BlockStyles(props) {
3989
3989
  }) : "";
3990
3990
  return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
3991
3991
  }
3992
- return <Show2 when={TARGET !== "reactNative" && css4() && canShowBlock()}><Inlined_styles_default styles={css4()} /></Show2>;
3992
+ return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
3993
3993
  }
3994
3994
  var Block_styles_default = BlockStyles;
3995
3995
 
@@ -4278,10 +4278,10 @@ function Block(props) {
4278
4278
  componentOptions: {
4279
4279
  ...getBlockComponentOptions(processedBlock()),
4280
4280
  builderContext: props.context,
4281
- ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
4281
+ ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
4282
4282
  builderLinkComponent: props.linkComponent
4283
4283
  } : {},
4284
- ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
4284
+ ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
4285
4285
  builderComponents: props.registeredComponents
4286
4286
  } : {}
4287
4287
  },
@@ -4753,10 +4753,10 @@ function SectionComponent(props) {
4753
4753
  var section_default = SectionComponent;
4754
4754
 
4755
4755
  // src/blocks/symbol/symbol.tsx
4756
- import { onMount as onMount5, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
4756
+ import { onMount as onMount5, on as on3, createEffect as createEffect3, createSignal as createSignal15 } from "solid-js";
4757
4757
 
4758
4758
  // src/components/content-variants/content-variants.tsx
4759
- import { Show as Show11, For as For5, onMount as onMount4, createSignal as createSignal13 } from "solid-js";
4759
+ import { Show as Show12, For as For7, onMount as onMount4, createSignal as createSignal14 } from "solid-js";
4760
4760
 
4761
4761
  // src/helpers/url.ts
4762
4762
  var getTopLevelDomain = (host) => {
@@ -4950,7 +4950,7 @@ var handleABTesting = async ({
4950
4950
  var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
4951
4951
 
4952
4952
  // src/components/content/content.tsx
4953
- import { Show as Show10, createSignal as createSignal12 } from "solid-js";
4953
+ import { Show as Show11, createSignal as createSignal13 } from "solid-js";
4954
4954
 
4955
4955
  // src/blocks/button/component-info.ts
4956
4956
  var componentInfo = {
@@ -5208,164 +5208,8 @@ var componentInfo2 = {
5208
5208
  }]
5209
5209
  };
5210
5210
 
5211
- // src/blocks/custom-code/component-info.ts
5212
- var componentInfo3 = {
5213
- name: "Custom Code",
5214
- static: true,
5215
- requiredPermissions: ["editCode"],
5216
- inputs: [{
5217
- name: "code",
5218
- type: "html",
5219
- required: true,
5220
- defaultValue: "<p>Hello there, I am custom HTML code!</p>",
5221
- code: true
5222
- }, {
5223
- name: "replaceNodes",
5224
- type: "boolean",
5225
- helperText: "Preserve server rendered dom nodes",
5226
- advanced: true
5227
- }, {
5228
- name: "scriptsClientOnly",
5229
- type: "boolean",
5230
- defaultValue: false,
5231
- helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
5232
- advanced: true
5233
- }]
5234
- };
5235
-
5236
- // src/blocks/custom-code/custom-code.tsx
5237
- import { onMount as onMount2, createSignal as createSignal7 } from "solid-js";
5238
- function CustomCode(props) {
5239
- const [scriptsInserted, setScriptsInserted] = createSignal7([]);
5240
- const [scriptsRun, setScriptsRun] = createSignal7([]);
5241
- let elementRef;
5242
- onMount2(() => {
5243
- if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
5244
- return;
5245
- }
5246
- const scripts = elementRef.getElementsByTagName("script");
5247
- for (let i = 0; i < scripts.length; i++) {
5248
- const script = scripts[i];
5249
- if (script.src) {
5250
- if (scriptsInserted().includes(script.src)) {
5251
- continue;
5252
- }
5253
- scriptsInserted().push(script.src);
5254
- const newScript = document.createElement("script");
5255
- newScript.async = true;
5256
- newScript.src = script.src;
5257
- document.head.appendChild(newScript);
5258
- } else if (!script.type || [
5259
- "text/javascript",
5260
- "application/javascript",
5261
- "application/ecmascript"
5262
- ].includes(script.type)) {
5263
- if (scriptsRun().includes(script.innerText)) {
5264
- continue;
5265
- }
5266
- try {
5267
- scriptsRun().push(script.innerText);
5268
- new Function(script.innerText)();
5269
- } catch (error) {
5270
- console.warn("`CustomCode`: Error running script:", error);
5271
- }
5272
- }
5273
- }
5274
- });
5275
- return <div
5276
- class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
5277
- ref={elementRef}
5278
- innerHTML={props.code}
5279
- />;
5280
- }
5281
- var custom_code_default = CustomCode;
5282
-
5283
- // src/blocks/embed/component-info.ts
5284
- var componentInfo4 = {
5285
- name: "Embed",
5286
- static: true,
5287
- inputs: [{
5288
- name: "url",
5289
- type: "url",
5290
- required: true,
5291
- defaultValue: "",
5292
- helperText: "e.g. enter a youtube url, google map, etc",
5293
- onChange: (options) => {
5294
- const url = options.get("url");
5295
- if (url) {
5296
- options.set("content", "Loading...");
5297
- const apiKey = "ae0e60e78201a3f2b0de4b";
5298
- return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
5299
- if (options.get("url") === url) {
5300
- if (data.html) {
5301
- options.set("content", data.html);
5302
- } else {
5303
- options.set("content", "Invalid url, please try another");
5304
- }
5305
- }
5306
- }).catch((_err) => {
5307
- options.set("content", "There was an error embedding this URL, please try again or another URL");
5308
- });
5309
- } else {
5310
- options.delete("content");
5311
- }
5312
- }
5313
- }, {
5314
- name: "content",
5315
- type: "html",
5316
- defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
5317
- hideFromUI: true
5318
- }]
5319
- };
5320
-
5321
- // src/blocks/embed/embed.tsx
5322
- import { on, createEffect, createSignal as createSignal8 } from "solid-js";
5323
-
5324
- // src/blocks/embed/helpers.ts
5325
- var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
5326
- var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
5327
-
5328
- // src/blocks/embed/embed.tsx
5329
- function Embed(props) {
5330
- const [scriptsInserted, setScriptsInserted] = createSignal8([]);
5331
- const [scriptsRun, setScriptsRun] = createSignal8([]);
5332
- const [ranInitFn, setRanInitFn] = createSignal8(false);
5333
- function findAndRunScripts() {
5334
- if (!elem || !elem.getElementsByTagName)
5335
- return;
5336
- const scripts = elem.getElementsByTagName("script");
5337
- for (let i = 0; i < scripts.length; i++) {
5338
- const script = scripts[i];
5339
- if (script.src && !scriptsInserted().includes(script.src)) {
5340
- scriptsInserted().push(script.src);
5341
- const newScript = document.createElement("script");
5342
- newScript.async = true;
5343
- newScript.src = script.src;
5344
- document.head.appendChild(newScript);
5345
- } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
5346
- try {
5347
- scriptsRun().push(script.innerText);
5348
- new Function(script.innerText)();
5349
- } catch (error) {
5350
- console.warn("`Embed`: Error running script:", error);
5351
- }
5352
- }
5353
- }
5354
- }
5355
- let elem;
5356
- function onUpdateFn_0() {
5357
- if (elem && !ranInitFn()) {
5358
- setRanInitFn(true);
5359
- findAndRunScripts();
5360
- }
5361
- }
5362
- createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
5363
- return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
5364
- }
5365
- var embed_default = Embed;
5366
-
5367
5211
  // src/blocks/fragment/component-info.ts
5368
- var componentInfo5 = {
5212
+ var componentInfo3 = {
5369
5213
  name: "Fragment",
5370
5214
  static: true,
5371
5215
  hidden: true,
@@ -5374,7 +5218,7 @@ var componentInfo5 = {
5374
5218
  };
5375
5219
 
5376
5220
  // src/blocks/image/component-info.ts
5377
- var componentInfo6 = {
5221
+ var componentInfo4 = {
5378
5222
  name: "Image",
5379
5223
  static: true,
5380
5224
  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",
@@ -5496,41 +5340,8 @@ var componentInfo6 = {
5496
5340
  }]
5497
5341
  };
5498
5342
 
5499
- // src/blocks/img/component-info.ts
5500
- var componentInfo7 = {
5501
- // friendlyName?
5502
- name: "Raw:Img",
5503
- hideFromInsertMenu: true,
5504
- 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",
5505
- inputs: [{
5506
- name: "image",
5507
- bubble: true,
5508
- type: "file",
5509
- allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
5510
- required: true
5511
- }],
5512
- noWrap: true,
5513
- static: true
5514
- };
5515
-
5516
- // src/blocks/img/img.tsx
5517
- function ImgComponent(props) {
5518
- return <img
5519
- style={{
5520
- "object-fit": props.backgroundSize || "cover",
5521
- "object-position": props.backgroundPosition || "center"
5522
- }}
5523
- key={isEditing() && props.imgSrc || "default-key"}
5524
- alt={props.altText}
5525
- src={props.imgSrc || props.image}
5526
- {...{}}
5527
- {...props.attributes}
5528
- />;
5529
- }
5530
- var img_default = ImgComponent;
5531
-
5532
5343
  // src/blocks/section/component-info.ts
5533
- var componentInfo8 = {
5344
+ var componentInfo5 = {
5534
5345
  name: "Core:Section",
5535
5346
  static: true,
5536
5347
  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -5572,7 +5383,7 @@ var componentInfo8 = {
5572
5383
  };
5573
5384
 
5574
5385
  // src/blocks/slot/component-info.ts
5575
- var componentInfo9 = {
5386
+ var componentInfo6 = {
5576
5387
  name: "Slot",
5577
5388
  isRSC: true,
5578
5389
  description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -5606,7 +5417,7 @@ function Slot(props) {
5606
5417
  var slot_default = Slot;
5607
5418
 
5608
5419
  // src/blocks/symbol/component-info.ts
5609
- var componentInfo10 = {
5420
+ var componentInfo7 = {
5610
5421
  name: "Symbol",
5611
5422
  noWrap: true,
5612
5423
  static: true,
@@ -5642,7 +5453,7 @@ var componentInfo10 = {
5642
5453
  };
5643
5454
 
5644
5455
  // src/blocks/text/component-info.ts
5645
- var componentInfo11 = {
5456
+ var componentInfo8 = {
5646
5457
  name: "Text",
5647
5458
  static: true,
5648
5459
  isRSC: true,
@@ -5674,52 +5485,894 @@ function Text(props) {
5674
5485
  }
5675
5486
  var text_default = Text;
5676
5487
 
5677
- // src/blocks/video/component-info.ts
5678
- var componentInfo12 = {
5679
- name: "Video",
5680
- canHaveChildren: true,
5681
- defaultStyles: {
5682
- minHeight: "20px",
5683
- minWidth: "20px"
5684
- },
5685
- 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",
5488
+ // src/blocks/custom-code/component-info.ts
5489
+ var componentInfo9 = {
5490
+ name: "Custom Code",
5491
+ static: true,
5492
+ requiredPermissions: ["editCode"],
5686
5493
  inputs: [{
5687
- name: "video",
5688
- type: "file",
5689
- allowedFileTypes: ["mp4"],
5690
- bubble: true,
5691
- defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
5692
- required: true
5693
- }, {
5694
- name: "posterImage",
5695
- type: "file",
5696
- allowedFileTypes: ["jpeg", "png"],
5697
- helperText: "Image to show before the video plays"
5698
- }, {
5699
- name: "autoPlay",
5700
- type: "boolean",
5701
- defaultValue: true
5702
- }, {
5703
- name: "controls",
5704
- type: "boolean",
5705
- defaultValue: false
5706
- }, {
5707
- name: "muted",
5708
- type: "boolean",
5709
- defaultValue: true
5494
+ name: "code",
5495
+ type: "html",
5496
+ required: true,
5497
+ defaultValue: "<p>Hello there, I am custom HTML code!</p>",
5498
+ code: true
5710
5499
  }, {
5711
- name: "loop",
5500
+ name: "replaceNodes",
5712
5501
  type: "boolean",
5713
- defaultValue: true
5502
+ helperText: "Preserve server rendered dom nodes",
5503
+ advanced: true
5714
5504
  }, {
5715
- name: "playsInline",
5505
+ name: "scriptsClientOnly",
5716
5506
  type: "boolean",
5717
- defaultValue: true
5718
- }, {
5719
- name: "fit",
5720
- type: "text",
5721
- defaultValue: "cover",
5722
- enum: ["contain", "cover", "fill", "auto"]
5507
+ defaultValue: false,
5508
+ helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
5509
+ advanced: true
5510
+ }]
5511
+ };
5512
+
5513
+ // src/blocks/custom-code/custom-code.tsx
5514
+ import { onMount as onMount2, createSignal as createSignal7 } from "solid-js";
5515
+ function CustomCode(props) {
5516
+ const [scriptsInserted, setScriptsInserted] = createSignal7([]);
5517
+ const [scriptsRun, setScriptsRun] = createSignal7([]);
5518
+ let elementRef;
5519
+ onMount2(() => {
5520
+ if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
5521
+ return;
5522
+ }
5523
+ const scripts = elementRef.getElementsByTagName("script");
5524
+ for (let i = 0; i < scripts.length; i++) {
5525
+ const script = scripts[i];
5526
+ if (script.src) {
5527
+ if (scriptsInserted().includes(script.src)) {
5528
+ continue;
5529
+ }
5530
+ scriptsInserted().push(script.src);
5531
+ const newScript = document.createElement("script");
5532
+ newScript.async = true;
5533
+ newScript.src = script.src;
5534
+ document.head.appendChild(newScript);
5535
+ } else if (!script.type || [
5536
+ "text/javascript",
5537
+ "application/javascript",
5538
+ "application/ecmascript"
5539
+ ].includes(script.type)) {
5540
+ if (scriptsRun().includes(script.innerText)) {
5541
+ continue;
5542
+ }
5543
+ try {
5544
+ scriptsRun().push(script.innerText);
5545
+ new Function(script.innerText)();
5546
+ } catch (error) {
5547
+ console.warn("`CustomCode`: Error running script:", error);
5548
+ }
5549
+ }
5550
+ }
5551
+ });
5552
+ return <div
5553
+ class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
5554
+ ref={elementRef}
5555
+ innerHTML={props.code}
5556
+ />;
5557
+ }
5558
+ var custom_code_default = CustomCode;
5559
+
5560
+ // src/blocks/embed/component-info.ts
5561
+ var componentInfo10 = {
5562
+ name: "Embed",
5563
+ static: true,
5564
+ inputs: [{
5565
+ name: "url",
5566
+ type: "url",
5567
+ required: true,
5568
+ defaultValue: "",
5569
+ helperText: "e.g. enter a youtube url, google map, etc",
5570
+ onChange: (options) => {
5571
+ const url = options.get("url");
5572
+ if (url) {
5573
+ options.set("content", "Loading...");
5574
+ const apiKey = "ae0e60e78201a3f2b0de4b";
5575
+ return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
5576
+ if (options.get("url") === url) {
5577
+ if (data.html) {
5578
+ options.set("content", data.html);
5579
+ } else {
5580
+ options.set("content", "Invalid url, please try another");
5581
+ }
5582
+ }
5583
+ }).catch((_err) => {
5584
+ options.set("content", "There was an error embedding this URL, please try again or another URL");
5585
+ });
5586
+ } else {
5587
+ options.delete("content");
5588
+ }
5589
+ }
5590
+ }, {
5591
+ name: "content",
5592
+ type: "html",
5593
+ defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
5594
+ hideFromUI: true
5595
+ }]
5596
+ };
5597
+
5598
+ // src/blocks/embed/embed.tsx
5599
+ import { on, createEffect, createSignal as createSignal8 } from "solid-js";
5600
+
5601
+ // src/blocks/embed/helpers.ts
5602
+ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
5603
+ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
5604
+
5605
+ // src/blocks/embed/embed.tsx
5606
+ function Embed(props) {
5607
+ const [scriptsInserted, setScriptsInserted] = createSignal8([]);
5608
+ const [scriptsRun, setScriptsRun] = createSignal8([]);
5609
+ const [ranInitFn, setRanInitFn] = createSignal8(false);
5610
+ function findAndRunScripts() {
5611
+ if (!elem || !elem.getElementsByTagName)
5612
+ return;
5613
+ const scripts = elem.getElementsByTagName("script");
5614
+ for (let i = 0; i < scripts.length; i++) {
5615
+ const script = scripts[i];
5616
+ if (script.src && !scriptsInserted().includes(script.src)) {
5617
+ scriptsInserted().push(script.src);
5618
+ const newScript = document.createElement("script");
5619
+ newScript.async = true;
5620
+ newScript.src = script.src;
5621
+ document.head.appendChild(newScript);
5622
+ } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
5623
+ try {
5624
+ scriptsRun().push(script.innerText);
5625
+ new Function(script.innerText)();
5626
+ } catch (error) {
5627
+ console.warn("`Embed`: Error running script:", error);
5628
+ }
5629
+ }
5630
+ }
5631
+ }
5632
+ let elem;
5633
+ function onUpdateFn_0() {
5634
+ if (elem && !ranInitFn()) {
5635
+ setRanInitFn(true);
5636
+ findAndRunScripts();
5637
+ }
5638
+ }
5639
+ createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
5640
+ return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
5641
+ }
5642
+ var embed_default = Embed;
5643
+
5644
+ // src/blocks/form/form/component-info.ts
5645
+ var componentInfo11 = {
5646
+ name: "Form:Form",
5647
+ // editableTags: ['builder-form-error']
5648
+ defaults: {
5649
+ responsiveStyles: {
5650
+ large: {
5651
+ marginTop: "15px",
5652
+ paddingBottom: "15px"
5653
+ }
5654
+ }
5655
+ },
5656
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
5657
+ inputs: [{
5658
+ name: "sendSubmissionsTo",
5659
+ type: "string",
5660
+ // TODO: save to builder data and user can download as csv
5661
+ // TODO: easy for mode too or computed add/remove fields form mode
5662
+ // so you can edit details and high level mode at same time...
5663
+ // Later - more integrations like mailchimp
5664
+ // /api/v1/form-submit?to=mailchimp
5665
+ enum: [{
5666
+ label: "Send to email",
5667
+ value: "email",
5668
+ helperText: "Send form submissions to the email address of your choosing"
5669
+ }, {
5670
+ label: "Custom",
5671
+ value: "custom",
5672
+ helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
5673
+ }],
5674
+ defaultValue: "email"
5675
+ }, {
5676
+ name: "sendSubmissionsToEmail",
5677
+ type: "string",
5678
+ required: true,
5679
+ // TODO: required: () => options.get("sendSubmissionsTo") === "email"
5680
+ defaultValue: "your@email.com",
5681
+ showIf: 'options.get("sendSubmissionsTo") === "email"'
5682
+ }, {
5683
+ name: "sendWithJs",
5684
+ type: "boolean",
5685
+ helperText: "Set to false to use basic html form action",
5686
+ defaultValue: true,
5687
+ showIf: 'options.get("sendSubmissionsTo") === "custom"'
5688
+ }, {
5689
+ name: "name",
5690
+ type: "string",
5691
+ defaultValue: "My form"
5692
+ // advanced: true
5693
+ }, {
5694
+ name: "action",
5695
+ type: "string",
5696
+ helperText: "URL to send the form data to",
5697
+ showIf: 'options.get("sendSubmissionsTo") === "custom"'
5698
+ }, {
5699
+ name: "contentType",
5700
+ type: "string",
5701
+ defaultValue: "application/json",
5702
+ advanced: true,
5703
+ // TODO: do automatically if file input
5704
+ enum: ["application/json", "multipart/form-data", "application/x-www-form-urlencoded"],
5705
+ showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
5706
+ }, {
5707
+ name: "method",
5708
+ type: "string",
5709
+ showIf: 'options.get("sendSubmissionsTo") === "custom"',
5710
+ defaultValue: "POST",
5711
+ advanced: true
5712
+ }, {
5713
+ name: "previewState",
5714
+ type: "string",
5715
+ // TODO: persist: false flag
5716
+ enum: ["unsubmitted", "sending", "success", "error"],
5717
+ defaultValue: "unsubmitted",
5718
+ helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
5719
+ showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
5720
+ }, {
5721
+ name: "successUrl",
5722
+ type: "url",
5723
+ helperText: "Optional URL to redirect the user to on form submission success",
5724
+ showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
5725
+ }, {
5726
+ name: "resetFormOnSubmit",
5727
+ type: "boolean",
5728
+ showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
5729
+ advanced: true
5730
+ }, {
5731
+ name: "successMessage",
5732
+ type: "uiBlocks",
5733
+ hideFromUI: true,
5734
+ defaultValue: [{
5735
+ "@type": "@builder.io/sdk:Element",
5736
+ responsiveStyles: {
5737
+ large: {
5738
+ marginTop: "10px"
5739
+ }
5740
+ },
5741
+ component: {
5742
+ name: "Text",
5743
+ options: {
5744
+ text: "<span>Thanks!</span>"
5745
+ }
5746
+ }
5747
+ }]
5748
+ }, {
5749
+ name: "validate",
5750
+ type: "boolean",
5751
+ defaultValue: true,
5752
+ advanced: true
5753
+ }, {
5754
+ name: "errorMessagePath",
5755
+ type: "text",
5756
+ advanced: true,
5757
+ 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" }}'
5758
+ }, {
5759
+ name: "errorMessage",
5760
+ type: "uiBlocks",
5761
+ hideFromUI: true,
5762
+ defaultValue: [{
5763
+ "@type": "@builder.io/sdk:Element",
5764
+ responsiveStyles: {
5765
+ large: {
5766
+ marginTop: "10px"
5767
+ }
5768
+ },
5769
+ bindings: {
5770
+ "component.options.text": "state.formErrorMessage || block.component.options.text"
5771
+ },
5772
+ component: {
5773
+ name: "Text",
5774
+ options: {
5775
+ text: "<span>Form submission error :( Please check your answers and try again</span>"
5776
+ }
5777
+ }
5778
+ }]
5779
+ }, {
5780
+ name: "sendingMessage",
5781
+ type: "uiBlocks",
5782
+ hideFromUI: true,
5783
+ defaultValue: [{
5784
+ "@type": "@builder.io/sdk:Element",
5785
+ responsiveStyles: {
5786
+ large: {
5787
+ marginTop: "10px"
5788
+ }
5789
+ },
5790
+ component: {
5791
+ name: "Text",
5792
+ options: {
5793
+ text: "<span>Sending...</span>"
5794
+ }
5795
+ }
5796
+ }]
5797
+ }, {
5798
+ name: "customHeaders",
5799
+ type: "map",
5800
+ valueType: {
5801
+ type: "string"
5802
+ },
5803
+ advanced: true,
5804
+ showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
5805
+ }],
5806
+ noWrap: true,
5807
+ canHaveChildren: true,
5808
+ defaultChildren: [{
5809
+ "@type": "@builder.io/sdk:Element",
5810
+ responsiveStyles: {
5811
+ large: {
5812
+ marginTop: "10px"
5813
+ }
5814
+ },
5815
+ component: {
5816
+ name: "Text",
5817
+ options: {
5818
+ text: "<span>Enter your name</span>"
5819
+ }
5820
+ }
5821
+ }, {
5822
+ "@type": "@builder.io/sdk:Element",
5823
+ responsiveStyles: {
5824
+ large: {
5825
+ marginTop: "10px"
5826
+ }
5827
+ },
5828
+ component: {
5829
+ name: "Form:Input",
5830
+ options: {
5831
+ name: "name",
5832
+ placeholder: "Jane Doe"
5833
+ }
5834
+ }
5835
+ }, {
5836
+ "@type": "@builder.io/sdk:Element",
5837
+ responsiveStyles: {
5838
+ large: {
5839
+ marginTop: "10px"
5840
+ }
5841
+ },
5842
+ component: {
5843
+ name: "Text",
5844
+ options: {
5845
+ text: "<span>Enter your email</span>"
5846
+ }
5847
+ }
5848
+ }, {
5849
+ "@type": "@builder.io/sdk:Element",
5850
+ responsiveStyles: {
5851
+ large: {
5852
+ marginTop: "10px"
5853
+ }
5854
+ },
5855
+ component: {
5856
+ name: "Form:Input",
5857
+ options: {
5858
+ name: "email",
5859
+ placeholder: "jane@doe.com"
5860
+ }
5861
+ }
5862
+ }, {
5863
+ "@type": "@builder.io/sdk:Element",
5864
+ responsiveStyles: {
5865
+ large: {
5866
+ marginTop: "10px"
5867
+ }
5868
+ },
5869
+ component: {
5870
+ name: "Form:SubmitButton",
5871
+ options: {
5872
+ text: "Submit"
5873
+ }
5874
+ }
5875
+ }]
5876
+ };
5877
+
5878
+ // src/blocks/form/form/form.tsx
5879
+ import { Show as Show8, For as For5, createSignal as createSignal9 } from "solid-js";
5880
+ import { css as css4 } from "solid-styled-components";
5881
+
5882
+ // src/functions/get-env.ts
5883
+ var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
5884
+ var getEnv = () => {
5885
+ const env = "development";
5886
+ return validEnvList.includes(env) ? env : "production";
5887
+ };
5888
+
5889
+ // src/functions/get.ts
5890
+ var get = (obj, path, defaultValue) => {
5891
+ const result = String.prototype.split.call(path, /[,[\].]+?/).filter(Boolean).reduce((res, key) => res !== null && res !== void 0 ? res[key] : res, obj);
5892
+ return result === void 0 || result === obj ? defaultValue : result;
5893
+ };
5894
+
5895
+ // src/blocks/form/form/form.tsx
5896
+ function FormComponent(props) {
5897
+ const [formState, setFormState] = createSignal9("unsubmitted");
5898
+ const [responseData, setResponseData] = createSignal9(null);
5899
+ const [formErrorMessage, setFormErrorMessage] = createSignal9("");
5900
+ function mergeNewRootState(newData) {
5901
+ const combinedState = {
5902
+ ...props.builderContext.rootState,
5903
+ ...newData
5904
+ };
5905
+ if (props.builderContext.rootSetState) {
5906
+ props.builderContext.rootSetState?.(combinedState);
5907
+ } else {
5908
+ props.builderContext.rootState = combinedState;
5909
+ }
5910
+ }
5911
+ function submissionState() {
5912
+ return isEditing() && props.previewState || formState();
5913
+ }
5914
+ function onSubmit(event) {
5915
+ const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
5916
+ if (props.sendSubmissionsTo === "zapier") {
5917
+ event.preventDefault();
5918
+ } else if (sendWithJsProp) {
5919
+ if (!(props.action || props.sendSubmissionsTo === "email")) {
5920
+ event.preventDefault();
5921
+ return;
5922
+ }
5923
+ event.preventDefault();
5924
+ const el = event.currentTarget;
5925
+ const headers = props.customHeaders || {};
5926
+ let body;
5927
+ const formData = new FormData(el);
5928
+ const formPairs = Array.from(
5929
+ event.currentTarget.querySelectorAll("input,select,textarea")
5930
+ ).filter((el2) => !!el2.name).map((el2) => {
5931
+ let value;
5932
+ const key = el2.name;
5933
+ if (el2 instanceof HTMLInputElement) {
5934
+ if (el2.type === "radio") {
5935
+ if (el2.checked) {
5936
+ value = el2.name;
5937
+ return {
5938
+ key,
5939
+ value
5940
+ };
5941
+ }
5942
+ } else if (el2.type === "checkbox") {
5943
+ value = el2.checked;
5944
+ } else if (el2.type === "number" || el2.type === "range") {
5945
+ const num = el2.valueAsNumber;
5946
+ if (!isNaN(num)) {
5947
+ value = num;
5948
+ }
5949
+ } else if (el2.type === "file") {
5950
+ value = el2.files;
5951
+ } else {
5952
+ value = el2.value;
5953
+ }
5954
+ } else {
5955
+ value = el2.value;
5956
+ }
5957
+ return {
5958
+ key,
5959
+ value
5960
+ };
5961
+ });
5962
+ let formContentType = props.contentType;
5963
+ if (props.sendSubmissionsTo === "email") {
5964
+ formContentType = "multipart/form-data";
5965
+ }
5966
+ Array.from(formPairs).forEach(({ value }) => {
5967
+ if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
5968
+ formContentType = "multipart/form-data";
5969
+ }
5970
+ });
5971
+ if (formContentType !== "application/json") {
5972
+ body = formData;
5973
+ } else {
5974
+ const json = {};
5975
+ Array.from(formPairs).forEach(({ value, key }) => {
5976
+ set(json, key, value);
5977
+ });
5978
+ body = JSON.stringify(json);
5979
+ }
5980
+ if (formContentType && formContentType !== "multipart/form-data") {
5981
+ if (
5982
+ /* Zapier doesn't allow content-type header to be sent from browsers */
5983
+ !(sendWithJsProp && props.action?.includes("zapier.com"))
5984
+ ) {
5985
+ headers["content-type"] = formContentType;
5986
+ }
5987
+ }
5988
+ const presubmitEvent = new CustomEvent("presubmit", {
5989
+ detail: {
5990
+ body
5991
+ }
5992
+ });
5993
+ if (formRef) {
5994
+ formRef.dispatchEvent(presubmitEvent);
5995
+ if (presubmitEvent.defaultPrevented) {
5996
+ return;
5997
+ }
5998
+ }
5999
+ setFormState("sending");
6000
+ const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(
6001
+ props.sendSubmissionsToEmail || ""
6002
+ )}&name=${encodeURIComponent(props.name || "")}`;
6003
+ fetch(
6004
+ props.sendSubmissionsTo === "email" ? formUrl : props.action,
6005
+ {
6006
+ body,
6007
+ headers,
6008
+ method: props.method || "post"
6009
+ }
6010
+ ).then(
6011
+ async (res) => {
6012
+ let body2;
6013
+ const contentType = res.headers.get("content-type");
6014
+ if (contentType && contentType.indexOf("application/json") !== -1) {
6015
+ body2 = await res.json();
6016
+ } else {
6017
+ body2 = await res.text();
6018
+ }
6019
+ if (!res.ok && props.errorMessagePath) {
6020
+ let message = get(body2, props.errorMessagePath);
6021
+ if (message) {
6022
+ if (typeof message !== "string") {
6023
+ message = JSON.stringify(message);
6024
+ }
6025
+ setFormErrorMessage(message);
6026
+ mergeNewRootState({
6027
+ formErrorMessage: message
6028
+ });
6029
+ }
6030
+ }
6031
+ setResponseData(body2);
6032
+ setFormState(res.ok ? "success" : "error");
6033
+ if (res.ok) {
6034
+ const submitSuccessEvent = new CustomEvent("submit:success", {
6035
+ detail: {
6036
+ res,
6037
+ body: body2
6038
+ }
6039
+ });
6040
+ if (formRef) {
6041
+ formRef.dispatchEvent(submitSuccessEvent);
6042
+ if (submitSuccessEvent.defaultPrevented) {
6043
+ return;
6044
+ }
6045
+ if (props.resetFormOnSubmit !== false) {
6046
+ formRef.reset();
6047
+ }
6048
+ }
6049
+ if (props.successUrl) {
6050
+ if (formRef) {
6051
+ const event2 = new CustomEvent("route", {
6052
+ detail: {
6053
+ url: props.successUrl
6054
+ }
6055
+ });
6056
+ formRef.dispatchEvent(event2);
6057
+ if (!event2.defaultPrevented) {
6058
+ location.href = props.successUrl;
6059
+ }
6060
+ } else {
6061
+ location.href = props.successUrl;
6062
+ }
6063
+ }
6064
+ }
6065
+ },
6066
+ (err) => {
6067
+ const submitErrorEvent = new CustomEvent("submit:error", {
6068
+ detail: {
6069
+ error: err
6070
+ }
6071
+ });
6072
+ if (formRef) {
6073
+ formRef.dispatchEvent(submitErrorEvent);
6074
+ if (submitErrorEvent.defaultPrevented) {
6075
+ return;
6076
+ }
6077
+ }
6078
+ setResponseData(err);
6079
+ setFormState("error");
6080
+ }
6081
+ );
6082
+ }
6083
+ }
6084
+ let formRef;
6085
+ return <form
6086
+ validate={props.validate}
6087
+ ref={formRef}
6088
+ action={!props.sendWithJs && props.action}
6089
+ method={props.method}
6090
+ name={props.name}
6091
+ onSubmit={(event) => onSubmit(event)}
6092
+ {...{}}
6093
+ {...props.attributes}
6094
+ >
6095
+ <Show8 when={props.builderBlock && props.builderBlock.children}><For5 each={props.builderBlock?.children}>{(block, _index) => {
6096
+ const idx = _index();
6097
+ return <Block_default
6098
+ key={`form-block-${idx}`}
6099
+ block={block}
6100
+ context={props.builderContext}
6101
+ registeredComponents={props.builderComponents}
6102
+ linkComponent={props.builderLinkComponent}
6103
+ />;
6104
+ }}</For5></Show8>
6105
+ <Show8 when={submissionState() === "error"}><Blocks_default
6106
+ path="errorMessage"
6107
+ blocks={props.errorMessage}
6108
+ context={props.builderContext}
6109
+ /></Show8>
6110
+ <Show8 when={submissionState() === "sending"}><Blocks_default
6111
+ path="sendingMessage"
6112
+ blocks={props.sendingMessage}
6113
+ context={props.builderContext}
6114
+ /></Show8>
6115
+ <Show8 when={submissionState() === "error" && responseData()}><pre
6116
+ class={"builder-form-error-text " + css4({
6117
+ padding: "10px",
6118
+ color: "red",
6119
+ textAlign: "center"
6120
+ })}
6121
+ >{JSON.stringify(responseData(), null, 2)}</pre></Show8>
6122
+ <Show8 when={submissionState() === "success"}><Blocks_default
6123
+ path="successMessage"
6124
+ blocks={props.successMessage}
6125
+ context={props.builderContext}
6126
+ /></Show8>
6127
+ </form>;
6128
+ }
6129
+ var form_default = FormComponent;
6130
+
6131
+ // src/blocks/form/input/component-info.ts
6132
+ var componentInfo12 = {
6133
+ name: "Form:Input",
6134
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
6135
+ inputs: [
6136
+ {
6137
+ name: "type",
6138
+ type: "text",
6139
+ enum: ["text", "number", "email", "url", "checkbox", "radio", "range", "date", "datetime-local", "search", "tel", "time", "file", "month", "week", "password", "color", "hidden"],
6140
+ defaultValue: "text"
6141
+ },
6142
+ {
6143
+ name: "name",
6144
+ type: "string",
6145
+ required: true,
6146
+ helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
6147
+ },
6148
+ {
6149
+ name: "placeholder",
6150
+ type: "string",
6151
+ defaultValue: "Hello there",
6152
+ helperText: "Text to display when there is no value"
6153
+ },
6154
+ // TODO: handle value vs default value automatically like ng-model
6155
+ {
6156
+ name: "defaultValue",
6157
+ type: "string"
6158
+ },
6159
+ {
6160
+ name: "value",
6161
+ type: "string",
6162
+ advanced: true
6163
+ },
6164
+ {
6165
+ name: "required",
6166
+ type: "boolean",
6167
+ helperText: "Is this input required to be filled out to submit a form",
6168
+ defaultValue: false
6169
+ }
6170
+ ],
6171
+ noWrap: true,
6172
+ static: true,
6173
+ defaultStyles: {
6174
+ paddingTop: "10px",
6175
+ paddingBottom: "10px",
6176
+ paddingLeft: "10px",
6177
+ paddingRight: "10px",
6178
+ borderRadius: "3px",
6179
+ borderWidth: "1px",
6180
+ borderStyle: "solid",
6181
+ borderColor: "#ccc"
6182
+ }
6183
+ };
6184
+
6185
+ // src/blocks/form/input/input.tsx
6186
+ function FormInputComponent(props) {
6187
+ return <input
6188
+ {...{}}
6189
+ {...props.attributes}
6190
+ key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
6191
+ placeholder={props.placeholder}
6192
+ type={props.type}
6193
+ name={props.name}
6194
+ value={props.value}
6195
+ defaultValue={props.defaultValue}
6196
+ required={props.required}
6197
+ />;
6198
+ }
6199
+ var input_default = FormInputComponent;
6200
+
6201
+ // src/blocks/form/select/component-info.ts
6202
+ var componentInfo13 = {
6203
+ name: "Form:Select",
6204
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
6205
+ defaultStyles: {
6206
+ alignSelf: "flex-start"
6207
+ },
6208
+ inputs: [{
6209
+ name: "options",
6210
+ type: "list",
6211
+ required: true,
6212
+ subFields: [{
6213
+ name: "value",
6214
+ type: "text",
6215
+ required: true
6216
+ }, {
6217
+ name: "name",
6218
+ type: "text"
6219
+ }],
6220
+ defaultValue: [{
6221
+ value: "option 1"
6222
+ }, {
6223
+ value: "option 2"
6224
+ }]
6225
+ }, {
6226
+ name: "name",
6227
+ type: "string",
6228
+ required: true,
6229
+ helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
6230
+ }, {
6231
+ name: "defaultValue",
6232
+ type: "string"
6233
+ }, {
6234
+ name: "value",
6235
+ type: "string",
6236
+ advanced: true
6237
+ }, {
6238
+ name: "required",
6239
+ type: "boolean",
6240
+ defaultValue: false
6241
+ }],
6242
+ static: true,
6243
+ noWrap: true
6244
+ };
6245
+
6246
+ // src/blocks/form/select/select.tsx
6247
+ import { For as For6 } from "solid-js";
6248
+ function SelectComponent(props) {
6249
+ return <select
6250
+ {...{}}
6251
+ {...props.attributes}
6252
+ value={props.value}
6253
+ key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
6254
+ defaultValue={props.defaultValue}
6255
+ name={props.name}
6256
+ ><For6 each={props.options}>{(option, _index) => {
6257
+ const index = _index();
6258
+ return <option value={option.value}>{option.name || option.value}</option>;
6259
+ }}</For6></select>;
6260
+ }
6261
+ var select_default = SelectComponent;
6262
+
6263
+ // src/blocks/form/submit-button/component-info.ts
6264
+ var componentInfo14 = {
6265
+ name: "Form:SubmitButton",
6266
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
6267
+ defaultStyles: {
6268
+ appearance: "none",
6269
+ paddingTop: "15px",
6270
+ paddingBottom: "15px",
6271
+ paddingLeft: "25px",
6272
+ paddingRight: "25px",
6273
+ backgroundColor: "#3898EC",
6274
+ color: "white",
6275
+ borderRadius: "4px",
6276
+ cursor: "pointer"
6277
+ },
6278
+ inputs: [{
6279
+ name: "text",
6280
+ type: "text",
6281
+ defaultValue: "Click me"
6282
+ }],
6283
+ static: true,
6284
+ noWrap: true
6285
+ // TODO: optional children? maybe as optional form input
6286
+ // that only shows if advanced setting is flipped
6287
+ // TODO: defaultChildren
6288
+ // canHaveChildren: true,
6289
+ };
6290
+
6291
+ // src/blocks/form/submit-button/submit-button.tsx
6292
+ function SubmitButton(props) {
6293
+ return <button type="submit" {...{}} {...props.attributes}>{props.text}</button>;
6294
+ }
6295
+ var submit_button_default = SubmitButton;
6296
+
6297
+ // src/blocks/img/component-info.ts
6298
+ var componentInfo15 = {
6299
+ // friendlyName?
6300
+ name: "Raw:Img",
6301
+ hideFromInsertMenu: true,
6302
+ 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",
6303
+ inputs: [{
6304
+ name: "image",
6305
+ bubble: true,
6306
+ type: "file",
6307
+ allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
6308
+ required: true
6309
+ }],
6310
+ noWrap: true,
6311
+ static: true
6312
+ };
6313
+
6314
+ // src/blocks/img/img.tsx
6315
+ function ImgComponent(props) {
6316
+ return <img
6317
+ style={{
6318
+ "object-fit": props.backgroundSize || "cover",
6319
+ "object-position": props.backgroundPosition || "center"
6320
+ }}
6321
+ key={isEditing() && props.imgSrc || "default-key"}
6322
+ alt={props.altText}
6323
+ src={props.imgSrc || props.image}
6324
+ {...{}}
6325
+ {...props.attributes}
6326
+ />;
6327
+ }
6328
+ var img_default = ImgComponent;
6329
+
6330
+ // src/blocks/video/component-info.ts
6331
+ var componentInfo16 = {
6332
+ name: "Video",
6333
+ canHaveChildren: true,
6334
+ defaultStyles: {
6335
+ minHeight: "20px",
6336
+ minWidth: "20px"
6337
+ },
6338
+ 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",
6339
+ inputs: [{
6340
+ name: "video",
6341
+ type: "file",
6342
+ allowedFileTypes: ["mp4"],
6343
+ bubble: true,
6344
+ defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
6345
+ required: true
6346
+ }, {
6347
+ name: "posterImage",
6348
+ type: "file",
6349
+ allowedFileTypes: ["jpeg", "png"],
6350
+ helperText: "Image to show before the video plays"
6351
+ }, {
6352
+ name: "autoPlay",
6353
+ type: "boolean",
6354
+ defaultValue: true
6355
+ }, {
6356
+ name: "controls",
6357
+ type: "boolean",
6358
+ defaultValue: false
6359
+ }, {
6360
+ name: "muted",
6361
+ type: "boolean",
6362
+ defaultValue: true
6363
+ }, {
6364
+ name: "loop",
6365
+ type: "boolean",
6366
+ defaultValue: true
6367
+ }, {
6368
+ name: "playsInline",
6369
+ type: "boolean",
6370
+ defaultValue: true
6371
+ }, {
6372
+ name: "fit",
6373
+ type: "text",
6374
+ defaultValue: "cover",
6375
+ enum: ["contain", "cover", "fill", "auto"]
5723
6376
  }, {
5724
6377
  name: "preload",
5725
6378
  type: "text",
@@ -5759,7 +6412,7 @@ var componentInfo12 = {
5759
6412
  };
5760
6413
 
5761
6414
  // src/blocks/video/video.tsx
5762
- import { Show as Show8 } from "solid-js";
6415
+ import { Show as Show9 } from "solid-js";
5763
6416
  function Video(props) {
5764
6417
  function videoProps() {
5765
6418
  return {
@@ -5810,8 +6463,8 @@ function Video(props) {
5810
6463
  }}
5811
6464
  src={props.video || "no-src"}
5812
6465
  poster={props.posterImage}
5813
- ><Show8 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show8></video>
5814
- <Show8
6466
+ ><Show9 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show9></video>
6467
+ <Show9
5815
6468
  when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
5816
6469
  ><div
5817
6470
  style={{
@@ -5820,15 +6473,15 @@ function Video(props) {
5820
6473
  "pointer-events": "none",
5821
6474
  "font-size": "0px"
5822
6475
  }}
5823
- /></Show8>
5824
- <Show8 when={props.builderBlock?.children?.length && props.fitContent}><div
6476
+ /></Show9>
6477
+ <Show9 when={props.builderBlock?.children?.length && props.fitContent}><div
5825
6478
  style={{
5826
6479
  display: "flex",
5827
6480
  "flex-direction": "column",
5828
6481
  "align-items": "stretch"
5829
6482
  }}
5830
- >{props.children}</div></Show8>
5831
- <Show8 when={props.builderBlock?.children?.length && !props.fitContent}><div
6483
+ >{props.children}</div></Show9>
6484
+ <Show9 when={props.builderBlock?.children?.length && !props.fitContent}><div
5832
6485
  style={{
5833
6486
  "pointer-events": "none",
5834
6487
  display: "flex",
@@ -5840,11 +6493,38 @@ function Video(props) {
5840
6493
  width: "100%",
5841
6494
  height: "100%"
5842
6495
  }}
5843
- >{props.children}</div></Show8>
6496
+ >{props.children}</div></Show9>
5844
6497
  </div>;
5845
6498
  }
5846
6499
  var video_default = Video;
5847
6500
 
6501
+ // src/constants/extra-components.ts
6502
+ var getExtraComponents = () => [{
6503
+ component: custom_code_default,
6504
+ ...componentInfo9
6505
+ }, {
6506
+ component: embed_default,
6507
+ ...componentInfo10
6508
+ }, ...TARGET === "rsc" ? [] : [{
6509
+ component: form_default,
6510
+ ...componentInfo11
6511
+ }, {
6512
+ component: input_default,
6513
+ ...componentInfo12
6514
+ }, {
6515
+ component: submit_button_default,
6516
+ ...componentInfo14
6517
+ }, {
6518
+ component: select_default,
6519
+ ...componentInfo13
6520
+ }], {
6521
+ component: img_default,
6522
+ ...componentInfo15
6523
+ }, {
6524
+ component: video_default,
6525
+ ...componentInfo16
6526
+ }];
6527
+
5848
6528
  // src/constants/builder-registered-components.ts
5849
6529
  var getDefaultRegisteredComponents = () => [{
5850
6530
  component: button_default,
@@ -5853,36 +6533,24 @@ var getDefaultRegisteredComponents = () => [{
5853
6533
  component: columns_default,
5854
6534
  ...componentInfo2
5855
6535
  }, {
5856
- component: custom_code_default,
6536
+ component: fragment_default,
5857
6537
  ...componentInfo3
5858
6538
  }, {
5859
- component: embed_default,
6539
+ component: image_default,
5860
6540
  ...componentInfo4
5861
6541
  }, {
5862
- component: fragment_default,
6542
+ component: section_default,
5863
6543
  ...componentInfo5
5864
6544
  }, {
5865
- component: image_default,
6545
+ component: slot_default,
5866
6546
  ...componentInfo6
5867
- }, {
5868
- component: img_default,
5869
- ...componentInfo7
5870
- }, {
5871
- component: section_default,
5872
- ...componentInfo8
5873
6547
  }, {
5874
6548
  component: symbol_default,
5875
- ...componentInfo10
6549
+ ...componentInfo7
5876
6550
  }, {
5877
6551
  component: text_default,
5878
- ...componentInfo11
5879
- }, {
5880
- component: video_default,
5881
- ...componentInfo12
5882
- }, {
5883
- component: slot_default,
5884
- ...componentInfo9
5885
- }];
6552
+ ...componentInfo8
6553
+ }, ...getExtraComponents()];
5886
6554
 
5887
6555
  // src/functions/register-component.ts
5888
6556
  var components = [];
@@ -5960,7 +6628,7 @@ function InlinedScript(props) {
5960
6628
  var Inlined_script_default = InlinedScript;
5961
6629
 
5962
6630
  // src/components/content/components/enable-editor.tsx
5963
- import { Show as Show9, onMount as onMount3, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
6631
+ import { Show as Show10, onMount as onMount3, on as on2, createEffect as createEffect2, createSignal as createSignal11 } from "solid-js";
5964
6632
  import { Dynamic as Dynamic5 } from "solid-js/web";
5965
6633
 
5966
6634
  // src/helpers/preview-lru-cache/get.ts
@@ -6455,7 +7123,7 @@ function isFromTrustedHost(trustedHosts, e) {
6455
7123
  }
6456
7124
 
6457
7125
  // src/constants/sdk-version.ts
6458
- var SDK_VERSION = "0.13.1";
7126
+ var SDK_VERSION = "0.13.3";
6459
7127
 
6460
7128
  // src/functions/register.ts
6461
7129
  var registry = {};
@@ -6654,15 +7322,15 @@ var subscribeToEditor = (model, callback, options) => {
6654
7322
 
6655
7323
  // src/components/content/components/enable-editor.tsx
6656
7324
  function EnableEditor(props) {
6657
- const [forceReRenderCount, setForceReRenderCount] = createSignal10(0);
6658
- const [firstRender, setFirstRender] = createSignal10(true);
6659
- const [lastUpdated, setLastUpdated] = createSignal10(0);
6660
- const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal10(false);
6661
- const [ContentWrapper, setContentWrapper] = createSignal10(
7325
+ const [forceReRenderCount, setForceReRenderCount] = createSignal11(0);
7326
+ const [firstRender, setFirstRender] = createSignal11(true);
7327
+ const [lastUpdated, setLastUpdated] = createSignal11(0);
7328
+ const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal11(false);
7329
+ const [ContentWrapper, setContentWrapper] = createSignal11(
6662
7330
  props.contentWrapper || "div"
6663
7331
  );
6664
- const [httpReqsData, setHttpReqsData] = createSignal10({});
6665
- const [clicked, setClicked] = createSignal10(false);
7332
+ const [httpReqsData, setHttpReqsData] = createSignal11({});
7333
+ const [clicked, setClicked] = createSignal11(false);
6666
7334
  function mergeNewRootState(newData) {
6667
7335
  const combinedState = {
6668
7336
  ...props.builderContextSignal.rootState,
@@ -6926,7 +7594,7 @@ function EnableEditor(props) {
6926
7594
  }
6927
7595
  }
6928
7596
  createEffect2(on2(() => [props.locale], onUpdateFn_6));
6929
- return <builder_context_default.Provider value={props.builderContextSignal}><Show9 when={props.builderContextSignal.content}><Dynamic5
7597
+ return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
6930
7598
  class={`variant-${props.content?.testVariationId || props.content?.id}`}
6931
7599
  {...{}}
6932
7600
  key={forceReRenderCount()}
@@ -6941,12 +7609,12 @@ function EnableEditor(props) {
6941
7609
  }}
6942
7610
  {...props.contentWrapperProps}
6943
7611
  component={ContentWrapper()}
6944
- >{props.children}</Dynamic5></Show9></builder_context_default.Provider>;
7612
+ >{props.children}</Dynamic5></Show10></builder_context_default.Provider>;
6945
7613
  }
6946
7614
  var Enable_editor_default = EnableEditor;
6947
7615
 
6948
7616
  // src/components/content/components/styles.tsx
6949
- import { createSignal as createSignal11 } from "solid-js";
7617
+ import { createSignal as createSignal12 } from "solid-js";
6950
7618
 
6951
7619
  // src/components/content/components/styles.helpers.ts
6952
7620
  var getCssFromFont = (font) => {
@@ -7005,7 +7673,7 @@ var getCss = ({
7005
7673
 
7006
7674
  // src/components/content/components/styles.tsx
7007
7675
  function ContentStyles(props) {
7008
- const [injectedStyles, setInjectedStyles] = createSignal11(
7676
+ const [injectedStyles, setInjectedStyles] = createSignal12(
7009
7677
  `
7010
7678
  ${getCss({
7011
7679
  cssCode: props.cssCode,
@@ -7075,7 +7743,7 @@ var getContentInitialValue = ({
7075
7743
 
7076
7744
  // src/components/content/content.tsx
7077
7745
  function ContentComponent(props) {
7078
- const [scriptStr, setScriptStr] = createSignal12(
7746
+ const [scriptStr, setScriptStr] = createSignal13(
7079
7747
  getUpdateVariantVisibilityScript({
7080
7748
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
7081
7749
  variationId: props.content?.testVariationId,
@@ -7083,7 +7751,7 @@ function ContentComponent(props) {
7083
7751
  contentId: props.content?.id
7084
7752
  })
7085
7753
  );
7086
- const [registeredComponents, setRegisteredComponents] = createSignal12(
7754
+ const [registeredComponents, setRegisteredComponents] = createSignal13(
7087
7755
  [
7088
7756
  ...getDefaultRegisteredComponents(),
7089
7757
  // While this `components` object is deprecated, we must maintain support for it.
@@ -7104,7 +7772,7 @@ function ContentComponent(props) {
7104
7772
  {}
7105
7773
  )
7106
7774
  );
7107
- const [builderContextSignal, setBuilderContextSignal] = createSignal12({
7775
+ const [builderContextSignal, setBuilderContextSignal] = createSignal13({
7108
7776
  content: getContentInitialValue({
7109
7777
  content: props.content,
7110
7778
  data: props.data
@@ -7169,12 +7837,12 @@ function ContentComponent(props) {
7169
7837
  setBuilderContextSignal
7170
7838
  }}
7171
7839
  >
7172
- <Show10 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show10>
7173
- <Show10 when={TARGET !== "reactNative"}><Styles_default
7840
+ <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
7841
+ <Show11 when={TARGET !== "reactNative"}><Styles_default
7174
7842
  contentId={builderContextSignal().content?.id}
7175
7843
  cssCode={builderContextSignal().content?.data?.cssCode}
7176
7844
  customFonts={builderContextSignal().content?.data?.customFonts}
7177
- /></Show10>
7845
+ /></Show11>
7178
7846
  <Blocks_default
7179
7847
  blocks={builderContextSignal().content?.data?.blocks}
7180
7848
  context={builderContextSignal()}
@@ -7187,7 +7855,7 @@ var Content_default = ContentComponent;
7187
7855
 
7188
7856
  // src/components/content-variants/content-variants.tsx
7189
7857
  function ContentVariants(props) {
7190
- const [shouldRenderVariants, setShouldRenderVariants] = createSignal13(
7858
+ const [shouldRenderVariants, setShouldRenderVariants] = createSignal14(
7191
7859
  checkShouldRenderVariants({
7192
7860
  canTrack: getDefaultCanTrack(props.canTrack),
7193
7861
  content: props.content
@@ -7218,8 +7886,8 @@ function ContentVariants(props) {
7218
7886
  setShouldRenderVariants(false);
7219
7887
  });
7220
7888
  return <>
7221
- <Show11 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show11>
7222
- <Show11 when={shouldRenderVariants()}>
7889
+ <Show12 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
7890
+ <Show12 when={shouldRenderVariants()}>
7223
7891
  <Inlined_styles_default
7224
7892
  id={`variants-styles-${props.content?.id}`}
7225
7893
  styles={hideVariantsStyleString()}
@@ -7227,7 +7895,7 @@ function ContentVariants(props) {
7227
7895
  <Inlined_script_default
7228
7896
  scriptStr={updateCookieAndStylesScriptStr()}
7229
7897
  />
7230
- <For5 each={getVariants(props.content)}>{(variant, _index) => {
7898
+ <For7 each={getVariants(props.content)}>{(variant, _index) => {
7231
7899
  const index = _index();
7232
7900
  return <Content_default
7233
7901
  key={variant.testVariationId}
@@ -7251,8 +7919,8 @@ function ContentVariants(props) {
7251
7919
  contentWrapperProps={props.contentWrapperProps}
7252
7920
  trustedHosts={props.trustedHosts}
7253
7921
  />;
7254
- }}</For5>
7255
- </Show11>
7922
+ }}</For7>
7923
+ </Show12>
7256
7924
  <Content_default
7257
7925
  {...{}}
7258
7926
  content={defaultContent()}
@@ -7305,7 +7973,7 @@ var fetchSymbolContent = async ({
7305
7973
 
7306
7974
  // src/blocks/symbol/symbol.tsx
7307
7975
  function Symbol2(props) {
7308
- const [contentToUse, setContentToUse] = createSignal14(props.symbol?.content);
7976
+ const [contentToUse, setContentToUse] = createSignal15(props.symbol?.content);
7309
7977
  function className() {
7310
7978
  return [
7311
7979
  ...[props.attributes[getClassPropName()]],