@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.
@@ -2217,1252 +2217,1252 @@ const handleABTesting = async ({ item, canTrack }) => {
2217
2217
  };
2218
2218
  };
2219
2219
  const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
2220
- const componentInfo$h = {
2221
- name: "Core:Button",
2222
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
2223
- defaultStyles: {
2224
- // TODO: make min width more intuitive and set one
2225
- appearance: "none",
2226
- paddingTop: "15px",
2227
- paddingBottom: "15px",
2228
- paddingLeft: "25px",
2229
- paddingRight: "25px",
2230
- backgroundColor: "#000000",
2231
- color: "white",
2232
- borderRadius: "4px",
2233
- textAlign: "center",
2234
- cursor: "pointer"
2220
+ const defaultTitle = {
2221
+ "@type": "@builder.io/sdk:Element",
2222
+ layerName: "Accordion item title",
2223
+ responsiveStyles: {
2224
+ large: {
2225
+ marginTop: "10px",
2226
+ position: "relative",
2227
+ display: "flex",
2228
+ alignItems: "stretch",
2229
+ flexDirection: "column",
2230
+ paddingBottom: "10px"
2231
+ }
2235
2232
  },
2236
- inputs: [
2237
- {
2238
- name: "text",
2239
- type: "text",
2240
- defaultValue: "Click me!",
2241
- bubble: true
2242
- },
2233
+ children: [
2243
2234
  {
2244
- name: "link",
2245
- type: "url",
2246
- bubble: true
2247
- },
2235
+ "@type": "@builder.io/sdk:Element",
2236
+ responsiveStyles: {
2237
+ large: {
2238
+ textAlign: "left",
2239
+ display: "flex",
2240
+ flexDirection: "column"
2241
+ }
2242
+ },
2243
+ component: {
2244
+ name: "Text",
2245
+ options: {
2246
+ text: "I am an accordion title. Click me!"
2247
+ }
2248
+ }
2249
+ }
2250
+ ]
2251
+ };
2252
+ const defaultDetail = {
2253
+ "@type": "@builder.io/sdk:Element",
2254
+ layerName: "Accordion item detail",
2255
+ responsiveStyles: {
2256
+ large: {
2257
+ position: "relative",
2258
+ display: "flex",
2259
+ alignItems: "stretch",
2260
+ flexDirection: "column",
2261
+ marginTop: "10px",
2262
+ paddingBottom: "10px"
2263
+ }
2264
+ },
2265
+ children: [
2248
2266
  {
2249
- name: "openLinkInNewTab",
2250
- type: "boolean",
2251
- defaultValue: false,
2252
- friendlyName: "Open link in new tab"
2267
+ "@type": "@builder.io/sdk:Element",
2268
+ responsiveStyles: {
2269
+ large: {
2270
+ paddingTop: "50px",
2271
+ textAlign: "left",
2272
+ display: "flex",
2273
+ flexDirection: "column",
2274
+ paddingBottom: "50px"
2275
+ }
2276
+ },
2277
+ component: {
2278
+ name: "Text",
2279
+ options: {
2280
+ text: "I am an accordion detail, hello!"
2281
+ }
2282
+ }
2253
2283
  }
2254
- ],
2255
- static: true,
2256
- noWrap: true
2284
+ ]
2257
2285
  };
2258
- const componentInfo$g = {
2259
- // TODO: ways to statically preprocess JSON for references, functions, etc
2260
- name: "Columns",
2261
- isRSC: true,
2286
+ const componentInfo$h = {
2287
+ name: "Builder:Accordion",
2288
+ canHaveChildren: true,
2289
+ image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
2290
+ defaultStyles: {
2291
+ display: "flex",
2292
+ flexDirection: "column",
2293
+ alignItems: "stretch"
2294
+ },
2262
2295
  inputs: [
2263
2296
  {
2264
- name: "columns",
2265
- type: "array",
2297
+ name: "items",
2298
+ type: "list",
2266
2299
  broadcast: true,
2267
2300
  subFields: [
2268
2301
  {
2269
- name: "blocks",
2270
- type: "array",
2302
+ name: "title",
2303
+ type: "uiBlocks",
2271
2304
  hideFromUI: true,
2272
2305
  defaultValue: [
2273
- {
2274
- "@type": "@builder.io/sdk:Element",
2275
- responsiveStyles: {
2276
- large: {
2277
- display: "flex",
2278
- flexDirection: "column",
2279
- alignItems: "stretch",
2280
- flexShrink: "0",
2281
- position: "relative",
2282
- marginTop: "30px",
2283
- textAlign: "center",
2284
- lineHeight: "normal",
2285
- height: "auto",
2286
- minHeight: "20px",
2287
- minWidth: "20px",
2288
- overflow: "hidden"
2289
- }
2290
- },
2291
- component: {
2292
- name: "Image",
2293
- options: {
2294
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2295
- backgroundPosition: "center",
2296
- backgroundSize: "cover",
2297
- aspectRatio: 0.7004048582995948
2298
- }
2299
- }
2300
- },
2301
- {
2302
- "@type": "@builder.io/sdk:Element",
2303
- responsiveStyles: {
2304
- large: {
2305
- display: "flex",
2306
- flexDirection: "column",
2307
- alignItems: "stretch",
2308
- flexShrink: "0",
2309
- position: "relative",
2310
- marginTop: "30px",
2311
- textAlign: "center",
2312
- lineHeight: "normal",
2313
- height: "auto"
2314
- }
2315
- },
2316
- component: {
2317
- name: "Text",
2318
- options: {
2319
- text: "<p>Enter some text...</p>"
2320
- }
2321
- }
2322
- }
2306
+ defaultTitle
2323
2307
  ]
2324
2308
  },
2325
2309
  {
2326
- name: "width",
2327
- type: "number",
2310
+ name: "detail",
2311
+ type: "uiBlocks",
2328
2312
  hideFromUI: true,
2329
- helperText: "Width %, e.g. set to 50 to fill half of the space"
2330
- },
2331
- {
2332
- name: "link",
2333
- type: "url",
2334
- helperText: "Optionally set a url that clicking this column will link to"
2313
+ defaultValue: [
2314
+ defaultDetail
2315
+ ]
2335
2316
  }
2336
2317
  ],
2337
2318
  defaultValue: [
2338
2319
  {
2339
- blocks: [
2340
- {
2341
- "@type": "@builder.io/sdk:Element",
2342
- responsiveStyles: {
2343
- large: {
2344
- display: "flex",
2345
- flexDirection: "column",
2346
- alignItems: "stretch",
2347
- flexShrink: "0",
2348
- position: "relative",
2349
- marginTop: "30px",
2350
- textAlign: "center",
2351
- lineHeight: "normal",
2352
- height: "auto",
2353
- minHeight: "20px",
2354
- minWidth: "20px",
2355
- overflow: "hidden"
2356
- }
2357
- },
2358
- component: {
2359
- name: "Image",
2360
- options: {
2361
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2362
- backgroundPosition: "center",
2363
- backgroundSize: "cover",
2364
- aspectRatio: 0.7004048582995948
2365
- }
2366
- }
2367
- },
2368
- {
2369
- "@type": "@builder.io/sdk:Element",
2370
- responsiveStyles: {
2371
- large: {
2372
- display: "flex",
2373
- flexDirection: "column",
2374
- alignItems: "stretch",
2375
- flexShrink: "0",
2376
- position: "relative",
2377
- marginTop: "30px",
2378
- textAlign: "center",
2379
- lineHeight: "normal",
2380
- height: "auto"
2381
- }
2382
- },
2383
- component: {
2384
- name: "Text",
2385
- options: {
2386
- text: "<p>Enter some text...</p>"
2387
- }
2388
- }
2389
- }
2320
+ title: [
2321
+ defaultTitle
2322
+ ],
2323
+ detail: [
2324
+ defaultDetail
2390
2325
  ]
2391
2326
  },
2392
2327
  {
2393
- blocks: [
2394
- {
2395
- "@type": "@builder.io/sdk:Element",
2396
- responsiveStyles: {
2397
- large: {
2398
- display: "flex",
2399
- flexDirection: "column",
2400
- alignItems: "stretch",
2401
- flexShrink: "0",
2402
- position: "relative",
2403
- marginTop: "30px",
2404
- textAlign: "center",
2405
- lineHeight: "normal",
2406
- height: "auto",
2407
- minHeight: "20px",
2408
- minWidth: "20px",
2409
- overflow: "hidden"
2410
- }
2411
- },
2412
- component: {
2413
- name: "Image",
2414
- options: {
2415
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2416
- backgroundPosition: "center",
2417
- backgroundSize: "cover",
2418
- aspectRatio: 0.7004048582995948
2419
- }
2420
- }
2421
- },
2422
- {
2423
- "@type": "@builder.io/sdk:Element",
2424
- responsiveStyles: {
2425
- large: {
2426
- display: "flex",
2427
- flexDirection: "column",
2428
- alignItems: "stretch",
2429
- flexShrink: "0",
2430
- position: "relative",
2431
- marginTop: "30px",
2432
- textAlign: "center",
2433
- lineHeight: "normal",
2434
- height: "auto"
2435
- }
2436
- },
2437
- component: {
2438
- name: "Text",
2439
- options: {
2440
- text: "<p>Enter some text...</p>"
2441
- }
2442
- }
2443
- }
2328
+ title: [
2329
+ defaultTitle
2330
+ ],
2331
+ detail: [
2332
+ defaultDetail
2444
2333
  ]
2445
2334
  }
2446
2335
  ],
2447
- onChange: (options) => {
2448
- function clearWidths() {
2449
- columns.forEach((col) => {
2450
- col.delete("width");
2451
- });
2452
- }
2453
- const columns = options.get("columns");
2454
- if (Array.isArray(columns)) {
2455
- const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
2456
- if (containsColumnWithWidth) {
2457
- const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
2458
- if (containsColumnWithoutWidth)
2459
- clearWidths();
2460
- else {
2461
- const sumWidths = columns.reduce((memo, col) => {
2462
- return memo + col.get("width");
2463
- }, 0);
2464
- const widthsDontAddUp = sumWidths !== 100;
2465
- if (widthsDontAddUp)
2466
- clearWidths();
2467
- }
2468
- }
2469
- }
2470
- }
2471
- },
2472
- {
2473
- name: "space",
2474
- type: "number",
2475
- defaultValue: 20,
2476
- helperText: "Size of gap between columns",
2477
- advanced: true
2478
- },
2479
- {
2480
- name: "stackColumnsAt",
2481
- type: "string",
2482
- defaultValue: "tablet",
2483
- helperText: "Convert horizontal columns to vertical at what device size",
2484
- enum: [
2485
- "tablet",
2486
- "mobile",
2487
- "never"
2488
- ],
2489
- advanced: true
2336
+ showIf: (options) => !options.get("useChildrenForItems")
2490
2337
  },
2491
2338
  {
2492
- name: "reverseColumnsWhenStacked",
2339
+ name: "oneAtATime",
2340
+ helperText: "Only allow opening one at a time (collapse all others when new item openned)",
2493
2341
  type: "boolean",
2494
- defaultValue: false,
2495
- helperText: "When stacking columns for mobile devices, reverse the ordering",
2496
- advanced: true
2497
- }
2498
- ]
2499
- };
2500
- const componentInfo$f = {
2501
- name: "Fragment",
2502
- static: true,
2503
- hidden: true,
2504
- canHaveChildren: true,
2505
- noWrap: true
2506
- };
2507
- const componentInfo$e = {
2508
- name: "Image",
2509
- static: true,
2510
- 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",
2511
- defaultStyles: {
2512
- position: "relative",
2513
- minHeight: "20px",
2514
- minWidth: "20px",
2515
- overflow: "hidden"
2516
- },
2517
- canHaveChildren: true,
2518
- inputs: [
2519
- {
2520
- name: "image",
2521
- type: "file",
2522
- bubble: true,
2523
- allowedFileTypes: [
2524
- "jpeg",
2525
- "jpg",
2526
- "png",
2527
- "svg"
2528
- ],
2529
- required: true,
2530
- defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
2531
- onChange: (options) => {
2532
- const DEFAULT_ASPECT_RATIO = 0.7041;
2533
- options.delete("srcset");
2534
- options.delete("noWebp");
2535
- function loadImage(url, timeout = 6e4) {
2536
- return new Promise((resolve, reject) => {
2537
- const img = document.createElement("img");
2538
- let loaded = false;
2539
- img.onload = () => {
2540
- loaded = true;
2541
- resolve(img);
2542
- };
2543
- img.addEventListener("error", (event) => {
2544
- console.warn("Image load failed", event.error);
2545
- reject(event.error);
2546
- });
2547
- img.src = url;
2548
- setTimeout(() => {
2549
- if (!loaded)
2550
- reject(new Error("Image load timed out"));
2551
- }, timeout);
2552
- });
2553
- }
2554
- function round2(num) {
2555
- return Math.round(num * 1e3) / 1e3;
2556
- }
2557
- const value = options.get("image");
2558
- const aspectRatio = options.get("aspectRatio");
2559
- fetch(value).then((res) => res.blob()).then((blob) => {
2560
- if (blob.type.includes("svg"))
2561
- options.set("noWebp", true);
2562
- });
2563
- if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
2564
- return loadImage(value).then((img) => {
2565
- const possiblyUpdatedAspectRatio = options.get("aspectRatio");
2566
- if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
2567
- if (img.width && img.height) {
2568
- options.set("aspectRatio", round2(img.height / img.width));
2569
- options.set("height", img.height);
2570
- options.set("width", img.width);
2571
- }
2572
- }
2573
- });
2574
- }
2575
- },
2576
- {
2577
- name: "backgroundSize",
2578
- type: "text",
2579
- defaultValue: "cover",
2580
- enum: [
2581
- {
2582
- label: "contain",
2583
- value: "contain",
2584
- helperText: "The image should never get cropped"
2585
- },
2586
- {
2587
- label: "cover",
2588
- value: "cover",
2589
- helperText: "The image should fill it's box, cropping when needed"
2590
- }
2591
- ]
2592
- },
2593
- {
2594
- name: "backgroundPosition",
2595
- type: "text",
2596
- defaultValue: "center",
2597
- enum: [
2598
- "center",
2599
- "top",
2600
- "left",
2601
- "right",
2602
- "bottom",
2603
- "top left",
2604
- "top right",
2605
- "bottom left",
2606
- "bottom right"
2607
- ]
2608
- },
2609
- {
2610
- name: "altText",
2611
- type: "string",
2612
- helperText: "Text to display when the user has images off"
2613
- },
2614
- {
2615
- name: "height",
2616
- type: "number",
2617
- hideFromUI: true
2618
- },
2619
- {
2620
- name: "width",
2621
- type: "number",
2622
- hideFromUI: true
2342
+ defaultValue: false
2623
2343
  },
2624
2344
  {
2625
- name: "sizes",
2626
- type: "string",
2627
- hideFromUI: true
2345
+ name: "grid",
2346
+ helperText: "Display as a grid",
2347
+ type: "boolean",
2348
+ defaultValue: false
2628
2349
  },
2629
2350
  {
2630
- name: "srcset",
2351
+ name: "gridRowWidth",
2352
+ helperText: "Display as a grid",
2631
2353
  type: "string",
2632
- hideFromUI: true
2633
- },
2634
- {
2635
- name: "lazy",
2636
- type: "boolean",
2637
- defaultValue: true,
2638
- hideFromUI: true
2354
+ showIf: (options) => options.get("grid"),
2355
+ defaultValue: "25%"
2639
2356
  },
2640
2357
  {
2641
- name: "fitContent",
2358
+ name: "useChildrenForItems",
2642
2359
  type: "boolean",
2643
- helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
2644
- defaultValue: true
2645
- },
2646
- {
2647
- name: "aspectRatio",
2648
- type: "number",
2649
- 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",
2360
+ helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
2650
2361
  advanced: true,
2651
- defaultValue: 0.7041
2362
+ defaultValue: false,
2363
+ onChange: (options) => {
2364
+ if (options.get("useChildrenForItems") === true)
2365
+ options.set("items", []);
2366
+ }
2652
2367
  }
2653
2368
  ]
2654
2369
  };
2655
- const componentInfo$d = {
2656
- name: "Core:Section",
2657
- static: true,
2658
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
2659
- inputs: [
2660
- {
2661
- name: "maxWidth",
2662
- type: "number",
2663
- defaultValue: 1200
2664
- },
2665
- {
2666
- name: "lazyLoad",
2667
- type: "boolean",
2668
- defaultValue: false,
2669
- advanced: true,
2670
- description: "Only render this section when in view"
2671
- }
2672
- ],
2673
- defaultStyles: {
2674
- paddingLeft: "20px",
2675
- paddingRight: "20px",
2676
- paddingTop: "50px",
2677
- paddingBottom: "50px",
2678
- marginTop: "0px",
2679
- width: "100vw",
2680
- marginLeft: "calc(50% - 50vw)"
2681
- },
2682
- canHaveChildren: true,
2683
- defaultChildren: [
2684
- {
2685
- "@type": "@builder.io/sdk:Element",
2686
- responsiveStyles: {
2687
- large: {
2688
- textAlign: "center"
2689
- }
2690
- },
2691
- component: {
2692
- name: "Text",
2693
- options: {
2694
- 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>"
2695
- }
2696
- }
2697
- }
2698
- ]
2370
+ const convertOrderNumberToString = (order) => {
2371
+ return order.toString();
2699
2372
  };
2700
- const componentInfo$c = {
2701
- name: "Slot",
2702
- isRSC: true,
2703
- description: "Allow child blocks to be inserted into this content when used as a Symbol",
2704
- docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
2705
- image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
2706
- // Maybe wrap this for canHaveChildren so bind children to this hm
2707
- inputs: [
2708
- {
2709
- name: "name",
2710
- type: "string",
2711
- required: true,
2712
- defaultValue: "children"
2713
- }
2714
- ]
2373
+ const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2374
+ return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
2715
2375
  };
2716
- const Slot = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
2717
- var _a, _b;
2718
- return /* @__PURE__ */ qwik._jsxS("div", {
2719
- ...!((_a = props.builderContext.context) == null ? void 0 : _a.symbolId) && {
2720
- "builder-slot": props.name
2721
- },
2722
- children: /* @__PURE__ */ qwik._jsxC(Blocks, {
2723
- get parent() {
2724
- var _a2;
2725
- return (_a2 = props.builderContext.context) == null ? void 0 : _a2.symbolId;
2726
- },
2727
- get path() {
2728
- return `symbol.data.${props.name}`;
2729
- },
2730
- get context() {
2731
- return props.builderContext;
2732
- },
2733
- blocks: deoptSignal((_b = props.builderContext.rootState) == null ? void 0 : _b[props.name]),
2734
- [qwik._IMMUTABLE]: {
2735
- context: qwik._fnSignal((p0) => p0.builderContext, [
2736
- props
2737
- ], "p0.builderContext"),
2738
- parent: qwik._fnSignal((p0) => {
2739
- var _a2;
2740
- return (_a2 = p0.builderContext.context) == null ? void 0 : _a2.symbolId;
2741
- }, [
2742
- props
2743
- ], "p0.builderContext.context?.symbolId"),
2744
- path: qwik._fnSignal((p0) => `symbol.data.${p0.name}`, [
2745
- props
2746
- ], "`symbol.data.${p0.name}`")
2747
- }
2748
- }, 3, "B1_0")
2749
- }, {
2750
- style: {
2751
- pointerEvents: "auto"
2752
- }
2753
- }, 0, "B1_1");
2754
- }, "Slot_component_WWgWgfV0bb0"));
2755
- const componentInfo$b = {
2756
- name: "Symbol",
2757
- noWrap: true,
2758
- static: true,
2759
- isRSC: true,
2760
- inputs: [
2761
- {
2762
- name: "symbol",
2763
- type: "uiSymbol"
2764
- },
2765
- {
2766
- name: "dataOnly",
2767
- helperText: "Make this a data symbol that doesn't display any UI",
2768
- type: "boolean",
2769
- defaultValue: false,
2770
- advanced: true,
2771
- hideFromUI: true
2772
- },
2773
- {
2774
- name: "inheritState",
2775
- helperText: "Inherit the parent component state and data",
2776
- type: "boolean",
2777
- defaultValue: false,
2778
- advanced: true
2779
- },
2780
- {
2781
- name: "renderToLiquid",
2782
- helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
2783
- type: "boolean",
2784
- defaultValue: false,
2785
- advanced: true,
2786
- hideFromUI: true
2787
- },
2788
- {
2789
- name: "useChildren",
2790
- hideFromUI: true,
2791
- type: "boolean"
2792
- }
2793
- ]
2376
+ const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2377
+ return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
2794
2378
  };
2795
- const defaultTab = {
2796
- "@type": "@builder.io/sdk:Element",
2797
- responsiveStyles: {
2798
- large: {
2799
- paddingLeft: "20px",
2800
- paddingRight: "20px",
2801
- paddingTop: "10px",
2802
- paddingBottom: "10px",
2803
- minWidth: "100px",
2804
- textAlign: "center",
2379
+ const onClick$2 = function onClick22(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2380
+ if (state.open.includes(index))
2381
+ state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
2382
+ else
2383
+ state.open = onlyOneAtATime.value ? [
2384
+ index
2385
+ ] : state.open.concat(index);
2386
+ };
2387
+ const Accordion = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
2388
+ const state = qwik.useStore({
2389
+ open: []
2390
+ });
2391
+ const onlyOneAtATime = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
2392
+ const [props2] = qwik.useLexicalScope();
2393
+ return Boolean(props2.grid || props2.oneAtATime);
2394
+ }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
2395
+ props
2396
+ ]));
2397
+ const accordionStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
2398
+ const [props2] = qwik.useLexicalScope();
2399
+ const styles = {
2805
2400
  display: "flex",
2401
+ alignItems: "stretch",
2806
2402
  flexDirection: "column",
2807
- cursor: "pointer",
2808
- userSelect: "none"
2809
- }
2810
- },
2811
- component: {
2812
- name: "Text",
2813
- options: {
2814
- text: "New tab"
2815
- }
2816
- }
2817
- };
2818
- const defaultElement = {
2819
- "@type": "@builder.io/sdk:Element",
2820
- responsiveStyles: {
2821
- large: {
2822
- height: "200px",
2403
+ ...props2.grid && {
2404
+ flexDirection: "row",
2405
+ alignItems: "flex-start",
2406
+ flexWrap: "wrap"
2407
+ }
2408
+ };
2409
+ return styles;
2410
+ }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
2411
+ props
2412
+ ]));
2413
+ const accordionTitleStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
2414
+ const shared = {
2823
2415
  display: "flex",
2824
- marginTop: "20px",
2825
2416
  flexDirection: "column"
2417
+ };
2418
+ const styles = {
2419
+ ...shared,
2420
+ alignItems: "stretch",
2421
+ cursor: "pointer"
2422
+ };
2423
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2424
+ }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
2425
+ const openGridItemOrder = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
2426
+ const [props2, state2] = qwik.useLexicalScope();
2427
+ let itemOrder = null;
2428
+ const getOpenGridItemPosition = props2.grid && state2.open.length;
2429
+ if (getOpenGridItemPosition && document) {
2430
+ const openItemIndex = state2.open[0];
2431
+ const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
2432
+ let subjectItem = openItem;
2433
+ itemOrder = openItemIndex;
2434
+ if (subjectItem) {
2435
+ let prevItemRect = subjectItem.getBoundingClientRect();
2436
+ while (subjectItem = subjectItem && subjectItem.nextElementSibling)
2437
+ if (subjectItem) {
2438
+ if (subjectItem.classList.contains("builder-accordion-detail"))
2439
+ continue;
2440
+ const subjectItemRect = subjectItem.getBoundingClientRect();
2441
+ if (subjectItemRect.left > prevItemRect.left) {
2442
+ const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
2443
+ if (!isNaN(index)) {
2444
+ prevItemRect = subjectItemRect;
2445
+ itemOrder = index;
2446
+ }
2447
+ } else
2448
+ break;
2449
+ }
2450
+ }
2826
2451
  }
2827
- },
2828
- component: {
2829
- name: "Text",
2830
- options: {
2831
- text: "New tab content "
2832
- }
2833
- }
2834
- };
2835
- const componentInfo$a = {
2836
- name: "Builder: Tabs",
2837
- inputs: [
2838
- {
2839
- name: "tabs",
2840
- type: "list",
2841
- broadcast: true,
2842
- subFields: [
2843
- {
2844
- name: "label",
2845
- type: "uiBlocks",
2846
- hideFromUI: true,
2847
- defaultValue: [
2848
- defaultTab
2849
- ]
2850
- },
2851
- {
2852
- name: "content",
2853
- type: "uiBlocks",
2854
- hideFromUI: true,
2855
- defaultValue: [
2856
- defaultElement
2857
- ]
2858
- }
2859
- ],
2860
- defaultValue: [
2452
+ if (typeof itemOrder === "number")
2453
+ itemOrder = itemOrder + 1;
2454
+ return itemOrder;
2455
+ }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
2456
+ props,
2457
+ state
2458
+ ]));
2459
+ const accordionDetailStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
2460
+ const [openGridItemOrder2, props2] = qwik.useLexicalScope();
2461
+ const styles = {
2462
+ order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
2463
+ ...props2.grid && {
2464
+ width: "100%"
2465
+ }
2466
+ };
2467
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2468
+ }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
2469
+ openGridItemOrder,
2470
+ props
2471
+ ]));
2472
+ return /* @__PURE__ */ qwik._jsxQ("div", null, {
2473
+ class: "builder-accordion",
2474
+ style: qwik._fnSignal((p0) => p0.value, [
2475
+ accordionStyles
2476
+ ], "p0.value")
2477
+ }, (props.items || []).map((item, index) => {
2478
+ qwik._jsxBranch();
2479
+ return /* @__PURE__ */ qwik._jsxC(qwik.Fragment, {
2480
+ children: [
2481
+ /* @__PURE__ */ qwik._jsxQ("div", {
2482
+ class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
2483
+ "data-index": index,
2484
+ onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
2485
+ const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = qwik.useLexicalScope();
2486
+ return onClick$2(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
2487
+ }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
2488
+ accordionDetailStyles,
2489
+ accordionStyles,
2490
+ accordionTitleStyles,
2491
+ index,
2492
+ onlyOneAtATime,
2493
+ openGridItemOrder,
2494
+ props,
2495
+ state
2496
+ ]),
2497
+ style: {
2498
+ ...accordionTitleStyles.value,
2499
+ width: props.grid ? props.gridRowWidth : void 0,
2500
+ order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
2501
+ }
2502
+ }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
2503
+ get blocks() {
2504
+ return item.title;
2505
+ },
2506
+ path: `items.${index}.title`,
2507
+ get parent() {
2508
+ return props.builderBlock.id;
2509
+ },
2510
+ get context() {
2511
+ return props.builderContext;
2512
+ },
2513
+ get registeredComponents() {
2514
+ return props.builderComponents;
2515
+ },
2516
+ get linkComponent() {
2517
+ return props.builderLinkComponent;
2518
+ },
2519
+ [qwik._IMMUTABLE]: {
2520
+ blocks: qwik._wrapProp(item, "title"),
2521
+ context: qwik._fnSignal((p0) => p0.builderContext, [
2522
+ props
2523
+ ], "p0.builderContext"),
2524
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
2525
+ props
2526
+ ], "p0.builderLinkComponent"),
2527
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
2528
+ props
2529
+ ], "p0.builderBlock.id"),
2530
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
2531
+ props
2532
+ ], "p0.builderComponents")
2533
+ }
2534
+ }, 3, "hf_0"), 0, null),
2535
+ state.open.includes(index) ? /* @__PURE__ */ qwik._jsxQ("div", {
2536
+ class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
2537
+ }, {
2538
+ style: qwik._fnSignal((p0) => p0.value, [
2539
+ accordionDetailStyles
2540
+ ], "p0.value")
2541
+ }, /* @__PURE__ */ qwik._jsxC(Blocks, {
2542
+ get blocks() {
2543
+ return item.detail;
2544
+ },
2545
+ path: `items.${index}.detail`,
2546
+ get parent() {
2547
+ return props.builderBlock.id;
2548
+ },
2549
+ get context() {
2550
+ return props.builderContext;
2551
+ },
2552
+ get registeredComponents() {
2553
+ return props.builderComponents;
2554
+ },
2555
+ get linkComponent() {
2556
+ return props.builderLinkComponent;
2557
+ },
2558
+ [qwik._IMMUTABLE]: {
2559
+ blocks: qwik._wrapProp(item, "detail"),
2560
+ context: qwik._fnSignal((p0) => p0.builderContext, [
2561
+ props
2562
+ ], "p0.builderContext"),
2563
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
2564
+ props
2565
+ ], "p0.builderLinkComponent"),
2566
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
2567
+ props
2568
+ ], "p0.builderBlock.id"),
2569
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
2570
+ props
2571
+ ], "p0.builderComponents")
2572
+ }
2573
+ }, 3, "hf_1"), 1, "hf_2") : null
2574
+ ]
2575
+ }, 1, "hf_3");
2576
+ }), 1, "hf_4");
2577
+ }, "Accordion_component_jkuUCHm0nt0"));
2578
+ const componentInfo$g = {
2579
+ name: "Core:Button",
2580
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
2581
+ defaultStyles: {
2582
+ // TODO: make min width more intuitive and set one
2583
+ appearance: "none",
2584
+ paddingTop: "15px",
2585
+ paddingBottom: "15px",
2586
+ paddingLeft: "25px",
2587
+ paddingRight: "25px",
2588
+ backgroundColor: "#000000",
2589
+ color: "white",
2590
+ borderRadius: "4px",
2591
+ textAlign: "center",
2592
+ cursor: "pointer"
2593
+ },
2594
+ inputs: [
2595
+ {
2596
+ name: "text",
2597
+ type: "text",
2598
+ defaultValue: "Click me!",
2599
+ bubble: true
2600
+ },
2601
+ {
2602
+ name: "link",
2603
+ type: "url",
2604
+ bubble: true
2605
+ },
2606
+ {
2607
+ name: "openLinkInNewTab",
2608
+ type: "boolean",
2609
+ defaultValue: false,
2610
+ friendlyName: "Open link in new tab"
2611
+ }
2612
+ ],
2613
+ static: true,
2614
+ noWrap: true
2615
+ };
2616
+ const componentInfo$f = {
2617
+ // TODO: ways to statically preprocess JSON for references, functions, etc
2618
+ name: "Columns",
2619
+ isRSC: true,
2620
+ inputs: [
2621
+ {
2622
+ name: "columns",
2623
+ type: "array",
2624
+ broadcast: true,
2625
+ subFields: [
2861
2626
  {
2862
- label: [
2627
+ name: "blocks",
2628
+ type: "array",
2629
+ hideFromUI: true,
2630
+ defaultValue: [
2863
2631
  {
2864
- ...defaultTab,
2632
+ "@type": "@builder.io/sdk:Element",
2633
+ responsiveStyles: {
2634
+ large: {
2635
+ display: "flex",
2636
+ flexDirection: "column",
2637
+ alignItems: "stretch",
2638
+ flexShrink: "0",
2639
+ position: "relative",
2640
+ marginTop: "30px",
2641
+ textAlign: "center",
2642
+ lineHeight: "normal",
2643
+ height: "auto",
2644
+ minHeight: "20px",
2645
+ minWidth: "20px",
2646
+ overflow: "hidden"
2647
+ }
2648
+ },
2865
2649
  component: {
2866
- name: "Text",
2650
+ name: "Image",
2867
2651
  options: {
2868
- text: "Tab 1"
2652
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2653
+ backgroundPosition: "center",
2654
+ backgroundSize: "cover",
2655
+ aspectRatio: 0.7004048582995948
2869
2656
  }
2870
2657
  }
2871
- }
2872
- ],
2873
- content: [
2658
+ },
2874
2659
  {
2875
- ...defaultElement,
2660
+ "@type": "@builder.io/sdk:Element",
2661
+ responsiveStyles: {
2662
+ large: {
2663
+ display: "flex",
2664
+ flexDirection: "column",
2665
+ alignItems: "stretch",
2666
+ flexShrink: "0",
2667
+ position: "relative",
2668
+ marginTop: "30px",
2669
+ textAlign: "center",
2670
+ lineHeight: "normal",
2671
+ height: "auto"
2672
+ }
2673
+ },
2876
2674
  component: {
2877
2675
  name: "Text",
2878
2676
  options: {
2879
- text: "Tab 1 content"
2677
+ text: "<p>Enter some text...</p>"
2880
2678
  }
2881
2679
  }
2882
2680
  }
2883
2681
  ]
2884
2682
  },
2885
2683
  {
2886
- label: [
2887
- {
2888
- ...defaultTab,
2889
- component: {
2890
- name: "Text",
2891
- options: {
2892
- text: "Tab 2"
2893
- }
2894
- }
2895
- }
2896
- ],
2897
- content: [
2684
+ name: "width",
2685
+ type: "number",
2686
+ hideFromUI: true,
2687
+ helperText: "Width %, e.g. set to 50 to fill half of the space"
2688
+ },
2689
+ {
2690
+ name: "link",
2691
+ type: "url",
2692
+ helperText: "Optionally set a url that clicking this column will link to"
2693
+ }
2694
+ ],
2695
+ defaultValue: [
2696
+ {
2697
+ blocks: [
2898
2698
  {
2899
- ...defaultElement,
2699
+ "@type": "@builder.io/sdk:Element",
2700
+ responsiveStyles: {
2701
+ large: {
2702
+ display: "flex",
2703
+ flexDirection: "column",
2704
+ alignItems: "stretch",
2705
+ flexShrink: "0",
2706
+ position: "relative",
2707
+ marginTop: "30px",
2708
+ textAlign: "center",
2709
+ lineHeight: "normal",
2710
+ height: "auto",
2711
+ minHeight: "20px",
2712
+ minWidth: "20px",
2713
+ overflow: "hidden"
2714
+ }
2715
+ },
2716
+ component: {
2717
+ name: "Image",
2718
+ options: {
2719
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2720
+ backgroundPosition: "center",
2721
+ backgroundSize: "cover",
2722
+ aspectRatio: 0.7004048582995948
2723
+ }
2724
+ }
2725
+ },
2726
+ {
2727
+ "@type": "@builder.io/sdk:Element",
2728
+ responsiveStyles: {
2729
+ large: {
2730
+ display: "flex",
2731
+ flexDirection: "column",
2732
+ alignItems: "stretch",
2733
+ flexShrink: "0",
2734
+ position: "relative",
2735
+ marginTop: "30px",
2736
+ textAlign: "center",
2737
+ lineHeight: "normal",
2738
+ height: "auto"
2739
+ }
2740
+ },
2900
2741
  component: {
2901
2742
  name: "Text",
2902
2743
  options: {
2903
- text: "Tab 2 content"
2744
+ text: "<p>Enter some text...</p>"
2745
+ }
2746
+ }
2747
+ }
2748
+ ]
2749
+ },
2750
+ {
2751
+ blocks: [
2752
+ {
2753
+ "@type": "@builder.io/sdk:Element",
2754
+ responsiveStyles: {
2755
+ large: {
2756
+ display: "flex",
2757
+ flexDirection: "column",
2758
+ alignItems: "stretch",
2759
+ flexShrink: "0",
2760
+ position: "relative",
2761
+ marginTop: "30px",
2762
+ textAlign: "center",
2763
+ lineHeight: "normal",
2764
+ height: "auto",
2765
+ minHeight: "20px",
2766
+ minWidth: "20px",
2767
+ overflow: "hidden"
2768
+ }
2769
+ },
2770
+ component: {
2771
+ name: "Image",
2772
+ options: {
2773
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2774
+ backgroundPosition: "center",
2775
+ backgroundSize: "cover",
2776
+ aspectRatio: 0.7004048582995948
2777
+ }
2778
+ }
2779
+ },
2780
+ {
2781
+ "@type": "@builder.io/sdk:Element",
2782
+ responsiveStyles: {
2783
+ large: {
2784
+ display: "flex",
2785
+ flexDirection: "column",
2786
+ alignItems: "stretch",
2787
+ flexShrink: "0",
2788
+ position: "relative",
2789
+ marginTop: "30px",
2790
+ textAlign: "center",
2791
+ lineHeight: "normal",
2792
+ height: "auto"
2793
+ }
2794
+ },
2795
+ component: {
2796
+ name: "Text",
2797
+ options: {
2798
+ text: "<p>Enter some text...</p>"
2904
2799
  }
2905
2800
  }
2906
2801
  }
2907
2802
  ]
2908
2803
  }
2909
- ]
2910
- },
2911
- {
2912
- name: "activeTabStyle",
2913
- type: "uiStyle",
2914
- helperText: "CSS styles for the active tab",
2915
- defaultValue: {
2916
- backgroundColor: "rgba(0, 0, 0, 0.1)"
2804
+ ],
2805
+ onChange: (options) => {
2806
+ function clearWidths() {
2807
+ columns.forEach((col) => {
2808
+ col.delete("width");
2809
+ });
2810
+ }
2811
+ const columns = options.get("columns");
2812
+ if (Array.isArray(columns)) {
2813
+ const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
2814
+ if (containsColumnWithWidth) {
2815
+ const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
2816
+ if (containsColumnWithoutWidth)
2817
+ clearWidths();
2818
+ else {
2819
+ const sumWidths = columns.reduce((memo, col) => {
2820
+ return memo + col.get("width");
2821
+ }, 0);
2822
+ const widthsDontAddUp = sumWidths !== 100;
2823
+ if (widthsDontAddUp)
2824
+ clearWidths();
2825
+ }
2826
+ }
2827
+ }
2917
2828
  }
2918
2829
  },
2919
2830
  {
2920
- name: "defaultActiveTab",
2831
+ name: "space",
2921
2832
  type: "number",
2922
- helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
2923
- defaultValue: 1,
2833
+ defaultValue: 20,
2834
+ helperText: "Size of gap between columns",
2924
2835
  advanced: true
2925
2836
  },
2926
2837
  {
2927
- name: "collapsible",
2838
+ name: "stackColumnsAt",
2839
+ type: "string",
2840
+ defaultValue: "tablet",
2841
+ helperText: "Convert horizontal columns to vertical at what device size",
2842
+ enum: [
2843
+ "tablet",
2844
+ "mobile",
2845
+ "never"
2846
+ ],
2847
+ advanced: true
2848
+ },
2849
+ {
2850
+ name: "reverseColumnsWhenStacked",
2928
2851
  type: "boolean",
2929
- helperText: "If on, clicking an open tab closes it so no tabs are active",
2930
2852
  defaultValue: false,
2853
+ helperText: "When stacking columns for mobile devices, reverse the ordering",
2931
2854
  advanced: true
2855
+ }
2856
+ ]
2857
+ };
2858
+ const componentInfo$e = {
2859
+ name: "Fragment",
2860
+ static: true,
2861
+ hidden: true,
2862
+ canHaveChildren: true,
2863
+ noWrap: true
2864
+ };
2865
+ const componentInfo$d = {
2866
+ name: "Image",
2867
+ static: true,
2868
+ 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",
2869
+ defaultStyles: {
2870
+ position: "relative",
2871
+ minHeight: "20px",
2872
+ minWidth: "20px",
2873
+ overflow: "hidden"
2874
+ },
2875
+ canHaveChildren: true,
2876
+ inputs: [
2877
+ {
2878
+ name: "image",
2879
+ type: "file",
2880
+ bubble: true,
2881
+ allowedFileTypes: [
2882
+ "jpeg",
2883
+ "jpg",
2884
+ "png",
2885
+ "svg"
2886
+ ],
2887
+ required: true,
2888
+ defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
2889
+ onChange: (options) => {
2890
+ const DEFAULT_ASPECT_RATIO = 0.7041;
2891
+ options.delete("srcset");
2892
+ options.delete("noWebp");
2893
+ function loadImage(url, timeout = 6e4) {
2894
+ return new Promise((resolve, reject) => {
2895
+ const img = document.createElement("img");
2896
+ let loaded = false;
2897
+ img.onload = () => {
2898
+ loaded = true;
2899
+ resolve(img);
2900
+ };
2901
+ img.addEventListener("error", (event) => {
2902
+ console.warn("Image load failed", event.error);
2903
+ reject(event.error);
2904
+ });
2905
+ img.src = url;
2906
+ setTimeout(() => {
2907
+ if (!loaded)
2908
+ reject(new Error("Image load timed out"));
2909
+ }, timeout);
2910
+ });
2911
+ }
2912
+ function round2(num) {
2913
+ return Math.round(num * 1e3) / 1e3;
2914
+ }
2915
+ const value = options.get("image");
2916
+ const aspectRatio = options.get("aspectRatio");
2917
+ fetch(value).then((res) => res.blob()).then((blob) => {
2918
+ if (blob.type.includes("svg"))
2919
+ options.set("noWebp", true);
2920
+ });
2921
+ if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
2922
+ return loadImage(value).then((img) => {
2923
+ const possiblyUpdatedAspectRatio = options.get("aspectRatio");
2924
+ if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
2925
+ if (img.width && img.height) {
2926
+ options.set("aspectRatio", round2(img.height / img.width));
2927
+ options.set("height", img.height);
2928
+ options.set("width", img.width);
2929
+ }
2930
+ }
2931
+ });
2932
+ }
2932
2933
  },
2933
2934
  {
2934
- name: "tabHeaderLayout",
2935
- type: "enum",
2936
- helperText: "Change the layout of the tab headers (uses justify-content)",
2937
- defaultValue: "flex-start",
2935
+ name: "backgroundSize",
2936
+ type: "text",
2937
+ defaultValue: "cover",
2938
2938
  enum: [
2939
2939
  {
2940
- label: "Center",
2941
- value: "center"
2942
- },
2943
- {
2944
- label: "Space between",
2945
- value: "space-between"
2946
- },
2947
- {
2948
- label: "Space around",
2949
- value: "space-around"
2950
- },
2951
- {
2952
- label: "Left",
2953
- value: "flex-start"
2940
+ label: "contain",
2941
+ value: "contain",
2942
+ helperText: "The image should never get cropped"
2954
2943
  },
2955
2944
  {
2956
- label: "Right",
2957
- value: "flex-end"
2945
+ label: "cover",
2946
+ value: "cover",
2947
+ helperText: "The image should fill it's box, cropping when needed"
2958
2948
  }
2959
2949
  ]
2960
- }
2961
- ]
2962
- };
2963
- const activeTabContent = function activeTabContent2(props, state, active) {
2964
- return props.tabs && props.tabs[active].content;
2965
- };
2966
- const onClick$2 = function onClick22(props, state, index) {
2967
- if (index === state.activeTab && props.collapsible)
2968
- state.activeTab = -1;
2969
- else
2970
- state.activeTab = index;
2971
- };
2972
- const Tabs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
2973
- qwik._jsxBranch();
2974
- const state = qwik.useStore({
2975
- activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
2976
- });
2977
- return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
2978
- /* @__PURE__ */ qwik._jsxQ("div", null, {
2979
- class: "builder-tabs-wrap",
2980
- style: qwik._fnSignal((p0) => ({
2981
- display: "flex",
2982
- flexDirection: "row",
2983
- justifyContent: p0.tabHeaderLayout || "flex-start",
2984
- overflow: "auto"
2985
- }), [
2986
- props
2987
- ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
2988
- }, (props.tabs || []).map((tab, index) => {
2989
- return /* @__PURE__ */ qwik._jsxQ("span", {
2990
- class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
2991
- onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
2992
- const [index2, props2, state2] = qwik.useLexicalScope();
2993
- return onClick$2(props2, state2, index2);
2994
- }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
2995
- index,
2996
- props,
2997
- state
2998
- ]),
2999
- style: {
3000
- ...state.activeTab === index ? props.activeTabStyle : {}
3001
- }
3002
- }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
3003
- get parent() {
3004
- return props.builderBlock.id;
3005
- },
3006
- path: `component.options.tabs.${index}.label`,
3007
- get blocks() {
3008
- return tab.label;
3009
- },
3010
- get context() {
3011
- return props.builderContext;
3012
- },
3013
- get registeredComponents() {
3014
- return props.builderComponents;
3015
- },
3016
- get linkComponent() {
3017
- return props.builderLinkComponent;
3018
- },
3019
- [qwik._IMMUTABLE]: {
3020
- blocks: qwik._wrapProp(tab, "label"),
3021
- context: qwik._fnSignal((p0) => p0.builderContext, [
3022
- props
3023
- ], "p0.builderContext"),
3024
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
3025
- props
3026
- ], "p0.builderLinkComponent"),
3027
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
3028
- props
3029
- ], "p0.builderBlock.id"),
3030
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
3031
- props
3032
- ], "p0.builderComponents")
3033
- }
3034
- }, 3, "6k_0"), 0, index);
3035
- }), 1, null),
3036
- activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ qwik._jsxQ("div", null, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
3037
- get parent() {
3038
- return props.builderBlock.id;
3039
- },
3040
- get path() {
3041
- return `component.options.tabs.${state.activeTab}.content`;
3042
- },
3043
- blocks: activeTabContent(props, state, state.activeTab),
3044
- get context() {
3045
- return props.builderContext;
3046
- },
3047
- get registeredComponents() {
3048
- return props.builderComponents;
3049
- },
3050
- get linkComponent() {
3051
- return props.builderLinkComponent;
3052
- },
3053
- [qwik._IMMUTABLE]: {
3054
- context: qwik._fnSignal((p0) => p0.builderContext, [
3055
- props
3056
- ], "p0.builderContext"),
3057
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
3058
- props
3059
- ], "p0.builderLinkComponent"),
3060
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
3061
- props
3062
- ], "p0.builderBlock.id"),
3063
- path: qwik._fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
3064
- state
3065
- ], "`component.options.tabs.${p0.activeTab}.content`"),
3066
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
3067
- props
3068
- ], "p0.builderComponents")
3069
- }
3070
- }, 3, "6k_1"), 1, "6k_2") : null
3071
- ], 1, "6k_3");
3072
- }, "Tabs_component_MhWcxXy0lMY"));
3073
- const componentInfo$9 = {
3074
- name: "Text",
3075
- static: true,
3076
- isRSC: true,
3077
- 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",
3078
- inputs: [
2950
+ },
3079
2951
  {
3080
- name: "text",
3081
- type: "html",
3082
- required: true,
3083
- autoFocus: true,
3084
- bubble: true,
3085
- defaultValue: "Enter some text..."
3086
- }
3087
- ],
3088
- defaultStyles: {
3089
- lineHeight: "normal",
3090
- height: "auto",
3091
- textAlign: "center"
3092
- }
3093
- };
3094
- const Text = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
3095
- return /* @__PURE__ */ qwik._jsxQ("div", null, {
3096
- class: "builder-text",
3097
- dangerouslySetInnerHTML: qwik._fnSignal((p0) => {
3098
- var _a;
3099
- return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
3100
- }, [
3101
- props
3102
- ], 'p0.text?.toString()||""'),
3103
- style: {
3104
- outline: "none"
3105
- }
3106
- }, null, 3, "yO_0");
3107
- }, "Text_component_15p0cKUxgIE"));
3108
- const convertOrderNumberToString = (order) => {
3109
- return order.toString();
3110
- };
3111
- const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
3112
- return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
3113
- };
3114
- const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
3115
- return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
3116
- };
3117
- const onClick$1 = function onClick23(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
3118
- if (state.open.includes(index))
3119
- state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
3120
- else
3121
- state.open = onlyOneAtATime.value ? [
3122
- index
3123
- ] : state.open.concat(index);
3124
- };
3125
- const Accordion = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
3126
- const state = qwik.useStore({
3127
- open: []
3128
- });
3129
- const onlyOneAtATime = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
3130
- const [props2] = qwik.useLexicalScope();
3131
- return Boolean(props2.grid || props2.oneAtATime);
3132
- }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
3133
- props
3134
- ]));
3135
- const accordionStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
3136
- const [props2] = qwik.useLexicalScope();
3137
- const styles = {
3138
- display: "flex",
3139
- alignItems: "stretch",
3140
- flexDirection: "column",
3141
- ...props2.grid && {
3142
- flexDirection: "row",
3143
- alignItems: "flex-start",
3144
- flexWrap: "wrap"
3145
- }
3146
- };
3147
- return styles;
3148
- }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
3149
- props
3150
- ]));
3151
- const accordionTitleStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
3152
- const shared = {
3153
- display: "flex",
3154
- flexDirection: "column"
3155
- };
3156
- const styles = {
3157
- ...shared,
3158
- alignItems: "stretch",
3159
- cursor: "pointer"
3160
- };
3161
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
3162
- }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
3163
- const openGridItemOrder = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
3164
- const [props2, state2] = qwik.useLexicalScope();
3165
- let itemOrder = null;
3166
- const getOpenGridItemPosition = props2.grid && state2.open.length;
3167
- if (getOpenGridItemPosition && document) {
3168
- const openItemIndex = state2.open[0];
3169
- const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
3170
- let subjectItem = openItem;
3171
- itemOrder = openItemIndex;
3172
- if (subjectItem) {
3173
- let prevItemRect = subjectItem.getBoundingClientRect();
3174
- while (subjectItem = subjectItem && subjectItem.nextElementSibling)
3175
- if (subjectItem) {
3176
- if (subjectItem.classList.contains("builder-accordion-detail"))
3177
- continue;
3178
- const subjectItemRect = subjectItem.getBoundingClientRect();
3179
- if (subjectItemRect.left > prevItemRect.left) {
3180
- const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
3181
- if (!isNaN(index)) {
3182
- prevItemRect = subjectItemRect;
3183
- itemOrder = index;
3184
- }
3185
- } else
3186
- break;
3187
- }
3188
- }
3189
- }
3190
- if (typeof itemOrder === "number")
3191
- itemOrder = itemOrder + 1;
3192
- return itemOrder;
3193
- }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
3194
- props,
3195
- state
3196
- ]));
3197
- const accordionDetailStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
3198
- const [openGridItemOrder2, props2] = qwik.useLexicalScope();
3199
- const styles = {
3200
- order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
3201
- ...props2.grid && {
3202
- width: "100%"
3203
- }
3204
- };
3205
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
3206
- }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
3207
- openGridItemOrder,
3208
- props
3209
- ]));
3210
- return /* @__PURE__ */ qwik._jsxQ("div", null, {
3211
- class: "builder-accordion",
3212
- style: qwik._fnSignal((p0) => p0.value, [
3213
- accordionStyles
3214
- ], "p0.value")
3215
- }, (props.items || []).map((item, index) => {
3216
- qwik._jsxBranch();
3217
- return /* @__PURE__ */ qwik._jsxC(qwik.Fragment, {
3218
- children: [
3219
- /* @__PURE__ */ qwik._jsxQ("div", {
3220
- class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
3221
- "data-index": index,
3222
- onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
3223
- const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = qwik.useLexicalScope();
3224
- return onClick$1(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
3225
- }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
3226
- accordionDetailStyles,
3227
- accordionStyles,
3228
- accordionTitleStyles,
3229
- index,
3230
- onlyOneAtATime,
3231
- openGridItemOrder,
3232
- props,
3233
- state
3234
- ]),
3235
- style: {
3236
- ...accordionTitleStyles.value,
3237
- width: props.grid ? props.gridRowWidth : void 0,
3238
- order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
3239
- }
3240
- }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
3241
- get blocks() {
3242
- return item.title;
3243
- },
3244
- path: `items.${index}.title`,
3245
- get parent() {
3246
- return props.builderBlock.id;
3247
- },
3248
- get context() {
3249
- return props.builderContext;
3250
- },
3251
- get registeredComponents() {
3252
- return props.builderComponents;
3253
- },
3254
- get linkComponent() {
3255
- return props.builderLinkComponent;
3256
- },
3257
- [qwik._IMMUTABLE]: {
3258
- blocks: qwik._wrapProp(item, "title"),
3259
- context: qwik._fnSignal((p0) => p0.builderContext, [
3260
- props
3261
- ], "p0.builderContext"),
3262
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
3263
- props
3264
- ], "p0.builderLinkComponent"),
3265
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
3266
- props
3267
- ], "p0.builderBlock.id"),
3268
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
3269
- props
3270
- ], "p0.builderComponents")
3271
- }
3272
- }, 3, "hf_0"), 0, null),
3273
- state.open.includes(index) ? /* @__PURE__ */ qwik._jsxQ("div", {
3274
- class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
3275
- }, {
3276
- style: qwik._fnSignal((p0) => p0.value, [
3277
- accordionDetailStyles
3278
- ], "p0.value")
3279
- }, /* @__PURE__ */ qwik._jsxC(Blocks, {
3280
- get blocks() {
3281
- return item.detail;
3282
- },
3283
- path: `items.${index}.detail`,
3284
- get parent() {
3285
- return props.builderBlock.id;
3286
- },
3287
- get context() {
3288
- return props.builderContext;
3289
- },
3290
- get registeredComponents() {
3291
- return props.builderComponents;
3292
- },
3293
- get linkComponent() {
3294
- return props.builderLinkComponent;
3295
- },
3296
- [qwik._IMMUTABLE]: {
3297
- blocks: qwik._wrapProp(item, "detail"),
3298
- context: qwik._fnSignal((p0) => p0.builderContext, [
3299
- props
3300
- ], "p0.builderContext"),
3301
- linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
3302
- props
3303
- ], "p0.builderLinkComponent"),
3304
- parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
3305
- props
3306
- ], "p0.builderBlock.id"),
3307
- registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
3308
- props
3309
- ], "p0.builderComponents")
3310
- }
3311
- }, 3, "hf_1"), 1, "hf_2") : null
2952
+ name: "backgroundPosition",
2953
+ type: "text",
2954
+ defaultValue: "center",
2955
+ enum: [
2956
+ "center",
2957
+ "top",
2958
+ "left",
2959
+ "right",
2960
+ "bottom",
2961
+ "top left",
2962
+ "top right",
2963
+ "bottom left",
2964
+ "bottom right"
3312
2965
  ]
3313
- }, 1, "hf_3");
3314
- }), 1, "hf_4");
3315
- }, "Accordion_component_jkuUCHm0nt0"));
3316
- const defaultTitle = {
3317
- "@type": "@builder.io/sdk:Element",
3318
- layerName: "Accordion item title",
3319
- responsiveStyles: {
3320
- large: {
3321
- marginTop: "10px",
3322
- position: "relative",
3323
- display: "flex",
3324
- alignItems: "stretch",
3325
- flexDirection: "column",
3326
- paddingBottom: "10px"
2966
+ },
2967
+ {
2968
+ name: "altText",
2969
+ type: "string",
2970
+ helperText: "Text to display when the user has images off"
2971
+ },
2972
+ {
2973
+ name: "height",
2974
+ type: "number",
2975
+ hideFromUI: true
2976
+ },
2977
+ {
2978
+ name: "width",
2979
+ type: "number",
2980
+ hideFromUI: true
2981
+ },
2982
+ {
2983
+ name: "sizes",
2984
+ type: "string",
2985
+ hideFromUI: true
2986
+ },
2987
+ {
2988
+ name: "srcset",
2989
+ type: "string",
2990
+ hideFromUI: true
2991
+ },
2992
+ {
2993
+ name: "lazy",
2994
+ type: "boolean",
2995
+ defaultValue: true,
2996
+ hideFromUI: true
2997
+ },
2998
+ {
2999
+ name: "fitContent",
3000
+ type: "boolean",
3001
+ helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
3002
+ defaultValue: true
3003
+ },
3004
+ {
3005
+ name: "aspectRatio",
3006
+ type: "number",
3007
+ 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",
3008
+ advanced: true,
3009
+ defaultValue: 0.7041
3010
+ }
3011
+ ]
3012
+ };
3013
+ const componentInfo$c = {
3014
+ name: "Core:Section",
3015
+ static: true,
3016
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
3017
+ inputs: [
3018
+ {
3019
+ name: "maxWidth",
3020
+ type: "number",
3021
+ defaultValue: 1200
3022
+ },
3023
+ {
3024
+ name: "lazyLoad",
3025
+ type: "boolean",
3026
+ defaultValue: false,
3027
+ advanced: true,
3028
+ description: "Only render this section when in view"
3327
3029
  }
3030
+ ],
3031
+ defaultStyles: {
3032
+ paddingLeft: "20px",
3033
+ paddingRight: "20px",
3034
+ paddingTop: "50px",
3035
+ paddingBottom: "50px",
3036
+ marginTop: "0px",
3037
+ width: "100vw",
3038
+ marginLeft: "calc(50% - 50vw)"
3328
3039
  },
3329
- children: [
3040
+ canHaveChildren: true,
3041
+ defaultChildren: [
3330
3042
  {
3331
3043
  "@type": "@builder.io/sdk:Element",
3332
3044
  responsiveStyles: {
3333
3045
  large: {
3334
- textAlign: "left",
3335
- display: "flex",
3336
- flexDirection: "column"
3046
+ textAlign: "center"
3337
3047
  }
3338
3048
  },
3339
3049
  component: {
3340
3050
  name: "Text",
3341
3051
  options: {
3342
- text: "I am an accordion title. Click me!"
3052
+ 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>"
3343
3053
  }
3344
3054
  }
3345
3055
  }
3346
3056
  ]
3347
3057
  };
3348
- const defaultDetail = {
3058
+ const componentInfo$b = {
3059
+ name: "Slot",
3060
+ isRSC: true,
3061
+ description: "Allow child blocks to be inserted into this content when used as a Symbol",
3062
+ docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
3063
+ image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
3064
+ // Maybe wrap this for canHaveChildren so bind children to this hm
3065
+ inputs: [
3066
+ {
3067
+ name: "name",
3068
+ type: "string",
3069
+ required: true,
3070
+ defaultValue: "children"
3071
+ }
3072
+ ]
3073
+ };
3074
+ const Slot = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
3075
+ var _a, _b;
3076
+ return /* @__PURE__ */ qwik._jsxS("div", {
3077
+ ...!((_a = props.builderContext.context) == null ? void 0 : _a.symbolId) && {
3078
+ "builder-slot": props.name
3079
+ },
3080
+ children: /* @__PURE__ */ qwik._jsxC(Blocks, {
3081
+ get parent() {
3082
+ var _a2;
3083
+ return (_a2 = props.builderContext.context) == null ? void 0 : _a2.symbolId;
3084
+ },
3085
+ get path() {
3086
+ return `symbol.data.${props.name}`;
3087
+ },
3088
+ get context() {
3089
+ return props.builderContext;
3090
+ },
3091
+ blocks: deoptSignal((_b = props.builderContext.rootState) == null ? void 0 : _b[props.name]),
3092
+ [qwik._IMMUTABLE]: {
3093
+ context: qwik._fnSignal((p0) => p0.builderContext, [
3094
+ props
3095
+ ], "p0.builderContext"),
3096
+ parent: qwik._fnSignal((p0) => {
3097
+ var _a2;
3098
+ return (_a2 = p0.builderContext.context) == null ? void 0 : _a2.symbolId;
3099
+ }, [
3100
+ props
3101
+ ], "p0.builderContext.context?.symbolId"),
3102
+ path: qwik._fnSignal((p0) => `symbol.data.${p0.name}`, [
3103
+ props
3104
+ ], "`symbol.data.${p0.name}`")
3105
+ }
3106
+ }, 3, "B1_0")
3107
+ }, {
3108
+ style: {
3109
+ pointerEvents: "auto"
3110
+ }
3111
+ }, 0, "B1_1");
3112
+ }, "Slot_component_WWgWgfV0bb0"));
3113
+ const componentInfo$a = {
3114
+ name: "Symbol",
3115
+ noWrap: true,
3116
+ static: true,
3117
+ isRSC: true,
3118
+ inputs: [
3119
+ {
3120
+ name: "symbol",
3121
+ type: "uiSymbol"
3122
+ },
3123
+ {
3124
+ name: "dataOnly",
3125
+ helperText: "Make this a data symbol that doesn't display any UI",
3126
+ type: "boolean",
3127
+ defaultValue: false,
3128
+ advanced: true,
3129
+ hideFromUI: true
3130
+ },
3131
+ {
3132
+ name: "inheritState",
3133
+ helperText: "Inherit the parent component state and data",
3134
+ type: "boolean",
3135
+ defaultValue: false,
3136
+ advanced: true
3137
+ },
3138
+ {
3139
+ name: "renderToLiquid",
3140
+ helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
3141
+ type: "boolean",
3142
+ defaultValue: false,
3143
+ advanced: true,
3144
+ hideFromUI: true
3145
+ },
3146
+ {
3147
+ name: "useChildren",
3148
+ hideFromUI: true,
3149
+ type: "boolean"
3150
+ }
3151
+ ]
3152
+ };
3153
+ const defaultTab = {
3349
3154
  "@type": "@builder.io/sdk:Element",
3350
- layerName: "Accordion item detail",
3351
3155
  responsiveStyles: {
3352
3156
  large: {
3353
- position: "relative",
3157
+ paddingLeft: "20px",
3158
+ paddingRight: "20px",
3159
+ paddingTop: "10px",
3160
+ paddingBottom: "10px",
3161
+ minWidth: "100px",
3162
+ textAlign: "center",
3354
3163
  display: "flex",
3355
- alignItems: "stretch",
3356
3164
  flexDirection: "column",
3357
- marginTop: "10px",
3358
- paddingBottom: "10px"
3165
+ cursor: "pointer",
3166
+ userSelect: "none"
3359
3167
  }
3360
3168
  },
3361
- children: [
3362
- {
3363
- "@type": "@builder.io/sdk:Element",
3364
- responsiveStyles: {
3365
- large: {
3366
- paddingTop: "50px",
3367
- textAlign: "left",
3368
- display: "flex",
3369
- flexDirection: "column",
3370
- paddingBottom: "50px"
3371
- }
3372
- },
3373
- component: {
3374
- name: "Text",
3375
- options: {
3376
- text: "I am an accordion detail, hello!"
3377
- }
3378
- }
3169
+ component: {
3170
+ name: "Text",
3171
+ options: {
3172
+ text: "New tab"
3379
3173
  }
3380
- ]
3174
+ }
3381
3175
  };
3382
- const componentInfo$8 = {
3383
- name: "Builder:Accordion",
3384
- canHaveChildren: true,
3385
- image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
3386
- defaultStyles: {
3387
- display: "flex",
3388
- flexDirection: "column",
3389
- alignItems: "stretch"
3176
+ const defaultElement = {
3177
+ "@type": "@builder.io/sdk:Element",
3178
+ responsiveStyles: {
3179
+ large: {
3180
+ height: "200px",
3181
+ display: "flex",
3182
+ marginTop: "20px",
3183
+ flexDirection: "column"
3184
+ }
3390
3185
  },
3186
+ component: {
3187
+ name: "Text",
3188
+ options: {
3189
+ text: "New tab content "
3190
+ }
3191
+ }
3192
+ };
3193
+ const componentInfo$9 = {
3194
+ name: "Builder: Tabs",
3391
3195
  inputs: [
3392
3196
  {
3393
- name: "items",
3197
+ name: "tabs",
3394
3198
  type: "list",
3395
3199
  broadcast: true,
3396
3200
  subFields: [
3397
3201
  {
3398
- name: "title",
3202
+ name: "label",
3399
3203
  type: "uiBlocks",
3400
3204
  hideFromUI: true,
3401
3205
  defaultValue: [
3402
- defaultTitle
3206
+ defaultTab
3403
3207
  ]
3404
3208
  },
3405
3209
  {
3406
- name: "detail",
3210
+ name: "content",
3407
3211
  type: "uiBlocks",
3408
3212
  hideFromUI: true,
3409
3213
  defaultValue: [
3410
- defaultDetail
3214
+ defaultElement
3411
3215
  ]
3412
3216
  }
3413
3217
  ],
3414
3218
  defaultValue: [
3415
3219
  {
3416
- title: [
3417
- defaultTitle
3220
+ label: [
3221
+ {
3222
+ ...defaultTab,
3223
+ component: {
3224
+ name: "Text",
3225
+ options: {
3226
+ text: "Tab 1"
3227
+ }
3228
+ }
3229
+ }
3418
3230
  ],
3419
- detail: [
3420
- defaultDetail
3231
+ content: [
3232
+ {
3233
+ ...defaultElement,
3234
+ component: {
3235
+ name: "Text",
3236
+ options: {
3237
+ text: "Tab 1 content"
3238
+ }
3239
+ }
3240
+ }
3421
3241
  ]
3422
3242
  },
3423
3243
  {
3424
- title: [
3425
- defaultTitle
3244
+ label: [
3245
+ {
3246
+ ...defaultTab,
3247
+ component: {
3248
+ name: "Text",
3249
+ options: {
3250
+ text: "Tab 2"
3251
+ }
3252
+ }
3253
+ }
3426
3254
  ],
3427
- detail: [
3428
- defaultDetail
3255
+ content: [
3256
+ {
3257
+ ...defaultElement,
3258
+ component: {
3259
+ name: "Text",
3260
+ options: {
3261
+ text: "Tab 2 content"
3262
+ }
3263
+ }
3264
+ }
3429
3265
  ]
3430
3266
  }
3431
- ],
3432
- showIf: (options) => !options.get("useChildrenForItems")
3433
- },
3434
- {
3435
- name: "oneAtATime",
3436
- helperText: "Only allow opening one at a time (collapse all others when new item openned)",
3437
- type: "boolean",
3438
- defaultValue: false
3267
+ ]
3439
3268
  },
3440
3269
  {
3441
- name: "grid",
3442
- helperText: "Display as a grid",
3443
- type: "boolean",
3444
- defaultValue: false
3270
+ name: "activeTabStyle",
3271
+ type: "uiStyle",
3272
+ helperText: "CSS styles for the active tab",
3273
+ defaultValue: {
3274
+ backgroundColor: "rgba(0, 0, 0, 0.1)"
3275
+ }
3445
3276
  },
3446
3277
  {
3447
- name: "gridRowWidth",
3448
- helperText: "Display as a grid",
3449
- type: "string",
3450
- showIf: (options) => options.get("grid"),
3451
- defaultValue: "25%"
3278
+ name: "defaultActiveTab",
3279
+ type: "number",
3280
+ helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
3281
+ defaultValue: 1,
3282
+ advanced: true
3452
3283
  },
3453
3284
  {
3454
- name: "useChildrenForItems",
3285
+ name: "collapsible",
3455
3286
  type: "boolean",
3456
- helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
3457
- advanced: true,
3287
+ helperText: "If on, clicking an open tab closes it so no tabs are active",
3458
3288
  defaultValue: false,
3459
- onChange: (options) => {
3460
- if (options.get("useChildrenForItems") === true)
3461
- options.set("items", []);
3462
- }
3289
+ advanced: true
3290
+ },
3291
+ {
3292
+ name: "tabHeaderLayout",
3293
+ type: "enum",
3294
+ helperText: "Change the layout of the tab headers (uses justify-content)",
3295
+ defaultValue: "flex-start",
3296
+ enum: [
3297
+ {
3298
+ label: "Center",
3299
+ value: "center"
3300
+ },
3301
+ {
3302
+ label: "Space between",
3303
+ value: "space-between"
3304
+ },
3305
+ {
3306
+ label: "Space around",
3307
+ value: "space-around"
3308
+ },
3309
+ {
3310
+ label: "Left",
3311
+ value: "flex-start"
3312
+ },
3313
+ {
3314
+ label: "Right",
3315
+ value: "flex-end"
3316
+ }
3317
+ ]
3463
3318
  }
3464
3319
  ]
3465
3320
  };
3321
+ const activeTabContent = function activeTabContent2(props, state, active) {
3322
+ return props.tabs && props.tabs[active].content;
3323
+ };
3324
+ const onClick$1 = function onClick23(props, state, index) {
3325
+ if (index === state.activeTab && props.collapsible)
3326
+ state.activeTab = -1;
3327
+ else
3328
+ state.activeTab = index;
3329
+ };
3330
+ const Tabs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
3331
+ qwik._jsxBranch();
3332
+ const state = qwik.useStore({
3333
+ activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
3334
+ });
3335
+ return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
3336
+ /* @__PURE__ */ qwik._jsxQ("div", null, {
3337
+ class: "builder-tabs-wrap",
3338
+ style: qwik._fnSignal((p0) => ({
3339
+ display: "flex",
3340
+ flexDirection: "row",
3341
+ justifyContent: p0.tabHeaderLayout || "flex-start",
3342
+ overflow: "auto"
3343
+ }), [
3344
+ props
3345
+ ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
3346
+ }, (props.tabs || []).map((tab, index) => {
3347
+ return /* @__PURE__ */ qwik._jsxQ("span", {
3348
+ class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
3349
+ onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
3350
+ const [index2, props2, state2] = qwik.useLexicalScope();
3351
+ return onClick$1(props2, state2, index2);
3352
+ }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
3353
+ index,
3354
+ props,
3355
+ state
3356
+ ]),
3357
+ style: {
3358
+ ...state.activeTab === index ? props.activeTabStyle : {}
3359
+ }
3360
+ }, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
3361
+ get parent() {
3362
+ return props.builderBlock.id;
3363
+ },
3364
+ path: `component.options.tabs.${index}.label`,
3365
+ get blocks() {
3366
+ return tab.label;
3367
+ },
3368
+ get context() {
3369
+ return props.builderContext;
3370
+ },
3371
+ get registeredComponents() {
3372
+ return props.builderComponents;
3373
+ },
3374
+ get linkComponent() {
3375
+ return props.builderLinkComponent;
3376
+ },
3377
+ [qwik._IMMUTABLE]: {
3378
+ blocks: qwik._wrapProp(tab, "label"),
3379
+ context: qwik._fnSignal((p0) => p0.builderContext, [
3380
+ props
3381
+ ], "p0.builderContext"),
3382
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
3383
+ props
3384
+ ], "p0.builderLinkComponent"),
3385
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
3386
+ props
3387
+ ], "p0.builderBlock.id"),
3388
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
3389
+ props
3390
+ ], "p0.builderComponents")
3391
+ }
3392
+ }, 3, "6k_0"), 0, index);
3393
+ }), 1, null),
3394
+ activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ qwik._jsxQ("div", null, null, /* @__PURE__ */ qwik._jsxC(Blocks, {
3395
+ get parent() {
3396
+ return props.builderBlock.id;
3397
+ },
3398
+ get path() {
3399
+ return `component.options.tabs.${state.activeTab}.content`;
3400
+ },
3401
+ blocks: activeTabContent(props, state, state.activeTab),
3402
+ get context() {
3403
+ return props.builderContext;
3404
+ },
3405
+ get registeredComponents() {
3406
+ return props.builderComponents;
3407
+ },
3408
+ get linkComponent() {
3409
+ return props.builderLinkComponent;
3410
+ },
3411
+ [qwik._IMMUTABLE]: {
3412
+ context: qwik._fnSignal((p0) => p0.builderContext, [
3413
+ props
3414
+ ], "p0.builderContext"),
3415
+ linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
3416
+ props
3417
+ ], "p0.builderLinkComponent"),
3418
+ parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
3419
+ props
3420
+ ], "p0.builderBlock.id"),
3421
+ path: qwik._fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
3422
+ state
3423
+ ], "`component.options.tabs.${p0.activeTab}.content`"),
3424
+ registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
3425
+ props
3426
+ ], "p0.builderComponents")
3427
+ }
3428
+ }, 3, "6k_1"), 1, "6k_2") : null
3429
+ ], 1, "6k_3");
3430
+ }, "Tabs_component_MhWcxXy0lMY"));
3431
+ const componentInfo$8 = {
3432
+ name: "Text",
3433
+ static: true,
3434
+ isRSC: true,
3435
+ 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",
3436
+ inputs: [
3437
+ {
3438
+ name: "text",
3439
+ type: "html",
3440
+ required: true,
3441
+ autoFocus: true,
3442
+ bubble: true,
3443
+ defaultValue: "Enter some text..."
3444
+ }
3445
+ ],
3446
+ defaultStyles: {
3447
+ lineHeight: "normal",
3448
+ height: "auto",
3449
+ textAlign: "center"
3450
+ }
3451
+ };
3452
+ const Text = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
3453
+ return /* @__PURE__ */ qwik._jsxQ("div", null, {
3454
+ class: "builder-text",
3455
+ dangerouslySetInnerHTML: qwik._fnSignal((p0) => {
3456
+ var _a;
3457
+ return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
3458
+ }, [
3459
+ props
3460
+ ], 'p0.text?.toString()||""'),
3461
+ style: {
3462
+ outline: "none"
3463
+ }
3464
+ }, null, 3, "yO_0");
3465
+ }, "Text_component_15p0cKUxgIE"));
3466
3466
  const componentInfo$7 = {
3467
3467
  name: "Custom Code",
3468
3468
  static: true,
@@ -3952,11 +3952,11 @@ const onSubmit = function onSubmit2(props, state, formRef, event) {
3952
3952
  return;
3953
3953
  }
3954
3954
  event.preventDefault();
3955
- const el = event.currentTarget;
3955
+ const el = event.currentTarget || event.target;
3956
3956
  const headers = props.customHeaders || {};
3957
3957
  let body;
3958
3958
  const formData = new FormData(el);
3959
- const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3959
+ const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3960
3960
  let value;
3961
3961
  const key = el2.name;
3962
3962
  if (el2 instanceof HTMLInputElement) {
@@ -4203,6 +4203,7 @@ const FormComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
4203
4203
  name: qwik._fnSignal((p0) => p0.name, [
4204
4204
  props
4205
4205
  ], "p0.name"),
4206
+ "preventdefault:submit": true,
4206
4207
  validate: qwik._fnSignal((p0) => p0.validate, [
4207
4208
  props
4208
4209
  ], "p0.validate")
@@ -4707,44 +4708,44 @@ const getExtraComponents = () => [
4707
4708
  const getDefaultRegisteredComponents = () => [
4708
4709
  {
4709
4710
  component: Button,
4710
- ...componentInfo$h
4711
+ ...componentInfo$g
4711
4712
  },
4712
4713
  {
4713
4714
  component: Columns,
4714
- ...componentInfo$g
4715
+ ...componentInfo$f
4715
4716
  },
4716
4717
  {
4717
4718
  component: FragmentComponent,
4718
- ...componentInfo$f
4719
+ ...componentInfo$e
4719
4720
  },
4720
4721
  {
4721
4722
  component: Image,
4722
- ...componentInfo$e
4723
+ ...componentInfo$d
4723
4724
  },
4724
4725
  {
4725
4726
  component: SectionComponent,
4726
- ...componentInfo$d
4727
+ ...componentInfo$c
4727
4728
  },
4728
4729
  {
4729
4730
  component: Slot,
4730
- ...componentInfo$c
4731
+ ...componentInfo$b
4731
4732
  },
4732
4733
  {
4733
4734
  component: Symbol$1,
4734
- ...componentInfo$b
4735
+ ...componentInfo$a
4735
4736
  },
4736
4737
  {
4737
4738
  component: Text,
4738
- ...componentInfo$9
4739
+ ...componentInfo$8
4739
4740
  },
4740
4741
  ...[
4741
4742
  {
4742
4743
  component: Tabs,
4743
- ...componentInfo$a
4744
+ ...componentInfo$9
4744
4745
  },
4745
4746
  {
4746
4747
  component: Accordion,
4747
- ...componentInfo$8
4748
+ ...componentInfo$h
4748
4749
  }
4749
4750
  ],
4750
4751
  ...getExtraComponents()
@@ -5203,7 +5204,7 @@ function isFromTrustedHost(trustedHosts, e) {
5203
5204
  const url = new URL(e.origin), hostname = url.hostname;
5204
5205
  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
5205
5206
  }
5206
- const SDK_VERSION = "0.14.22";
5207
+ const SDK_VERSION = "0.14.24";
5207
5208
  const registry = {};
5208
5209
  function register(type, info) {
5209
5210
  let typeList = registry[type];
@@ -5636,7 +5637,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
5636
5637
  const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
5637
5638
  const searchParams = new URL(location.href).searchParams;
5638
5639
  const searchParamPreviewModel = searchParams.get("builder.preview");
5639
- const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
5640
+ const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
5640
5641
  const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
5641
5642
  if (searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
5642
5643
  fetchOneEntry({