@builder.io/sdk-solid 1.0.28 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/node/dev.js CHANGED
@@ -2284,8 +2284,320 @@ var handleABTesting = async ({
2284
2284
  // src/helpers/canTrack.ts
2285
2285
  var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
2286
2286
 
2287
+ // src/blocks/accordion/component-info.ts
2288
+ var defaultTitle = {
2289
+ "@type": "@builder.io/sdk:Element",
2290
+ layerName: "Accordion item title",
2291
+ responsiveStyles: {
2292
+ large: {
2293
+ marginTop: "10px",
2294
+ position: "relative",
2295
+ display: "flex",
2296
+ alignItems: "stretch",
2297
+ flexDirection: "column",
2298
+ paddingBottom: "10px"
2299
+ }
2300
+ },
2301
+ children: [{
2302
+ "@type": "@builder.io/sdk:Element",
2303
+ responsiveStyles: {
2304
+ large: {
2305
+ textAlign: "left",
2306
+ display: "flex",
2307
+ flexDirection: "column"
2308
+ }
2309
+ },
2310
+ component: {
2311
+ name: "Text",
2312
+ options: {
2313
+ text: "I am an accordion title. Click me!"
2314
+ }
2315
+ }
2316
+ }]
2317
+ };
2318
+ var defaultDetail = {
2319
+ "@type": "@builder.io/sdk:Element",
2320
+ layerName: "Accordion item detail",
2321
+ responsiveStyles: {
2322
+ large: {
2323
+ position: "relative",
2324
+ display: "flex",
2325
+ alignItems: "stretch",
2326
+ flexDirection: "column",
2327
+ marginTop: "10px",
2328
+ paddingBottom: "10px"
2329
+ }
2330
+ },
2331
+ children: [{
2332
+ "@type": "@builder.io/sdk:Element",
2333
+ responsiveStyles: {
2334
+ large: {
2335
+ paddingTop: "50px",
2336
+ textAlign: "left",
2337
+ display: "flex",
2338
+ flexDirection: "column",
2339
+ paddingBottom: "50px"
2340
+ }
2341
+ },
2342
+ component: {
2343
+ name: "Text",
2344
+ options: {
2345
+ text: "I am an accordion detail, hello!"
2346
+ }
2347
+ }
2348
+ }]
2349
+ };
2350
+ var componentInfo = {
2351
+ name: "Builder:Accordion",
2352
+ canHaveChildren: true,
2353
+ image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
2354
+ defaultStyles: {
2355
+ display: "flex",
2356
+ flexDirection: "column",
2357
+ alignItems: "stretch"
2358
+ },
2359
+ inputs: [{
2360
+ name: "items",
2361
+ type: "list",
2362
+ broadcast: true,
2363
+ subFields: [{
2364
+ name: "title",
2365
+ type: "uiBlocks",
2366
+ hideFromUI: true,
2367
+ defaultValue: [defaultTitle]
2368
+ }, {
2369
+ name: "detail",
2370
+ type: "uiBlocks",
2371
+ hideFromUI: true,
2372
+ defaultValue: [defaultDetail]
2373
+ }],
2374
+ defaultValue: [{
2375
+ title: [defaultTitle],
2376
+ detail: [defaultDetail]
2377
+ }, {
2378
+ title: [defaultTitle],
2379
+ detail: [defaultDetail]
2380
+ }],
2381
+ showIf: (options) => !options.get("useChildrenForItems")
2382
+ }, {
2383
+ name: "oneAtATime",
2384
+ helperText: "Only allow opening one at a time (collapse all others when new item openned)",
2385
+ type: "boolean",
2386
+ defaultValue: false
2387
+ }, {
2388
+ name: "grid",
2389
+ helperText: "Display as a grid",
2390
+ type: "boolean",
2391
+ defaultValue: false
2392
+ }, {
2393
+ name: "gridRowWidth",
2394
+ helperText: "Display as a grid",
2395
+ type: "string",
2396
+ showIf: (options) => options.get("grid"),
2397
+ defaultValue: "25%"
2398
+ }, {
2399
+ name: "useChildrenForItems",
2400
+ type: "boolean",
2401
+ helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
2402
+ advanced: true,
2403
+ defaultValue: false,
2404
+ onChange: (options) => {
2405
+ if (options.get("useChildrenForItems") === true) {
2406
+ options.set("items", []);
2407
+ }
2408
+ }
2409
+ }]
2410
+ };
2411
+
2412
+ // src/blocks/accordion/helpers.ts
2413
+ var convertOrderNumberToString = (order) => {
2414
+ return order.toString();
2415
+ };
2416
+
2417
+ // src/blocks/accordion/accordion.tsx
2418
+ var _tmpl$6 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
2419
+ var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
2420
+ function Accordion(props) {
2421
+ const [open, setOpen] = createSignal([]);
2422
+ const onlyOneAtATime = createMemo(() => {
2423
+ return Boolean(props.grid || props.oneAtATime);
2424
+ });
2425
+ const accordionStyles = createMemo(() => {
2426
+ const styles = {
2427
+ display: "flex",
2428
+ alignItems: "stretch",
2429
+ flexDirection: "column",
2430
+ ...props.grid && {
2431
+ flexDirection: "row",
2432
+ alignItems: "flex-start",
2433
+ flexWrap: "wrap"
2434
+ }
2435
+ };
2436
+ return Object.fromEntries(Object.entries(styles).map(([key, value]) => [camelToKebabCase(key), value]));
2437
+ });
2438
+ const accordionTitleStyles = createMemo(() => {
2439
+ const shared = {
2440
+ display: "flex",
2441
+ flexDirection: "column"
2442
+ };
2443
+ const styles = Object.fromEntries(Object.entries({
2444
+ ...shared,
2445
+ alignItems: "stretch",
2446
+ cursor: "pointer"
2447
+ }).map(([key, value]) => [camelToKebabCase(key), value]));
2448
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2449
+ });
2450
+ function getAccordionTitleClassName(index) {
2451
+ return `builder-accordion-title builder-accordion-title-${open().includes(index) ? "open" : "closed"}`;
2452
+ }
2453
+ function getAccordionDetailClassName(index) {
2454
+ return `builder-accordion-detail builder-accordion-detail-${open().includes(index) ? "open" : "closed"}`;
2455
+ }
2456
+ const openGridItemOrder = createMemo(() => {
2457
+ let itemOrder = null;
2458
+ const getOpenGridItemPosition = props.grid && open().length;
2459
+ if (getOpenGridItemPosition && document) {
2460
+ const openItemIndex = open()[0];
2461
+ const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
2462
+ let subjectItem = openItem;
2463
+ itemOrder = openItemIndex;
2464
+ if (subjectItem) {
2465
+ let prevItemRect = subjectItem.getBoundingClientRect();
2466
+ while (subjectItem = subjectItem && subjectItem.nextElementSibling) {
2467
+ if (subjectItem) {
2468
+ if (subjectItem.classList.contains("builder-accordion-detail")) {
2469
+ continue;
2470
+ }
2471
+ const subjectItemRect = subjectItem.getBoundingClientRect();
2472
+ if (subjectItemRect.left > prevItemRect.left) {
2473
+ const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
2474
+ if (!isNaN(index)) {
2475
+ prevItemRect = subjectItemRect;
2476
+ itemOrder = index;
2477
+ }
2478
+ } else {
2479
+ break;
2480
+ }
2481
+ }
2482
+ }
2483
+ }
2484
+ }
2485
+ if (typeof itemOrder === "number") {
2486
+ itemOrder = itemOrder + 1;
2487
+ }
2488
+ return itemOrder;
2489
+ });
2490
+ const accordionDetailStyles = createMemo(() => {
2491
+ const styles = {
2492
+ ...{
2493
+ order: typeof openGridItemOrder() === "number" ? openGridItemOrder() : void 0
2494
+ },
2495
+ ...props.grid && {
2496
+ width: "100%"
2497
+ }
2498
+ };
2499
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2500
+ });
2501
+ function onClick(index) {
2502
+ if (open().includes(index)) {
2503
+ setOpen(onlyOneAtATime() ? [] : open().filter((item) => item !== index));
2504
+ } else {
2505
+ setOpen(onlyOneAtATime() ? [index] : open().concat(index));
2506
+ }
2507
+ }
2508
+ return (() => {
2509
+ const _el$ = _tmpl$6();
2510
+ insert(_el$, createComponent(For, {
2511
+ get each() {
2512
+ return props.items;
2513
+ },
2514
+ children: (item, _index) => {
2515
+ const index = _index();
2516
+ return [(() => {
2517
+ const _el$2 = _tmpl$23();
2518
+ _el$2.$$click = (event) => onClick(index);
2519
+ setAttribute(_el$2, "data-index", index);
2520
+ insert(_el$2, createComponent(blocks_default, {
2521
+ get blocks() {
2522
+ return item.title;
2523
+ },
2524
+ path: `items.${index}.title`,
2525
+ get parent() {
2526
+ return props.builderBlock.id;
2527
+ },
2528
+ get context() {
2529
+ return props.builderContext;
2530
+ },
2531
+ get registeredComponents() {
2532
+ return props.builderComponents;
2533
+ },
2534
+ get linkComponent() {
2535
+ return props.builderLinkComponent;
2536
+ }
2537
+ }));
2538
+ effect((_p$) => {
2539
+ const _v$ = getAccordionTitleClassName(index), _v$2 = {
2540
+ ...accordionTitleStyles(),
2541
+ width: props.grid ? props.gridRowWidth : void 0,
2542
+ ...{
2543
+ order: openGridItemOrder() !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
2544
+ }
2545
+ };
2546
+ _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
2547
+ _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
2548
+ return _p$;
2549
+ }, {
2550
+ _v$: void 0,
2551
+ _v$2: void 0
2552
+ });
2553
+ return _el$2;
2554
+ })(), createComponent(Show, {
2555
+ get when() {
2556
+ return open().includes(index);
2557
+ },
2558
+ get children() {
2559
+ const _el$3 = _tmpl$23();
2560
+ insert(_el$3, createComponent(blocks_default, {
2561
+ get blocks() {
2562
+ return item.detail;
2563
+ },
2564
+ path: `items.${index}.detail`,
2565
+ get parent() {
2566
+ return props.builderBlock.id;
2567
+ },
2568
+ get context() {
2569
+ return props.builderContext;
2570
+ },
2571
+ get registeredComponents() {
2572
+ return props.builderComponents;
2573
+ },
2574
+ get linkComponent() {
2575
+ return props.builderLinkComponent;
2576
+ }
2577
+ }));
2578
+ effect((_p$) => {
2579
+ const _v$3 = getAccordionDetailClassName(index), _v$4 = accordionDetailStyles();
2580
+ _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
2581
+ _p$._v$4 = style(_el$3, _v$4, _p$._v$4);
2582
+ return _p$;
2583
+ }, {
2584
+ _v$3: void 0,
2585
+ _v$4: void 0
2586
+ });
2587
+ return _el$3;
2588
+ }
2589
+ })];
2590
+ }
2591
+ }));
2592
+ effect((_$p) => style(_el$, accordionStyles(), _$p));
2593
+ return _el$;
2594
+ })();
2595
+ }
2596
+ var accordion_default = Accordion;
2597
+ delegateEvents(["click"]);
2598
+
2287
2599
  // src/blocks/button/component-info.ts
2288
- var componentInfo = {
2600
+ var componentInfo2 = {
2289
2601
  name: "Core:Button",
2290
2602
  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
2291
2603
  defaultStyles: {
@@ -2321,7 +2633,7 @@ var componentInfo = {
2321
2633
  };
2322
2634
 
2323
2635
  // src/blocks/columns/component-info.ts
2324
- var componentInfo2 = {
2636
+ var componentInfo3 = {
2325
2637
  // TODO: ways to statically preprocess JSON for references, functions, etc
2326
2638
  name: "Columns",
2327
2639
  isRSC: true,
@@ -2541,7 +2853,7 @@ var componentInfo2 = {
2541
2853
  };
2542
2854
 
2543
2855
  // src/blocks/fragment/component-info.ts
2544
- var componentInfo3 = {
2856
+ var componentInfo4 = {
2545
2857
  name: "Fragment",
2546
2858
  static: true,
2547
2859
  hidden: true,
@@ -2550,7 +2862,7 @@ var componentInfo3 = {
2550
2862
  };
2551
2863
 
2552
2864
  // src/blocks/image/component-info.ts
2553
- var componentInfo4 = {
2865
+ var componentInfo5 = {
2554
2866
  name: "Image",
2555
2867
  static: true,
2556
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",
@@ -2673,7 +2985,7 @@ var componentInfo4 = {
2673
2985
  };
2674
2986
 
2675
2987
  // src/blocks/section/component-info.ts
2676
- var componentInfo5 = {
2988
+ var componentInfo6 = {
2677
2989
  name: "Core:Section",
2678
2990
  static: true,
2679
2991
  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -2715,7 +3027,7 @@ var componentInfo5 = {
2715
3027
  };
2716
3028
 
2717
3029
  // src/blocks/slot/component-info.ts
2718
- var componentInfo6 = {
3030
+ var componentInfo7 = {
2719
3031
  name: "Slot",
2720
3032
  isRSC: true,
2721
3033
  description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -2729,10 +3041,10 @@ var componentInfo6 = {
2729
3041
  defaultValue: "children"
2730
3042
  }]
2731
3043
  };
2732
- var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
3044
+ var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
2733
3045
  function Slot(props) {
2734
3046
  return (() => {
2735
- const _el$ = _tmpl$6();
3047
+ const _el$ = _tmpl$7();
2736
3048
  _el$.style.setProperty("pointer-events", "auto");
2737
3049
  spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
2738
3050
  "builder-slot": props.name
@@ -2757,7 +3069,7 @@ function Slot(props) {
2757
3069
  var slot_default = Slot;
2758
3070
 
2759
3071
  // src/blocks/symbol/component-info.ts
2760
- var componentInfo7 = {
3072
+ var componentInfo8 = {
2761
3073
  name: "Symbol",
2762
3074
  noWrap: true,
2763
3075
  static: true,
@@ -2833,7 +3145,7 @@ var defaultElement = {
2833
3145
  }
2834
3146
  }
2835
3147
  };
2836
- var componentInfo8 = {
3148
+ var componentInfo9 = {
2837
3149
  name: "Builder: Tabs",
2838
3150
  inputs: [{
2839
3151
  name: "tabs",
@@ -2931,8 +3243,8 @@ var componentInfo8 = {
2931
3243
  }]
2932
3244
  }]
2933
3245
  };
2934
- var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
2935
- var _tmpl$23 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
3246
+ var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
3247
+ var _tmpl$24 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
2936
3248
  var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
2937
3249
  function Tabs(props) {
2938
3250
  const [activeTab, setActiveTab] = createSignal(props.defaultActiveTab ? props.defaultActiveTab - 1 : 0);
@@ -2947,7 +3259,7 @@ function Tabs(props) {
2947
3259
  }
2948
3260
  }
2949
3261
  return (() => {
2950
- const _el$ = _tmpl$23(), _el$2 = _el$.firstChild;
3262
+ const _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
2951
3263
  _el$2.style.setProperty("display", "flex");
2952
3264
  _el$2.style.setProperty("flex-direction", "row");
2953
3265
  _el$2.style.setProperty("overflow", "auto");
@@ -2957,226 +3269,18 @@ function Tabs(props) {
2957
3269
  },
2958
3270
  children: (tab, _index) => {
2959
3271
  const index = _index();
2960
- return (() => {
2961
- const _el$4 = _tmpl$33();
2962
- _el$4.$$click = (event) => onClick(index);
2963
- setAttribute(_el$4, "key", index);
2964
- insert(_el$4, createComponent(blocks_default, {
2965
- get parent() {
2966
- return props.builderBlock.id;
2967
- },
2968
- path: `component.options.tabs.${index}.label`,
2969
- get blocks() {
2970
- return tab.label;
2971
- },
2972
- get context() {
2973
- return props.builderContext;
2974
- },
2975
- get registeredComponents() {
2976
- return props.builderComponents;
2977
- },
2978
- get linkComponent() {
2979
- return props.builderLinkComponent;
2980
- }
2981
- }));
2982
- effect((_p$) => {
2983
- const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = {
2984
- ...activeTab() === index ? props.activeTabStyle : {}
2985
- };
2986
- _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
2987
- _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
2988
- return _p$;
2989
- }, {
2990
- _v$: void 0,
2991
- _v$2: void 0
2992
- });
2993
- return _el$4;
2994
- })();
2995
- }
2996
- }));
2997
- insert(_el$, createComponent(Show, {
2998
- get when() {
2999
- return activeTabContent(activeTab());
3000
- },
3001
- get children() {
3002
- const _el$3 = _tmpl$7();
3003
- insert(_el$3, createComponent(blocks_default, {
3004
- get parent() {
3005
- return props.builderBlock.id;
3006
- },
3007
- get path() {
3008
- return `component.options.tabs.${activeTab()}.content`;
3009
- },
3010
- get blocks() {
3011
- return activeTabContent(activeTab());
3012
- },
3013
- get context() {
3014
- return props.builderContext;
3015
- },
3016
- get registeredComponents() {
3017
- return props.builderComponents;
3018
- },
3019
- get linkComponent() {
3020
- return props.builderLinkComponent;
3021
- }
3022
- }));
3023
- return _el$3;
3024
- }
3025
- }), null);
3026
- effect(() => (props.tabHeaderLayout || "flex-start") != null ? _el$2.style.setProperty("justify-content", props.tabHeaderLayout || "flex-start") : _el$2.style.removeProperty("justify-content"));
3027
- return _el$;
3028
- })();
3029
- }
3030
- var tabs_default = Tabs;
3031
- delegateEvents(["click"]);
3032
-
3033
- // src/blocks/text/component-info.ts
3034
- var componentInfo9 = {
3035
- name: "Text",
3036
- static: true,
3037
- isRSC: true,
3038
- 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",
3039
- inputs: [{
3040
- name: "text",
3041
- type: "html",
3042
- required: true,
3043
- autoFocus: true,
3044
- bubble: true,
3045
- defaultValue: "Enter some text..."
3046
- }],
3047
- defaultStyles: {
3048
- lineHeight: "normal",
3049
- height: "auto",
3050
- textAlign: "center"
3051
- }
3052
- };
3053
- var _tmpl$8 = /* @__PURE__ */ template(`<div class=builder-text>`);
3054
- function Text(props) {
3055
- return (() => {
3056
- const _el$ = _tmpl$8();
3057
- _el$.style.setProperty("outline", "none");
3058
- effect(() => _el$.innerHTML = props.text?.toString() || "");
3059
- return _el$;
3060
- })();
3061
- }
3062
- var text_default = Text;
3063
-
3064
- // src/blocks/accordion/helpers.ts
3065
- var convertOrderNumberToString = (order) => {
3066
- return order.toString();
3067
- };
3068
-
3069
- // src/blocks/accordion/accordion.tsx
3070
- var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
3071
- var _tmpl$24 = /* @__PURE__ */ template(`<div>`);
3072
- function Accordion(props) {
3073
- const [open, setOpen] = createSignal([]);
3074
- const onlyOneAtATime = createMemo(() => {
3075
- return Boolean(props.grid || props.oneAtATime);
3076
- });
3077
- const accordionStyles = createMemo(() => {
3078
- const styles = {
3079
- display: "flex",
3080
- alignItems: "stretch",
3081
- flexDirection: "column",
3082
- ...props.grid && {
3083
- flexDirection: "row",
3084
- alignItems: "flex-start",
3085
- flexWrap: "wrap"
3086
- }
3087
- };
3088
- return Object.fromEntries(Object.entries(styles).map(([key, value]) => [camelToKebabCase(key), value]));
3089
- });
3090
- const accordionTitleStyles = createMemo(() => {
3091
- const shared = {
3092
- display: "flex",
3093
- flexDirection: "column"
3094
- };
3095
- const styles = Object.fromEntries(Object.entries({
3096
- ...shared,
3097
- alignItems: "stretch",
3098
- cursor: "pointer"
3099
- }).map(([key, value]) => [camelToKebabCase(key), value]));
3100
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
3101
- });
3102
- function getAccordionTitleClassName(index) {
3103
- return `builder-accordion-title builder-accordion-title-${open().includes(index) ? "open" : "closed"}`;
3104
- }
3105
- function getAccordionDetailClassName(index) {
3106
- return `builder-accordion-detail builder-accordion-detail-${open().includes(index) ? "open" : "closed"}`;
3107
- }
3108
- const openGridItemOrder = createMemo(() => {
3109
- let itemOrder = null;
3110
- const getOpenGridItemPosition = props.grid && open().length;
3111
- if (getOpenGridItemPosition && document) {
3112
- const openItemIndex = open()[0];
3113
- const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
3114
- let subjectItem = openItem;
3115
- itemOrder = openItemIndex;
3116
- if (subjectItem) {
3117
- let prevItemRect = subjectItem.getBoundingClientRect();
3118
- while (subjectItem = subjectItem && subjectItem.nextElementSibling) {
3119
- if (subjectItem) {
3120
- if (subjectItem.classList.contains("builder-accordion-detail")) {
3121
- continue;
3122
- }
3123
- const subjectItemRect = subjectItem.getBoundingClientRect();
3124
- if (subjectItemRect.left > prevItemRect.left) {
3125
- const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
3126
- if (!isNaN(index)) {
3127
- prevItemRect = subjectItemRect;
3128
- itemOrder = index;
3129
- }
3130
- } else {
3131
- break;
3132
- }
3133
- }
3134
- }
3135
- }
3136
- }
3137
- if (typeof itemOrder === "number") {
3138
- itemOrder = itemOrder + 1;
3139
- }
3140
- return itemOrder;
3141
- });
3142
- const accordionDetailStyles = createMemo(() => {
3143
- const styles = {
3144
- ...{
3145
- order: typeof openGridItemOrder() === "number" ? openGridItemOrder() : void 0
3146
- },
3147
- ...props.grid && {
3148
- width: "100%"
3149
- }
3150
- };
3151
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
3152
- });
3153
- function onClick(index) {
3154
- if (open().includes(index)) {
3155
- setOpen(onlyOneAtATime() ? [] : open().filter((item) => item !== index));
3156
- } else {
3157
- setOpen(onlyOneAtATime() ? [index] : open().concat(index));
3158
- }
3159
- }
3160
- return (() => {
3161
- const _el$ = _tmpl$9();
3162
- insert(_el$, createComponent(For, {
3163
- get each() {
3164
- return props.items;
3165
- },
3166
- children: (item, _index) => {
3167
- const index = _index();
3168
- return [(() => {
3169
- const _el$2 = _tmpl$24();
3170
- _el$2.$$click = (event) => onClick(index);
3171
- setAttribute(_el$2, "data-index", index);
3172
- insert(_el$2, createComponent(blocks_default, {
3173
- get blocks() {
3174
- return item.title;
3175
- },
3176
- path: `items.${index}.title`,
3272
+ return (() => {
3273
+ const _el$4 = _tmpl$33();
3274
+ _el$4.$$click = (event) => onClick(index);
3275
+ setAttribute(_el$4, "key", index);
3276
+ insert(_el$4, createComponent(blocks_default, {
3177
3277
  get parent() {
3178
3278
  return props.builderBlock.id;
3179
3279
  },
3280
+ path: `component.options.tabs.${index}.label`,
3281
+ get blocks() {
3282
+ return tab.label;
3283
+ },
3180
3284
  get context() {
3181
3285
  return props.builderContext;
3182
3286
  },
@@ -3188,190 +3292,86 @@ function Accordion(props) {
3188
3292
  }
3189
3293
  }));
3190
3294
  effect((_p$) => {
3191
- const _v$ = getAccordionTitleClassName(index), _v$2 = {
3192
- ...accordionTitleStyles(),
3193
- width: props.grid ? props.gridRowWidth : void 0,
3194
- ...{
3195
- order: openGridItemOrder() !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
3196
- }
3295
+ const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = {
3296
+ ...activeTab() === index ? props.activeTabStyle : {}
3197
3297
  };
3198
- _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
3199
- _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
3298
+ _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
3299
+ _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
3200
3300
  return _p$;
3201
3301
  }, {
3202
3302
  _v$: void 0,
3203
3303
  _v$2: void 0
3204
3304
  });
3205
- return _el$2;
3206
- })(), createComponent(Show, {
3207
- get when() {
3208
- return open().includes(index);
3305
+ return _el$4;
3306
+ })();
3307
+ }
3308
+ }));
3309
+ insert(_el$, createComponent(Show, {
3310
+ get when() {
3311
+ return activeTabContent(activeTab());
3312
+ },
3313
+ get children() {
3314
+ const _el$3 = _tmpl$8();
3315
+ insert(_el$3, createComponent(blocks_default, {
3316
+ get parent() {
3317
+ return props.builderBlock.id;
3209
3318
  },
3210
- get children() {
3211
- const _el$3 = _tmpl$24();
3212
- insert(_el$3, createComponent(blocks_default, {
3213
- get blocks() {
3214
- return item.detail;
3215
- },
3216
- path: `items.${index}.detail`,
3217
- get parent() {
3218
- return props.builderBlock.id;
3219
- },
3220
- get context() {
3221
- return props.builderContext;
3222
- },
3223
- get registeredComponents() {
3224
- return props.builderComponents;
3225
- },
3226
- get linkComponent() {
3227
- return props.builderLinkComponent;
3228
- }
3229
- }));
3230
- effect((_p$) => {
3231
- const _v$3 = getAccordionDetailClassName(index), _v$4 = accordionDetailStyles();
3232
- _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
3233
- _p$._v$4 = style(_el$3, _v$4, _p$._v$4);
3234
- return _p$;
3235
- }, {
3236
- _v$3: void 0,
3237
- _v$4: void 0
3238
- });
3239
- return _el$3;
3319
+ get path() {
3320
+ return `component.options.tabs.${activeTab()}.content`;
3321
+ },
3322
+ get blocks() {
3323
+ return activeTabContent(activeTab());
3324
+ },
3325
+ get context() {
3326
+ return props.builderContext;
3327
+ },
3328
+ get registeredComponents() {
3329
+ return props.builderComponents;
3330
+ },
3331
+ get linkComponent() {
3332
+ return props.builderLinkComponent;
3240
3333
  }
3241
- })];
3334
+ }));
3335
+ return _el$3;
3242
3336
  }
3243
- }));
3244
- effect((_$p) => style(_el$, accordionStyles(), _$p));
3337
+ }), null);
3338
+ effect(() => (props.tabHeaderLayout || "flex-start") != null ? _el$2.style.setProperty("justify-content", props.tabHeaderLayout || "flex-start") : _el$2.style.removeProperty("justify-content"));
3245
3339
  return _el$;
3246
3340
  })();
3247
3341
  }
3248
- var accordion_default = Accordion;
3342
+ var tabs_default = Tabs;
3249
3343
  delegateEvents(["click"]);
3250
3344
 
3251
- // src/blocks/accordion/component-info.ts
3252
- var defaultTitle = {
3253
- "@type": "@builder.io/sdk:Element",
3254
- layerName: "Accordion item title",
3255
- responsiveStyles: {
3256
- large: {
3257
- marginTop: "10px",
3258
- position: "relative",
3259
- display: "flex",
3260
- alignItems: "stretch",
3261
- flexDirection: "column",
3262
- paddingBottom: "10px"
3263
- }
3264
- },
3265
- children: [{
3266
- "@type": "@builder.io/sdk:Element",
3267
- responsiveStyles: {
3268
- large: {
3269
- textAlign: "left",
3270
- display: "flex",
3271
- flexDirection: "column"
3272
- }
3273
- },
3274
- component: {
3275
- name: "Text",
3276
- options: {
3277
- text: "I am an accordion title. Click me!"
3278
- }
3279
- }
3280
- }]
3281
- };
3282
- var defaultDetail = {
3283
- "@type": "@builder.io/sdk:Element",
3284
- layerName: "Accordion item detail",
3285
- responsiveStyles: {
3286
- large: {
3287
- position: "relative",
3288
- display: "flex",
3289
- alignItems: "stretch",
3290
- flexDirection: "column",
3291
- marginTop: "10px",
3292
- paddingBottom: "10px"
3293
- }
3294
- },
3295
- children: [{
3296
- "@type": "@builder.io/sdk:Element",
3297
- responsiveStyles: {
3298
- large: {
3299
- paddingTop: "50px",
3300
- textAlign: "left",
3301
- display: "flex",
3302
- flexDirection: "column",
3303
- paddingBottom: "50px"
3304
- }
3305
- },
3306
- component: {
3307
- name: "Text",
3308
- options: {
3309
- text: "I am an accordion detail, hello!"
3310
- }
3311
- }
3312
- }]
3313
- };
3345
+ // src/blocks/text/component-info.ts
3314
3346
  var componentInfo10 = {
3315
- name: "Builder:Accordion",
3316
- canHaveChildren: true,
3317
- image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
3318
- defaultStyles: {
3319
- display: "flex",
3320
- flexDirection: "column",
3321
- alignItems: "stretch"
3322
- },
3347
+ name: "Text",
3348
+ static: true,
3349
+ isRSC: true,
3350
+ 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",
3323
3351
  inputs: [{
3324
- name: "items",
3325
- type: "list",
3326
- broadcast: true,
3327
- subFields: [{
3328
- name: "title",
3329
- type: "uiBlocks",
3330
- hideFromUI: true,
3331
- defaultValue: [defaultTitle]
3332
- }, {
3333
- name: "detail",
3334
- type: "uiBlocks",
3335
- hideFromUI: true,
3336
- defaultValue: [defaultDetail]
3337
- }],
3338
- defaultValue: [{
3339
- title: [defaultTitle],
3340
- detail: [defaultDetail]
3341
- }, {
3342
- title: [defaultTitle],
3343
- detail: [defaultDetail]
3344
- }],
3345
- showIf: (options) => !options.get("useChildrenForItems")
3346
- }, {
3347
- name: "oneAtATime",
3348
- helperText: "Only allow opening one at a time (collapse all others when new item openned)",
3349
- type: "boolean",
3350
- defaultValue: false
3351
- }, {
3352
- name: "grid",
3353
- helperText: "Display as a grid",
3354
- type: "boolean",
3355
- defaultValue: false
3356
- }, {
3357
- name: "gridRowWidth",
3358
- helperText: "Display as a grid",
3359
- type: "string",
3360
- showIf: (options) => options.get("grid"),
3361
- defaultValue: "25%"
3362
- }, {
3363
- name: "useChildrenForItems",
3364
- type: "boolean",
3365
- helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
3366
- advanced: true,
3367
- defaultValue: false,
3368
- onChange: (options) => {
3369
- if (options.get("useChildrenForItems") === true) {
3370
- options.set("items", []);
3371
- }
3372
- }
3373
- }]
3352
+ name: "text",
3353
+ type: "html",
3354
+ required: true,
3355
+ autoFocus: true,
3356
+ bubble: true,
3357
+ defaultValue: "Enter some text..."
3358
+ }],
3359
+ defaultStyles: {
3360
+ lineHeight: "normal",
3361
+ height: "auto",
3362
+ textAlign: "center"
3363
+ }
3374
3364
  };
3365
+ var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-text>`);
3366
+ function Text(props) {
3367
+ return (() => {
3368
+ const _el$ = _tmpl$9();
3369
+ _el$.style.setProperty("outline", "none");
3370
+ effect(() => _el$.innerHTML = props.text?.toString() || "");
3371
+ return _el$;
3372
+ })();
3373
+ }
3374
+ var text_default = Text;
3375
3375
 
3376
3376
  // src/blocks/custom-code/component-info.ts
3377
3377
  var componentInfo11 = {
@@ -3817,11 +3817,11 @@ function FormComponent(props) {
3817
3817
  return;
3818
3818
  }
3819
3819
  event.preventDefault();
3820
- const el = event.currentTarget;
3820
+ const el = event.currentTarget || event.target;
3821
3821
  const headers = props.customHeaders || {};
3822
3822
  let body;
3823
3823
  const formData = new FormData(el);
3824
- const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3824
+ const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3825
3825
  let value;
3826
3826
  const key = el2.name;
3827
3827
  if (el2 instanceof HTMLInputElement) {
@@ -3991,7 +3991,7 @@ function FormComponent(props) {
3991
3991
  get name() {
3992
3992
  return props.name;
3993
3993
  }
3994
- }, {}, () => props.attributes), false, true);
3994
+ }, {}, {}, () => props.attributes), false, true);
3995
3995
  insert(_el$, createComponent(Show, {
3996
3996
  get when() {
3997
3997
  return props.builderBlock && props.builderBlock.children;
@@ -4567,34 +4567,34 @@ var getExtraComponents = () => [{
4567
4567
  // src/constants/builder-registered-components.ts
4568
4568
  var getDefaultRegisteredComponents = () => [{
4569
4569
  component: button_default,
4570
- ...componentInfo
4570
+ ...componentInfo2
4571
4571
  }, {
4572
4572
  component: columns_default,
4573
- ...componentInfo2
4573
+ ...componentInfo3
4574
4574
  }, {
4575
4575
  component: fragment_default,
4576
- ...componentInfo3
4576
+ ...componentInfo4
4577
4577
  }, {
4578
4578
  component: image_default,
4579
- ...componentInfo4
4579
+ ...componentInfo5
4580
4580
  }, {
4581
4581
  component: section_default,
4582
- ...componentInfo5
4582
+ ...componentInfo6
4583
4583
  }, {
4584
4584
  component: slot_default,
4585
- ...componentInfo6
4585
+ ...componentInfo7
4586
4586
  }, {
4587
4587
  component: symbol_default,
4588
- ...componentInfo7
4588
+ ...componentInfo8
4589
4589
  }, {
4590
4590
  component: text_default,
4591
- ...componentInfo9
4591
+ ...componentInfo10
4592
4592
  }, ...TARGET === "rsc" ? [] : [{
4593
4593
  component: tabs_default,
4594
- ...componentInfo8
4594
+ ...componentInfo9
4595
4595
  }, {
4596
4596
  component: accordion_default,
4597
- ...componentInfo10
4597
+ ...componentInfo
4598
4598
  }], ...getExtraComponents()];
4599
4599
 
4600
4600
  // src/functions/register-component.ts
@@ -5178,7 +5178,7 @@ function isFromTrustedHost(trustedHosts, e) {
5178
5178
  }
5179
5179
 
5180
5180
  // src/constants/sdk-version.ts
5181
- var SDK_VERSION = "1.0.28";
5181
+ var SDK_VERSION = "1.0.29";
5182
5182
 
5183
5183
  // src/functions/register.ts
5184
5184
  var registry = {};
@@ -5644,7 +5644,7 @@ function EnableEditor(props) {
5644
5644
  if (isPreviewing() && !isEditing()) {
5645
5645
  const searchParams = new URL(location.href).searchParams;
5646
5646
  const searchParamPreviewModel = searchParams.get("builder.preview");
5647
- const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
5647
+ const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
5648
5648
  const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
5649
5649
  if (searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
5650
5650
  fetchOneEntry({