@builder.io/sdk-qwik 0.14.22 → 0.14.24

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.
@@ -5316,1252 +5316,1252 @@ const handleABTesting = async ({ item, canTrack }) => {
5316
5316
  };
5317
5317
  };
5318
5318
  const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
5319
- const componentInfo$h = {
5320
- name: "Core:Button",
5321
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
5322
- defaultStyles: {
5323
- // TODO: make min width more intuitive and set one
5324
- appearance: "none",
5325
- paddingTop: "15px",
5326
- paddingBottom: "15px",
5327
- paddingLeft: "25px",
5328
- paddingRight: "25px",
5329
- backgroundColor: "#000000",
5330
- color: "white",
5331
- borderRadius: "4px",
5332
- textAlign: "center",
5333
- cursor: "pointer"
5319
+ const defaultTitle = {
5320
+ "@type": "@builder.io/sdk:Element",
5321
+ layerName: "Accordion item title",
5322
+ responsiveStyles: {
5323
+ large: {
5324
+ marginTop: "10px",
5325
+ position: "relative",
5326
+ display: "flex",
5327
+ alignItems: "stretch",
5328
+ flexDirection: "column",
5329
+ paddingBottom: "10px"
5330
+ }
5334
5331
  },
5335
- inputs: [
5336
- {
5337
- name: "text",
5338
- type: "text",
5339
- defaultValue: "Click me!",
5340
- bubble: true
5341
- },
5332
+ children: [
5342
5333
  {
5343
- name: "link",
5344
- type: "url",
5345
- bubble: true
5346
- },
5334
+ "@type": "@builder.io/sdk:Element",
5335
+ responsiveStyles: {
5336
+ large: {
5337
+ textAlign: "left",
5338
+ display: "flex",
5339
+ flexDirection: "column"
5340
+ }
5341
+ },
5342
+ component: {
5343
+ name: "Text",
5344
+ options: {
5345
+ text: "I am an accordion title. Click me!"
5346
+ }
5347
+ }
5348
+ }
5349
+ ]
5350
+ };
5351
+ const defaultDetail = {
5352
+ "@type": "@builder.io/sdk:Element",
5353
+ layerName: "Accordion item detail",
5354
+ responsiveStyles: {
5355
+ large: {
5356
+ position: "relative",
5357
+ display: "flex",
5358
+ alignItems: "stretch",
5359
+ flexDirection: "column",
5360
+ marginTop: "10px",
5361
+ paddingBottom: "10px"
5362
+ }
5363
+ },
5364
+ children: [
5347
5365
  {
5348
- name: "openLinkInNewTab",
5349
- type: "boolean",
5350
- defaultValue: false,
5351
- friendlyName: "Open link in new tab"
5366
+ "@type": "@builder.io/sdk:Element",
5367
+ responsiveStyles: {
5368
+ large: {
5369
+ paddingTop: "50px",
5370
+ textAlign: "left",
5371
+ display: "flex",
5372
+ flexDirection: "column",
5373
+ paddingBottom: "50px"
5374
+ }
5375
+ },
5376
+ component: {
5377
+ name: "Text",
5378
+ options: {
5379
+ text: "I am an accordion detail, hello!"
5380
+ }
5381
+ }
5352
5382
  }
5353
- ],
5354
- static: true,
5355
- noWrap: true
5383
+ ]
5356
5384
  };
5357
- const componentInfo$g = {
5358
- // TODO: ways to statically preprocess JSON for references, functions, etc
5359
- name: "Columns",
5360
- isRSC: true,
5385
+ const componentInfo$h = {
5386
+ name: "Builder:Accordion",
5387
+ canHaveChildren: true,
5388
+ image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
5389
+ defaultStyles: {
5390
+ display: "flex",
5391
+ flexDirection: "column",
5392
+ alignItems: "stretch"
5393
+ },
5361
5394
  inputs: [
5362
5395
  {
5363
- name: "columns",
5364
- type: "array",
5396
+ name: "items",
5397
+ type: "list",
5365
5398
  broadcast: true,
5366
5399
  subFields: [
5367
5400
  {
5368
- name: "blocks",
5369
- type: "array",
5401
+ name: "title",
5402
+ type: "uiBlocks",
5370
5403
  hideFromUI: true,
5371
5404
  defaultValue: [
5372
- {
5373
- "@type": "@builder.io/sdk:Element",
5374
- responsiveStyles: {
5375
- large: {
5376
- display: "flex",
5377
- flexDirection: "column",
5378
- alignItems: "stretch",
5379
- flexShrink: "0",
5380
- position: "relative",
5381
- marginTop: "30px",
5382
- textAlign: "center",
5383
- lineHeight: "normal",
5384
- height: "auto",
5385
- minHeight: "20px",
5386
- minWidth: "20px",
5387
- overflow: "hidden"
5388
- }
5389
- },
5390
- component: {
5391
- name: "Image",
5392
- options: {
5393
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
5394
- backgroundPosition: "center",
5395
- backgroundSize: "cover",
5396
- aspectRatio: 0.7004048582995948
5397
- }
5398
- }
5399
- },
5400
- {
5401
- "@type": "@builder.io/sdk:Element",
5402
- responsiveStyles: {
5403
- large: {
5404
- display: "flex",
5405
- flexDirection: "column",
5406
- alignItems: "stretch",
5407
- flexShrink: "0",
5408
- position: "relative",
5409
- marginTop: "30px",
5410
- textAlign: "center",
5411
- lineHeight: "normal",
5412
- height: "auto"
5413
- }
5414
- },
5415
- component: {
5416
- name: "Text",
5417
- options: {
5418
- text: "<p>Enter some text...</p>"
5419
- }
5420
- }
5421
- }
5405
+ defaultTitle
5422
5406
  ]
5423
5407
  },
5424
5408
  {
5425
- name: "width",
5426
- type: "number",
5409
+ name: "detail",
5410
+ type: "uiBlocks",
5427
5411
  hideFromUI: true,
5428
- helperText: "Width %, e.g. set to 50 to fill half of the space"
5429
- },
5430
- {
5431
- name: "link",
5432
- type: "url",
5433
- helperText: "Optionally set a url that clicking this column will link to"
5412
+ defaultValue: [
5413
+ defaultDetail
5414
+ ]
5434
5415
  }
5435
5416
  ],
5436
5417
  defaultValue: [
5437
5418
  {
5438
- blocks: [
5439
- {
5440
- "@type": "@builder.io/sdk:Element",
5441
- responsiveStyles: {
5442
- large: {
5443
- display: "flex",
5444
- flexDirection: "column",
5445
- alignItems: "stretch",
5446
- flexShrink: "0",
5447
- position: "relative",
5448
- marginTop: "30px",
5449
- textAlign: "center",
5450
- lineHeight: "normal",
5451
- height: "auto",
5452
- minHeight: "20px",
5453
- minWidth: "20px",
5454
- overflow: "hidden"
5455
- }
5456
- },
5457
- component: {
5458
- name: "Image",
5459
- options: {
5460
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
5461
- backgroundPosition: "center",
5462
- backgroundSize: "cover",
5463
- aspectRatio: 0.7004048582995948
5464
- }
5465
- }
5466
- },
5467
- {
5468
- "@type": "@builder.io/sdk:Element",
5469
- responsiveStyles: {
5470
- large: {
5471
- display: "flex",
5472
- flexDirection: "column",
5473
- alignItems: "stretch",
5474
- flexShrink: "0",
5475
- position: "relative",
5476
- marginTop: "30px",
5477
- textAlign: "center",
5478
- lineHeight: "normal",
5479
- height: "auto"
5480
- }
5481
- },
5482
- component: {
5483
- name: "Text",
5484
- options: {
5485
- text: "<p>Enter some text...</p>"
5486
- }
5487
- }
5488
- }
5419
+ title: [
5420
+ defaultTitle
5421
+ ],
5422
+ detail: [
5423
+ defaultDetail
5489
5424
  ]
5490
5425
  },
5491
5426
  {
5492
- blocks: [
5493
- {
5494
- "@type": "@builder.io/sdk:Element",
5495
- responsiveStyles: {
5496
- large: {
5497
- display: "flex",
5498
- flexDirection: "column",
5499
- alignItems: "stretch",
5500
- flexShrink: "0",
5501
- position: "relative",
5502
- marginTop: "30px",
5503
- textAlign: "center",
5504
- lineHeight: "normal",
5505
- height: "auto",
5506
- minHeight: "20px",
5507
- minWidth: "20px",
5508
- overflow: "hidden"
5509
- }
5510
- },
5511
- component: {
5512
- name: "Image",
5513
- options: {
5514
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
5515
- backgroundPosition: "center",
5516
- backgroundSize: "cover",
5517
- aspectRatio: 0.7004048582995948
5518
- }
5519
- }
5520
- },
5521
- {
5522
- "@type": "@builder.io/sdk:Element",
5523
- responsiveStyles: {
5524
- large: {
5525
- display: "flex",
5526
- flexDirection: "column",
5527
- alignItems: "stretch",
5528
- flexShrink: "0",
5529
- position: "relative",
5530
- marginTop: "30px",
5531
- textAlign: "center",
5532
- lineHeight: "normal",
5533
- height: "auto"
5534
- }
5535
- },
5536
- component: {
5537
- name: "Text",
5538
- options: {
5539
- text: "<p>Enter some text...</p>"
5540
- }
5541
- }
5542
- }
5427
+ title: [
5428
+ defaultTitle
5429
+ ],
5430
+ detail: [
5431
+ defaultDetail
5543
5432
  ]
5544
5433
  }
5545
5434
  ],
5546
- onChange: (options) => {
5547
- function clearWidths() {
5548
- columns.forEach((col) => {
5549
- col.delete("width");
5550
- });
5551
- }
5552
- const columns = options.get("columns");
5553
- if (Array.isArray(columns)) {
5554
- const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
5555
- if (containsColumnWithWidth) {
5556
- const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
5557
- if (containsColumnWithoutWidth)
5558
- clearWidths();
5559
- else {
5560
- const sumWidths = columns.reduce((memo, col) => {
5561
- return memo + col.get("width");
5562
- }, 0);
5563
- const widthsDontAddUp = sumWidths !== 100;
5564
- if (widthsDontAddUp)
5565
- clearWidths();
5566
- }
5567
- }
5568
- }
5569
- }
5570
- },
5571
- {
5572
- name: "space",
5573
- type: "number",
5574
- defaultValue: 20,
5575
- helperText: "Size of gap between columns",
5576
- advanced: true
5577
- },
5578
- {
5579
- name: "stackColumnsAt",
5580
- type: "string",
5581
- defaultValue: "tablet",
5582
- helperText: "Convert horizontal columns to vertical at what device size",
5583
- enum: [
5584
- "tablet",
5585
- "mobile",
5586
- "never"
5587
- ],
5588
- advanced: true
5435
+ showIf: (options) => !options.get("useChildrenForItems")
5589
5436
  },
5590
5437
  {
5591
- name: "reverseColumnsWhenStacked",
5438
+ name: "oneAtATime",
5439
+ helperText: "Only allow opening one at a time (collapse all others when new item openned)",
5592
5440
  type: "boolean",
5593
- defaultValue: false,
5594
- helperText: "When stacking columns for mobile devices, reverse the ordering",
5595
- advanced: true
5596
- }
5597
- ]
5598
- };
5599
- const componentInfo$f = {
5600
- name: "Fragment",
5601
- static: true,
5602
- hidden: true,
5603
- canHaveChildren: true,
5604
- noWrap: true
5605
- };
5606
- const componentInfo$e = {
5607
- name: "Image",
5608
- static: true,
5609
- 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",
5610
- defaultStyles: {
5611
- position: "relative",
5612
- minHeight: "20px",
5613
- minWidth: "20px",
5614
- overflow: "hidden"
5615
- },
5616
- canHaveChildren: true,
5617
- inputs: [
5618
- {
5619
- name: "image",
5620
- type: "file",
5621
- bubble: true,
5622
- allowedFileTypes: [
5623
- "jpeg",
5624
- "jpg",
5625
- "png",
5626
- "svg"
5627
- ],
5628
- required: true,
5629
- defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
5630
- onChange: (options) => {
5631
- const DEFAULT_ASPECT_RATIO = 0.7041;
5632
- options.delete("srcset");
5633
- options.delete("noWebp");
5634
- function loadImage(url, timeout = 6e4) {
5635
- return new Promise((resolve, reject) => {
5636
- const img = document.createElement("img");
5637
- let loaded = false;
5638
- img.onload = () => {
5639
- loaded = true;
5640
- resolve(img);
5641
- };
5642
- img.addEventListener("error", (event) => {
5643
- console.warn("Image load failed", event.error);
5644
- reject(event.error);
5645
- });
5646
- img.src = url;
5647
- setTimeout(() => {
5648
- if (!loaded)
5649
- reject(new Error("Image load timed out"));
5650
- }, timeout);
5651
- });
5652
- }
5653
- function round2(num) {
5654
- return Math.round(num * 1e3) / 1e3;
5655
- }
5656
- const value = options.get("image");
5657
- const aspectRatio = options.get("aspectRatio");
5658
- fetch(value).then((res) => res.blob()).then((blob) => {
5659
- if (blob.type.includes("svg"))
5660
- options.set("noWebp", true);
5661
- });
5662
- if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
5663
- return loadImage(value).then((img) => {
5664
- const possiblyUpdatedAspectRatio = options.get("aspectRatio");
5665
- if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
5666
- if (img.width && img.height) {
5667
- options.set("aspectRatio", round2(img.height / img.width));
5668
- options.set("height", img.height);
5669
- options.set("width", img.width);
5670
- }
5671
- }
5672
- });
5673
- }
5674
- },
5675
- {
5676
- name: "backgroundSize",
5677
- type: "text",
5678
- defaultValue: "cover",
5679
- enum: [
5680
- {
5681
- label: "contain",
5682
- value: "contain",
5683
- helperText: "The image should never get cropped"
5684
- },
5685
- {
5686
- label: "cover",
5687
- value: "cover",
5688
- helperText: "The image should fill it's box, cropping when needed"
5689
- }
5690
- ]
5691
- },
5692
- {
5693
- name: "backgroundPosition",
5694
- type: "text",
5695
- defaultValue: "center",
5696
- enum: [
5697
- "center",
5698
- "top",
5699
- "left",
5700
- "right",
5701
- "bottom",
5702
- "top left",
5703
- "top right",
5704
- "bottom left",
5705
- "bottom right"
5706
- ]
5707
- },
5708
- {
5709
- name: "altText",
5710
- type: "string",
5711
- helperText: "Text to display when the user has images off"
5712
- },
5713
- {
5714
- name: "height",
5715
- type: "number",
5716
- hideFromUI: true
5717
- },
5718
- {
5719
- name: "width",
5720
- type: "number",
5721
- hideFromUI: true
5441
+ defaultValue: false
5722
5442
  },
5723
5443
  {
5724
- name: "sizes",
5725
- type: "string",
5726
- hideFromUI: true
5444
+ name: "grid",
5445
+ helperText: "Display as a grid",
5446
+ type: "boolean",
5447
+ defaultValue: false
5727
5448
  },
5728
5449
  {
5729
- name: "srcset",
5450
+ name: "gridRowWidth",
5451
+ helperText: "Display as a grid",
5730
5452
  type: "string",
5731
- hideFromUI: true
5732
- },
5733
- {
5734
- name: "lazy",
5735
- type: "boolean",
5736
- defaultValue: true,
5737
- hideFromUI: true
5453
+ showIf: (options) => options.get("grid"),
5454
+ defaultValue: "25%"
5738
5455
  },
5739
5456
  {
5740
- name: "fitContent",
5457
+ name: "useChildrenForItems",
5741
5458
  type: "boolean",
5742
- helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
5743
- defaultValue: true
5744
- },
5745
- {
5746
- name: "aspectRatio",
5747
- type: "number",
5748
- helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
5459
+ helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
5749
5460
  advanced: true,
5750
- defaultValue: 0.7041
5461
+ defaultValue: false,
5462
+ onChange: (options) => {
5463
+ if (options.get("useChildrenForItems") === true)
5464
+ options.set("items", []);
5465
+ }
5751
5466
  }
5752
5467
  ]
5753
5468
  };
5754
- const componentInfo$d = {
5755
- name: "Core:Section",
5756
- static: true,
5757
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
5758
- inputs: [
5759
- {
5760
- name: "maxWidth",
5761
- type: "number",
5762
- defaultValue: 1200
5763
- },
5764
- {
5765
- name: "lazyLoad",
5766
- type: "boolean",
5767
- defaultValue: false,
5768
- advanced: true,
5769
- description: "Only render this section when in view"
5770
- }
5771
- ],
5772
- defaultStyles: {
5773
- paddingLeft: "20px",
5774
- paddingRight: "20px",
5775
- paddingTop: "50px",
5776
- paddingBottom: "50px",
5777
- marginTop: "0px",
5778
- width: "100vw",
5779
- marginLeft: "calc(50% - 50vw)"
5780
- },
5781
- canHaveChildren: true,
5782
- defaultChildren: [
5783
- {
5784
- "@type": "@builder.io/sdk:Element",
5785
- responsiveStyles: {
5786
- large: {
5787
- textAlign: "center"
5788
- }
5789
- },
5790
- component: {
5791
- name: "Text",
5792
- options: {
5793
- text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>"
5794
- }
5795
- }
5796
- }
5797
- ]
5469
+ const convertOrderNumberToString = (order) => {
5470
+ return order.toString();
5798
5471
  };
5799
- const componentInfo$c = {
5800
- name: "Slot",
5801
- isRSC: true,
5802
- description: "Allow child blocks to be inserted into this content when used as a Symbol",
5803
- docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
5804
- image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
5805
- // Maybe wrap this for canHaveChildren so bind children to this hm
5806
- inputs: [
5807
- {
5808
- name: "name",
5809
- type: "string",
5810
- required: true,
5811
- defaultValue: "children"
5812
- }
5813
- ]
5472
+ const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
5473
+ return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
5814
5474
  };
5815
- const Slot = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
5816
- var _a, _b;
5817
- return /* @__PURE__ */ qwik._jsxS("div", {
5818
- ...!((_a = props.builderContext.context) == null ? void 0 : _a.symbolId) && {
5819
- "builder-slot": props.name
5820
- },
5821
- children: /* @__PURE__ */ qwik._jsxC(Blocks, {
5822
- get parent() {
5823
- var _a2;
5824
- return (_a2 = props.builderContext.context) == null ? void 0 : _a2.symbolId;
5825
- },
5826
- get path() {
5827
- return `symbol.data.${props.name}`;
5828
- },
5829
- get context() {
5830
- return props.builderContext;
5831
- },
5832
- blocks: deoptSignal((_b = props.builderContext.rootState) == null ? void 0 : _b[props.name]),
5833
- [qwik._IMMUTABLE]: {
5834
- context: qwik._fnSignal((p0) => p0.builderContext, [
5835
- props
5836
- ], "p0.builderContext"),
5837
- parent: qwik._fnSignal((p0) => {
5838
- var _a2;
5839
- return (_a2 = p0.builderContext.context) == null ? void 0 : _a2.symbolId;
5840
- }, [
5841
- props
5842
- ], "p0.builderContext.context?.symbolId"),
5843
- path: qwik._fnSignal((p0) => `symbol.data.${p0.name}`, [
5844
- props
5845
- ], "`symbol.data.${p0.name}`")
5846
- }
5847
- }, 3, "B1_0")
5848
- }, {
5849
- style: {
5850
- pointerEvents: "auto"
5851
- }
5852
- }, 0, "B1_1");
5853
- }, "Slot_component_WWgWgfV0bb0"));
5854
- const componentInfo$b = {
5855
- name: "Symbol",
5856
- noWrap: true,
5857
- static: true,
5858
- isRSC: true,
5859
- inputs: [
5860
- {
5861
- name: "symbol",
5862
- type: "uiSymbol"
5863
- },
5864
- {
5865
- name: "dataOnly",
5866
- helperText: "Make this a data symbol that doesn't display any UI",
5867
- type: "boolean",
5868
- defaultValue: false,
5869
- advanced: true,
5870
- hideFromUI: true
5871
- },
5872
- {
5873
- name: "inheritState",
5874
- helperText: "Inherit the parent component state and data",
5875
- type: "boolean",
5876
- defaultValue: false,
5877
- advanced: true
5878
- },
5879
- {
5880
- name: "renderToLiquid",
5881
- helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
5882
- type: "boolean",
5883
- defaultValue: false,
5884
- advanced: true,
5885
- hideFromUI: true
5886
- },
5887
- {
5888
- name: "useChildren",
5889
- hideFromUI: true,
5890
- type: "boolean"
5891
- }
5892
- ]
5475
+ const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
5476
+ return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
5893
5477
  };
5894
- const defaultTab = {
5895
- "@type": "@builder.io/sdk:Element",
5896
- responsiveStyles: {
5897
- large: {
5898
- paddingLeft: "20px",
5899
- paddingRight: "20px",
5900
- paddingTop: "10px",
5901
- paddingBottom: "10px",
5902
- minWidth: "100px",
5903
- textAlign: "center",
5478
+ const onClick$2 = function onClick22(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
5479
+ if (state.open.includes(index))
5480
+ state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
5481
+ else
5482
+ state.open = onlyOneAtATime.value ? [
5483
+ index
5484
+ ] : state.open.concat(index);
5485
+ };
5486
+ const Accordion = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
5487
+ const state = qwik.useStore({
5488
+ open: []
5489
+ });
5490
+ const onlyOneAtATime = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
5491
+ const [props2] = qwik.useLexicalScope();
5492
+ return Boolean(props2.grid || props2.oneAtATime);
5493
+ }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
5494
+ props
5495
+ ]));
5496
+ const accordionStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
5497
+ const [props2] = qwik.useLexicalScope();
5498
+ const styles = {
5904
5499
  display: "flex",
5500
+ alignItems: "stretch",
5905
5501
  flexDirection: "column",
5906
- cursor: "pointer",
5907
- userSelect: "none"
5908
- }
5909
- },
5910
- component: {
5911
- name: "Text",
5912
- options: {
5913
- text: "New tab"
5914
- }
5915
- }
5916
- };
5917
- const defaultElement = {
5918
- "@type": "@builder.io/sdk:Element",
5919
- responsiveStyles: {
5920
- large: {
5921
- height: "200px",
5502
+ ...props2.grid && {
5503
+ flexDirection: "row",
5504
+ alignItems: "flex-start",
5505
+ flexWrap: "wrap"
5506
+ }
5507
+ };
5508
+ return styles;
5509
+ }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
5510
+ props
5511
+ ]));
5512
+ const accordionTitleStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
5513
+ const shared = {
5922
5514
  display: "flex",
5923
- marginTop: "20px",
5924
5515
  flexDirection: "column"
5516
+ };
5517
+ const styles = {
5518
+ ...shared,
5519
+ alignItems: "stretch",
5520
+ cursor: "pointer"
5521
+ };
5522
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
5523
+ }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
5524
+ const openGridItemOrder = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
5525
+ const [props2, state2] = qwik.useLexicalScope();
5526
+ let itemOrder = null;
5527
+ const getOpenGridItemPosition = props2.grid && state2.open.length;
5528
+ if (getOpenGridItemPosition && document) {
5529
+ const openItemIndex = state2.open[0];
5530
+ const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
5531
+ let subjectItem = openItem;
5532
+ itemOrder = openItemIndex;
5533
+ if (subjectItem) {
5534
+ let prevItemRect = subjectItem.getBoundingClientRect();
5535
+ while (subjectItem = subjectItem && subjectItem.nextElementSibling)
5536
+ if (subjectItem) {
5537
+ if (subjectItem.classList.contains("builder-accordion-detail"))
5538
+ continue;
5539
+ const subjectItemRect = subjectItem.getBoundingClientRect();
5540
+ if (subjectItemRect.left > prevItemRect.left) {
5541
+ const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
5542
+ if (!isNaN(index)) {
5543
+ prevItemRect = subjectItemRect;
5544
+ itemOrder = index;
5545
+ }
5546
+ } else
5547
+ break;
5548
+ }
5549
+ }
5925
5550
  }
5926
- },
5927
- component: {
5928
- name: "Text",
5929
- options: {
5930
- text: "New tab content "
5931
- }
5932
- }
5933
- };
5934
- const componentInfo$a = {
5935
- name: "Builder: Tabs",
5936
- inputs: [
5937
- {
5938
- name: "tabs",
5939
- type: "list",
5940
- broadcast: true,
5941
- subFields: [
5942
- {
5943
- name: "label",
5944
- type: "uiBlocks",
5945
- hideFromUI: true,
5946
- defaultValue: [
5947
- defaultTab
5948
- ]
5949
- },
5950
- {
5951
- name: "content",
5952
- type: "uiBlocks",
5953
- hideFromUI: true,
5954
- defaultValue: [
5955
- defaultElement
5956
- ]
5957
- }
5958
- ],
5959
- defaultValue: [
5551
+ if (typeof itemOrder === "number")
5552
+ itemOrder = itemOrder + 1;
5553
+ return itemOrder;
5554
+ }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
5555
+ props,
5556
+ state
5557
+ ]));
5558
+ const accordionDetailStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
5559
+ const [openGridItemOrder2, props2] = qwik.useLexicalScope();
5560
+ const styles = {
5561
+ order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
5562
+ ...props2.grid && {
5563
+ width: "100%"
5564
+ }
5565
+ };
5566
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
5567
+ }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
5568
+ openGridItemOrder,
5569
+ props
5570
+ ]));
5571
+ return /* @__PURE__ */ qwik._jsxQ("div", null, {
5572
+ class: "builder-accordion",
5573
+ style: qwik._fnSignal((p0) => p0.value, [
5574
+ accordionStyles
5575
+ ], "p0.value")
5576
+ }, (props.items || []).map((item, index) => {
5577
+ qwik._jsxBranch();
5578
+ return /* @__PURE__ */ qwik._jsxC(qwik.Fragment, {
5579
+ children: [
5580
+ /* @__PURE__ */ qwik._jsxQ("div", {
5581
+ class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
5582
+ "data-index": index,
5583
+ onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
5584
+ const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = qwik.useLexicalScope();
5585
+ return onClick$2(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
5586
+ }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
5587
+ accordionDetailStyles,
5588
+ accordionStyles,
5589
+ accordionTitleStyles,
5590
+ index,
5591
+ onlyOneAtATime,
5592
+ openGridItemOrder,
5593
+ props,
5594
+ state
5595
+ ]),
5596
+ style: {
5597
+ ...accordionTitleStyles.value,
5598
+ width: props.grid ? props.gridRowWidth : void 0,
5599
+ order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
5600
+ }
5601
+ }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
5602
+ get blocks() {
5603
+ return item.title;
5604
+ },
5605
+ path: `items.${index}.title`,
5606
+ get parent() {
5607
+ return props.builderBlock.id;
5608
+ },
5609
+ get context() {
5610
+ return props.builderContext;
5611
+ },
5612
+ get registeredComponents() {
5613
+ return props.builderComponents;
5614
+ },
5615
+ get linkComponent() {
5616
+ return props.builderLinkComponent;
5617
+ },
5618
+ [qwik._IMMUTABLE]: {
5619
+ blocks: qwik._wrapProp(item, "title"),
5620
+ context: qwik._fnSignal((p0) => p0.builderContext, [
5621
+ props
5622
+ ], "p0.builderContext"),
5623
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
5624
+ props
5625
+ ], "p0.builderLinkComponent"),
5626
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
5627
+ props
5628
+ ], "p0.builderBlock.id"),
5629
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
5630
+ props
5631
+ ], "p0.builderComponents")
5632
+ }
5633
+ }, 3, "hf_0"), 0, null),
5634
+ state.open.includes(index) ? /* @__PURE__ */ qwik._jsxQ("div", {
5635
+ class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
5636
+ }, {
5637
+ style: qwik._fnSignal((p0) => p0.value, [
5638
+ accordionDetailStyles
5639
+ ], "p0.value")
5640
+ }, /* @__PURE__ */ qwik._jsxC(Blocks, {
5641
+ get blocks() {
5642
+ return item.detail;
5643
+ },
5644
+ path: `items.${index}.detail`,
5645
+ get parent() {
5646
+ return props.builderBlock.id;
5647
+ },
5648
+ get context() {
5649
+ return props.builderContext;
5650
+ },
5651
+ get registeredComponents() {
5652
+ return props.builderComponents;
5653
+ },
5654
+ get linkComponent() {
5655
+ return props.builderLinkComponent;
5656
+ },
5657
+ [qwik._IMMUTABLE]: {
5658
+ blocks: qwik._wrapProp(item, "detail"),
5659
+ context: qwik._fnSignal((p0) => p0.builderContext, [
5660
+ props
5661
+ ], "p0.builderContext"),
5662
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
5663
+ props
5664
+ ], "p0.builderLinkComponent"),
5665
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
5666
+ props
5667
+ ], "p0.builderBlock.id"),
5668
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
5669
+ props
5670
+ ], "p0.builderComponents")
5671
+ }
5672
+ }, 3, "hf_1"), 1, "hf_2") : null
5673
+ ]
5674
+ }, 1, "hf_3");
5675
+ }), 1, "hf_4");
5676
+ }, "Accordion_component_jkuUCHm0nt0"));
5677
+ const componentInfo$g = {
5678
+ name: "Core:Button",
5679
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
5680
+ defaultStyles: {
5681
+ // TODO: make min width more intuitive and set one
5682
+ appearance: "none",
5683
+ paddingTop: "15px",
5684
+ paddingBottom: "15px",
5685
+ paddingLeft: "25px",
5686
+ paddingRight: "25px",
5687
+ backgroundColor: "#000000",
5688
+ color: "white",
5689
+ borderRadius: "4px",
5690
+ textAlign: "center",
5691
+ cursor: "pointer"
5692
+ },
5693
+ inputs: [
5694
+ {
5695
+ name: "text",
5696
+ type: "text",
5697
+ defaultValue: "Click me!",
5698
+ bubble: true
5699
+ },
5700
+ {
5701
+ name: "link",
5702
+ type: "url",
5703
+ bubble: true
5704
+ },
5705
+ {
5706
+ name: "openLinkInNewTab",
5707
+ type: "boolean",
5708
+ defaultValue: false,
5709
+ friendlyName: "Open link in new tab"
5710
+ }
5711
+ ],
5712
+ static: true,
5713
+ noWrap: true
5714
+ };
5715
+ const componentInfo$f = {
5716
+ // TODO: ways to statically preprocess JSON for references, functions, etc
5717
+ name: "Columns",
5718
+ isRSC: true,
5719
+ inputs: [
5720
+ {
5721
+ name: "columns",
5722
+ type: "array",
5723
+ broadcast: true,
5724
+ subFields: [
5960
5725
  {
5961
- label: [
5726
+ name: "blocks",
5727
+ type: "array",
5728
+ hideFromUI: true,
5729
+ defaultValue: [
5962
5730
  {
5963
- ...defaultTab,
5731
+ "@type": "@builder.io/sdk:Element",
5732
+ responsiveStyles: {
5733
+ large: {
5734
+ display: "flex",
5735
+ flexDirection: "column",
5736
+ alignItems: "stretch",
5737
+ flexShrink: "0",
5738
+ position: "relative",
5739
+ marginTop: "30px",
5740
+ textAlign: "center",
5741
+ lineHeight: "normal",
5742
+ height: "auto",
5743
+ minHeight: "20px",
5744
+ minWidth: "20px",
5745
+ overflow: "hidden"
5746
+ }
5747
+ },
5964
5748
  component: {
5965
- name: "Text",
5749
+ name: "Image",
5966
5750
  options: {
5967
- text: "Tab 1"
5751
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
5752
+ backgroundPosition: "center",
5753
+ backgroundSize: "cover",
5754
+ aspectRatio: 0.7004048582995948
5968
5755
  }
5969
5756
  }
5970
- }
5971
- ],
5972
- content: [
5757
+ },
5973
5758
  {
5974
- ...defaultElement,
5759
+ "@type": "@builder.io/sdk:Element",
5760
+ responsiveStyles: {
5761
+ large: {
5762
+ display: "flex",
5763
+ flexDirection: "column",
5764
+ alignItems: "stretch",
5765
+ flexShrink: "0",
5766
+ position: "relative",
5767
+ marginTop: "30px",
5768
+ textAlign: "center",
5769
+ lineHeight: "normal",
5770
+ height: "auto"
5771
+ }
5772
+ },
5975
5773
  component: {
5976
5774
  name: "Text",
5977
5775
  options: {
5978
- text: "Tab 1 content"
5776
+ text: "<p>Enter some text...</p>"
5979
5777
  }
5980
5778
  }
5981
5779
  }
5982
5780
  ]
5983
5781
  },
5984
5782
  {
5985
- label: [
5986
- {
5987
- ...defaultTab,
5988
- component: {
5989
- name: "Text",
5990
- options: {
5991
- text: "Tab 2"
5992
- }
5993
- }
5994
- }
5995
- ],
5996
- content: [
5783
+ name: "width",
5784
+ type: "number",
5785
+ hideFromUI: true,
5786
+ helperText: "Width %, e.g. set to 50 to fill half of the space"
5787
+ },
5788
+ {
5789
+ name: "link",
5790
+ type: "url",
5791
+ helperText: "Optionally set a url that clicking this column will link to"
5792
+ }
5793
+ ],
5794
+ defaultValue: [
5795
+ {
5796
+ blocks: [
5997
5797
  {
5998
- ...defaultElement,
5798
+ "@type": "@builder.io/sdk:Element",
5799
+ responsiveStyles: {
5800
+ large: {
5801
+ display: "flex",
5802
+ flexDirection: "column",
5803
+ alignItems: "stretch",
5804
+ flexShrink: "0",
5805
+ position: "relative",
5806
+ marginTop: "30px",
5807
+ textAlign: "center",
5808
+ lineHeight: "normal",
5809
+ height: "auto",
5810
+ minHeight: "20px",
5811
+ minWidth: "20px",
5812
+ overflow: "hidden"
5813
+ }
5814
+ },
5815
+ component: {
5816
+ name: "Image",
5817
+ options: {
5818
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
5819
+ backgroundPosition: "center",
5820
+ backgroundSize: "cover",
5821
+ aspectRatio: 0.7004048582995948
5822
+ }
5823
+ }
5824
+ },
5825
+ {
5826
+ "@type": "@builder.io/sdk:Element",
5827
+ responsiveStyles: {
5828
+ large: {
5829
+ display: "flex",
5830
+ flexDirection: "column",
5831
+ alignItems: "stretch",
5832
+ flexShrink: "0",
5833
+ position: "relative",
5834
+ marginTop: "30px",
5835
+ textAlign: "center",
5836
+ lineHeight: "normal",
5837
+ height: "auto"
5838
+ }
5839
+ },
5999
5840
  component: {
6000
5841
  name: "Text",
6001
5842
  options: {
6002
- text: "Tab 2 content"
5843
+ text: "<p>Enter some text...</p>"
5844
+ }
5845
+ }
5846
+ }
5847
+ ]
5848
+ },
5849
+ {
5850
+ blocks: [
5851
+ {
5852
+ "@type": "@builder.io/sdk:Element",
5853
+ responsiveStyles: {
5854
+ large: {
5855
+ display: "flex",
5856
+ flexDirection: "column",
5857
+ alignItems: "stretch",
5858
+ flexShrink: "0",
5859
+ position: "relative",
5860
+ marginTop: "30px",
5861
+ textAlign: "center",
5862
+ lineHeight: "normal",
5863
+ height: "auto",
5864
+ minHeight: "20px",
5865
+ minWidth: "20px",
5866
+ overflow: "hidden"
5867
+ }
5868
+ },
5869
+ component: {
5870
+ name: "Image",
5871
+ options: {
5872
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
5873
+ backgroundPosition: "center",
5874
+ backgroundSize: "cover",
5875
+ aspectRatio: 0.7004048582995948
5876
+ }
5877
+ }
5878
+ },
5879
+ {
5880
+ "@type": "@builder.io/sdk:Element",
5881
+ responsiveStyles: {
5882
+ large: {
5883
+ display: "flex",
5884
+ flexDirection: "column",
5885
+ alignItems: "stretch",
5886
+ flexShrink: "0",
5887
+ position: "relative",
5888
+ marginTop: "30px",
5889
+ textAlign: "center",
5890
+ lineHeight: "normal",
5891
+ height: "auto"
5892
+ }
5893
+ },
5894
+ component: {
5895
+ name: "Text",
5896
+ options: {
5897
+ text: "<p>Enter some text...</p>"
6003
5898
  }
6004
5899
  }
6005
5900
  }
6006
5901
  ]
6007
5902
  }
6008
- ]
6009
- },
6010
- {
6011
- name: "activeTabStyle",
6012
- type: "uiStyle",
6013
- helperText: "CSS styles for the active tab",
6014
- defaultValue: {
6015
- backgroundColor: "rgba(0, 0, 0, 0.1)"
5903
+ ],
5904
+ onChange: (options) => {
5905
+ function clearWidths() {
5906
+ columns.forEach((col) => {
5907
+ col.delete("width");
5908
+ });
5909
+ }
5910
+ const columns = options.get("columns");
5911
+ if (Array.isArray(columns)) {
5912
+ const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
5913
+ if (containsColumnWithWidth) {
5914
+ const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
5915
+ if (containsColumnWithoutWidth)
5916
+ clearWidths();
5917
+ else {
5918
+ const sumWidths = columns.reduce((memo, col) => {
5919
+ return memo + col.get("width");
5920
+ }, 0);
5921
+ const widthsDontAddUp = sumWidths !== 100;
5922
+ if (widthsDontAddUp)
5923
+ clearWidths();
5924
+ }
5925
+ }
5926
+ }
6016
5927
  }
6017
5928
  },
6018
5929
  {
6019
- name: "defaultActiveTab",
5930
+ name: "space",
6020
5931
  type: "number",
6021
- helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
6022
- defaultValue: 1,
5932
+ defaultValue: 20,
5933
+ helperText: "Size of gap between columns",
6023
5934
  advanced: true
6024
5935
  },
6025
5936
  {
6026
- name: "collapsible",
5937
+ name: "stackColumnsAt",
5938
+ type: "string",
5939
+ defaultValue: "tablet",
5940
+ helperText: "Convert horizontal columns to vertical at what device size",
5941
+ enum: [
5942
+ "tablet",
5943
+ "mobile",
5944
+ "never"
5945
+ ],
5946
+ advanced: true
5947
+ },
5948
+ {
5949
+ name: "reverseColumnsWhenStacked",
6027
5950
  type: "boolean",
6028
- helperText: "If on, clicking an open tab closes it so no tabs are active",
6029
5951
  defaultValue: false,
5952
+ helperText: "When stacking columns for mobile devices, reverse the ordering",
6030
5953
  advanced: true
5954
+ }
5955
+ ]
5956
+ };
5957
+ const componentInfo$e = {
5958
+ name: "Fragment",
5959
+ static: true,
5960
+ hidden: true,
5961
+ canHaveChildren: true,
5962
+ noWrap: true
5963
+ };
5964
+ const componentInfo$d = {
5965
+ name: "Image",
5966
+ static: true,
5967
+ 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",
5968
+ defaultStyles: {
5969
+ position: "relative",
5970
+ minHeight: "20px",
5971
+ minWidth: "20px",
5972
+ overflow: "hidden"
5973
+ },
5974
+ canHaveChildren: true,
5975
+ inputs: [
5976
+ {
5977
+ name: "image",
5978
+ type: "file",
5979
+ bubble: true,
5980
+ allowedFileTypes: [
5981
+ "jpeg",
5982
+ "jpg",
5983
+ "png",
5984
+ "svg"
5985
+ ],
5986
+ required: true,
5987
+ defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
5988
+ onChange: (options) => {
5989
+ const DEFAULT_ASPECT_RATIO = 0.7041;
5990
+ options.delete("srcset");
5991
+ options.delete("noWebp");
5992
+ function loadImage(url, timeout = 6e4) {
5993
+ return new Promise((resolve, reject) => {
5994
+ const img = document.createElement("img");
5995
+ let loaded = false;
5996
+ img.onload = () => {
5997
+ loaded = true;
5998
+ resolve(img);
5999
+ };
6000
+ img.addEventListener("error", (event) => {
6001
+ console.warn("Image load failed", event.error);
6002
+ reject(event.error);
6003
+ });
6004
+ img.src = url;
6005
+ setTimeout(() => {
6006
+ if (!loaded)
6007
+ reject(new Error("Image load timed out"));
6008
+ }, timeout);
6009
+ });
6010
+ }
6011
+ function round2(num) {
6012
+ return Math.round(num * 1e3) / 1e3;
6013
+ }
6014
+ const value = options.get("image");
6015
+ const aspectRatio = options.get("aspectRatio");
6016
+ fetch(value).then((res) => res.blob()).then((blob) => {
6017
+ if (blob.type.includes("svg"))
6018
+ options.set("noWebp", true);
6019
+ });
6020
+ if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
6021
+ return loadImage(value).then((img) => {
6022
+ const possiblyUpdatedAspectRatio = options.get("aspectRatio");
6023
+ if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
6024
+ if (img.width && img.height) {
6025
+ options.set("aspectRatio", round2(img.height / img.width));
6026
+ options.set("height", img.height);
6027
+ options.set("width", img.width);
6028
+ }
6029
+ }
6030
+ });
6031
+ }
6031
6032
  },
6032
6033
  {
6033
- name: "tabHeaderLayout",
6034
- type: "enum",
6035
- helperText: "Change the layout of the tab headers (uses justify-content)",
6036
- defaultValue: "flex-start",
6034
+ name: "backgroundSize",
6035
+ type: "text",
6036
+ defaultValue: "cover",
6037
6037
  enum: [
6038
6038
  {
6039
- label: "Center",
6040
- value: "center"
6041
- },
6042
- {
6043
- label: "Space between",
6044
- value: "space-between"
6045
- },
6046
- {
6047
- label: "Space around",
6048
- value: "space-around"
6049
- },
6050
- {
6051
- label: "Left",
6052
- value: "flex-start"
6039
+ label: "contain",
6040
+ value: "contain",
6041
+ helperText: "The image should never get cropped"
6053
6042
  },
6054
6043
  {
6055
- label: "Right",
6056
- value: "flex-end"
6044
+ label: "cover",
6045
+ value: "cover",
6046
+ helperText: "The image should fill it's box, cropping when needed"
6057
6047
  }
6058
6048
  ]
6059
- }
6060
- ]
6061
- };
6062
- const activeTabContent = function activeTabContent2(props, state, active) {
6063
- return props.tabs && props.tabs[active].content;
6064
- };
6065
- const onClick$2 = function onClick22(props, state, index) {
6066
- if (index === state.activeTab && props.collapsible)
6067
- state.activeTab = -1;
6068
- else
6069
- state.activeTab = index;
6070
- };
6071
- const Tabs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
6072
- qwik._jsxBranch();
6073
- const state = qwik.useStore({
6074
- activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
6075
- });
6076
- return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
6077
- /* @__PURE__ */ qwik._jsxQ("div", null, {
6078
- class: "builder-tabs-wrap",
6079
- style: qwik._fnSignal((p0) => ({
6080
- display: "flex",
6081
- flexDirection: "row",
6082
- justifyContent: p0.tabHeaderLayout || "flex-start",
6083
- overflow: "auto"
6084
- }), [
6085
- props
6086
- ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
6087
- }, (props.tabs || []).map((tab, index) => {
6088
- return /* @__PURE__ */ qwik._jsxQ("span", {
6089
- class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
6090
- onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
6091
- const [index2, props2, state2] = qwik.useLexicalScope();
6092
- return onClick$2(props2, state2, index2);
6093
- }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
6094
- index,
6095
- props,
6096
- state
6097
- ]),
6098
- style: {
6099
- ...state.activeTab === index ? props.activeTabStyle : {}
6100
- }
6101
- }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
6102
- get parent() {
6103
- return props.builderBlock.id;
6104
- },
6105
- path: `component.options.tabs.${index}.label`,
6106
- get blocks() {
6107
- return tab.label;
6108
- },
6109
- get context() {
6110
- return props.builderContext;
6111
- },
6112
- get registeredComponents() {
6113
- return props.builderComponents;
6114
- },
6115
- get linkComponent() {
6116
- return props.builderLinkComponent;
6117
- },
6118
- [qwik._IMMUTABLE]: {
6119
- blocks: qwik._wrapProp(tab, "label"),
6120
- context: qwik._fnSignal((p0) => p0.builderContext, [
6121
- props
6122
- ], "p0.builderContext"),
6123
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
6124
- props
6125
- ], "p0.builderLinkComponent"),
6126
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
6127
- props
6128
- ], "p0.builderBlock.id"),
6129
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
6130
- props
6131
- ], "p0.builderComponents")
6132
- }
6133
- }, 3, "6k_0"), 0, index);
6134
- }), 1, null),
6135
- activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ qwik._jsxQ("div", null, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
6136
- get parent() {
6137
- return props.builderBlock.id;
6138
- },
6139
- get path() {
6140
- return `component.options.tabs.${state.activeTab}.content`;
6141
- },
6142
- blocks: activeTabContent(props, state, state.activeTab),
6143
- get context() {
6144
- return props.builderContext;
6145
- },
6146
- get registeredComponents() {
6147
- return props.builderComponents;
6148
- },
6149
- get linkComponent() {
6150
- return props.builderLinkComponent;
6151
- },
6152
- [qwik._IMMUTABLE]: {
6153
- context: qwik._fnSignal((p0) => p0.builderContext, [
6154
- props
6155
- ], "p0.builderContext"),
6156
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
6157
- props
6158
- ], "p0.builderLinkComponent"),
6159
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
6160
- props
6161
- ], "p0.builderBlock.id"),
6162
- path: qwik._fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
6163
- state
6164
- ], "`component.options.tabs.${p0.activeTab}.content`"),
6165
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
6166
- props
6167
- ], "p0.builderComponents")
6168
- }
6169
- }, 3, "6k_1"), 1, "6k_2") : null
6170
- ], 1, "6k_3");
6171
- }, "Tabs_component_MhWcxXy0lMY"));
6172
- const componentInfo$9 = {
6173
- name: "Text",
6174
- static: true,
6175
- isRSC: true,
6176
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
6177
- inputs: [
6049
+ },
6178
6050
  {
6179
- name: "text",
6180
- type: "html",
6181
- required: true,
6182
- autoFocus: true,
6183
- bubble: true,
6184
- defaultValue: "Enter some text..."
6185
- }
6186
- ],
6187
- defaultStyles: {
6188
- lineHeight: "normal",
6189
- height: "auto",
6190
- textAlign: "center"
6191
- }
6192
- };
6193
- const Text = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
6194
- return /* @__PURE__ */ qwik._jsxQ("div", null, {
6195
- class: "builder-text",
6196
- dangerouslySetInnerHTML: qwik._fnSignal((p0) => {
6197
- var _a;
6198
- return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
6199
- }, [
6200
- props
6201
- ], 'p0.text?.toString()||""'),
6202
- style: {
6203
- outline: "none"
6204
- }
6205
- }, null, 3, "yO_0");
6206
- }, "Text_component_15p0cKUxgIE"));
6207
- const convertOrderNumberToString = (order) => {
6208
- return order.toString();
6209
- };
6210
- const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
6211
- return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
6212
- };
6213
- const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
6214
- return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
6215
- };
6216
- const onClick$1 = function onClick23(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
6217
- if (state.open.includes(index))
6218
- state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
6219
- else
6220
- state.open = onlyOneAtATime.value ? [
6221
- index
6222
- ] : state.open.concat(index);
6223
- };
6224
- const Accordion = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
6225
- const state = qwik.useStore({
6226
- open: []
6227
- });
6228
- const onlyOneAtATime = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
6229
- const [props2] = qwik.useLexicalScope();
6230
- return Boolean(props2.grid || props2.oneAtATime);
6231
- }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
6232
- props
6233
- ]));
6234
- const accordionStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
6235
- const [props2] = qwik.useLexicalScope();
6236
- const styles = {
6237
- display: "flex",
6238
- alignItems: "stretch",
6239
- flexDirection: "column",
6240
- ...props2.grid && {
6241
- flexDirection: "row",
6242
- alignItems: "flex-start",
6243
- flexWrap: "wrap"
6244
- }
6245
- };
6246
- return styles;
6247
- }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
6248
- props
6249
- ]));
6250
- const accordionTitleStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
6251
- const shared = {
6252
- display: "flex",
6253
- flexDirection: "column"
6254
- };
6255
- const styles = {
6256
- ...shared,
6257
- alignItems: "stretch",
6258
- cursor: "pointer"
6259
- };
6260
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
6261
- }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
6262
- const openGridItemOrder = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
6263
- const [props2, state2] = qwik.useLexicalScope();
6264
- let itemOrder = null;
6265
- const getOpenGridItemPosition = props2.grid && state2.open.length;
6266
- if (getOpenGridItemPosition && document) {
6267
- const openItemIndex = state2.open[0];
6268
- const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
6269
- let subjectItem = openItem;
6270
- itemOrder = openItemIndex;
6271
- if (subjectItem) {
6272
- let prevItemRect = subjectItem.getBoundingClientRect();
6273
- while (subjectItem = subjectItem && subjectItem.nextElementSibling)
6274
- if (subjectItem) {
6275
- if (subjectItem.classList.contains("builder-accordion-detail"))
6276
- continue;
6277
- const subjectItemRect = subjectItem.getBoundingClientRect();
6278
- if (subjectItemRect.left > prevItemRect.left) {
6279
- const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
6280
- if (!isNaN(index)) {
6281
- prevItemRect = subjectItemRect;
6282
- itemOrder = index;
6283
- }
6284
- } else
6285
- break;
6286
- }
6287
- }
6288
- }
6289
- if (typeof itemOrder === "number")
6290
- itemOrder = itemOrder + 1;
6291
- return itemOrder;
6292
- }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
6293
- props,
6294
- state
6295
- ]));
6296
- const accordionDetailStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
6297
- const [openGridItemOrder2, props2] = qwik.useLexicalScope();
6298
- const styles = {
6299
- order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
6300
- ...props2.grid && {
6301
- width: "100%"
6302
- }
6303
- };
6304
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
6305
- }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
6306
- openGridItemOrder,
6307
- props
6308
- ]));
6309
- return /* @__PURE__ */ qwik._jsxQ("div", null, {
6310
- class: "builder-accordion",
6311
- style: qwik._fnSignal((p0) => p0.value, [
6312
- accordionStyles
6313
- ], "p0.value")
6314
- }, (props.items || []).map((item, index) => {
6315
- qwik._jsxBranch();
6316
- return /* @__PURE__ */ qwik._jsxC(qwik.Fragment, {
6317
- children: [
6318
- /* @__PURE__ */ qwik._jsxQ("div", {
6319
- class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
6320
- "data-index": index,
6321
- onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
6322
- const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = qwik.useLexicalScope();
6323
- return onClick$1(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
6324
- }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
6325
- accordionDetailStyles,
6326
- accordionStyles,
6327
- accordionTitleStyles,
6328
- index,
6329
- onlyOneAtATime,
6330
- openGridItemOrder,
6331
- props,
6332
- state
6333
- ]),
6334
- style: {
6335
- ...accordionTitleStyles.value,
6336
- width: props.grid ? props.gridRowWidth : void 0,
6337
- order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
6338
- }
6339
- }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
6340
- get blocks() {
6341
- return item.title;
6342
- },
6343
- path: `items.${index}.title`,
6344
- get parent() {
6345
- return props.builderBlock.id;
6346
- },
6347
- get context() {
6348
- return props.builderContext;
6349
- },
6350
- get registeredComponents() {
6351
- return props.builderComponents;
6352
- },
6353
- get linkComponent() {
6354
- return props.builderLinkComponent;
6355
- },
6356
- [qwik._IMMUTABLE]: {
6357
- blocks: qwik._wrapProp(item, "title"),
6358
- context: qwik._fnSignal((p0) => p0.builderContext, [
6359
- props
6360
- ], "p0.builderContext"),
6361
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
6362
- props
6363
- ], "p0.builderLinkComponent"),
6364
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
6365
- props
6366
- ], "p0.builderBlock.id"),
6367
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
6368
- props
6369
- ], "p0.builderComponents")
6370
- }
6371
- }, 3, "hf_0"), 0, null),
6372
- state.open.includes(index) ? /* @__PURE__ */ qwik._jsxQ("div", {
6373
- class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
6374
- }, {
6375
- style: qwik._fnSignal((p0) => p0.value, [
6376
- accordionDetailStyles
6377
- ], "p0.value")
6378
- }, /* @__PURE__ */ qwik._jsxC(Blocks, {
6379
- get blocks() {
6380
- return item.detail;
6381
- },
6382
- path: `items.${index}.detail`,
6383
- get parent() {
6384
- return props.builderBlock.id;
6385
- },
6386
- get context() {
6387
- return props.builderContext;
6388
- },
6389
- get registeredComponents() {
6390
- return props.builderComponents;
6391
- },
6392
- get linkComponent() {
6393
- return props.builderLinkComponent;
6394
- },
6395
- [qwik._IMMUTABLE]: {
6396
- blocks: qwik._wrapProp(item, "detail"),
6397
- context: qwik._fnSignal((p0) => p0.builderContext, [
6398
- props
6399
- ], "p0.builderContext"),
6400
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
6401
- props
6402
- ], "p0.builderLinkComponent"),
6403
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
6404
- props
6405
- ], "p0.builderBlock.id"),
6406
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
6407
- props
6408
- ], "p0.builderComponents")
6409
- }
6410
- }, 3, "hf_1"), 1, "hf_2") : null
6051
+ name: "backgroundPosition",
6052
+ type: "text",
6053
+ defaultValue: "center",
6054
+ enum: [
6055
+ "center",
6056
+ "top",
6057
+ "left",
6058
+ "right",
6059
+ "bottom",
6060
+ "top left",
6061
+ "top right",
6062
+ "bottom left",
6063
+ "bottom right"
6411
6064
  ]
6412
- }, 1, "hf_3");
6413
- }), 1, "hf_4");
6414
- }, "Accordion_component_jkuUCHm0nt0"));
6415
- const defaultTitle = {
6416
- "@type": "@builder.io/sdk:Element",
6417
- layerName: "Accordion item title",
6418
- responsiveStyles: {
6419
- large: {
6420
- marginTop: "10px",
6421
- position: "relative",
6422
- display: "flex",
6423
- alignItems: "stretch",
6424
- flexDirection: "column",
6425
- paddingBottom: "10px"
6065
+ },
6066
+ {
6067
+ name: "altText",
6068
+ type: "string",
6069
+ helperText: "Text to display when the user has images off"
6070
+ },
6071
+ {
6072
+ name: "height",
6073
+ type: "number",
6074
+ hideFromUI: true
6075
+ },
6076
+ {
6077
+ name: "width",
6078
+ type: "number",
6079
+ hideFromUI: true
6080
+ },
6081
+ {
6082
+ name: "sizes",
6083
+ type: "string",
6084
+ hideFromUI: true
6085
+ },
6086
+ {
6087
+ name: "srcset",
6088
+ type: "string",
6089
+ hideFromUI: true
6090
+ },
6091
+ {
6092
+ name: "lazy",
6093
+ type: "boolean",
6094
+ defaultValue: true,
6095
+ hideFromUI: true
6096
+ },
6097
+ {
6098
+ name: "fitContent",
6099
+ type: "boolean",
6100
+ helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
6101
+ defaultValue: true
6102
+ },
6103
+ {
6104
+ name: "aspectRatio",
6105
+ type: "number",
6106
+ helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
6107
+ advanced: true,
6108
+ defaultValue: 0.7041
6109
+ }
6110
+ ]
6111
+ };
6112
+ const componentInfo$c = {
6113
+ name: "Core:Section",
6114
+ static: true,
6115
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
6116
+ inputs: [
6117
+ {
6118
+ name: "maxWidth",
6119
+ type: "number",
6120
+ defaultValue: 1200
6121
+ },
6122
+ {
6123
+ name: "lazyLoad",
6124
+ type: "boolean",
6125
+ defaultValue: false,
6126
+ advanced: true,
6127
+ description: "Only render this section when in view"
6426
6128
  }
6129
+ ],
6130
+ defaultStyles: {
6131
+ paddingLeft: "20px",
6132
+ paddingRight: "20px",
6133
+ paddingTop: "50px",
6134
+ paddingBottom: "50px",
6135
+ marginTop: "0px",
6136
+ width: "100vw",
6137
+ marginLeft: "calc(50% - 50vw)"
6427
6138
  },
6428
- children: [
6139
+ canHaveChildren: true,
6140
+ defaultChildren: [
6429
6141
  {
6430
6142
  "@type": "@builder.io/sdk:Element",
6431
6143
  responsiveStyles: {
6432
6144
  large: {
6433
- textAlign: "left",
6434
- display: "flex",
6435
- flexDirection: "column"
6145
+ textAlign: "center"
6436
6146
  }
6437
6147
  },
6438
6148
  component: {
6439
6149
  name: "Text",
6440
6150
  options: {
6441
- text: "I am an accordion title. Click me!"
6151
+ text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>"
6442
6152
  }
6443
6153
  }
6444
6154
  }
6445
6155
  ]
6446
6156
  };
6447
- const defaultDetail = {
6157
+ const componentInfo$b = {
6158
+ name: "Slot",
6159
+ isRSC: true,
6160
+ description: "Allow child blocks to be inserted into this content when used as a Symbol",
6161
+ docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
6162
+ image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
6163
+ // Maybe wrap this for canHaveChildren so bind children to this hm
6164
+ inputs: [
6165
+ {
6166
+ name: "name",
6167
+ type: "string",
6168
+ required: true,
6169
+ defaultValue: "children"
6170
+ }
6171
+ ]
6172
+ };
6173
+ const Slot = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
6174
+ var _a, _b;
6175
+ return /* @__PURE__ */ qwik._jsxS("div", {
6176
+ ...!((_a = props.builderContext.context) == null ? void 0 : _a.symbolId) && {
6177
+ "builder-slot": props.name
6178
+ },
6179
+ children: /* @__PURE__ */ qwik._jsxC(Blocks, {
6180
+ get parent() {
6181
+ var _a2;
6182
+ return (_a2 = props.builderContext.context) == null ? void 0 : _a2.symbolId;
6183
+ },
6184
+ get path() {
6185
+ return `symbol.data.${props.name}`;
6186
+ },
6187
+ get context() {
6188
+ return props.builderContext;
6189
+ },
6190
+ blocks: deoptSignal((_b = props.builderContext.rootState) == null ? void 0 : _b[props.name]),
6191
+ [qwik._IMMUTABLE]: {
6192
+ context: qwik._fnSignal((p0) => p0.builderContext, [
6193
+ props
6194
+ ], "p0.builderContext"),
6195
+ parent: qwik._fnSignal((p0) => {
6196
+ var _a2;
6197
+ return (_a2 = p0.builderContext.context) == null ? void 0 : _a2.symbolId;
6198
+ }, [
6199
+ props
6200
+ ], "p0.builderContext.context?.symbolId"),
6201
+ path: qwik._fnSignal((p0) => `symbol.data.${p0.name}`, [
6202
+ props
6203
+ ], "`symbol.data.${p0.name}`")
6204
+ }
6205
+ }, 3, "B1_0")
6206
+ }, {
6207
+ style: {
6208
+ pointerEvents: "auto"
6209
+ }
6210
+ }, 0, "B1_1");
6211
+ }, "Slot_component_WWgWgfV0bb0"));
6212
+ const componentInfo$a = {
6213
+ name: "Symbol",
6214
+ noWrap: true,
6215
+ static: true,
6216
+ isRSC: true,
6217
+ inputs: [
6218
+ {
6219
+ name: "symbol",
6220
+ type: "uiSymbol"
6221
+ },
6222
+ {
6223
+ name: "dataOnly",
6224
+ helperText: "Make this a data symbol that doesn't display any UI",
6225
+ type: "boolean",
6226
+ defaultValue: false,
6227
+ advanced: true,
6228
+ hideFromUI: true
6229
+ },
6230
+ {
6231
+ name: "inheritState",
6232
+ helperText: "Inherit the parent component state and data",
6233
+ type: "boolean",
6234
+ defaultValue: false,
6235
+ advanced: true
6236
+ },
6237
+ {
6238
+ name: "renderToLiquid",
6239
+ helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
6240
+ type: "boolean",
6241
+ defaultValue: false,
6242
+ advanced: true,
6243
+ hideFromUI: true
6244
+ },
6245
+ {
6246
+ name: "useChildren",
6247
+ hideFromUI: true,
6248
+ type: "boolean"
6249
+ }
6250
+ ]
6251
+ };
6252
+ const defaultTab = {
6448
6253
  "@type": "@builder.io/sdk:Element",
6449
- layerName: "Accordion item detail",
6450
6254
  responsiveStyles: {
6451
6255
  large: {
6452
- position: "relative",
6256
+ paddingLeft: "20px",
6257
+ paddingRight: "20px",
6258
+ paddingTop: "10px",
6259
+ paddingBottom: "10px",
6260
+ minWidth: "100px",
6261
+ textAlign: "center",
6453
6262
  display: "flex",
6454
- alignItems: "stretch",
6455
6263
  flexDirection: "column",
6456
- marginTop: "10px",
6457
- paddingBottom: "10px"
6264
+ cursor: "pointer",
6265
+ userSelect: "none"
6458
6266
  }
6459
6267
  },
6460
- children: [
6461
- {
6462
- "@type": "@builder.io/sdk:Element",
6463
- responsiveStyles: {
6464
- large: {
6465
- paddingTop: "50px",
6466
- textAlign: "left",
6467
- display: "flex",
6468
- flexDirection: "column",
6469
- paddingBottom: "50px"
6470
- }
6471
- },
6472
- component: {
6473
- name: "Text",
6474
- options: {
6475
- text: "I am an accordion detail, hello!"
6476
- }
6477
- }
6268
+ component: {
6269
+ name: "Text",
6270
+ options: {
6271
+ text: "New tab"
6478
6272
  }
6479
- ]
6273
+ }
6480
6274
  };
6481
- const componentInfo$8 = {
6482
- name: "Builder:Accordion",
6483
- canHaveChildren: true,
6484
- image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
6485
- defaultStyles: {
6486
- display: "flex",
6487
- flexDirection: "column",
6488
- alignItems: "stretch"
6275
+ const defaultElement = {
6276
+ "@type": "@builder.io/sdk:Element",
6277
+ responsiveStyles: {
6278
+ large: {
6279
+ height: "200px",
6280
+ display: "flex",
6281
+ marginTop: "20px",
6282
+ flexDirection: "column"
6283
+ }
6489
6284
  },
6285
+ component: {
6286
+ name: "Text",
6287
+ options: {
6288
+ text: "New tab content "
6289
+ }
6290
+ }
6291
+ };
6292
+ const componentInfo$9 = {
6293
+ name: "Builder: Tabs",
6490
6294
  inputs: [
6491
6295
  {
6492
- name: "items",
6296
+ name: "tabs",
6493
6297
  type: "list",
6494
6298
  broadcast: true,
6495
6299
  subFields: [
6496
6300
  {
6497
- name: "title",
6301
+ name: "label",
6498
6302
  type: "uiBlocks",
6499
6303
  hideFromUI: true,
6500
6304
  defaultValue: [
6501
- defaultTitle
6305
+ defaultTab
6502
6306
  ]
6503
6307
  },
6504
6308
  {
6505
- name: "detail",
6309
+ name: "content",
6506
6310
  type: "uiBlocks",
6507
6311
  hideFromUI: true,
6508
6312
  defaultValue: [
6509
- defaultDetail
6313
+ defaultElement
6510
6314
  ]
6511
6315
  }
6512
6316
  ],
6513
6317
  defaultValue: [
6514
6318
  {
6515
- title: [
6516
- defaultTitle
6319
+ label: [
6320
+ {
6321
+ ...defaultTab,
6322
+ component: {
6323
+ name: "Text",
6324
+ options: {
6325
+ text: "Tab 1"
6326
+ }
6327
+ }
6328
+ }
6517
6329
  ],
6518
- detail: [
6519
- defaultDetail
6330
+ content: [
6331
+ {
6332
+ ...defaultElement,
6333
+ component: {
6334
+ name: "Text",
6335
+ options: {
6336
+ text: "Tab 1 content"
6337
+ }
6338
+ }
6339
+ }
6520
6340
  ]
6521
6341
  },
6522
6342
  {
6523
- title: [
6524
- defaultTitle
6343
+ label: [
6344
+ {
6345
+ ...defaultTab,
6346
+ component: {
6347
+ name: "Text",
6348
+ options: {
6349
+ text: "Tab 2"
6350
+ }
6351
+ }
6352
+ }
6525
6353
  ],
6526
- detail: [
6527
- defaultDetail
6354
+ content: [
6355
+ {
6356
+ ...defaultElement,
6357
+ component: {
6358
+ name: "Text",
6359
+ options: {
6360
+ text: "Tab 2 content"
6361
+ }
6362
+ }
6363
+ }
6528
6364
  ]
6529
6365
  }
6530
- ],
6531
- showIf: (options) => !options.get("useChildrenForItems")
6532
- },
6533
- {
6534
- name: "oneAtATime",
6535
- helperText: "Only allow opening one at a time (collapse all others when new item openned)",
6536
- type: "boolean",
6537
- defaultValue: false
6366
+ ]
6538
6367
  },
6539
6368
  {
6540
- name: "grid",
6541
- helperText: "Display as a grid",
6542
- type: "boolean",
6543
- defaultValue: false
6369
+ name: "activeTabStyle",
6370
+ type: "uiStyle",
6371
+ helperText: "CSS styles for the active tab",
6372
+ defaultValue: {
6373
+ backgroundColor: "rgba(0, 0, 0, 0.1)"
6374
+ }
6544
6375
  },
6545
6376
  {
6546
- name: "gridRowWidth",
6547
- helperText: "Display as a grid",
6548
- type: "string",
6549
- showIf: (options) => options.get("grid"),
6550
- defaultValue: "25%"
6377
+ name: "defaultActiveTab",
6378
+ type: "number",
6379
+ helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
6380
+ defaultValue: 1,
6381
+ advanced: true
6551
6382
  },
6552
6383
  {
6553
- name: "useChildrenForItems",
6384
+ name: "collapsible",
6554
6385
  type: "boolean",
6555
- helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
6556
- advanced: true,
6386
+ helperText: "If on, clicking an open tab closes it so no tabs are active",
6557
6387
  defaultValue: false,
6558
- onChange: (options) => {
6559
- if (options.get("useChildrenForItems") === true)
6560
- options.set("items", []);
6561
- }
6388
+ advanced: true
6389
+ },
6390
+ {
6391
+ name: "tabHeaderLayout",
6392
+ type: "enum",
6393
+ helperText: "Change the layout of the tab headers (uses justify-content)",
6394
+ defaultValue: "flex-start",
6395
+ enum: [
6396
+ {
6397
+ label: "Center",
6398
+ value: "center"
6399
+ },
6400
+ {
6401
+ label: "Space between",
6402
+ value: "space-between"
6403
+ },
6404
+ {
6405
+ label: "Space around",
6406
+ value: "space-around"
6407
+ },
6408
+ {
6409
+ label: "Left",
6410
+ value: "flex-start"
6411
+ },
6412
+ {
6413
+ label: "Right",
6414
+ value: "flex-end"
6415
+ }
6416
+ ]
6562
6417
  }
6563
6418
  ]
6564
6419
  };
6420
+ const activeTabContent = function activeTabContent2(props, state, active) {
6421
+ return props.tabs && props.tabs[active].content;
6422
+ };
6423
+ const onClick$1 = function onClick23(props, state, index) {
6424
+ if (index === state.activeTab && props.collapsible)
6425
+ state.activeTab = -1;
6426
+ else
6427
+ state.activeTab = index;
6428
+ };
6429
+ const Tabs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
6430
+ qwik._jsxBranch();
6431
+ const state = qwik.useStore({
6432
+ activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
6433
+ });
6434
+ return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
6435
+ /* @__PURE__ */ qwik._jsxQ("div", null, {
6436
+ class: "builder-tabs-wrap",
6437
+ style: qwik._fnSignal((p0) => ({
6438
+ display: "flex",
6439
+ flexDirection: "row",
6440
+ justifyContent: p0.tabHeaderLayout || "flex-start",
6441
+ overflow: "auto"
6442
+ }), [
6443
+ props
6444
+ ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
6445
+ }, (props.tabs || []).map((tab, index) => {
6446
+ return /* @__PURE__ */ qwik._jsxQ("span", {
6447
+ class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
6448
+ onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
6449
+ const [index2, props2, state2] = qwik.useLexicalScope();
6450
+ return onClick$1(props2, state2, index2);
6451
+ }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
6452
+ index,
6453
+ props,
6454
+ state
6455
+ ]),
6456
+ style: {
6457
+ ...state.activeTab === index ? props.activeTabStyle : {}
6458
+ }
6459
+ }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
6460
+ get parent() {
6461
+ return props.builderBlock.id;
6462
+ },
6463
+ path: `component.options.tabs.${index}.label`,
6464
+ get blocks() {
6465
+ return tab.label;
6466
+ },
6467
+ get context() {
6468
+ return props.builderContext;
6469
+ },
6470
+ get registeredComponents() {
6471
+ return props.builderComponents;
6472
+ },
6473
+ get linkComponent() {
6474
+ return props.builderLinkComponent;
6475
+ },
6476
+ [qwik._IMMUTABLE]: {
6477
+ blocks: qwik._wrapProp(tab, "label"),
6478
+ context: qwik._fnSignal((p0) => p0.builderContext, [
6479
+ props
6480
+ ], "p0.builderContext"),
6481
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
6482
+ props
6483
+ ], "p0.builderLinkComponent"),
6484
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
6485
+ props
6486
+ ], "p0.builderBlock.id"),
6487
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
6488
+ props
6489
+ ], "p0.builderComponents")
6490
+ }
6491
+ }, 3, "6k_0"), 0, index);
6492
+ }), 1, null),
6493
+ activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ qwik._jsxQ("div", null, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
6494
+ get parent() {
6495
+ return props.builderBlock.id;
6496
+ },
6497
+ get path() {
6498
+ return `component.options.tabs.${state.activeTab}.content`;
6499
+ },
6500
+ blocks: activeTabContent(props, state, state.activeTab),
6501
+ get context() {
6502
+ return props.builderContext;
6503
+ },
6504
+ get registeredComponents() {
6505
+ return props.builderComponents;
6506
+ },
6507
+ get linkComponent() {
6508
+ return props.builderLinkComponent;
6509
+ },
6510
+ [qwik._IMMUTABLE]: {
6511
+ context: qwik._fnSignal((p0) => p0.builderContext, [
6512
+ props
6513
+ ], "p0.builderContext"),
6514
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
6515
+ props
6516
+ ], "p0.builderLinkComponent"),
6517
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
6518
+ props
6519
+ ], "p0.builderBlock.id"),
6520
+ path: qwik._fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
6521
+ state
6522
+ ], "`component.options.tabs.${p0.activeTab}.content`"),
6523
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
6524
+ props
6525
+ ], "p0.builderComponents")
6526
+ }
6527
+ }, 3, "6k_1"), 1, "6k_2") : null
6528
+ ], 1, "6k_3");
6529
+ }, "Tabs_component_MhWcxXy0lMY"));
6530
+ const componentInfo$8 = {
6531
+ name: "Text",
6532
+ static: true,
6533
+ isRSC: true,
6534
+ image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
6535
+ inputs: [
6536
+ {
6537
+ name: "text",
6538
+ type: "html",
6539
+ required: true,
6540
+ autoFocus: true,
6541
+ bubble: true,
6542
+ defaultValue: "Enter some text..."
6543
+ }
6544
+ ],
6545
+ defaultStyles: {
6546
+ lineHeight: "normal",
6547
+ height: "auto",
6548
+ textAlign: "center"
6549
+ }
6550
+ };
6551
+ const Text = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
6552
+ return /* @__PURE__ */ qwik._jsxQ("div", null, {
6553
+ class: "builder-text",
6554
+ dangerouslySetInnerHTML: qwik._fnSignal((p0) => {
6555
+ var _a;
6556
+ return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
6557
+ }, [
6558
+ props
6559
+ ], 'p0.text?.toString()||""'),
6560
+ style: {
6561
+ outline: "none"
6562
+ }
6563
+ }, null, 3, "yO_0");
6564
+ }, "Text_component_15p0cKUxgIE"));
6565
6565
  const componentInfo$7 = {
6566
6566
  name: "Custom Code",
6567
6567
  static: true,
@@ -7051,11 +7051,11 @@ const onSubmit = function onSubmit2(props, state, formRef, event) {
7051
7051
  return;
7052
7052
  }
7053
7053
  event.preventDefault();
7054
- const el = event.currentTarget;
7054
+ const el = event.currentTarget || event.target;
7055
7055
  const headers = props.customHeaders || {};
7056
7056
  let body;
7057
7057
  const formData = new FormData(el);
7058
- const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
7058
+ const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
7059
7059
  let value;
7060
7060
  const key = el2.name;
7061
7061
  if (el2 instanceof HTMLInputElement) {
@@ -7302,6 +7302,7 @@ const FormComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
7302
7302
  name: qwik._fnSignal((p0) => p0.name, [
7303
7303
  props
7304
7304
  ], "p0.name"),
7305
+ "preventdefault:submit": true,
7305
7306
  validate: qwik._fnSignal((p0) => p0.validate, [
7306
7307
  props
7307
7308
  ], "p0.validate")
@@ -7806,44 +7807,44 @@ const getExtraComponents = () => [
7806
7807
  const getDefaultRegisteredComponents = () => [
7807
7808
  {
7808
7809
  component: Button,
7809
- ...componentInfo$h
7810
+ ...componentInfo$g
7810
7811
  },
7811
7812
  {
7812
7813
  component: Columns,
7813
- ...componentInfo$g
7814
+ ...componentInfo$f
7814
7815
  },
7815
7816
  {
7816
7817
  component: FragmentComponent,
7817
- ...componentInfo$f
7818
+ ...componentInfo$e
7818
7819
  },
7819
7820
  {
7820
7821
  component: Image,
7821
- ...componentInfo$e
7822
+ ...componentInfo$d
7822
7823
  },
7823
7824
  {
7824
7825
  component: SectionComponent,
7825
- ...componentInfo$d
7826
+ ...componentInfo$c
7826
7827
  },
7827
7828
  {
7828
7829
  component: Slot,
7829
- ...componentInfo$c
7830
+ ...componentInfo$b
7830
7831
  },
7831
7832
  {
7832
7833
  component: Symbol$1,
7833
- ...componentInfo$b
7834
+ ...componentInfo$a
7834
7835
  },
7835
7836
  {
7836
7837
  component: Text,
7837
- ...componentInfo$9
7838
+ ...componentInfo$8
7838
7839
  },
7839
7840
  ...[
7840
7841
  {
7841
7842
  component: Tabs,
7842
- ...componentInfo$a
7843
+ ...componentInfo$9
7843
7844
  },
7844
7845
  {
7845
7846
  component: Accordion,
7846
- ...componentInfo$8
7847
+ ...componentInfo$h
7847
7848
  }
7848
7849
  ],
7849
7850
  ...getExtraComponents()
@@ -8302,7 +8303,7 @@ function isFromTrustedHost(trustedHosts, e) {
8302
8303
  const url = new URL(e.origin), hostname = url.hostname;
8303
8304
  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
8304
8305
  }
8305
- const SDK_VERSION = "0.14.22";
8306
+ const SDK_VERSION = "0.14.24";
8306
8307
  const registry = {};
8307
8308
  function register(type, info) {
8308
8309
  let typeList = registry[type];
@@ -8735,7 +8736,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
8735
8736
  const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
8736
8737
  const searchParams = new URL(location.href).searchParams;
8737
8738
  const searchParamPreviewModel = searchParams.get("builder.preview");
8738
- const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
8739
+ const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
8739
8740
  const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
8740
8741
  if (searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
8741
8742
  fetchOneEntry({