@builder.io/sdk-qwik 0.14.22 → 0.14.23

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.
@@ -2083,1252 +2083,1252 @@ const handleABTesting = async ({ item, canTrack }) => {
2083
2083
  };
2084
2084
  };
2085
2085
  const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
2086
- const componentInfo$h = {
2087
- name: "Core:Button",
2088
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
2089
- defaultStyles: {
2090
- // TODO: make min width more intuitive and set one
2091
- appearance: "none",
2092
- paddingTop: "15px",
2093
- paddingBottom: "15px",
2094
- paddingLeft: "25px",
2095
- paddingRight: "25px",
2096
- backgroundColor: "#000000",
2097
- color: "white",
2098
- borderRadius: "4px",
2099
- textAlign: "center",
2100
- cursor: "pointer"
2086
+ const defaultTitle = {
2087
+ "@type": "@builder.io/sdk:Element",
2088
+ layerName: "Accordion item title",
2089
+ responsiveStyles: {
2090
+ large: {
2091
+ marginTop: "10px",
2092
+ position: "relative",
2093
+ display: "flex",
2094
+ alignItems: "stretch",
2095
+ flexDirection: "column",
2096
+ paddingBottom: "10px"
2097
+ }
2101
2098
  },
2102
- inputs: [
2103
- {
2104
- name: "text",
2105
- type: "text",
2106
- defaultValue: "Click me!",
2107
- bubble: true
2108
- },
2099
+ children: [
2109
2100
  {
2110
- name: "link",
2111
- type: "url",
2112
- bubble: true
2113
- },
2101
+ "@type": "@builder.io/sdk:Element",
2102
+ responsiveStyles: {
2103
+ large: {
2104
+ textAlign: "left",
2105
+ display: "flex",
2106
+ flexDirection: "column"
2107
+ }
2108
+ },
2109
+ component: {
2110
+ name: "Text",
2111
+ options: {
2112
+ text: "I am an accordion title. Click me!"
2113
+ }
2114
+ }
2115
+ }
2116
+ ]
2117
+ };
2118
+ const defaultDetail = {
2119
+ "@type": "@builder.io/sdk:Element",
2120
+ layerName: "Accordion item detail",
2121
+ responsiveStyles: {
2122
+ large: {
2123
+ position: "relative",
2124
+ display: "flex",
2125
+ alignItems: "stretch",
2126
+ flexDirection: "column",
2127
+ marginTop: "10px",
2128
+ paddingBottom: "10px"
2129
+ }
2130
+ },
2131
+ children: [
2114
2132
  {
2115
- name: "openLinkInNewTab",
2116
- type: "boolean",
2117
- defaultValue: false,
2118
- friendlyName: "Open link in new tab"
2133
+ "@type": "@builder.io/sdk:Element",
2134
+ responsiveStyles: {
2135
+ large: {
2136
+ paddingTop: "50px",
2137
+ textAlign: "left",
2138
+ display: "flex",
2139
+ flexDirection: "column",
2140
+ paddingBottom: "50px"
2141
+ }
2142
+ },
2143
+ component: {
2144
+ name: "Text",
2145
+ options: {
2146
+ text: "I am an accordion detail, hello!"
2147
+ }
2148
+ }
2119
2149
  }
2120
- ],
2121
- static: true,
2122
- noWrap: true
2150
+ ]
2123
2151
  };
2124
- const componentInfo$g = {
2125
- // TODO: ways to statically preprocess JSON for references, functions, etc
2126
- name: "Columns",
2127
- isRSC: true,
2152
+ const componentInfo$h = {
2153
+ name: "Builder:Accordion",
2154
+ canHaveChildren: true,
2155
+ image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
2156
+ defaultStyles: {
2157
+ display: "flex",
2158
+ flexDirection: "column",
2159
+ alignItems: "stretch"
2160
+ },
2128
2161
  inputs: [
2129
2162
  {
2130
- name: "columns",
2131
- type: "array",
2163
+ name: "items",
2164
+ type: "list",
2132
2165
  broadcast: true,
2133
2166
  subFields: [
2134
2167
  {
2135
- name: "blocks",
2136
- type: "array",
2168
+ name: "title",
2169
+ type: "uiBlocks",
2137
2170
  hideFromUI: true,
2138
2171
  defaultValue: [
2139
- {
2140
- "@type": "@builder.io/sdk:Element",
2141
- responsiveStyles: {
2142
- large: {
2143
- display: "flex",
2144
- flexDirection: "column",
2145
- alignItems: "stretch",
2146
- flexShrink: "0",
2147
- position: "relative",
2148
- marginTop: "30px",
2149
- textAlign: "center",
2150
- lineHeight: "normal",
2151
- height: "auto",
2152
- minHeight: "20px",
2153
- minWidth: "20px",
2154
- overflow: "hidden"
2155
- }
2156
- },
2157
- component: {
2158
- name: "Image",
2159
- options: {
2160
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2161
- backgroundPosition: "center",
2162
- backgroundSize: "cover",
2163
- aspectRatio: 0.7004048582995948
2164
- }
2165
- }
2166
- },
2167
- {
2168
- "@type": "@builder.io/sdk:Element",
2169
- responsiveStyles: {
2170
- large: {
2171
- display: "flex",
2172
- flexDirection: "column",
2173
- alignItems: "stretch",
2174
- flexShrink: "0",
2175
- position: "relative",
2176
- marginTop: "30px",
2177
- textAlign: "center",
2178
- lineHeight: "normal",
2179
- height: "auto"
2180
- }
2181
- },
2182
- component: {
2183
- name: "Text",
2184
- options: {
2185
- text: "<p>Enter some text...</p>"
2186
- }
2187
- }
2188
- }
2172
+ defaultTitle
2189
2173
  ]
2190
2174
  },
2191
2175
  {
2192
- name: "width",
2193
- type: "number",
2176
+ name: "detail",
2177
+ type: "uiBlocks",
2194
2178
  hideFromUI: true,
2195
- helperText: "Width %, e.g. set to 50 to fill half of the space"
2196
- },
2197
- {
2198
- name: "link",
2199
- type: "url",
2200
- helperText: "Optionally set a url that clicking this column will link to"
2179
+ defaultValue: [
2180
+ defaultDetail
2181
+ ]
2201
2182
  }
2202
2183
  ],
2203
2184
  defaultValue: [
2204
2185
  {
2205
- blocks: [
2206
- {
2207
- "@type": "@builder.io/sdk:Element",
2208
- responsiveStyles: {
2209
- large: {
2210
- display: "flex",
2211
- flexDirection: "column",
2212
- alignItems: "stretch",
2213
- flexShrink: "0",
2214
- position: "relative",
2215
- marginTop: "30px",
2216
- textAlign: "center",
2217
- lineHeight: "normal",
2218
- height: "auto",
2219
- minHeight: "20px",
2220
- minWidth: "20px",
2221
- overflow: "hidden"
2222
- }
2223
- },
2224
- component: {
2225
- name: "Image",
2226
- options: {
2227
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2228
- backgroundPosition: "center",
2229
- backgroundSize: "cover",
2230
- aspectRatio: 0.7004048582995948
2231
- }
2232
- }
2233
- },
2234
- {
2235
- "@type": "@builder.io/sdk:Element",
2236
- responsiveStyles: {
2237
- large: {
2238
- display: "flex",
2239
- flexDirection: "column",
2240
- alignItems: "stretch",
2241
- flexShrink: "0",
2242
- position: "relative",
2243
- marginTop: "30px",
2244
- textAlign: "center",
2245
- lineHeight: "normal",
2246
- height: "auto"
2247
- }
2248
- },
2249
- component: {
2250
- name: "Text",
2251
- options: {
2252
- text: "<p>Enter some text...</p>"
2253
- }
2254
- }
2255
- }
2186
+ title: [
2187
+ defaultTitle
2188
+ ],
2189
+ detail: [
2190
+ defaultDetail
2256
2191
  ]
2257
2192
  },
2258
2193
  {
2259
- blocks: [
2260
- {
2261
- "@type": "@builder.io/sdk:Element",
2262
- responsiveStyles: {
2263
- large: {
2264
- display: "flex",
2265
- flexDirection: "column",
2266
- alignItems: "stretch",
2267
- flexShrink: "0",
2268
- position: "relative",
2269
- marginTop: "30px",
2270
- textAlign: "center",
2271
- lineHeight: "normal",
2272
- height: "auto",
2273
- minHeight: "20px",
2274
- minWidth: "20px",
2275
- overflow: "hidden"
2276
- }
2277
- },
2278
- component: {
2279
- name: "Image",
2280
- options: {
2281
- image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2282
- backgroundPosition: "center",
2283
- backgroundSize: "cover",
2284
- aspectRatio: 0.7004048582995948
2285
- }
2286
- }
2287
- },
2288
- {
2289
- "@type": "@builder.io/sdk:Element",
2290
- responsiveStyles: {
2291
- large: {
2292
- display: "flex",
2293
- flexDirection: "column",
2294
- alignItems: "stretch",
2295
- flexShrink: "0",
2296
- position: "relative",
2297
- marginTop: "30px",
2298
- textAlign: "center",
2299
- lineHeight: "normal",
2300
- height: "auto"
2301
- }
2302
- },
2303
- component: {
2304
- name: "Text",
2305
- options: {
2306
- text: "<p>Enter some text...</p>"
2307
- }
2308
- }
2309
- }
2194
+ title: [
2195
+ defaultTitle
2196
+ ],
2197
+ detail: [
2198
+ defaultDetail
2310
2199
  ]
2311
2200
  }
2312
2201
  ],
2313
- onChange: (options) => {
2314
- function clearWidths() {
2315
- columns.forEach((col) => {
2316
- col.delete("width");
2317
- });
2318
- }
2319
- const columns = options.get("columns");
2320
- if (Array.isArray(columns)) {
2321
- const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
2322
- if (containsColumnWithWidth) {
2323
- const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
2324
- if (containsColumnWithoutWidth)
2325
- clearWidths();
2326
- else {
2327
- const sumWidths = columns.reduce((memo, col) => {
2328
- return memo + col.get("width");
2329
- }, 0);
2330
- const widthsDontAddUp = sumWidths !== 100;
2331
- if (widthsDontAddUp)
2332
- clearWidths();
2333
- }
2334
- }
2335
- }
2336
- }
2337
- },
2338
- {
2339
- name: "space",
2340
- type: "number",
2341
- defaultValue: 20,
2342
- helperText: "Size of gap between columns",
2343
- advanced: true
2344
- },
2345
- {
2346
- name: "stackColumnsAt",
2347
- type: "string",
2348
- defaultValue: "tablet",
2349
- helperText: "Convert horizontal columns to vertical at what device size",
2350
- enum: [
2351
- "tablet",
2352
- "mobile",
2353
- "never"
2354
- ],
2355
- advanced: true
2202
+ showIf: (options) => !options.get("useChildrenForItems")
2356
2203
  },
2357
2204
  {
2358
- name: "reverseColumnsWhenStacked",
2205
+ name: "oneAtATime",
2206
+ helperText: "Only allow opening one at a time (collapse all others when new item openned)",
2359
2207
  type: "boolean",
2360
- defaultValue: false,
2361
- helperText: "When stacking columns for mobile devices, reverse the ordering",
2362
- advanced: true
2363
- }
2364
- ]
2365
- };
2366
- const componentInfo$f = {
2367
- name: "Fragment",
2368
- static: true,
2369
- hidden: true,
2370
- canHaveChildren: true,
2371
- noWrap: true
2372
- };
2373
- const componentInfo$e = {
2374
- name: "Image",
2375
- static: true,
2376
- 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",
2377
- defaultStyles: {
2378
- position: "relative",
2379
- minHeight: "20px",
2380
- minWidth: "20px",
2381
- overflow: "hidden"
2382
- },
2383
- canHaveChildren: true,
2384
- inputs: [
2385
- {
2386
- name: "image",
2387
- type: "file",
2388
- bubble: true,
2389
- allowedFileTypes: [
2390
- "jpeg",
2391
- "jpg",
2392
- "png",
2393
- "svg"
2394
- ],
2395
- required: true,
2396
- defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
2397
- onChange: (options) => {
2398
- const DEFAULT_ASPECT_RATIO = 0.7041;
2399
- options.delete("srcset");
2400
- options.delete("noWebp");
2401
- function loadImage(url, timeout = 6e4) {
2402
- return new Promise((resolve, reject) => {
2403
- const img = document.createElement("img");
2404
- let loaded = false;
2405
- img.onload = () => {
2406
- loaded = true;
2407
- resolve(img);
2408
- };
2409
- img.addEventListener("error", (event) => {
2410
- console.warn("Image load failed", event.error);
2411
- reject(event.error);
2412
- });
2413
- img.src = url;
2414
- setTimeout(() => {
2415
- if (!loaded)
2416
- reject(new Error("Image load timed out"));
2417
- }, timeout);
2418
- });
2419
- }
2420
- function round2(num) {
2421
- return Math.round(num * 1e3) / 1e3;
2422
- }
2423
- const value = options.get("image");
2424
- const aspectRatio = options.get("aspectRatio");
2425
- fetch(value).then((res) => res.blob()).then((blob) => {
2426
- if (blob.type.includes("svg"))
2427
- options.set("noWebp", true);
2428
- });
2429
- if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
2430
- return loadImage(value).then((img) => {
2431
- const possiblyUpdatedAspectRatio = options.get("aspectRatio");
2432
- if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
2433
- if (img.width && img.height) {
2434
- options.set("aspectRatio", round2(img.height / img.width));
2435
- options.set("height", img.height);
2436
- options.set("width", img.width);
2437
- }
2438
- }
2439
- });
2440
- }
2441
- },
2442
- {
2443
- name: "backgroundSize",
2444
- type: "text",
2445
- defaultValue: "cover",
2446
- enum: [
2447
- {
2448
- label: "contain",
2449
- value: "contain",
2450
- helperText: "The image should never get cropped"
2451
- },
2452
- {
2453
- label: "cover",
2454
- value: "cover",
2455
- helperText: "The image should fill it's box, cropping when needed"
2456
- }
2457
- ]
2458
- },
2459
- {
2460
- name: "backgroundPosition",
2461
- type: "text",
2462
- defaultValue: "center",
2463
- enum: [
2464
- "center",
2465
- "top",
2466
- "left",
2467
- "right",
2468
- "bottom",
2469
- "top left",
2470
- "top right",
2471
- "bottom left",
2472
- "bottom right"
2473
- ]
2474
- },
2475
- {
2476
- name: "altText",
2477
- type: "string",
2478
- helperText: "Text to display when the user has images off"
2479
- },
2480
- {
2481
- name: "height",
2482
- type: "number",
2483
- hideFromUI: true
2484
- },
2485
- {
2486
- name: "width",
2487
- type: "number",
2488
- hideFromUI: true
2208
+ defaultValue: false
2489
2209
  },
2490
2210
  {
2491
- name: "sizes",
2492
- type: "string",
2493
- hideFromUI: true
2211
+ name: "grid",
2212
+ helperText: "Display as a grid",
2213
+ type: "boolean",
2214
+ defaultValue: false
2494
2215
  },
2495
2216
  {
2496
- name: "srcset",
2217
+ name: "gridRowWidth",
2218
+ helperText: "Display as a grid",
2497
2219
  type: "string",
2498
- hideFromUI: true
2499
- },
2500
- {
2501
- name: "lazy",
2502
- type: "boolean",
2503
- defaultValue: true,
2504
- hideFromUI: true
2220
+ showIf: (options) => options.get("grid"),
2221
+ defaultValue: "25%"
2505
2222
  },
2506
2223
  {
2507
- name: "fitContent",
2224
+ name: "useChildrenForItems",
2508
2225
  type: "boolean",
2509
- helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
2510
- defaultValue: true
2511
- },
2512
- {
2513
- name: "aspectRatio",
2514
- type: "number",
2515
- 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",
2226
+ helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
2516
2227
  advanced: true,
2517
- defaultValue: 0.7041
2228
+ defaultValue: false,
2229
+ onChange: (options) => {
2230
+ if (options.get("useChildrenForItems") === true)
2231
+ options.set("items", []);
2232
+ }
2518
2233
  }
2519
2234
  ]
2520
2235
  };
2521
- const componentInfo$d = {
2522
- name: "Core:Section",
2523
- static: true,
2524
- image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
2525
- inputs: [
2526
- {
2527
- name: "maxWidth",
2528
- type: "number",
2529
- defaultValue: 1200
2530
- },
2531
- {
2532
- name: "lazyLoad",
2533
- type: "boolean",
2534
- defaultValue: false,
2535
- advanced: true,
2536
- description: "Only render this section when in view"
2537
- }
2538
- ],
2539
- defaultStyles: {
2540
- paddingLeft: "20px",
2541
- paddingRight: "20px",
2542
- paddingTop: "50px",
2543
- paddingBottom: "50px",
2544
- marginTop: "0px",
2545
- width: "100vw",
2546
- marginLeft: "calc(50% - 50vw)"
2547
- },
2548
- canHaveChildren: true,
2549
- defaultChildren: [
2550
- {
2551
- "@type": "@builder.io/sdk:Element",
2552
- responsiveStyles: {
2553
- large: {
2554
- textAlign: "center"
2555
- }
2556
- },
2557
- component: {
2558
- name: "Text",
2559
- options: {
2560
- 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>"
2561
- }
2562
- }
2563
- }
2564
- ]
2236
+ const convertOrderNumberToString = (order) => {
2237
+ return order.toString();
2565
2238
  };
2566
- const componentInfo$c = {
2567
- name: "Slot",
2568
- isRSC: true,
2569
- description: "Allow child blocks to be inserted into this content when used as a Symbol",
2570
- docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
2571
- image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
2572
- // Maybe wrap this for canHaveChildren so bind children to this hm
2573
- inputs: [
2574
- {
2575
- name: "name",
2576
- type: "string",
2577
- required: true,
2578
- defaultValue: "children"
2579
- }
2580
- ]
2239
+ const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2240
+ return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
2581
2241
  };
2582
- const Slot = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2583
- var _a, _b;
2584
- return /* @__PURE__ */ _jsxS("div", {
2585
- ...!((_a = props.builderContext.context) == null ? void 0 : _a.symbolId) && {
2586
- "builder-slot": props.name
2587
- },
2588
- children: /* @__PURE__ */ _jsxC(Blocks, {
2589
- get parent() {
2590
- var _a2;
2591
- return (_a2 = props.builderContext.context) == null ? void 0 : _a2.symbolId;
2592
- },
2593
- get path() {
2594
- return `symbol.data.${props.name}`;
2595
- },
2596
- get context() {
2597
- return props.builderContext;
2598
- },
2599
- blocks: deoptSignal((_b = props.builderContext.rootState) == null ? void 0 : _b[props.name]),
2600
- [_IMMUTABLE]: {
2601
- context: _fnSignal((p0) => p0.builderContext, [
2602
- props
2603
- ], "p0.builderContext"),
2604
- parent: _fnSignal((p0) => {
2605
- var _a2;
2606
- return (_a2 = p0.builderContext.context) == null ? void 0 : _a2.symbolId;
2607
- }, [
2608
- props
2609
- ], "p0.builderContext.context?.symbolId"),
2610
- path: _fnSignal((p0) => `symbol.data.${p0.name}`, [
2611
- props
2612
- ], "`symbol.data.${p0.name}`")
2613
- }
2614
- }, 3, "B1_0")
2615
- }, {
2616
- style: {
2617
- pointerEvents: "auto"
2618
- }
2619
- }, 0, "B1_1");
2620
- }, "Slot_component_WWgWgfV0bb0"));
2621
- const componentInfo$b = {
2622
- name: "Symbol",
2623
- noWrap: true,
2624
- static: true,
2625
- isRSC: true,
2626
- inputs: [
2627
- {
2628
- name: "symbol",
2629
- type: "uiSymbol"
2630
- },
2631
- {
2632
- name: "dataOnly",
2633
- helperText: "Make this a data symbol that doesn't display any UI",
2634
- type: "boolean",
2635
- defaultValue: false,
2636
- advanced: true,
2637
- hideFromUI: true
2638
- },
2639
- {
2640
- name: "inheritState",
2641
- helperText: "Inherit the parent component state and data",
2642
- type: "boolean",
2643
- defaultValue: false,
2644
- advanced: true
2645
- },
2646
- {
2647
- name: "renderToLiquid",
2648
- helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
2649
- type: "boolean",
2650
- defaultValue: false,
2651
- advanced: true,
2652
- hideFromUI: true
2653
- },
2654
- {
2655
- name: "useChildren",
2656
- hideFromUI: true,
2657
- type: "boolean"
2658
- }
2659
- ]
2242
+ const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2243
+ return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
2660
2244
  };
2661
- const defaultTab = {
2662
- "@type": "@builder.io/sdk:Element",
2663
- responsiveStyles: {
2664
- large: {
2665
- paddingLeft: "20px",
2666
- paddingRight: "20px",
2667
- paddingTop: "10px",
2668
- paddingBottom: "10px",
2669
- minWidth: "100px",
2670
- textAlign: "center",
2245
+ const onClick$2 = function onClick22(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2246
+ if (state.open.includes(index))
2247
+ state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
2248
+ else
2249
+ state.open = onlyOneAtATime.value ? [
2250
+ index
2251
+ ] : state.open.concat(index);
2252
+ };
2253
+ const Accordion = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2254
+ const state = useStore({
2255
+ open: []
2256
+ });
2257
+ const onlyOneAtATime = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2258
+ const [props2] = useLexicalScope();
2259
+ return Boolean(props2.grid || props2.oneAtATime);
2260
+ }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
2261
+ props
2262
+ ]));
2263
+ const accordionStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2264
+ const [props2] = useLexicalScope();
2265
+ const styles = {
2671
2266
  display: "flex",
2267
+ alignItems: "stretch",
2672
2268
  flexDirection: "column",
2673
- cursor: "pointer",
2674
- userSelect: "none"
2675
- }
2676
- },
2677
- component: {
2678
- name: "Text",
2679
- options: {
2680
- text: "New tab"
2681
- }
2682
- }
2683
- };
2684
- const defaultElement = {
2685
- "@type": "@builder.io/sdk:Element",
2686
- responsiveStyles: {
2687
- large: {
2688
- height: "200px",
2269
+ ...props2.grid && {
2270
+ flexDirection: "row",
2271
+ alignItems: "flex-start",
2272
+ flexWrap: "wrap"
2273
+ }
2274
+ };
2275
+ return styles;
2276
+ }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
2277
+ props
2278
+ ]));
2279
+ const accordionTitleStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2280
+ const shared = {
2689
2281
  display: "flex",
2690
- marginTop: "20px",
2691
2282
  flexDirection: "column"
2283
+ };
2284
+ const styles = {
2285
+ ...shared,
2286
+ alignItems: "stretch",
2287
+ cursor: "pointer"
2288
+ };
2289
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2290
+ }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
2291
+ const openGridItemOrder = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2292
+ const [props2, state2] = useLexicalScope();
2293
+ let itemOrder = null;
2294
+ const getOpenGridItemPosition = props2.grid && state2.open.length;
2295
+ if (getOpenGridItemPosition && document) {
2296
+ const openItemIndex = state2.open[0];
2297
+ const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
2298
+ let subjectItem = openItem;
2299
+ itemOrder = openItemIndex;
2300
+ if (subjectItem) {
2301
+ let prevItemRect = subjectItem.getBoundingClientRect();
2302
+ while (subjectItem = subjectItem && subjectItem.nextElementSibling)
2303
+ if (subjectItem) {
2304
+ if (subjectItem.classList.contains("builder-accordion-detail"))
2305
+ continue;
2306
+ const subjectItemRect = subjectItem.getBoundingClientRect();
2307
+ if (subjectItemRect.left > prevItemRect.left) {
2308
+ const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
2309
+ if (!isNaN(index)) {
2310
+ prevItemRect = subjectItemRect;
2311
+ itemOrder = index;
2312
+ }
2313
+ } else
2314
+ break;
2315
+ }
2316
+ }
2692
2317
  }
2693
- },
2694
- component: {
2695
- name: "Text",
2696
- options: {
2697
- text: "New tab content "
2698
- }
2699
- }
2700
- };
2701
- const componentInfo$a = {
2702
- name: "Builder: Tabs",
2703
- inputs: [
2704
- {
2705
- name: "tabs",
2706
- type: "list",
2707
- broadcast: true,
2708
- subFields: [
2709
- {
2710
- name: "label",
2711
- type: "uiBlocks",
2712
- hideFromUI: true,
2713
- defaultValue: [
2714
- defaultTab
2715
- ]
2716
- },
2717
- {
2718
- name: "content",
2719
- type: "uiBlocks",
2720
- hideFromUI: true,
2721
- defaultValue: [
2722
- defaultElement
2723
- ]
2724
- }
2725
- ],
2726
- defaultValue: [
2318
+ if (typeof itemOrder === "number")
2319
+ itemOrder = itemOrder + 1;
2320
+ return itemOrder;
2321
+ }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
2322
+ props,
2323
+ state
2324
+ ]));
2325
+ const accordionDetailStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2326
+ const [openGridItemOrder2, props2] = useLexicalScope();
2327
+ const styles = {
2328
+ order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
2329
+ ...props2.grid && {
2330
+ width: "100%"
2331
+ }
2332
+ };
2333
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2334
+ }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
2335
+ openGridItemOrder,
2336
+ props
2337
+ ]));
2338
+ return /* @__PURE__ */ _jsxQ("div", null, {
2339
+ class: "builder-accordion",
2340
+ style: _fnSignal((p0) => p0.value, [
2341
+ accordionStyles
2342
+ ], "p0.value")
2343
+ }, (props.items || []).map((item, index) => {
2344
+ _jsxBranch();
2345
+ return /* @__PURE__ */ _jsxC(Fragment$1, {
2346
+ children: [
2347
+ /* @__PURE__ */ _jsxQ("div", {
2348
+ class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
2349
+ "data-index": index,
2350
+ onClick$: /* @__PURE__ */ inlinedQrl((event) => {
2351
+ const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = useLexicalScope();
2352
+ return onClick$2(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
2353
+ }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
2354
+ accordionDetailStyles,
2355
+ accordionStyles,
2356
+ accordionTitleStyles,
2357
+ index,
2358
+ onlyOneAtATime,
2359
+ openGridItemOrder,
2360
+ props,
2361
+ state
2362
+ ]),
2363
+ style: {
2364
+ ...accordionTitleStyles.value,
2365
+ width: props.grid ? props.gridRowWidth : void 0,
2366
+ order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
2367
+ }
2368
+ }, null, /* @__PURE__ */ _jsxC(Blocks, {
2369
+ get blocks() {
2370
+ return item.title;
2371
+ },
2372
+ path: `items.${index}.title`,
2373
+ get parent() {
2374
+ return props.builderBlock.id;
2375
+ },
2376
+ get context() {
2377
+ return props.builderContext;
2378
+ },
2379
+ get registeredComponents() {
2380
+ return props.builderComponents;
2381
+ },
2382
+ get linkComponent() {
2383
+ return props.builderLinkComponent;
2384
+ },
2385
+ [_IMMUTABLE]: {
2386
+ blocks: _wrapProp(item, "title"),
2387
+ context: _fnSignal((p0) => p0.builderContext, [
2388
+ props
2389
+ ], "p0.builderContext"),
2390
+ linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
2391
+ props
2392
+ ], "p0.builderLinkComponent"),
2393
+ parent: _fnSignal((p0) => p0.builderBlock.id, [
2394
+ props
2395
+ ], "p0.builderBlock.id"),
2396
+ registeredComponents: _fnSignal((p0) => p0.builderComponents, [
2397
+ props
2398
+ ], "p0.builderComponents")
2399
+ }
2400
+ }, 3, "hf_0"), 0, null),
2401
+ state.open.includes(index) ? /* @__PURE__ */ _jsxQ("div", {
2402
+ class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
2403
+ }, {
2404
+ style: _fnSignal((p0) => p0.value, [
2405
+ accordionDetailStyles
2406
+ ], "p0.value")
2407
+ }, /* @__PURE__ */ _jsxC(Blocks, {
2408
+ get blocks() {
2409
+ return item.detail;
2410
+ },
2411
+ path: `items.${index}.detail`,
2412
+ get parent() {
2413
+ return props.builderBlock.id;
2414
+ },
2415
+ get context() {
2416
+ return props.builderContext;
2417
+ },
2418
+ get registeredComponents() {
2419
+ return props.builderComponents;
2420
+ },
2421
+ get linkComponent() {
2422
+ return props.builderLinkComponent;
2423
+ },
2424
+ [_IMMUTABLE]: {
2425
+ blocks: _wrapProp(item, "detail"),
2426
+ context: _fnSignal((p0) => p0.builderContext, [
2427
+ props
2428
+ ], "p0.builderContext"),
2429
+ linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
2430
+ props
2431
+ ], "p0.builderLinkComponent"),
2432
+ parent: _fnSignal((p0) => p0.builderBlock.id, [
2433
+ props
2434
+ ], "p0.builderBlock.id"),
2435
+ registeredComponents: _fnSignal((p0) => p0.builderComponents, [
2436
+ props
2437
+ ], "p0.builderComponents")
2438
+ }
2439
+ }, 3, "hf_1"), 1, "hf_2") : null
2440
+ ]
2441
+ }, 1, "hf_3");
2442
+ }), 1, "hf_4");
2443
+ }, "Accordion_component_jkuUCHm0nt0"));
2444
+ const componentInfo$g = {
2445
+ name: "Core:Button",
2446
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
2447
+ defaultStyles: {
2448
+ // TODO: make min width more intuitive and set one
2449
+ appearance: "none",
2450
+ paddingTop: "15px",
2451
+ paddingBottom: "15px",
2452
+ paddingLeft: "25px",
2453
+ paddingRight: "25px",
2454
+ backgroundColor: "#000000",
2455
+ color: "white",
2456
+ borderRadius: "4px",
2457
+ textAlign: "center",
2458
+ cursor: "pointer"
2459
+ },
2460
+ inputs: [
2461
+ {
2462
+ name: "text",
2463
+ type: "text",
2464
+ defaultValue: "Click me!",
2465
+ bubble: true
2466
+ },
2467
+ {
2468
+ name: "link",
2469
+ type: "url",
2470
+ bubble: true
2471
+ },
2472
+ {
2473
+ name: "openLinkInNewTab",
2474
+ type: "boolean",
2475
+ defaultValue: false,
2476
+ friendlyName: "Open link in new tab"
2477
+ }
2478
+ ],
2479
+ static: true,
2480
+ noWrap: true
2481
+ };
2482
+ const componentInfo$f = {
2483
+ // TODO: ways to statically preprocess JSON for references, functions, etc
2484
+ name: "Columns",
2485
+ isRSC: true,
2486
+ inputs: [
2487
+ {
2488
+ name: "columns",
2489
+ type: "array",
2490
+ broadcast: true,
2491
+ subFields: [
2727
2492
  {
2728
- label: [
2493
+ name: "blocks",
2494
+ type: "array",
2495
+ hideFromUI: true,
2496
+ defaultValue: [
2729
2497
  {
2730
- ...defaultTab,
2498
+ "@type": "@builder.io/sdk:Element",
2499
+ responsiveStyles: {
2500
+ large: {
2501
+ display: "flex",
2502
+ flexDirection: "column",
2503
+ alignItems: "stretch",
2504
+ flexShrink: "0",
2505
+ position: "relative",
2506
+ marginTop: "30px",
2507
+ textAlign: "center",
2508
+ lineHeight: "normal",
2509
+ height: "auto",
2510
+ minHeight: "20px",
2511
+ minWidth: "20px",
2512
+ overflow: "hidden"
2513
+ }
2514
+ },
2731
2515
  component: {
2732
- name: "Text",
2516
+ name: "Image",
2733
2517
  options: {
2734
- text: "Tab 1"
2518
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2519
+ backgroundPosition: "center",
2520
+ backgroundSize: "cover",
2521
+ aspectRatio: 0.7004048582995948
2735
2522
  }
2736
2523
  }
2737
- }
2738
- ],
2739
- content: [
2524
+ },
2740
2525
  {
2741
- ...defaultElement,
2526
+ "@type": "@builder.io/sdk:Element",
2527
+ responsiveStyles: {
2528
+ large: {
2529
+ display: "flex",
2530
+ flexDirection: "column",
2531
+ alignItems: "stretch",
2532
+ flexShrink: "0",
2533
+ position: "relative",
2534
+ marginTop: "30px",
2535
+ textAlign: "center",
2536
+ lineHeight: "normal",
2537
+ height: "auto"
2538
+ }
2539
+ },
2742
2540
  component: {
2743
2541
  name: "Text",
2744
2542
  options: {
2745
- text: "Tab 1 content"
2543
+ text: "<p>Enter some text...</p>"
2746
2544
  }
2747
2545
  }
2748
2546
  }
2749
2547
  ]
2750
2548
  },
2751
2549
  {
2752
- label: [
2753
- {
2754
- ...defaultTab,
2755
- component: {
2756
- name: "Text",
2757
- options: {
2758
- text: "Tab 2"
2759
- }
2760
- }
2761
- }
2762
- ],
2763
- content: [
2550
+ name: "width",
2551
+ type: "number",
2552
+ hideFromUI: true,
2553
+ helperText: "Width %, e.g. set to 50 to fill half of the space"
2554
+ },
2555
+ {
2556
+ name: "link",
2557
+ type: "url",
2558
+ helperText: "Optionally set a url that clicking this column will link to"
2559
+ }
2560
+ ],
2561
+ defaultValue: [
2562
+ {
2563
+ blocks: [
2764
2564
  {
2765
- ...defaultElement,
2565
+ "@type": "@builder.io/sdk:Element",
2566
+ responsiveStyles: {
2567
+ large: {
2568
+ display: "flex",
2569
+ flexDirection: "column",
2570
+ alignItems: "stretch",
2571
+ flexShrink: "0",
2572
+ position: "relative",
2573
+ marginTop: "30px",
2574
+ textAlign: "center",
2575
+ lineHeight: "normal",
2576
+ height: "auto",
2577
+ minHeight: "20px",
2578
+ minWidth: "20px",
2579
+ overflow: "hidden"
2580
+ }
2581
+ },
2582
+ component: {
2583
+ name: "Image",
2584
+ options: {
2585
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2586
+ backgroundPosition: "center",
2587
+ backgroundSize: "cover",
2588
+ aspectRatio: 0.7004048582995948
2589
+ }
2590
+ }
2591
+ },
2592
+ {
2593
+ "@type": "@builder.io/sdk:Element",
2594
+ responsiveStyles: {
2595
+ large: {
2596
+ display: "flex",
2597
+ flexDirection: "column",
2598
+ alignItems: "stretch",
2599
+ flexShrink: "0",
2600
+ position: "relative",
2601
+ marginTop: "30px",
2602
+ textAlign: "center",
2603
+ lineHeight: "normal",
2604
+ height: "auto"
2605
+ }
2606
+ },
2766
2607
  component: {
2767
2608
  name: "Text",
2768
2609
  options: {
2769
- text: "Tab 2 content"
2610
+ text: "<p>Enter some text...</p>"
2611
+ }
2612
+ }
2613
+ }
2614
+ ]
2615
+ },
2616
+ {
2617
+ blocks: [
2618
+ {
2619
+ "@type": "@builder.io/sdk:Element",
2620
+ responsiveStyles: {
2621
+ large: {
2622
+ display: "flex",
2623
+ flexDirection: "column",
2624
+ alignItems: "stretch",
2625
+ flexShrink: "0",
2626
+ position: "relative",
2627
+ marginTop: "30px",
2628
+ textAlign: "center",
2629
+ lineHeight: "normal",
2630
+ height: "auto",
2631
+ minHeight: "20px",
2632
+ minWidth: "20px",
2633
+ overflow: "hidden"
2634
+ }
2635
+ },
2636
+ component: {
2637
+ name: "Image",
2638
+ options: {
2639
+ image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
2640
+ backgroundPosition: "center",
2641
+ backgroundSize: "cover",
2642
+ aspectRatio: 0.7004048582995948
2643
+ }
2644
+ }
2645
+ },
2646
+ {
2647
+ "@type": "@builder.io/sdk:Element",
2648
+ responsiveStyles: {
2649
+ large: {
2650
+ display: "flex",
2651
+ flexDirection: "column",
2652
+ alignItems: "stretch",
2653
+ flexShrink: "0",
2654
+ position: "relative",
2655
+ marginTop: "30px",
2656
+ textAlign: "center",
2657
+ lineHeight: "normal",
2658
+ height: "auto"
2659
+ }
2660
+ },
2661
+ component: {
2662
+ name: "Text",
2663
+ options: {
2664
+ text: "<p>Enter some text...</p>"
2770
2665
  }
2771
2666
  }
2772
2667
  }
2773
2668
  ]
2774
2669
  }
2775
- ]
2776
- },
2777
- {
2778
- name: "activeTabStyle",
2779
- type: "uiStyle",
2780
- helperText: "CSS styles for the active tab",
2781
- defaultValue: {
2782
- backgroundColor: "rgba(0, 0, 0, 0.1)"
2670
+ ],
2671
+ onChange: (options) => {
2672
+ function clearWidths() {
2673
+ columns.forEach((col) => {
2674
+ col.delete("width");
2675
+ });
2676
+ }
2677
+ const columns = options.get("columns");
2678
+ if (Array.isArray(columns)) {
2679
+ const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
2680
+ if (containsColumnWithWidth) {
2681
+ const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
2682
+ if (containsColumnWithoutWidth)
2683
+ clearWidths();
2684
+ else {
2685
+ const sumWidths = columns.reduce((memo, col) => {
2686
+ return memo + col.get("width");
2687
+ }, 0);
2688
+ const widthsDontAddUp = sumWidths !== 100;
2689
+ if (widthsDontAddUp)
2690
+ clearWidths();
2691
+ }
2692
+ }
2693
+ }
2783
2694
  }
2784
2695
  },
2785
2696
  {
2786
- name: "defaultActiveTab",
2697
+ name: "space",
2787
2698
  type: "number",
2788
- helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
2789
- defaultValue: 1,
2699
+ defaultValue: 20,
2700
+ helperText: "Size of gap between columns",
2790
2701
  advanced: true
2791
2702
  },
2792
2703
  {
2793
- name: "collapsible",
2704
+ name: "stackColumnsAt",
2705
+ type: "string",
2706
+ defaultValue: "tablet",
2707
+ helperText: "Convert horizontal columns to vertical at what device size",
2708
+ enum: [
2709
+ "tablet",
2710
+ "mobile",
2711
+ "never"
2712
+ ],
2713
+ advanced: true
2714
+ },
2715
+ {
2716
+ name: "reverseColumnsWhenStacked",
2794
2717
  type: "boolean",
2795
- helperText: "If on, clicking an open tab closes it so no tabs are active",
2796
2718
  defaultValue: false,
2719
+ helperText: "When stacking columns for mobile devices, reverse the ordering",
2797
2720
  advanced: true
2721
+ }
2722
+ ]
2723
+ };
2724
+ const componentInfo$e = {
2725
+ name: "Fragment",
2726
+ static: true,
2727
+ hidden: true,
2728
+ canHaveChildren: true,
2729
+ noWrap: true
2730
+ };
2731
+ const componentInfo$d = {
2732
+ name: "Image",
2733
+ static: true,
2734
+ 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",
2735
+ defaultStyles: {
2736
+ position: "relative",
2737
+ minHeight: "20px",
2738
+ minWidth: "20px",
2739
+ overflow: "hidden"
2740
+ },
2741
+ canHaveChildren: true,
2742
+ inputs: [
2743
+ {
2744
+ name: "image",
2745
+ type: "file",
2746
+ bubble: true,
2747
+ allowedFileTypes: [
2748
+ "jpeg",
2749
+ "jpg",
2750
+ "png",
2751
+ "svg"
2752
+ ],
2753
+ required: true,
2754
+ defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
2755
+ onChange: (options) => {
2756
+ const DEFAULT_ASPECT_RATIO = 0.7041;
2757
+ options.delete("srcset");
2758
+ options.delete("noWebp");
2759
+ function loadImage(url, timeout = 6e4) {
2760
+ return new Promise((resolve, reject) => {
2761
+ const img = document.createElement("img");
2762
+ let loaded = false;
2763
+ img.onload = () => {
2764
+ loaded = true;
2765
+ resolve(img);
2766
+ };
2767
+ img.addEventListener("error", (event) => {
2768
+ console.warn("Image load failed", event.error);
2769
+ reject(event.error);
2770
+ });
2771
+ img.src = url;
2772
+ setTimeout(() => {
2773
+ if (!loaded)
2774
+ reject(new Error("Image load timed out"));
2775
+ }, timeout);
2776
+ });
2777
+ }
2778
+ function round2(num) {
2779
+ return Math.round(num * 1e3) / 1e3;
2780
+ }
2781
+ const value = options.get("image");
2782
+ const aspectRatio = options.get("aspectRatio");
2783
+ fetch(value).then((res) => res.blob()).then((blob) => {
2784
+ if (blob.type.includes("svg"))
2785
+ options.set("noWebp", true);
2786
+ });
2787
+ if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
2788
+ return loadImage(value).then((img) => {
2789
+ const possiblyUpdatedAspectRatio = options.get("aspectRatio");
2790
+ if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
2791
+ if (img.width && img.height) {
2792
+ options.set("aspectRatio", round2(img.height / img.width));
2793
+ options.set("height", img.height);
2794
+ options.set("width", img.width);
2795
+ }
2796
+ }
2797
+ });
2798
+ }
2798
2799
  },
2799
2800
  {
2800
- name: "tabHeaderLayout",
2801
- type: "enum",
2802
- helperText: "Change the layout of the tab headers (uses justify-content)",
2803
- defaultValue: "flex-start",
2801
+ name: "backgroundSize",
2802
+ type: "text",
2803
+ defaultValue: "cover",
2804
2804
  enum: [
2805
2805
  {
2806
- label: "Center",
2807
- value: "center"
2808
- },
2809
- {
2810
- label: "Space between",
2811
- value: "space-between"
2812
- },
2813
- {
2814
- label: "Space around",
2815
- value: "space-around"
2816
- },
2817
- {
2818
- label: "Left",
2819
- value: "flex-start"
2806
+ label: "contain",
2807
+ value: "contain",
2808
+ helperText: "The image should never get cropped"
2820
2809
  },
2821
2810
  {
2822
- label: "Right",
2823
- value: "flex-end"
2811
+ label: "cover",
2812
+ value: "cover",
2813
+ helperText: "The image should fill it's box, cropping when needed"
2824
2814
  }
2825
2815
  ]
2826
- }
2827
- ]
2828
- };
2829
- const activeTabContent = function activeTabContent2(props, state, active) {
2830
- return props.tabs && props.tabs[active].content;
2831
- };
2832
- const onClick$2 = function onClick22(props, state, index) {
2833
- if (index === state.activeTab && props.collapsible)
2834
- state.activeTab = -1;
2835
- else
2836
- state.activeTab = index;
2837
- };
2838
- const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2839
- _jsxBranch();
2840
- const state = useStore({
2841
- activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
2842
- });
2843
- return /* @__PURE__ */ _jsxQ("div", null, null, [
2844
- /* @__PURE__ */ _jsxQ("div", null, {
2845
- class: "builder-tabs-wrap",
2846
- style: _fnSignal((p0) => ({
2847
- display: "flex",
2848
- flexDirection: "row",
2849
- justifyContent: p0.tabHeaderLayout || "flex-start",
2850
- overflow: "auto"
2851
- }), [
2852
- props
2853
- ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
2854
- }, (props.tabs || []).map((tab, index) => {
2855
- return /* @__PURE__ */ _jsxQ("span", {
2856
- class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
2857
- onClick$: /* @__PURE__ */ inlinedQrl((event) => {
2858
- const [index2, props2, state2] = useLexicalScope();
2859
- return onClick$2(props2, state2, index2);
2860
- }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
2861
- index,
2862
- props,
2863
- state
2864
- ]),
2865
- style: {
2866
- ...state.activeTab === index ? props.activeTabStyle : {}
2867
- }
2868
- }, null, /* @__PURE__ */ _jsxC(Blocks, {
2869
- get parent() {
2870
- return props.builderBlock.id;
2871
- },
2872
- path: `component.options.tabs.${index}.label`,
2873
- get blocks() {
2874
- return tab.label;
2875
- },
2876
- get context() {
2877
- return props.builderContext;
2878
- },
2879
- get registeredComponents() {
2880
- return props.builderComponents;
2881
- },
2882
- get linkComponent() {
2883
- return props.builderLinkComponent;
2884
- },
2885
- [_IMMUTABLE]: {
2886
- blocks: _wrapProp(tab, "label"),
2887
- context: _fnSignal((p0) => p0.builderContext, [
2888
- props
2889
- ], "p0.builderContext"),
2890
- linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
2891
- props
2892
- ], "p0.builderLinkComponent"),
2893
- parent: _fnSignal((p0) => p0.builderBlock.id, [
2894
- props
2895
- ], "p0.builderBlock.id"),
2896
- registeredComponents: _fnSignal((p0) => p0.builderComponents, [
2897
- props
2898
- ], "p0.builderComponents")
2899
- }
2900
- }, 3, "6k_0"), 0, index);
2901
- }), 1, null),
2902
- activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ _jsxQ("div", null, null, /* @__PURE__ */ _jsxC(Blocks, {
2903
- get parent() {
2904
- return props.builderBlock.id;
2905
- },
2906
- get path() {
2907
- return `component.options.tabs.${state.activeTab}.content`;
2908
- },
2909
- blocks: activeTabContent(props, state, state.activeTab),
2910
- get context() {
2911
- return props.builderContext;
2912
- },
2913
- get registeredComponents() {
2914
- return props.builderComponents;
2915
- },
2916
- get linkComponent() {
2917
- return props.builderLinkComponent;
2918
- },
2919
- [_IMMUTABLE]: {
2920
- context: _fnSignal((p0) => p0.builderContext, [
2921
- props
2922
- ], "p0.builderContext"),
2923
- linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
2924
- props
2925
- ], "p0.builderLinkComponent"),
2926
- parent: _fnSignal((p0) => p0.builderBlock.id, [
2927
- props
2928
- ], "p0.builderBlock.id"),
2929
- path: _fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
2930
- state
2931
- ], "`component.options.tabs.${p0.activeTab}.content`"),
2932
- registeredComponents: _fnSignal((p0) => p0.builderComponents, [
2933
- props
2934
- ], "p0.builderComponents")
2935
- }
2936
- }, 3, "6k_1"), 1, "6k_2") : null
2937
- ], 1, "6k_3");
2938
- }, "Tabs_component_MhWcxXy0lMY"));
2939
- const componentInfo$9 = {
2940
- name: "Text",
2941
- static: true,
2942
- isRSC: true,
2943
- 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",
2944
- inputs: [
2816
+ },
2945
2817
  {
2946
- name: "text",
2947
- type: "html",
2948
- required: true,
2949
- autoFocus: true,
2950
- bubble: true,
2951
- defaultValue: "Enter some text..."
2952
- }
2953
- ],
2954
- defaultStyles: {
2955
- lineHeight: "normal",
2956
- height: "auto",
2957
- textAlign: "center"
2958
- }
2959
- };
2960
- const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2961
- return /* @__PURE__ */ _jsxQ("div", null, {
2962
- class: "builder-text",
2963
- dangerouslySetInnerHTML: _fnSignal((p0) => {
2964
- var _a;
2965
- return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
2966
- }, [
2967
- props
2968
- ], 'p0.text?.toString()||""'),
2969
- style: {
2970
- outline: "none"
2971
- }
2972
- }, null, 3, "yO_0");
2973
- }, "Text_component_15p0cKUxgIE"));
2974
- const convertOrderNumberToString = (order) => {
2975
- return order.toString();
2976
- };
2977
- const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2978
- return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
2979
- };
2980
- const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2981
- return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
2982
- };
2983
- const onClick$1 = function onClick23(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
2984
- if (state.open.includes(index))
2985
- state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
2986
- else
2987
- state.open = onlyOneAtATime.value ? [
2988
- index
2989
- ] : state.open.concat(index);
2990
- };
2991
- const Accordion = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2992
- const state = useStore({
2993
- open: []
2994
- });
2995
- const onlyOneAtATime = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
2996
- const [props2] = useLexicalScope();
2997
- return Boolean(props2.grid || props2.oneAtATime);
2998
- }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
2999
- props
3000
- ]));
3001
- const accordionStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3002
- const [props2] = useLexicalScope();
3003
- const styles = {
3004
- display: "flex",
3005
- alignItems: "stretch",
3006
- flexDirection: "column",
3007
- ...props2.grid && {
3008
- flexDirection: "row",
3009
- alignItems: "flex-start",
3010
- flexWrap: "wrap"
3011
- }
3012
- };
3013
- return styles;
3014
- }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
3015
- props
3016
- ]));
3017
- const accordionTitleStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3018
- const shared = {
3019
- display: "flex",
3020
- flexDirection: "column"
3021
- };
3022
- const styles = {
3023
- ...shared,
3024
- alignItems: "stretch",
3025
- cursor: "pointer"
3026
- };
3027
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
3028
- }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
3029
- const openGridItemOrder = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3030
- const [props2, state2] = useLexicalScope();
3031
- let itemOrder = null;
3032
- const getOpenGridItemPosition = props2.grid && state2.open.length;
3033
- if (getOpenGridItemPosition && document) {
3034
- const openItemIndex = state2.open[0];
3035
- const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
3036
- let subjectItem = openItem;
3037
- itemOrder = openItemIndex;
3038
- if (subjectItem) {
3039
- let prevItemRect = subjectItem.getBoundingClientRect();
3040
- while (subjectItem = subjectItem && subjectItem.nextElementSibling)
3041
- if (subjectItem) {
3042
- if (subjectItem.classList.contains("builder-accordion-detail"))
3043
- continue;
3044
- const subjectItemRect = subjectItem.getBoundingClientRect();
3045
- if (subjectItemRect.left > prevItemRect.left) {
3046
- const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
3047
- if (!isNaN(index)) {
3048
- prevItemRect = subjectItemRect;
3049
- itemOrder = index;
3050
- }
3051
- } else
3052
- break;
3053
- }
3054
- }
3055
- }
3056
- if (typeof itemOrder === "number")
3057
- itemOrder = itemOrder + 1;
3058
- return itemOrder;
3059
- }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
3060
- props,
3061
- state
3062
- ]));
3063
- const accordionDetailStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
3064
- const [openGridItemOrder2, props2] = useLexicalScope();
3065
- const styles = {
3066
- order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
3067
- ...props2.grid && {
3068
- width: "100%"
3069
- }
3070
- };
3071
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
3072
- }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
3073
- openGridItemOrder,
3074
- props
3075
- ]));
3076
- return /* @__PURE__ */ _jsxQ("div", null, {
3077
- class: "builder-accordion",
3078
- style: _fnSignal((p0) => p0.value, [
3079
- accordionStyles
3080
- ], "p0.value")
3081
- }, (props.items || []).map((item, index) => {
3082
- _jsxBranch();
3083
- return /* @__PURE__ */ _jsxC(Fragment$1, {
3084
- children: [
3085
- /* @__PURE__ */ _jsxQ("div", {
3086
- class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
3087
- "data-index": index,
3088
- onClick$: /* @__PURE__ */ inlinedQrl((event) => {
3089
- const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = useLexicalScope();
3090
- return onClick$1(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
3091
- }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
3092
- accordionDetailStyles,
3093
- accordionStyles,
3094
- accordionTitleStyles,
3095
- index,
3096
- onlyOneAtATime,
3097
- openGridItemOrder,
3098
- props,
3099
- state
3100
- ]),
3101
- style: {
3102
- ...accordionTitleStyles.value,
3103
- width: props.grid ? props.gridRowWidth : void 0,
3104
- order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
3105
- }
3106
- }, null, /* @__PURE__ */ _jsxC(Blocks, {
3107
- get blocks() {
3108
- return item.title;
3109
- },
3110
- path: `items.${index}.title`,
3111
- get parent() {
3112
- return props.builderBlock.id;
3113
- },
3114
- get context() {
3115
- return props.builderContext;
3116
- },
3117
- get registeredComponents() {
3118
- return props.builderComponents;
3119
- },
3120
- get linkComponent() {
3121
- return props.builderLinkComponent;
3122
- },
3123
- [_IMMUTABLE]: {
3124
- blocks: _wrapProp(item, "title"),
3125
- context: _fnSignal((p0) => p0.builderContext, [
3126
- props
3127
- ], "p0.builderContext"),
3128
- linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
3129
- props
3130
- ], "p0.builderLinkComponent"),
3131
- parent: _fnSignal((p0) => p0.builderBlock.id, [
3132
- props
3133
- ], "p0.builderBlock.id"),
3134
- registeredComponents: _fnSignal((p0) => p0.builderComponents, [
3135
- props
3136
- ], "p0.builderComponents")
3137
- }
3138
- }, 3, "hf_0"), 0, null),
3139
- state.open.includes(index) ? /* @__PURE__ */ _jsxQ("div", {
3140
- class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
3141
- }, {
3142
- style: _fnSignal((p0) => p0.value, [
3143
- accordionDetailStyles
3144
- ], "p0.value")
3145
- }, /* @__PURE__ */ _jsxC(Blocks, {
3146
- get blocks() {
3147
- return item.detail;
3148
- },
3149
- path: `items.${index}.detail`,
3150
- get parent() {
3151
- return props.builderBlock.id;
3152
- },
3153
- get context() {
3154
- return props.builderContext;
3155
- },
3156
- get registeredComponents() {
3157
- return props.builderComponents;
3158
- },
3159
- get linkComponent() {
3160
- return props.builderLinkComponent;
3161
- },
3162
- [_IMMUTABLE]: {
3163
- blocks: _wrapProp(item, "detail"),
3164
- context: _fnSignal((p0) => p0.builderContext, [
3165
- props
3166
- ], "p0.builderContext"),
3167
- linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
3168
- props
3169
- ], "p0.builderLinkComponent"),
3170
- parent: _fnSignal((p0) => p0.builderBlock.id, [
3171
- props
3172
- ], "p0.builderBlock.id"),
3173
- registeredComponents: _fnSignal((p0) => p0.builderComponents, [
3174
- props
3175
- ], "p0.builderComponents")
3176
- }
3177
- }, 3, "hf_1"), 1, "hf_2") : null
2818
+ name: "backgroundPosition",
2819
+ type: "text",
2820
+ defaultValue: "center",
2821
+ enum: [
2822
+ "center",
2823
+ "top",
2824
+ "left",
2825
+ "right",
2826
+ "bottom",
2827
+ "top left",
2828
+ "top right",
2829
+ "bottom left",
2830
+ "bottom right"
3178
2831
  ]
3179
- }, 1, "hf_3");
3180
- }), 1, "hf_4");
3181
- }, "Accordion_component_jkuUCHm0nt0"));
3182
- const defaultTitle = {
3183
- "@type": "@builder.io/sdk:Element",
3184
- layerName: "Accordion item title",
3185
- responsiveStyles: {
3186
- large: {
3187
- marginTop: "10px",
3188
- position: "relative",
3189
- display: "flex",
3190
- alignItems: "stretch",
3191
- flexDirection: "column",
3192
- paddingBottom: "10px"
2832
+ },
2833
+ {
2834
+ name: "altText",
2835
+ type: "string",
2836
+ helperText: "Text to display when the user has images off"
2837
+ },
2838
+ {
2839
+ name: "height",
2840
+ type: "number",
2841
+ hideFromUI: true
2842
+ },
2843
+ {
2844
+ name: "width",
2845
+ type: "number",
2846
+ hideFromUI: true
2847
+ },
2848
+ {
2849
+ name: "sizes",
2850
+ type: "string",
2851
+ hideFromUI: true
2852
+ },
2853
+ {
2854
+ name: "srcset",
2855
+ type: "string",
2856
+ hideFromUI: true
2857
+ },
2858
+ {
2859
+ name: "lazy",
2860
+ type: "boolean",
2861
+ defaultValue: true,
2862
+ hideFromUI: true
2863
+ },
2864
+ {
2865
+ name: "fitContent",
2866
+ type: "boolean",
2867
+ helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
2868
+ defaultValue: true
2869
+ },
2870
+ {
2871
+ name: "aspectRatio",
2872
+ type: "number",
2873
+ 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",
2874
+ advanced: true,
2875
+ defaultValue: 0.7041
2876
+ }
2877
+ ]
2878
+ };
2879
+ const componentInfo$c = {
2880
+ name: "Core:Section",
2881
+ static: true,
2882
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
2883
+ inputs: [
2884
+ {
2885
+ name: "maxWidth",
2886
+ type: "number",
2887
+ defaultValue: 1200
2888
+ },
2889
+ {
2890
+ name: "lazyLoad",
2891
+ type: "boolean",
2892
+ defaultValue: false,
2893
+ advanced: true,
2894
+ description: "Only render this section when in view"
3193
2895
  }
2896
+ ],
2897
+ defaultStyles: {
2898
+ paddingLeft: "20px",
2899
+ paddingRight: "20px",
2900
+ paddingTop: "50px",
2901
+ paddingBottom: "50px",
2902
+ marginTop: "0px",
2903
+ width: "100vw",
2904
+ marginLeft: "calc(50% - 50vw)"
3194
2905
  },
3195
- children: [
2906
+ canHaveChildren: true,
2907
+ defaultChildren: [
3196
2908
  {
3197
2909
  "@type": "@builder.io/sdk:Element",
3198
2910
  responsiveStyles: {
3199
2911
  large: {
3200
- textAlign: "left",
3201
- display: "flex",
3202
- flexDirection: "column"
2912
+ textAlign: "center"
3203
2913
  }
3204
2914
  },
3205
2915
  component: {
3206
2916
  name: "Text",
3207
2917
  options: {
3208
- text: "I am an accordion title. Click me!"
2918
+ 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>"
3209
2919
  }
3210
2920
  }
3211
2921
  }
3212
2922
  ]
3213
2923
  };
3214
- const defaultDetail = {
2924
+ const componentInfo$b = {
2925
+ name: "Slot",
2926
+ isRSC: true,
2927
+ description: "Allow child blocks to be inserted into this content when used as a Symbol",
2928
+ docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
2929
+ image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
2930
+ // Maybe wrap this for canHaveChildren so bind children to this hm
2931
+ inputs: [
2932
+ {
2933
+ name: "name",
2934
+ type: "string",
2935
+ required: true,
2936
+ defaultValue: "children"
2937
+ }
2938
+ ]
2939
+ };
2940
+ const Slot = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
2941
+ var _a, _b;
2942
+ return /* @__PURE__ */ _jsxS("div", {
2943
+ ...!((_a = props.builderContext.context) == null ? void 0 : _a.symbolId) && {
2944
+ "builder-slot": props.name
2945
+ },
2946
+ children: /* @__PURE__ */ _jsxC(Blocks, {
2947
+ get parent() {
2948
+ var _a2;
2949
+ return (_a2 = props.builderContext.context) == null ? void 0 : _a2.symbolId;
2950
+ },
2951
+ get path() {
2952
+ return `symbol.data.${props.name}`;
2953
+ },
2954
+ get context() {
2955
+ return props.builderContext;
2956
+ },
2957
+ blocks: deoptSignal((_b = props.builderContext.rootState) == null ? void 0 : _b[props.name]),
2958
+ [_IMMUTABLE]: {
2959
+ context: _fnSignal((p0) => p0.builderContext, [
2960
+ props
2961
+ ], "p0.builderContext"),
2962
+ parent: _fnSignal((p0) => {
2963
+ var _a2;
2964
+ return (_a2 = p0.builderContext.context) == null ? void 0 : _a2.symbolId;
2965
+ }, [
2966
+ props
2967
+ ], "p0.builderContext.context?.symbolId"),
2968
+ path: _fnSignal((p0) => `symbol.data.${p0.name}`, [
2969
+ props
2970
+ ], "`symbol.data.${p0.name}`")
2971
+ }
2972
+ }, 3, "B1_0")
2973
+ }, {
2974
+ style: {
2975
+ pointerEvents: "auto"
2976
+ }
2977
+ }, 0, "B1_1");
2978
+ }, "Slot_component_WWgWgfV0bb0"));
2979
+ const componentInfo$a = {
2980
+ name: "Symbol",
2981
+ noWrap: true,
2982
+ static: true,
2983
+ isRSC: true,
2984
+ inputs: [
2985
+ {
2986
+ name: "symbol",
2987
+ type: "uiSymbol"
2988
+ },
2989
+ {
2990
+ name: "dataOnly",
2991
+ helperText: "Make this a data symbol that doesn't display any UI",
2992
+ type: "boolean",
2993
+ defaultValue: false,
2994
+ advanced: true,
2995
+ hideFromUI: true
2996
+ },
2997
+ {
2998
+ name: "inheritState",
2999
+ helperText: "Inherit the parent component state and data",
3000
+ type: "boolean",
3001
+ defaultValue: false,
3002
+ advanced: true
3003
+ },
3004
+ {
3005
+ name: "renderToLiquid",
3006
+ helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
3007
+ type: "boolean",
3008
+ defaultValue: false,
3009
+ advanced: true,
3010
+ hideFromUI: true
3011
+ },
3012
+ {
3013
+ name: "useChildren",
3014
+ hideFromUI: true,
3015
+ type: "boolean"
3016
+ }
3017
+ ]
3018
+ };
3019
+ const defaultTab = {
3215
3020
  "@type": "@builder.io/sdk:Element",
3216
- layerName: "Accordion item detail",
3217
3021
  responsiveStyles: {
3218
3022
  large: {
3219
- position: "relative",
3023
+ paddingLeft: "20px",
3024
+ paddingRight: "20px",
3025
+ paddingTop: "10px",
3026
+ paddingBottom: "10px",
3027
+ minWidth: "100px",
3028
+ textAlign: "center",
3220
3029
  display: "flex",
3221
- alignItems: "stretch",
3222
3030
  flexDirection: "column",
3223
- marginTop: "10px",
3224
- paddingBottom: "10px"
3031
+ cursor: "pointer",
3032
+ userSelect: "none"
3225
3033
  }
3226
3034
  },
3227
- children: [
3228
- {
3229
- "@type": "@builder.io/sdk:Element",
3230
- responsiveStyles: {
3231
- large: {
3232
- paddingTop: "50px",
3233
- textAlign: "left",
3234
- display: "flex",
3235
- flexDirection: "column",
3236
- paddingBottom: "50px"
3237
- }
3238
- },
3239
- component: {
3240
- name: "Text",
3241
- options: {
3242
- text: "I am an accordion detail, hello!"
3243
- }
3244
- }
3035
+ component: {
3036
+ name: "Text",
3037
+ options: {
3038
+ text: "New tab"
3245
3039
  }
3246
- ]
3040
+ }
3247
3041
  };
3248
- const componentInfo$8 = {
3249
- name: "Builder:Accordion",
3250
- canHaveChildren: true,
3251
- image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
3252
- defaultStyles: {
3253
- display: "flex",
3254
- flexDirection: "column",
3255
- alignItems: "stretch"
3042
+ const defaultElement = {
3043
+ "@type": "@builder.io/sdk:Element",
3044
+ responsiveStyles: {
3045
+ large: {
3046
+ height: "200px",
3047
+ display: "flex",
3048
+ marginTop: "20px",
3049
+ flexDirection: "column"
3050
+ }
3256
3051
  },
3052
+ component: {
3053
+ name: "Text",
3054
+ options: {
3055
+ text: "New tab content "
3056
+ }
3057
+ }
3058
+ };
3059
+ const componentInfo$9 = {
3060
+ name: "Builder: Tabs",
3257
3061
  inputs: [
3258
3062
  {
3259
- name: "items",
3063
+ name: "tabs",
3260
3064
  type: "list",
3261
3065
  broadcast: true,
3262
3066
  subFields: [
3263
3067
  {
3264
- name: "title",
3068
+ name: "label",
3265
3069
  type: "uiBlocks",
3266
3070
  hideFromUI: true,
3267
3071
  defaultValue: [
3268
- defaultTitle
3072
+ defaultTab
3269
3073
  ]
3270
3074
  },
3271
3075
  {
3272
- name: "detail",
3076
+ name: "content",
3273
3077
  type: "uiBlocks",
3274
3078
  hideFromUI: true,
3275
3079
  defaultValue: [
3276
- defaultDetail
3080
+ defaultElement
3277
3081
  ]
3278
3082
  }
3279
3083
  ],
3280
3084
  defaultValue: [
3281
3085
  {
3282
- title: [
3283
- defaultTitle
3086
+ label: [
3087
+ {
3088
+ ...defaultTab,
3089
+ component: {
3090
+ name: "Text",
3091
+ options: {
3092
+ text: "Tab 1"
3093
+ }
3094
+ }
3095
+ }
3284
3096
  ],
3285
- detail: [
3286
- defaultDetail
3097
+ content: [
3098
+ {
3099
+ ...defaultElement,
3100
+ component: {
3101
+ name: "Text",
3102
+ options: {
3103
+ text: "Tab 1 content"
3104
+ }
3105
+ }
3106
+ }
3287
3107
  ]
3288
3108
  },
3289
3109
  {
3290
- title: [
3291
- defaultTitle
3110
+ label: [
3111
+ {
3112
+ ...defaultTab,
3113
+ component: {
3114
+ name: "Text",
3115
+ options: {
3116
+ text: "Tab 2"
3117
+ }
3118
+ }
3119
+ }
3292
3120
  ],
3293
- detail: [
3294
- defaultDetail
3121
+ content: [
3122
+ {
3123
+ ...defaultElement,
3124
+ component: {
3125
+ name: "Text",
3126
+ options: {
3127
+ text: "Tab 2 content"
3128
+ }
3129
+ }
3130
+ }
3295
3131
  ]
3296
3132
  }
3297
- ],
3298
- showIf: (options) => !options.get("useChildrenForItems")
3299
- },
3300
- {
3301
- name: "oneAtATime",
3302
- helperText: "Only allow opening one at a time (collapse all others when new item openned)",
3303
- type: "boolean",
3304
- defaultValue: false
3133
+ ]
3305
3134
  },
3306
3135
  {
3307
- name: "grid",
3308
- helperText: "Display as a grid",
3309
- type: "boolean",
3310
- defaultValue: false
3136
+ name: "activeTabStyle",
3137
+ type: "uiStyle",
3138
+ helperText: "CSS styles for the active tab",
3139
+ defaultValue: {
3140
+ backgroundColor: "rgba(0, 0, 0, 0.1)"
3141
+ }
3311
3142
  },
3312
3143
  {
3313
- name: "gridRowWidth",
3314
- helperText: "Display as a grid",
3315
- type: "string",
3316
- showIf: (options) => options.get("grid"),
3317
- defaultValue: "25%"
3144
+ name: "defaultActiveTab",
3145
+ type: "number",
3146
+ helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
3147
+ defaultValue: 1,
3148
+ advanced: true
3318
3149
  },
3319
3150
  {
3320
- name: "useChildrenForItems",
3151
+ name: "collapsible",
3321
3152
  type: "boolean",
3322
- helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
3323
- advanced: true,
3153
+ helperText: "If on, clicking an open tab closes it so no tabs are active",
3324
3154
  defaultValue: false,
3325
- onChange: (options) => {
3326
- if (options.get("useChildrenForItems") === true)
3327
- options.set("items", []);
3328
- }
3155
+ advanced: true
3156
+ },
3157
+ {
3158
+ name: "tabHeaderLayout",
3159
+ type: "enum",
3160
+ helperText: "Change the layout of the tab headers (uses justify-content)",
3161
+ defaultValue: "flex-start",
3162
+ enum: [
3163
+ {
3164
+ label: "Center",
3165
+ value: "center"
3166
+ },
3167
+ {
3168
+ label: "Space between",
3169
+ value: "space-between"
3170
+ },
3171
+ {
3172
+ label: "Space around",
3173
+ value: "space-around"
3174
+ },
3175
+ {
3176
+ label: "Left",
3177
+ value: "flex-start"
3178
+ },
3179
+ {
3180
+ label: "Right",
3181
+ value: "flex-end"
3182
+ }
3183
+ ]
3329
3184
  }
3330
3185
  ]
3331
3186
  };
3187
+ const activeTabContent = function activeTabContent2(props, state, active) {
3188
+ return props.tabs && props.tabs[active].content;
3189
+ };
3190
+ const onClick$1 = function onClick23(props, state, index) {
3191
+ if (index === state.activeTab && props.collapsible)
3192
+ state.activeTab = -1;
3193
+ else
3194
+ state.activeTab = index;
3195
+ };
3196
+ const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3197
+ _jsxBranch();
3198
+ const state = useStore({
3199
+ activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
3200
+ });
3201
+ return /* @__PURE__ */ _jsxQ("div", null, null, [
3202
+ /* @__PURE__ */ _jsxQ("div", null, {
3203
+ class: "builder-tabs-wrap",
3204
+ style: _fnSignal((p0) => ({
3205
+ display: "flex",
3206
+ flexDirection: "row",
3207
+ justifyContent: p0.tabHeaderLayout || "flex-start",
3208
+ overflow: "auto"
3209
+ }), [
3210
+ props
3211
+ ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
3212
+ }, (props.tabs || []).map((tab, index) => {
3213
+ return /* @__PURE__ */ _jsxQ("span", {
3214
+ class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
3215
+ onClick$: /* @__PURE__ */ inlinedQrl((event) => {
3216
+ const [index2, props2, state2] = useLexicalScope();
3217
+ return onClick$1(props2, state2, index2);
3218
+ }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
3219
+ index,
3220
+ props,
3221
+ state
3222
+ ]),
3223
+ style: {
3224
+ ...state.activeTab === index ? props.activeTabStyle : {}
3225
+ }
3226
+ }, null, /* @__PURE__ */ _jsxC(Blocks, {
3227
+ get parent() {
3228
+ return props.builderBlock.id;
3229
+ },
3230
+ path: `component.options.tabs.${index}.label`,
3231
+ get blocks() {
3232
+ return tab.label;
3233
+ },
3234
+ get context() {
3235
+ return props.builderContext;
3236
+ },
3237
+ get registeredComponents() {
3238
+ return props.builderComponents;
3239
+ },
3240
+ get linkComponent() {
3241
+ return props.builderLinkComponent;
3242
+ },
3243
+ [_IMMUTABLE]: {
3244
+ blocks: _wrapProp(tab, "label"),
3245
+ context: _fnSignal((p0) => p0.builderContext, [
3246
+ props
3247
+ ], "p0.builderContext"),
3248
+ linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
3249
+ props
3250
+ ], "p0.builderLinkComponent"),
3251
+ parent: _fnSignal((p0) => p0.builderBlock.id, [
3252
+ props
3253
+ ], "p0.builderBlock.id"),
3254
+ registeredComponents: _fnSignal((p0) => p0.builderComponents, [
3255
+ props
3256
+ ], "p0.builderComponents")
3257
+ }
3258
+ }, 3, "6k_0"), 0, index);
3259
+ }), 1, null),
3260
+ activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ _jsxQ("div", null, null, /* @__PURE__ */ _jsxC(Blocks, {
3261
+ get parent() {
3262
+ return props.builderBlock.id;
3263
+ },
3264
+ get path() {
3265
+ return `component.options.tabs.${state.activeTab}.content`;
3266
+ },
3267
+ blocks: activeTabContent(props, state, state.activeTab),
3268
+ get context() {
3269
+ return props.builderContext;
3270
+ },
3271
+ get registeredComponents() {
3272
+ return props.builderComponents;
3273
+ },
3274
+ get linkComponent() {
3275
+ return props.builderLinkComponent;
3276
+ },
3277
+ [_IMMUTABLE]: {
3278
+ context: _fnSignal((p0) => p0.builderContext, [
3279
+ props
3280
+ ], "p0.builderContext"),
3281
+ linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
3282
+ props
3283
+ ], "p0.builderLinkComponent"),
3284
+ parent: _fnSignal((p0) => p0.builderBlock.id, [
3285
+ props
3286
+ ], "p0.builderBlock.id"),
3287
+ path: _fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
3288
+ state
3289
+ ], "`component.options.tabs.${p0.activeTab}.content`"),
3290
+ registeredComponents: _fnSignal((p0) => p0.builderComponents, [
3291
+ props
3292
+ ], "p0.builderComponents")
3293
+ }
3294
+ }, 3, "6k_1"), 1, "6k_2") : null
3295
+ ], 1, "6k_3");
3296
+ }, "Tabs_component_MhWcxXy0lMY"));
3297
+ const componentInfo$8 = {
3298
+ name: "Text",
3299
+ static: true,
3300
+ isRSC: true,
3301
+ 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",
3302
+ inputs: [
3303
+ {
3304
+ name: "text",
3305
+ type: "html",
3306
+ required: true,
3307
+ autoFocus: true,
3308
+ bubble: true,
3309
+ defaultValue: "Enter some text..."
3310
+ }
3311
+ ],
3312
+ defaultStyles: {
3313
+ lineHeight: "normal",
3314
+ height: "auto",
3315
+ textAlign: "center"
3316
+ }
3317
+ };
3318
+ const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
3319
+ return /* @__PURE__ */ _jsxQ("div", null, {
3320
+ class: "builder-text",
3321
+ dangerouslySetInnerHTML: _fnSignal((p0) => {
3322
+ var _a;
3323
+ return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
3324
+ }, [
3325
+ props
3326
+ ], 'p0.text?.toString()||""'),
3327
+ style: {
3328
+ outline: "none"
3329
+ }
3330
+ }, null, 3, "yO_0");
3331
+ }, "Text_component_15p0cKUxgIE"));
3332
3332
  const componentInfo$7 = {
3333
3333
  name: "Custom Code",
3334
3334
  static: true,
@@ -3818,11 +3818,11 @@ const onSubmit = function onSubmit2(props, state, formRef, event) {
3818
3818
  return;
3819
3819
  }
3820
3820
  event.preventDefault();
3821
- const el = event.currentTarget;
3821
+ const el = event.currentTarget || event.target;
3822
3822
  const headers = props.customHeaders || {};
3823
3823
  let body;
3824
3824
  const formData = new FormData(el);
3825
- const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3825
+ const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3826
3826
  let value;
3827
3827
  const key = el2.name;
3828
3828
  if (el2 instanceof HTMLInputElement) {
@@ -4069,6 +4069,7 @@ const FormComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
4069
4069
  name: _fnSignal((p0) => p0.name, [
4070
4070
  props
4071
4071
  ], "p0.name"),
4072
+ "preventdefault:submit": true,
4072
4073
  validate: _fnSignal((p0) => p0.validate, [
4073
4074
  props
4074
4075
  ], "p0.validate")
@@ -4573,44 +4574,44 @@ const getExtraComponents = () => [
4573
4574
  const getDefaultRegisteredComponents = () => [
4574
4575
  {
4575
4576
  component: Button,
4576
- ...componentInfo$h
4577
+ ...componentInfo$g
4577
4578
  },
4578
4579
  {
4579
4580
  component: Columns,
4580
- ...componentInfo$g
4581
+ ...componentInfo$f
4581
4582
  },
4582
4583
  {
4583
4584
  component: FragmentComponent,
4584
- ...componentInfo$f
4585
+ ...componentInfo$e
4585
4586
  },
4586
4587
  {
4587
4588
  component: Image,
4588
- ...componentInfo$e
4589
+ ...componentInfo$d
4589
4590
  },
4590
4591
  {
4591
4592
  component: SectionComponent,
4592
- ...componentInfo$d
4593
+ ...componentInfo$c
4593
4594
  },
4594
4595
  {
4595
4596
  component: Slot,
4596
- ...componentInfo$c
4597
+ ...componentInfo$b
4597
4598
  },
4598
4599
  {
4599
4600
  component: Symbol$1,
4600
- ...componentInfo$b
4601
+ ...componentInfo$a
4601
4602
  },
4602
4603
  {
4603
4604
  component: Text,
4604
- ...componentInfo$9
4605
+ ...componentInfo$8
4605
4606
  },
4606
4607
  ...[
4607
4608
  {
4608
4609
  component: Tabs,
4609
- ...componentInfo$a
4610
+ ...componentInfo$9
4610
4611
  },
4611
4612
  {
4612
4613
  component: Accordion,
4613
- ...componentInfo$8
4614
+ ...componentInfo$h
4614
4615
  }
4615
4616
  ],
4616
4617
  ...getExtraComponents()
@@ -5069,7 +5070,7 @@ function isFromTrustedHost(trustedHosts, e) {
5069
5070
  const url = new URL(e.origin), hostname = url.hostname;
5070
5071
  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
5071
5072
  }
5072
- const SDK_VERSION = "0.14.22";
5073
+ const SDK_VERSION = "0.14.23";
5073
5074
  const registry = {};
5074
5075
  function register(type, info) {
5075
5076
  let typeList = registry[type];