@builder.io/sdk-solid 1.0.28 → 1.0.30

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