@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.
@@ -2122,8 +2122,320 @@ var handleABTesting = async ({
2122
2122
  // src/helpers/canTrack.ts
2123
2123
  var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
2124
2124
 
2125
+ // src/blocks/accordion/component-info.ts
2126
+ var defaultTitle = {
2127
+ "@type": "@builder.io/sdk:Element",
2128
+ layerName: "Accordion item title",
2129
+ responsiveStyles: {
2130
+ large: {
2131
+ marginTop: "10px",
2132
+ position: "relative",
2133
+ display: "flex",
2134
+ alignItems: "stretch",
2135
+ flexDirection: "column",
2136
+ paddingBottom: "10px"
2137
+ }
2138
+ },
2139
+ children: [{
2140
+ "@type": "@builder.io/sdk:Element",
2141
+ responsiveStyles: {
2142
+ large: {
2143
+ textAlign: "left",
2144
+ display: "flex",
2145
+ flexDirection: "column"
2146
+ }
2147
+ },
2148
+ component: {
2149
+ name: "Text",
2150
+ options: {
2151
+ text: "I am an accordion title. Click me!"
2152
+ }
2153
+ }
2154
+ }]
2155
+ };
2156
+ var defaultDetail = {
2157
+ "@type": "@builder.io/sdk:Element",
2158
+ layerName: "Accordion item detail",
2159
+ responsiveStyles: {
2160
+ large: {
2161
+ position: "relative",
2162
+ display: "flex",
2163
+ alignItems: "stretch",
2164
+ flexDirection: "column",
2165
+ marginTop: "10px",
2166
+ paddingBottom: "10px"
2167
+ }
2168
+ },
2169
+ children: [{
2170
+ "@type": "@builder.io/sdk:Element",
2171
+ responsiveStyles: {
2172
+ large: {
2173
+ paddingTop: "50px",
2174
+ textAlign: "left",
2175
+ display: "flex",
2176
+ flexDirection: "column",
2177
+ paddingBottom: "50px"
2178
+ }
2179
+ },
2180
+ component: {
2181
+ name: "Text",
2182
+ options: {
2183
+ text: "I am an accordion detail, hello!"
2184
+ }
2185
+ }
2186
+ }]
2187
+ };
2188
+ var componentInfo = {
2189
+ name: "Builder:Accordion",
2190
+ canHaveChildren: true,
2191
+ image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
2192
+ defaultStyles: {
2193
+ display: "flex",
2194
+ flexDirection: "column",
2195
+ alignItems: "stretch"
2196
+ },
2197
+ inputs: [{
2198
+ name: "items",
2199
+ type: "list",
2200
+ broadcast: true,
2201
+ subFields: [{
2202
+ name: "title",
2203
+ type: "uiBlocks",
2204
+ hideFromUI: true,
2205
+ defaultValue: [defaultTitle]
2206
+ }, {
2207
+ name: "detail",
2208
+ type: "uiBlocks",
2209
+ hideFromUI: true,
2210
+ defaultValue: [defaultDetail]
2211
+ }],
2212
+ defaultValue: [{
2213
+ title: [defaultTitle],
2214
+ detail: [defaultDetail]
2215
+ }, {
2216
+ title: [defaultTitle],
2217
+ detail: [defaultDetail]
2218
+ }],
2219
+ showIf: (options) => !options.get("useChildrenForItems")
2220
+ }, {
2221
+ name: "oneAtATime",
2222
+ helperText: "Only allow opening one at a time (collapse all others when new item openned)",
2223
+ type: "boolean",
2224
+ defaultValue: false
2225
+ }, {
2226
+ name: "grid",
2227
+ helperText: "Display as a grid",
2228
+ type: "boolean",
2229
+ defaultValue: false
2230
+ }, {
2231
+ name: "gridRowWidth",
2232
+ helperText: "Display as a grid",
2233
+ type: "string",
2234
+ showIf: (options) => options.get("grid"),
2235
+ defaultValue: "25%"
2236
+ }, {
2237
+ name: "useChildrenForItems",
2238
+ type: "boolean",
2239
+ helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
2240
+ advanced: true,
2241
+ defaultValue: false,
2242
+ onChange: (options) => {
2243
+ if (options.get("useChildrenForItems") === true) {
2244
+ options.set("items", []);
2245
+ }
2246
+ }
2247
+ }]
2248
+ };
2249
+
2250
+ // src/blocks/accordion/helpers.ts
2251
+ var convertOrderNumberToString = (order) => {
2252
+ return order.toString();
2253
+ };
2254
+
2255
+ // src/blocks/accordion/accordion.tsx
2256
+ var _tmpl$6 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
2257
+ var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
2258
+ function Accordion(props) {
2259
+ const [open, setOpen] = createSignal([]);
2260
+ const onlyOneAtATime = createMemo(() => {
2261
+ return Boolean(props.grid || props.oneAtATime);
2262
+ });
2263
+ const accordionStyles = createMemo(() => {
2264
+ const styles = {
2265
+ display: "flex",
2266
+ alignItems: "stretch",
2267
+ flexDirection: "column",
2268
+ ...props.grid && {
2269
+ flexDirection: "row",
2270
+ alignItems: "flex-start",
2271
+ flexWrap: "wrap"
2272
+ }
2273
+ };
2274
+ return Object.fromEntries(Object.entries(styles).map(([key, value]) => [camelToKebabCase(key), value]));
2275
+ });
2276
+ const accordionTitleStyles = createMemo(() => {
2277
+ const shared = {
2278
+ display: "flex",
2279
+ flexDirection: "column"
2280
+ };
2281
+ const styles = Object.fromEntries(Object.entries({
2282
+ ...shared,
2283
+ alignItems: "stretch",
2284
+ cursor: "pointer"
2285
+ }).map(([key, value]) => [camelToKebabCase(key), value]));
2286
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2287
+ });
2288
+ function getAccordionTitleClassName(index) {
2289
+ return `builder-accordion-title builder-accordion-title-${open().includes(index) ? "open" : "closed"}`;
2290
+ }
2291
+ function getAccordionDetailClassName(index) {
2292
+ return `builder-accordion-detail builder-accordion-detail-${open().includes(index) ? "open" : "closed"}`;
2293
+ }
2294
+ const openGridItemOrder = createMemo(() => {
2295
+ let itemOrder = null;
2296
+ const getOpenGridItemPosition = props.grid && open().length;
2297
+ if (getOpenGridItemPosition && document) {
2298
+ const openItemIndex = open()[0];
2299
+ const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
2300
+ let subjectItem = openItem;
2301
+ itemOrder = openItemIndex;
2302
+ if (subjectItem) {
2303
+ let prevItemRect = subjectItem.getBoundingClientRect();
2304
+ while (subjectItem = subjectItem && subjectItem.nextElementSibling) {
2305
+ if (subjectItem) {
2306
+ if (subjectItem.classList.contains("builder-accordion-detail")) {
2307
+ continue;
2308
+ }
2309
+ const subjectItemRect = subjectItem.getBoundingClientRect();
2310
+ if (subjectItemRect.left > prevItemRect.left) {
2311
+ const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
2312
+ if (!isNaN(index)) {
2313
+ prevItemRect = subjectItemRect;
2314
+ itemOrder = index;
2315
+ }
2316
+ } else {
2317
+ break;
2318
+ }
2319
+ }
2320
+ }
2321
+ }
2322
+ }
2323
+ if (typeof itemOrder === "number") {
2324
+ itemOrder = itemOrder + 1;
2325
+ }
2326
+ return itemOrder;
2327
+ });
2328
+ const accordionDetailStyles = createMemo(() => {
2329
+ const styles = {
2330
+ ...{
2331
+ order: typeof openGridItemOrder() === "number" ? openGridItemOrder() : void 0
2332
+ },
2333
+ ...props.grid && {
2334
+ width: "100%"
2335
+ }
2336
+ };
2337
+ return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2338
+ });
2339
+ function onClick(index) {
2340
+ if (open().includes(index)) {
2341
+ setOpen(onlyOneAtATime() ? [] : open().filter((item) => item !== index));
2342
+ } else {
2343
+ setOpen(onlyOneAtATime() ? [index] : open().concat(index));
2344
+ }
2345
+ }
2346
+ return (() => {
2347
+ const _el$ = _tmpl$6();
2348
+ insert(_el$, createComponent(For, {
2349
+ get each() {
2350
+ return props.items;
2351
+ },
2352
+ children: (item, _index) => {
2353
+ const index = _index();
2354
+ return [(() => {
2355
+ const _el$2 = _tmpl$23();
2356
+ _el$2.$$click = (event) => onClick(index);
2357
+ setAttribute(_el$2, "data-index", index);
2358
+ insert(_el$2, createComponent(blocks_default, {
2359
+ get blocks() {
2360
+ return item.title;
2361
+ },
2362
+ path: `items.${index}.title`,
2363
+ get parent() {
2364
+ return props.builderBlock.id;
2365
+ },
2366
+ get context() {
2367
+ return props.builderContext;
2368
+ },
2369
+ get registeredComponents() {
2370
+ return props.builderComponents;
2371
+ },
2372
+ get linkComponent() {
2373
+ return props.builderLinkComponent;
2374
+ }
2375
+ }));
2376
+ effect((_p$) => {
2377
+ const _v$ = getAccordionTitleClassName(index), _v$2 = {
2378
+ ...accordionTitleStyles(),
2379
+ width: props.grid ? props.gridRowWidth : void 0,
2380
+ ...{
2381
+ order: openGridItemOrder() !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
2382
+ }
2383
+ };
2384
+ _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
2385
+ _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
2386
+ return _p$;
2387
+ }, {
2388
+ _v$: void 0,
2389
+ _v$2: void 0
2390
+ });
2391
+ return _el$2;
2392
+ })(), createComponent(Show, {
2393
+ get when() {
2394
+ return open().includes(index);
2395
+ },
2396
+ get children() {
2397
+ const _el$3 = _tmpl$23();
2398
+ insert(_el$3, createComponent(blocks_default, {
2399
+ get blocks() {
2400
+ return item.detail;
2401
+ },
2402
+ path: `items.${index}.detail`,
2403
+ get parent() {
2404
+ return props.builderBlock.id;
2405
+ },
2406
+ get context() {
2407
+ return props.builderContext;
2408
+ },
2409
+ get registeredComponents() {
2410
+ return props.builderComponents;
2411
+ },
2412
+ get linkComponent() {
2413
+ return props.builderLinkComponent;
2414
+ }
2415
+ }));
2416
+ effect((_p$) => {
2417
+ const _v$3 = getAccordionDetailClassName(index), _v$4 = accordionDetailStyles();
2418
+ _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
2419
+ _p$._v$4 = style(_el$3, _v$4, _p$._v$4);
2420
+ return _p$;
2421
+ }, {
2422
+ _v$3: void 0,
2423
+ _v$4: void 0
2424
+ });
2425
+ return _el$3;
2426
+ }
2427
+ })];
2428
+ }
2429
+ }));
2430
+ effect((_$p) => style(_el$, accordionStyles(), _$p));
2431
+ return _el$;
2432
+ })();
2433
+ }
2434
+ var accordion_default = Accordion;
2435
+ delegateEvents(["click"]);
2436
+
2125
2437
  // src/blocks/button/component-info.ts
2126
- var componentInfo = {
2438
+ var componentInfo2 = {
2127
2439
  name: "Core:Button",
2128
2440
  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
2129
2441
  defaultStyles: {
@@ -2159,7 +2471,7 @@ var componentInfo = {
2159
2471
  };
2160
2472
 
2161
2473
  // src/blocks/columns/component-info.ts
2162
- var componentInfo2 = {
2474
+ var componentInfo3 = {
2163
2475
  // TODO: ways to statically preprocess JSON for references, functions, etc
2164
2476
  name: "Columns",
2165
2477
  isRSC: true,
@@ -2379,7 +2691,7 @@ var componentInfo2 = {
2379
2691
  };
2380
2692
 
2381
2693
  // src/blocks/fragment/component-info.ts
2382
- var componentInfo3 = {
2694
+ var componentInfo4 = {
2383
2695
  name: "Fragment",
2384
2696
  static: true,
2385
2697
  hidden: true,
@@ -2388,7 +2700,7 @@ var componentInfo3 = {
2388
2700
  };
2389
2701
 
2390
2702
  // src/blocks/image/component-info.ts
2391
- var componentInfo4 = {
2703
+ var componentInfo5 = {
2392
2704
  name: "Image",
2393
2705
  static: true,
2394
2706
  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",
@@ -2510,7 +2822,7 @@ var componentInfo4 = {
2510
2822
  };
2511
2823
 
2512
2824
  // src/blocks/section/component-info.ts
2513
- var componentInfo5 = {
2825
+ var componentInfo6 = {
2514
2826
  name: "Core:Section",
2515
2827
  static: true,
2516
2828
  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -2552,7 +2864,7 @@ var componentInfo5 = {
2552
2864
  };
2553
2865
 
2554
2866
  // src/blocks/slot/component-info.ts
2555
- var componentInfo6 = {
2867
+ var componentInfo7 = {
2556
2868
  name: "Slot",
2557
2869
  isRSC: true,
2558
2870
  description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -2566,10 +2878,10 @@ var componentInfo6 = {
2566
2878
  defaultValue: "children"
2567
2879
  }]
2568
2880
  };
2569
- var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
2881
+ var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
2570
2882
  function Slot(props) {
2571
2883
  return (() => {
2572
- const _el$ = _tmpl$6();
2884
+ const _el$ = _tmpl$7();
2573
2885
  _el$.style.setProperty("pointer-events", "auto");
2574
2886
  spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
2575
2887
  "builder-slot": props.name
@@ -2594,7 +2906,7 @@ function Slot(props) {
2594
2906
  var slot_default = Slot;
2595
2907
 
2596
2908
  // src/blocks/symbol/component-info.ts
2597
- var componentInfo7 = {
2909
+ var componentInfo8 = {
2598
2910
  name: "Symbol",
2599
2911
  noWrap: true,
2600
2912
  static: true,
@@ -2670,7 +2982,7 @@ var defaultElement = {
2670
2982
  }
2671
2983
  }
2672
2984
  };
2673
- var componentInfo8 = {
2985
+ var componentInfo9 = {
2674
2986
  name: "Builder: Tabs",
2675
2987
  inputs: [{
2676
2988
  name: "tabs",
@@ -2768,8 +3080,8 @@ var componentInfo8 = {
2768
3080
  }]
2769
3081
  }]
2770
3082
  };
2771
- var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
2772
- var _tmpl$23 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
3083
+ var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
3084
+ var _tmpl$24 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
2773
3085
  var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
2774
3086
  function Tabs(props) {
2775
3087
  const [activeTab, setActiveTab] = createSignal(props.defaultActiveTab ? props.defaultActiveTab - 1 : 0);
@@ -2784,7 +3096,7 @@ function Tabs(props) {
2784
3096
  }
2785
3097
  }
2786
3098
  return (() => {
2787
- const _el$ = _tmpl$23(), _el$2 = _el$.firstChild;
3099
+ const _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
2788
3100
  _el$2.style.setProperty("display", "flex");
2789
3101
  _el$2.style.setProperty("flex-direction", "row");
2790
3102
  _el$2.style.setProperty("overflow", "auto");
@@ -2794,226 +3106,18 @@ function Tabs(props) {
2794
3106
  },
2795
3107
  children: (tab, _index) => {
2796
3108
  const index = _index();
2797
- return (() => {
2798
- const _el$4 = _tmpl$33();
2799
- _el$4.$$click = (event) => onClick(index);
2800
- setAttribute(_el$4, "key", index);
2801
- insert(_el$4, createComponent(blocks_default, {
2802
- get parent() {
2803
- return props.builderBlock.id;
2804
- },
2805
- path: `component.options.tabs.${index}.label`,
2806
- get blocks() {
2807
- return tab.label;
2808
- },
2809
- get context() {
2810
- return props.builderContext;
2811
- },
2812
- get registeredComponents() {
2813
- return props.builderComponents;
2814
- },
2815
- get linkComponent() {
2816
- return props.builderLinkComponent;
2817
- }
2818
- }));
2819
- effect((_p$) => {
2820
- const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = {
2821
- ...activeTab() === index ? props.activeTabStyle : {}
2822
- };
2823
- _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
2824
- _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
2825
- return _p$;
2826
- }, {
2827
- _v$: void 0,
2828
- _v$2: void 0
2829
- });
2830
- return _el$4;
2831
- })();
2832
- }
2833
- }));
2834
- insert(_el$, createComponent(Show, {
2835
- get when() {
2836
- return activeTabContent(activeTab());
2837
- },
2838
- get children() {
2839
- const _el$3 = _tmpl$7();
2840
- insert(_el$3, createComponent(blocks_default, {
2841
- get parent() {
2842
- return props.builderBlock.id;
2843
- },
2844
- get path() {
2845
- return `component.options.tabs.${activeTab()}.content`;
2846
- },
2847
- get blocks() {
2848
- return activeTabContent(activeTab());
2849
- },
2850
- get context() {
2851
- return props.builderContext;
2852
- },
2853
- get registeredComponents() {
2854
- return props.builderComponents;
2855
- },
2856
- get linkComponent() {
2857
- return props.builderLinkComponent;
2858
- }
2859
- }));
2860
- return _el$3;
2861
- }
2862
- }), null);
2863
- effect(() => (props.tabHeaderLayout || "flex-start") != null ? _el$2.style.setProperty("justify-content", props.tabHeaderLayout || "flex-start") : _el$2.style.removeProperty("justify-content"));
2864
- return _el$;
2865
- })();
2866
- }
2867
- var tabs_default = Tabs;
2868
- delegateEvents(["click"]);
2869
-
2870
- // src/blocks/text/component-info.ts
2871
- var componentInfo9 = {
2872
- name: "Text",
2873
- static: true,
2874
- isRSC: true,
2875
- 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",
2876
- inputs: [{
2877
- name: "text",
2878
- type: "html",
2879
- required: true,
2880
- autoFocus: true,
2881
- bubble: true,
2882
- defaultValue: "Enter some text..."
2883
- }],
2884
- defaultStyles: {
2885
- lineHeight: "normal",
2886
- height: "auto",
2887
- textAlign: "center"
2888
- }
2889
- };
2890
- var _tmpl$8 = /* @__PURE__ */ template(`<div class=builder-text>`);
2891
- function Text(props) {
2892
- return (() => {
2893
- const _el$ = _tmpl$8();
2894
- _el$.style.setProperty("outline", "none");
2895
- effect(() => _el$.innerHTML = props.text?.toString() || "");
2896
- return _el$;
2897
- })();
2898
- }
2899
- var text_default = Text;
2900
-
2901
- // src/blocks/accordion/helpers.ts
2902
- var convertOrderNumberToString = (order) => {
2903
- return order.toString();
2904
- };
2905
-
2906
- // src/blocks/accordion/accordion.tsx
2907
- var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
2908
- var _tmpl$24 = /* @__PURE__ */ template(`<div>`);
2909
- function Accordion(props) {
2910
- const [open, setOpen] = createSignal([]);
2911
- const onlyOneAtATime = createMemo(() => {
2912
- return Boolean(props.grid || props.oneAtATime);
2913
- });
2914
- const accordionStyles = createMemo(() => {
2915
- const styles = {
2916
- display: "flex",
2917
- alignItems: "stretch",
2918
- flexDirection: "column",
2919
- ...props.grid && {
2920
- flexDirection: "row",
2921
- alignItems: "flex-start",
2922
- flexWrap: "wrap"
2923
- }
2924
- };
2925
- return Object.fromEntries(Object.entries(styles).map(([key, value]) => [camelToKebabCase(key), value]));
2926
- });
2927
- const accordionTitleStyles = createMemo(() => {
2928
- const shared = {
2929
- display: "flex",
2930
- flexDirection: "column"
2931
- };
2932
- const styles = Object.fromEntries(Object.entries({
2933
- ...shared,
2934
- alignItems: "stretch",
2935
- cursor: "pointer"
2936
- }).map(([key, value]) => [camelToKebabCase(key), value]));
2937
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2938
- });
2939
- function getAccordionTitleClassName(index) {
2940
- return `builder-accordion-title builder-accordion-title-${open().includes(index) ? "open" : "closed"}`;
2941
- }
2942
- function getAccordionDetailClassName(index) {
2943
- return `builder-accordion-detail builder-accordion-detail-${open().includes(index) ? "open" : "closed"}`;
2944
- }
2945
- const openGridItemOrder = createMemo(() => {
2946
- let itemOrder = null;
2947
- const getOpenGridItemPosition = props.grid && open().length;
2948
- if (getOpenGridItemPosition && document) {
2949
- const openItemIndex = open()[0];
2950
- const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
2951
- let subjectItem = openItem;
2952
- itemOrder = openItemIndex;
2953
- if (subjectItem) {
2954
- let prevItemRect = subjectItem.getBoundingClientRect();
2955
- while (subjectItem = subjectItem && subjectItem.nextElementSibling) {
2956
- if (subjectItem) {
2957
- if (subjectItem.classList.contains("builder-accordion-detail")) {
2958
- continue;
2959
- }
2960
- const subjectItemRect = subjectItem.getBoundingClientRect();
2961
- if (subjectItemRect.left > prevItemRect.left) {
2962
- const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
2963
- if (!isNaN(index)) {
2964
- prevItemRect = subjectItemRect;
2965
- itemOrder = index;
2966
- }
2967
- } else {
2968
- break;
2969
- }
2970
- }
2971
- }
2972
- }
2973
- }
2974
- if (typeof itemOrder === "number") {
2975
- itemOrder = itemOrder + 1;
2976
- }
2977
- return itemOrder;
2978
- });
2979
- const accordionDetailStyles = createMemo(() => {
2980
- const styles = {
2981
- ...{
2982
- order: typeof openGridItemOrder() === "number" ? openGridItemOrder() : void 0
2983
- },
2984
- ...props.grid && {
2985
- width: "100%"
2986
- }
2987
- };
2988
- return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
2989
- });
2990
- function onClick(index) {
2991
- if (open().includes(index)) {
2992
- setOpen(onlyOneAtATime() ? [] : open().filter((item) => item !== index));
2993
- } else {
2994
- setOpen(onlyOneAtATime() ? [index] : open().concat(index));
2995
- }
2996
- }
2997
- return (() => {
2998
- const _el$ = _tmpl$9();
2999
- insert(_el$, createComponent(For, {
3000
- get each() {
3001
- return props.items;
3002
- },
3003
- children: (item, _index) => {
3004
- const index = _index();
3005
- return [(() => {
3006
- const _el$2 = _tmpl$24();
3007
- _el$2.$$click = (event) => onClick(index);
3008
- setAttribute(_el$2, "data-index", index);
3009
- insert(_el$2, createComponent(blocks_default, {
3010
- get blocks() {
3011
- return item.title;
3012
- },
3013
- path: `items.${index}.title`,
3109
+ return (() => {
3110
+ const _el$4 = _tmpl$33();
3111
+ _el$4.$$click = (event) => onClick(index);
3112
+ setAttribute(_el$4, "key", index);
3113
+ insert(_el$4, createComponent(blocks_default, {
3014
3114
  get parent() {
3015
3115
  return props.builderBlock.id;
3016
3116
  },
3117
+ path: `component.options.tabs.${index}.label`,
3118
+ get blocks() {
3119
+ return tab.label;
3120
+ },
3017
3121
  get context() {
3018
3122
  return props.builderContext;
3019
3123
  },
@@ -3025,190 +3129,86 @@ function Accordion(props) {
3025
3129
  }
3026
3130
  }));
3027
3131
  effect((_p$) => {
3028
- const _v$ = getAccordionTitleClassName(index), _v$2 = {
3029
- ...accordionTitleStyles(),
3030
- width: props.grid ? props.gridRowWidth : void 0,
3031
- ...{
3032
- order: openGridItemOrder() !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
3033
- }
3132
+ const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = {
3133
+ ...activeTab() === index ? props.activeTabStyle : {}
3034
3134
  };
3035
- _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
3036
- _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
3135
+ _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
3136
+ _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
3037
3137
  return _p$;
3038
3138
  }, {
3039
3139
  _v$: void 0,
3040
3140
  _v$2: void 0
3041
3141
  });
3042
- return _el$2;
3043
- })(), createComponent(Show, {
3044
- get when() {
3045
- return open().includes(index);
3142
+ return _el$4;
3143
+ })();
3144
+ }
3145
+ }));
3146
+ insert(_el$, createComponent(Show, {
3147
+ get when() {
3148
+ return activeTabContent(activeTab());
3149
+ },
3150
+ get children() {
3151
+ const _el$3 = _tmpl$8();
3152
+ insert(_el$3, createComponent(blocks_default, {
3153
+ get parent() {
3154
+ return props.builderBlock.id;
3046
3155
  },
3047
- get children() {
3048
- const _el$3 = _tmpl$24();
3049
- insert(_el$3, createComponent(blocks_default, {
3050
- get blocks() {
3051
- return item.detail;
3052
- },
3053
- path: `items.${index}.detail`,
3054
- get parent() {
3055
- return props.builderBlock.id;
3056
- },
3057
- get context() {
3058
- return props.builderContext;
3059
- },
3060
- get registeredComponents() {
3061
- return props.builderComponents;
3062
- },
3063
- get linkComponent() {
3064
- return props.builderLinkComponent;
3065
- }
3066
- }));
3067
- effect((_p$) => {
3068
- const _v$3 = getAccordionDetailClassName(index), _v$4 = accordionDetailStyles();
3069
- _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
3070
- _p$._v$4 = style(_el$3, _v$4, _p$._v$4);
3071
- return _p$;
3072
- }, {
3073
- _v$3: void 0,
3074
- _v$4: void 0
3075
- });
3076
- return _el$3;
3156
+ get path() {
3157
+ return `component.options.tabs.${activeTab()}.content`;
3158
+ },
3159
+ get blocks() {
3160
+ return activeTabContent(activeTab());
3161
+ },
3162
+ get context() {
3163
+ return props.builderContext;
3164
+ },
3165
+ get registeredComponents() {
3166
+ return props.builderComponents;
3167
+ },
3168
+ get linkComponent() {
3169
+ return props.builderLinkComponent;
3077
3170
  }
3078
- })];
3171
+ }));
3172
+ return _el$3;
3079
3173
  }
3080
- }));
3081
- effect((_$p) => style(_el$, accordionStyles(), _$p));
3174
+ }), null);
3175
+ effect(() => (props.tabHeaderLayout || "flex-start") != null ? _el$2.style.setProperty("justify-content", props.tabHeaderLayout || "flex-start") : _el$2.style.removeProperty("justify-content"));
3082
3176
  return _el$;
3083
3177
  })();
3084
3178
  }
3085
- var accordion_default = Accordion;
3179
+ var tabs_default = Tabs;
3086
3180
  delegateEvents(["click"]);
3087
3181
 
3088
- // src/blocks/accordion/component-info.ts
3089
- var defaultTitle = {
3090
- "@type": "@builder.io/sdk:Element",
3091
- layerName: "Accordion item title",
3092
- responsiveStyles: {
3093
- large: {
3094
- marginTop: "10px",
3095
- position: "relative",
3096
- display: "flex",
3097
- alignItems: "stretch",
3098
- flexDirection: "column",
3099
- paddingBottom: "10px"
3100
- }
3101
- },
3102
- children: [{
3103
- "@type": "@builder.io/sdk:Element",
3104
- responsiveStyles: {
3105
- large: {
3106
- textAlign: "left",
3107
- display: "flex",
3108
- flexDirection: "column"
3109
- }
3110
- },
3111
- component: {
3112
- name: "Text",
3113
- options: {
3114
- text: "I am an accordion title. Click me!"
3115
- }
3116
- }
3117
- }]
3118
- };
3119
- var defaultDetail = {
3120
- "@type": "@builder.io/sdk:Element",
3121
- layerName: "Accordion item detail",
3122
- responsiveStyles: {
3123
- large: {
3124
- position: "relative",
3125
- display: "flex",
3126
- alignItems: "stretch",
3127
- flexDirection: "column",
3128
- marginTop: "10px",
3129
- paddingBottom: "10px"
3130
- }
3131
- },
3132
- children: [{
3133
- "@type": "@builder.io/sdk:Element",
3134
- responsiveStyles: {
3135
- large: {
3136
- paddingTop: "50px",
3137
- textAlign: "left",
3138
- display: "flex",
3139
- flexDirection: "column",
3140
- paddingBottom: "50px"
3141
- }
3142
- },
3143
- component: {
3144
- name: "Text",
3145
- options: {
3146
- text: "I am an accordion detail, hello!"
3147
- }
3148
- }
3149
- }]
3150
- };
3182
+ // src/blocks/text/component-info.ts
3151
3183
  var componentInfo10 = {
3152
- name: "Builder:Accordion",
3153
- canHaveChildren: true,
3154
- image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
3155
- defaultStyles: {
3156
- display: "flex",
3157
- flexDirection: "column",
3158
- alignItems: "stretch"
3159
- },
3184
+ name: "Text",
3185
+ static: true,
3186
+ isRSC: true,
3187
+ 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",
3160
3188
  inputs: [{
3161
- name: "items",
3162
- type: "list",
3163
- broadcast: true,
3164
- subFields: [{
3165
- name: "title",
3166
- type: "uiBlocks",
3167
- hideFromUI: true,
3168
- defaultValue: [defaultTitle]
3169
- }, {
3170
- name: "detail",
3171
- type: "uiBlocks",
3172
- hideFromUI: true,
3173
- defaultValue: [defaultDetail]
3174
- }],
3175
- defaultValue: [{
3176
- title: [defaultTitle],
3177
- detail: [defaultDetail]
3178
- }, {
3179
- title: [defaultTitle],
3180
- detail: [defaultDetail]
3181
- }],
3182
- showIf: (options) => !options.get("useChildrenForItems")
3183
- }, {
3184
- name: "oneAtATime",
3185
- helperText: "Only allow opening one at a time (collapse all others when new item openned)",
3186
- type: "boolean",
3187
- defaultValue: false
3188
- }, {
3189
- name: "grid",
3190
- helperText: "Display as a grid",
3191
- type: "boolean",
3192
- defaultValue: false
3193
- }, {
3194
- name: "gridRowWidth",
3195
- helperText: "Display as a grid",
3196
- type: "string",
3197
- showIf: (options) => options.get("grid"),
3198
- defaultValue: "25%"
3199
- }, {
3200
- name: "useChildrenForItems",
3201
- type: "boolean",
3202
- helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
3203
- advanced: true,
3204
- defaultValue: false,
3205
- onChange: (options) => {
3206
- if (options.get("useChildrenForItems") === true) {
3207
- options.set("items", []);
3208
- }
3209
- }
3210
- }]
3189
+ name: "text",
3190
+ type: "html",
3191
+ required: true,
3192
+ autoFocus: true,
3193
+ bubble: true,
3194
+ defaultValue: "Enter some text..."
3195
+ }],
3196
+ defaultStyles: {
3197
+ lineHeight: "normal",
3198
+ height: "auto",
3199
+ textAlign: "center"
3200
+ }
3211
3201
  };
3202
+ var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-text>`);
3203
+ function Text(props) {
3204
+ return (() => {
3205
+ const _el$ = _tmpl$9();
3206
+ _el$.style.setProperty("outline", "none");
3207
+ effect(() => _el$.innerHTML = props.text?.toString() || "");
3208
+ return _el$;
3209
+ })();
3210
+ }
3211
+ var text_default = Text;
3212
3212
 
3213
3213
  // src/blocks/custom-code/component-info.ts
3214
3214
  var componentInfo11 = {
@@ -3652,11 +3652,11 @@ function FormComponent(props) {
3652
3652
  return;
3653
3653
  }
3654
3654
  event.preventDefault();
3655
- const el = event.currentTarget;
3655
+ const el = event.currentTarget || event.target;
3656
3656
  const headers = props.customHeaders || {};
3657
3657
  let body;
3658
3658
  const formData = new FormData(el);
3659
- const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3659
+ const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
3660
3660
  let value;
3661
3661
  const key = el2.name;
3662
3662
  if (el2 instanceof HTMLInputElement) {
@@ -3826,7 +3826,7 @@ function FormComponent(props) {
3826
3826
  get name() {
3827
3827
  return props.name;
3828
3828
  }
3829
- }, {}, () => props.attributes), false, true);
3829
+ }, {}, {}, () => props.attributes), false, true);
3830
3830
  insert(_el$, createComponent(Show, {
3831
3831
  get when() {
3832
3832
  return props.builderBlock && props.builderBlock.children;
@@ -4402,34 +4402,34 @@ var getExtraComponents = () => [{
4402
4402
  // src/constants/builder-registered-components.ts
4403
4403
  var getDefaultRegisteredComponents = () => [{
4404
4404
  component: button_default,
4405
- ...componentInfo
4405
+ ...componentInfo2
4406
4406
  }, {
4407
4407
  component: columns_default,
4408
- ...componentInfo2
4408
+ ...componentInfo3
4409
4409
  }, {
4410
4410
  component: fragment_default,
4411
- ...componentInfo3
4411
+ ...componentInfo4
4412
4412
  }, {
4413
4413
  component: image_default,
4414
- ...componentInfo4
4414
+ ...componentInfo5
4415
4415
  }, {
4416
4416
  component: section_default,
4417
- ...componentInfo5
4417
+ ...componentInfo6
4418
4418
  }, {
4419
4419
  component: slot_default,
4420
- ...componentInfo6
4420
+ ...componentInfo7
4421
4421
  }, {
4422
4422
  component: symbol_default,
4423
- ...componentInfo7
4423
+ ...componentInfo8
4424
4424
  }, {
4425
4425
  component: text_default,
4426
- ...componentInfo9
4426
+ ...componentInfo10
4427
4427
  }, ...TARGET === "rsc" ? [] : [{
4428
4428
  component: tabs_default,
4429
- ...componentInfo8
4429
+ ...componentInfo9
4430
4430
  }, {
4431
4431
  component: accordion_default,
4432
- ...componentInfo10
4432
+ ...componentInfo
4433
4433
  }], ...getExtraComponents()];
4434
4434
 
4435
4435
  // src/functions/register-component.ts
@@ -5008,7 +5008,7 @@ function isFromTrustedHost(trustedHosts, e) {
5008
5008
  }
5009
5009
 
5010
5010
  // src/constants/sdk-version.ts
5011
- var SDK_VERSION = "1.0.28";
5011
+ var SDK_VERSION = "1.0.29";
5012
5012
 
5013
5013
  // src/functions/register.ts
5014
5014
  var registry = {};
@@ -5472,7 +5472,7 @@ function EnableEditor(props) {
5472
5472
  if (isPreviewing() && !isEditing()) {
5473
5473
  const searchParams = new URL(location.href).searchParams;
5474
5474
  const searchParamPreviewModel = searchParams.get("builder.preview");
5475
- const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
5475
+ const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
5476
5476
  const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
5477
5477
  if (searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
5478
5478
  fetchOneEntry({