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