@builder.io/sdk-qwik 0.1.4-0 → 0.1.5

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.
@@ -132,7 +132,35 @@ const setupBrowserForEditing = (options = {}) => {
132
132
  });
133
133
  }
134
134
  };
135
- const BuilderContext = qwik.createContext("Builder");
135
+ const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
136
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
137
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
138
+ children: props.link ? /* @__PURE__ */ jsxRuntime.jsx("a", {
139
+ role: "button",
140
+ ...props.attributes,
141
+ get href() {
142
+ return props.link;
143
+ },
144
+ target: props.openLinkInNewTab ? "_blank" : void 0,
145
+ children: qwik._wrapSignal(props, "text"),
146
+ [qwik._IMMUTABLE]: {
147
+ href: qwik._wrapSignal(props, "link")
148
+ }
149
+ }) : /* @__PURE__ */ jsxRuntime.jsx("button", {
150
+ class: "button-Button",
151
+ ...props.attributes,
152
+ children: qwik._wrapSignal(props, "text")
153
+ }),
154
+ [qwik._IMMUTABLE]: {
155
+ children: false
156
+ }
157
+ }, "jc_0");
158
+ }, "Button_component_gJoMUICXoUQ"));
159
+ const STYLES$3 = `
160
+ .button-Button {
161
+ all: unset;
162
+ }`;
163
+ const builderContext = qwik.createContext("Builder");
136
164
  function isIframe() {
137
165
  return isBrowser() && window.self !== window.top;
138
166
  }
@@ -275,8 +303,13 @@ const RenderInlinedStyles = (props) => {
275
303
  const state = {};
276
304
  state.tag = tag$1();
277
305
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
278
- children: /* @__PURE__ */ jsxRuntime.jsx(state.tag, {
279
- children: qwik._wrapSignal(props, "styles")
306
+ children: /* @__PURE__ */ jsxRuntime.jsx("style", {
307
+ get dangerouslySetInnerHTML() {
308
+ return props.styles;
309
+ },
310
+ [qwik._IMMUTABLE]: {
311
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "styles")
312
+ }
280
313
  }),
281
314
  [qwik._IMMUTABLE]: {
282
315
  children: false
@@ -501,7 +534,7 @@ const RenderComponent = (props) => {
501
534
  }, "R9_0");
502
535
  };
503
536
  const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
504
- qwik.useContextProvider(BuilderContext, qwik.useStore({
537
+ qwik.useContextProvider(builderContext, qwik.useStore({
505
538
  content: props.repeatContext.content,
506
539
  state: props.repeatContext.state,
507
540
  context: props.repeatContext.context,
@@ -539,10 +572,24 @@ const useBlock = function useBlock22(props, state) {
539
572
  shouldEvaluateBindings: true
540
573
  });
541
574
  };
575
+ const proxyState = function proxyState2(props, state) {
576
+ if (typeof Proxy === "undefined") {
577
+ console.error("no Proxy available in this environment, cannot proxy state.");
578
+ return props.context.state;
579
+ }
580
+ const useState = new Proxy(props.context.state, {
581
+ set: (obj, prop, value) => {
582
+ obj[prop] = value;
583
+ props.context.setState?.(obj);
584
+ return true;
585
+ }
586
+ });
587
+ return useState;
588
+ };
542
589
  const actions = function actions2(props, state) {
543
590
  return getBlockActions({
544
591
  block: useBlock(props),
545
- state: props.context.state,
592
+ state: proxyState(props),
546
593
  context: props.context.context
547
594
  });
548
595
  };
@@ -589,6 +636,7 @@ const childrenContext = function childrenContext2(props, state) {
589
636
  state: props.context.state,
590
637
  content: props.context.content,
591
638
  context: props.context.context,
639
+ setState: props.context.setState,
592
640
  registeredComponents: props.context.registeredComponents,
593
641
  inheritedStyles: getInheritedTextStyles()
594
642
  };
@@ -651,10 +699,10 @@ const RenderBlock = (props) => {
651
699
  }, "9d_3");
652
700
  };
653
701
  const RenderBlock$1 = RenderBlock;
654
- const className$1 = function className2(props, state, builderContext) {
702
+ const className$1 = function className2(props, state, builderContext2) {
655
703
  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
656
704
  };
657
- const onClick$1 = function onClick2(props, state, builderContext) {
705
+ const onClick$1 = function onClick2(props, state, builderContext2) {
658
706
  if (isEditing() && !props.blocks?.length)
659
707
  window.parent?.postMessage({
660
708
  type: "builder.clickEmptyBlocks",
@@ -664,7 +712,7 @@ const onClick$1 = function onClick2(props, state, builderContext) {
664
712
  }
665
713
  }, "*");
666
714
  };
667
- const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
715
+ const onMouseEnter = function onMouseEnter2(props, state, builderContext2) {
668
716
  if (isEditing() && !props.blocks?.length)
669
717
  window.parent?.postMessage({
670
718
  type: "builder.hoverEmptyBlocks",
@@ -675,8 +723,8 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
675
723
  }, "*");
676
724
  };
677
725
  const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
678
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
679
- const builderContext = qwik.useContext(BuilderContext);
726
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
727
+ const builderContext$1 = qwik.useContext(builderContext);
680
728
  const state = {};
681
729
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
682
730
  class: className$1(props) + " div-RenderBlocks",
@@ -693,7 +741,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
693
741
  const [builderContext2, props2, state2] = qwik.useLexicalScope();
694
742
  return onClick$1(props2);
695
743
  }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
696
- builderContext,
744
+ builderContext$1,
697
745
  props,
698
746
  state
699
747
  ]),
@@ -701,7 +749,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
701
749
  const [builderContext2, props2, state2] = qwik.useLexicalScope();
702
750
  return onMouseEnter(props2);
703
751
  }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
704
- builderContext,
752
+ builderContext$1,
705
753
  props,
706
754
  state
707
755
  ]),
@@ -709,13 +757,13 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
709
757
  props.blocks ? (props.blocks || []).map(function(block) {
710
758
  return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
711
759
  block,
712
- context: builderContext
760
+ context: builderContext$1
713
761
  }, "render-block-" + block.id);
714
762
  }) : null,
715
763
  props.blocks ? (props.blocks || []).map(function(block) {
716
764
  return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles, {
717
765
  block,
718
- context: builderContext
766
+ context: builderContext$1
719
767
  }, "block-style-" + block.id);
720
768
  }) : null
721
769
  ],
@@ -727,7 +775,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
727
775
  }
728
776
  });
729
777
  }, "RenderBlocks_component_MYUZ0j1uLsw"));
730
- const STYLES$3 = `
778
+ const STYLES$2 = `
731
779
  .div-RenderBlocks {
732
780
  display: flex;
733
781
  flex-direction: column;
@@ -822,7 +870,7 @@ const columnsStyles = function columnsStyles2(props, state) {
822
870
  `;
823
871
  };
824
872
  const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
825
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
873
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
826
874
  const state = {};
827
875
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
828
876
  class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
@@ -867,7 +915,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
867
915
  }
868
916
  });
869
917
  }, "Columns_component_7yLj4bxdI6c"));
870
- const STYLES$2 = `
918
+ const STYLES$1 = `
871
919
  .div-Columns {
872
920
  display: flex;
873
921
  line-height: normal;
@@ -876,6 +924,11 @@ const STYLES$2 = `
876
924
  flex-direction: column;
877
925
  align-items: stretch;
878
926
  }`;
927
+ const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
928
+ return /* @__PURE__ */ jsxRuntime.jsx("span", {
929
+ children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}, "oj_0")
930
+ });
931
+ }, "FragmentComponent_component_T0AypnadAK0"));
879
932
  function removeProtocol(path) {
880
933
  return path.replace(/http(s)?:/, "");
881
934
  }
@@ -962,7 +1015,7 @@ const aspectRatioCss = function aspectRatioCss2(props, state) {
962
1015
  return out;
963
1016
  };
964
1017
  const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
965
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
1018
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
966
1019
  return /* @__PURE__ */ jsxRuntime.jsxs(qwik.Fragment, {
967
1020
  children: [
968
1021
  /* @__PURE__ */ jsxRuntime.jsxs("picture", {
@@ -1018,7 +1071,7 @@ const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1018
1071
  }
1019
1072
  }, "0A_2");
1020
1073
  }, "Image_component_LRxDkFa1EfU"));
1021
- const STYLES$1 = `
1074
+ const STYLES = `
1022
1075
  .img-Image {
1023
1076
  opacity: 1;
1024
1077
  transition: opacity 0.2s ease-in-out;
@@ -1036,90 +1089,6 @@ const STYLES$1 = `
1036
1089
  width: 100%;
1037
1090
  height: 100%;
1038
1091
  }`;
1039
- const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1040
- return /* @__PURE__ */ jsxRuntime.jsx("span", {
1041
- class: "builder-text",
1042
- get dangerouslySetInnerHTML() {
1043
- return props.text;
1044
- },
1045
- [qwik._IMMUTABLE]: {
1046
- dangerouslySetInnerHTML: qwik._wrapSignal(props, "text")
1047
- }
1048
- });
1049
- }, "Text_component_15p0cKUxgIE"));
1050
- const videoProps = function videoProps2(props, state) {
1051
- return {
1052
- ...props.autoPlay === true ? {
1053
- autoPlay: true
1054
- } : {},
1055
- ...props.muted === true ? {
1056
- muted: true
1057
- } : {},
1058
- ...props.controls === true ? {
1059
- controls: true
1060
- } : {},
1061
- ...props.loop === true ? {
1062
- loop: true
1063
- } : {},
1064
- ...props.playsInline === true ? {
1065
- playsInline: true
1066
- } : {}
1067
- };
1068
- };
1069
- const spreadProps = function spreadProps2(props, state) {
1070
- return {
1071
- ...props.attributes,
1072
- ...videoProps(props)
1073
- };
1074
- };
1075
- const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1076
- return /* @__PURE__ */ jsxRuntime.jsx("video", {
1077
- ...spreadProps(props),
1078
- style: {
1079
- width: "100%",
1080
- height: "100%",
1081
- ...props.attributes?.style,
1082
- objectFit: props.fit,
1083
- objectPosition: props.position,
1084
- borderRadius: 1
1085
- },
1086
- src: props.video || "no-src",
1087
- get poster() {
1088
- return props.posterImage;
1089
- },
1090
- [qwik._IMMUTABLE]: {
1091
- poster: qwik._wrapSignal(props, "posterImage")
1092
- }
1093
- });
1094
- }, "Video_component_qdcTZflYyoQ"));
1095
- const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1096
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
1097
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
1098
- children: props.link ? /* @__PURE__ */ jsxRuntime.jsx("a", {
1099
- role: "button",
1100
- ...props.attributes,
1101
- get href() {
1102
- return props.link;
1103
- },
1104
- target: props.openLinkInNewTab ? "_blank" : void 0,
1105
- children: qwik._wrapSignal(props, "text"),
1106
- [qwik._IMMUTABLE]: {
1107
- href: qwik._wrapSignal(props, "link")
1108
- }
1109
- }) : /* @__PURE__ */ jsxRuntime.jsx("button", {
1110
- class: "button-Button",
1111
- ...props.attributes,
1112
- children: qwik._wrapSignal(props, "text")
1113
- }),
1114
- [qwik._IMMUTABLE]: {
1115
- children: false
1116
- }
1117
- }, "jc_0");
1118
- }, "Button_component_gJoMUICXoUQ"));
1119
- const STYLES = `
1120
- .button-Button {
1121
- all: unset;
1122
- }`;
1123
1092
  const componentInfo$a = {
1124
1093
  name: "Core:Button",
1125
1094
  builtIn: true,
@@ -1412,11 +1381,6 @@ const componentInfo$8 = {
1412
1381
  canHaveChildren: true,
1413
1382
  noWrap: true
1414
1383
  };
1415
- const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1416
- return /* @__PURE__ */ jsxRuntime.jsx("span", {
1417
- children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}, "oj_0")
1418
- });
1419
- }, "FragmentComponent_component_T0AypnadAK0"));
1420
1384
  const componentInfo$7 = {
1421
1385
  name: "Image",
1422
1386
  static: true,
@@ -1670,667 +1634,787 @@ const componentInfo$5 = {
1670
1634
  }
1671
1635
  ]
1672
1636
  };
1673
- const componentInfo$4 = {
1674
- name: "Text",
1675
- static: true,
1676
- builtIn: true,
1677
- 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",
1678
- inputs: [
1679
- {
1680
- name: "text",
1681
- type: "html",
1682
- required: true,
1683
- autoFocus: true,
1684
- bubble: true,
1685
- defaultValue: "Enter some text..."
1686
- }
1637
+ function getGlobalThis() {
1638
+ if (typeof globalThis !== "undefined")
1639
+ return globalThis;
1640
+ if (typeof window !== "undefined")
1641
+ return window;
1642
+ if (typeof global !== "undefined")
1643
+ return global;
1644
+ if (typeof self !== "undefined")
1645
+ return self;
1646
+ return globalThis;
1647
+ }
1648
+ function getFetch() {
1649
+ const globalFetch = getGlobalThis().fetch;
1650
+ if (typeof globalFetch === "undefined") {
1651
+ console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project.
1652
+ For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
1653
+ throw new Error("Builder SDK could not find a global `fetch` function");
1654
+ }
1655
+ return globalFetch;
1656
+ }
1657
+ const fetch$1 = getFetch();
1658
+ const getTopLevelDomain = (host) => {
1659
+ if (host === "localhost" || host === "127.0.0.1")
1660
+ return host;
1661
+ const parts = host.split(".");
1662
+ if (parts.length > 2)
1663
+ return parts.slice(1).join(".");
1664
+ return host;
1665
+ };
1666
+ const getCookie = async ({ name, canTrack }) => {
1667
+ try {
1668
+ if (!canTrack)
1669
+ return void 0;
1670
+ return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
1671
+ } catch (err) {
1672
+ console.debug("[COOKIE] GET error: ", err);
1673
+ return void 0;
1674
+ }
1675
+ };
1676
+ const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
1677
+ const SECURE_CONFIG = [
1678
+ [
1679
+ "secure",
1680
+ ""
1687
1681
  ],
1688
- defaultStyles: {
1689
- lineHeight: "normal",
1690
- height: "auto",
1691
- textAlign: "center"
1682
+ [
1683
+ "SameSite",
1684
+ "None"
1685
+ ]
1686
+ ];
1687
+ const createCookieString = ({ name, value, expires }) => {
1688
+ const secure = isBrowser() ? location.protocol === "https:" : true;
1689
+ const secureObj = secure ? SECURE_CONFIG : [
1690
+ []
1691
+ ];
1692
+ const expiresObj = expires ? [
1693
+ [
1694
+ "expires",
1695
+ expires.toUTCString()
1696
+ ]
1697
+ ] : [
1698
+ []
1699
+ ];
1700
+ const cookieValue = [
1701
+ [
1702
+ name,
1703
+ value
1704
+ ],
1705
+ ...expiresObj,
1706
+ [
1707
+ "path",
1708
+ "/"
1709
+ ],
1710
+ [
1711
+ "domain",
1712
+ getTopLevelDomain(window.location.hostname)
1713
+ ],
1714
+ ...secureObj
1715
+ ];
1716
+ const cookie = stringifyCookie(cookieValue);
1717
+ return cookie;
1718
+ };
1719
+ const setCookie = async ({ name, value, expires, canTrack }) => {
1720
+ try {
1721
+ if (!canTrack)
1722
+ return;
1723
+ const cookie = createCookieString({
1724
+ name,
1725
+ value,
1726
+ expires
1727
+ });
1728
+ document.cookie = cookie;
1729
+ } catch (err) {
1730
+ console.warn("[COOKIE] SET error: ", err);
1692
1731
  }
1693
1732
  };
1694
- const componentInfo$3 = {
1695
- name: "Video",
1696
- canHaveChildren: true,
1697
- builtIn: true,
1698
- defaultStyles: {
1699
- minHeight: "20px",
1700
- minWidth: "20px"
1701
- },
1702
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
1703
- inputs: [
1704
- {
1705
- name: "video",
1706
- type: "file",
1707
- allowedFileTypes: [
1708
- "mp4"
1709
- ],
1710
- bubble: true,
1711
- defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
1712
- required: true
1713
- },
1714
- {
1715
- name: "posterImage",
1716
- type: "file",
1717
- allowedFileTypes: [
1718
- "jpeg",
1719
- "png"
1720
- ],
1721
- helperText: "Image to show before the video plays"
1722
- },
1723
- {
1724
- name: "autoPlay",
1725
- type: "boolean",
1726
- defaultValue: true
1727
- },
1728
- {
1729
- name: "controls",
1730
- type: "boolean",
1731
- defaultValue: false
1732
- },
1733
- {
1734
- name: "muted",
1735
- type: "boolean",
1736
- defaultValue: true
1737
- },
1738
- {
1739
- name: "loop",
1740
- type: "boolean",
1741
- defaultValue: true
1742
- },
1743
- {
1744
- name: "playsInline",
1745
- type: "boolean",
1746
- defaultValue: true
1747
- },
1748
- {
1749
- name: "fit",
1750
- type: "text",
1751
- defaultValue: "cover",
1752
- enum: [
1753
- "contain",
1754
- "cover",
1755
- "fill",
1756
- "auto"
1757
- ]
1758
- },
1759
- {
1760
- name: "fitContent",
1761
- type: "boolean",
1762
- helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
1763
- defaultValue: true,
1764
- advanced: true
1765
- },
1766
- {
1767
- name: "position",
1768
- type: "text",
1769
- defaultValue: "center",
1770
- enum: [
1771
- "center",
1772
- "top",
1773
- "left",
1774
- "right",
1775
- "bottom",
1776
- "top left",
1777
- "top right",
1778
- "bottom left",
1779
- "bottom right"
1780
- ]
1781
- },
1782
- {
1783
- name: "height",
1784
- type: "number",
1785
- advanced: true
1786
- },
1787
- {
1788
- name: "width",
1789
- type: "number",
1790
- advanced: true
1791
- },
1792
- {
1793
- name: "aspectRatio",
1794
- type: "number",
1795
- advanced: true,
1796
- defaultValue: 0.7004048582995948
1797
- },
1798
- {
1799
- name: "lazyLoad",
1800
- type: "boolean",
1801
- helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
1802
- defaultValue: true,
1803
- advanced: true
1804
- }
1805
- ]
1733
+ const BUILDER_STORE_PREFIX = "builderio.variations";
1734
+ const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
1735
+ const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
1736
+ name: getContentTestKey(contentId),
1737
+ canTrack
1738
+ });
1739
+ const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
1740
+ name: getContentTestKey(contentId),
1741
+ value,
1742
+ canTrack
1743
+ });
1744
+ const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
1745
+ const getRandomVariationId = ({ id, variations }) => {
1746
+ let n = 0;
1747
+ const random = Math.random();
1748
+ for (const id1 in variations) {
1749
+ const testRatio = variations[id1]?.testRatio;
1750
+ n += testRatio;
1751
+ if (random < n)
1752
+ return id1;
1753
+ }
1754
+ return id;
1806
1755
  };
1807
- const componentInfo$2 = {
1808
- name: "Embed",
1809
- static: true,
1810
- builtIn: true,
1811
- inputs: [
1812
- {
1813
- name: "url",
1814
- type: "url",
1815
- required: true,
1816
- defaultValue: "",
1817
- helperText: "e.g. enter a youtube url, google map, etc",
1818
- onChange: serializeFn((options) => {
1819
- const url = options.get("url");
1820
- if (url) {
1821
- options.set("content", "Loading...");
1822
- const apiKey = "ae0e60e78201a3f2b0de4b";
1823
- return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
1824
- if (options.get("url") === url) {
1825
- if (data.html)
1826
- options.set("content", data.html);
1827
- else
1828
- options.set("content", "Invalid url, please try another");
1829
- }
1830
- }).catch((_err) => {
1831
- options.set("content", "There was an error embedding this URL, please try again or another URL");
1832
- });
1833
- } else
1834
- options.delete("content");
1835
- })
1836
- },
1837
- {
1838
- name: "content",
1839
- type: "html",
1840
- defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
1841
- hideFromUI: true
1842
- }
1843
- ]
1756
+ const getTestFields = ({ item, testGroupId }) => {
1757
+ const variationValue = item.variations[testGroupId];
1758
+ if (testGroupId === item.id || !variationValue)
1759
+ return {
1760
+ testVariationId: item.id,
1761
+ testVariationName: "Default"
1762
+ };
1763
+ else
1764
+ return {
1765
+ data: variationValue.data,
1766
+ testVariationId: variationValue.id,
1767
+ testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
1768
+ };
1844
1769
  };
1845
- const SCRIPT_MIME_TYPES = [
1846
- "text/javascript",
1847
- "application/javascript",
1848
- "application/ecmascript"
1849
- ];
1850
- const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
1851
- const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
1852
- if (!elem || !elem.getElementsByTagName)
1770
+ const getContentVariation = async ({ item, canTrack }) => {
1771
+ const testGroupId = await getContentVariationCookie({
1772
+ canTrack,
1773
+ contentId: item.id
1774
+ });
1775
+ const testFields = testGroupId ? getTestFields({
1776
+ item,
1777
+ testGroupId
1778
+ }) : void 0;
1779
+ if (testFields)
1780
+ return testFields;
1781
+ else {
1782
+ const randomVariationId = getRandomVariationId({
1783
+ variations: item.variations,
1784
+ id: item.id
1785
+ });
1786
+ setContentVariationCookie({
1787
+ contentId: item.id,
1788
+ value: randomVariationId,
1789
+ canTrack
1790
+ }).catch((err) => {
1791
+ console.error("could not store A/B test variation: ", err);
1792
+ });
1793
+ return getTestFields({
1794
+ item,
1795
+ testGroupId: randomVariationId
1796
+ });
1797
+ }
1798
+ };
1799
+ const handleABTesting = async ({ item, canTrack }) => {
1800
+ if (!checkIsBuilderContentWithVariations(item))
1853
1801
  return;
1854
- const scripts = elem.getElementsByTagName("script");
1855
- for (let i = 0; i < scripts.length; i++) {
1856
- const script = scripts[i];
1857
- if (script.src && !state.scriptsInserted.includes(script.src)) {
1858
- state.scriptsInserted.push(script.src);
1859
- const newScript = document.createElement("script");
1860
- newScript.async = true;
1861
- newScript.src = script.src;
1862
- document.head.appendChild(newScript);
1863
- } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
1864
- try {
1865
- state.scriptsRun.push(script.innerText);
1866
- new Function(script.innerText)();
1867
- } catch (error) {
1868
- console.warn("`Embed`: Error running script:", error);
1869
- }
1802
+ const variationValue = await getContentVariation({
1803
+ item,
1804
+ canTrack
1805
+ });
1806
+ Object.assign(item, variationValue);
1807
+ };
1808
+ function flatten(object, path = null, separator = ".") {
1809
+ return Object.keys(object).reduce((acc, key) => {
1810
+ const value = object[key];
1811
+ const newPath = [
1812
+ path,
1813
+ key
1814
+ ].filter(Boolean).join(separator);
1815
+ const isObject = [
1816
+ typeof value === "object",
1817
+ value !== null,
1818
+ !(Array.isArray(value) && value.length === 0)
1819
+ ].every(Boolean);
1820
+ return isObject ? {
1821
+ ...acc,
1822
+ ...flatten(value, newPath, separator)
1823
+ } : {
1824
+ ...acc,
1825
+ [newPath]: value
1826
+ };
1827
+ }, {});
1828
+ }
1829
+ const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
1830
+ const BUILDER_OPTIONS_PREFIX = "options.";
1831
+ const convertSearchParamsToQueryObject = (searchParams) => {
1832
+ const options = {};
1833
+ searchParams.forEach((value, key) => {
1834
+ options[key] = value;
1835
+ });
1836
+ return options;
1837
+ };
1838
+ const getBuilderSearchParams = (_options) => {
1839
+ if (!_options)
1840
+ return {};
1841
+ const options = normalizeSearchParams(_options);
1842
+ const newOptions = {};
1843
+ Object.keys(options).forEach((key) => {
1844
+ if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
1845
+ const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
1846
+ newOptions[trimmedKey] = options[key];
1847
+ }
1848
+ });
1849
+ return newOptions;
1850
+ };
1851
+ const getBuilderSearchParamsFromWindow = () => {
1852
+ if (!isBrowser())
1853
+ return {};
1854
+ const searchParams = new URLSearchParams(window.location.search);
1855
+ return getBuilderSearchParams(searchParams);
1856
+ };
1857
+ const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
1858
+ const generateContentUrl = (options) => {
1859
+ const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
1860
+ if (!apiKey)
1861
+ throw new Error("Missing API key");
1862
+ const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
1863
+ const queryOptions = {
1864
+ ...getBuilderSearchParamsFromWindow(),
1865
+ ...normalizeSearchParams(options.options || {})
1866
+ };
1867
+ const flattened = flatten(queryOptions);
1868
+ for (const key in flattened)
1869
+ url.searchParams.set(key, String(flattened[key]));
1870
+ if (userAttributes)
1871
+ url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
1872
+ if (query) {
1873
+ const flattened1 = flatten({
1874
+ query
1875
+ });
1876
+ for (const key1 in flattened1)
1877
+ url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
1870
1878
  }
1879
+ return url;
1871
1880
  };
1872
- const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1873
- const elem = qwik.useRef();
1881
+ async function getContent(options) {
1882
+ return (await getAllContent({
1883
+ ...options,
1884
+ limit: 1
1885
+ })).results[0] || null;
1886
+ }
1887
+ async function getAllContent(options) {
1888
+ const url = generateContentUrl(options);
1889
+ const res = await fetch$1(url.href);
1890
+ const content = await res.json();
1891
+ const canTrack = options.canTrack !== false;
1892
+ if (canTrack && Array.isArray(content.results))
1893
+ for (const item of content.results)
1894
+ await handleABTesting({
1895
+ item,
1896
+ canTrack
1897
+ });
1898
+ return content;
1899
+ }
1900
+ const className = function className22(props, state, builderContext2) {
1901
+ return [
1902
+ ...[
1903
+ props.attributes.class
1904
+ ],
1905
+ "builder-symbol",
1906
+ props.symbol?.inline ? "builder-inline-symbol" : void 0,
1907
+ props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
1908
+ ].filter(Boolean).join(" ");
1909
+ };
1910
+ const contentToUse = function contentToUse2(props, state, builderContext2) {
1911
+ return props.symbol?.content || state.fetchedContent;
1912
+ };
1913
+ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1914
+ const builderContext$1 = qwik.useContext(builderContext);
1874
1915
  const state = qwik.useStore({
1875
- ranInitFn: false,
1876
- scriptsInserted: [],
1877
- scriptsRun: []
1916
+ fetchedContent: null
1878
1917
  });
1879
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
1880
- const [elem2, props2, state2] = qwik.useLexicalScope();
1881
- state2 && track2(state2, "ranInitFn");
1882
- if (elem2 && !state2.ranInitFn) {
1883
- state2.ranInitFn = true;
1884
- findAndRunScripts$1(props2, state2, elem2);
1885
- }
1886
- }, "Embed_component_useWatch_AxgWjrHdlAI", [
1887
- elem,
1918
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
1919
+ const [builderContext2, props2, state2] = qwik.useLexicalScope();
1920
+ track2(() => props2.symbol);
1921
+ track2(() => state2.fetchedContent);
1922
+ const symbolToUse = props2.symbol;
1923
+ if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
1924
+ getContent({
1925
+ model: symbolToUse.model,
1926
+ apiKey: builderContext2.apiKey,
1927
+ query: {
1928
+ id: symbolToUse.entry
1929
+ }
1930
+ }).then((response) => {
1931
+ state2.fetchedContent = response;
1932
+ });
1933
+ }, "Symbol_component_useTask_NIAWAC1bMBo", [
1934
+ builderContext$1,
1888
1935
  props,
1889
1936
  state
1890
1937
  ]));
1891
1938
  return /* @__PURE__ */ jsxRuntime.jsx("div", {
1892
- class: "builder-embed",
1893
- ref: elem,
1939
+ ...props.attributes,
1940
+ class: className(props),
1941
+ children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent$1, {
1942
+ get apiKey() {
1943
+ return builderContext$1.apiKey;
1944
+ },
1945
+ get context() {
1946
+ return builderContext$1.context;
1947
+ },
1948
+ customComponents: Object.values(builderContext$1.registeredComponents),
1949
+ data: {
1950
+ ...props.symbol?.data,
1951
+ ...builderContext$1.state,
1952
+ ...props.symbol?.content?.data?.state
1953
+ },
1954
+ model: props.symbol?.model,
1955
+ content: contentToUse(props, state),
1956
+ [qwik._IMMUTABLE]: {
1957
+ apiKey: qwik._wrapSignal(builderContext$1, "apiKey"),
1958
+ context: qwik._wrapSignal(builderContext$1, "context")
1959
+ }
1960
+ }, "Wt_0")
1961
+ });
1962
+ }, "Symbol_component_WVvggdkUPdk"));
1963
+ const componentInfo$4 = {
1964
+ name: "Text",
1965
+ static: true,
1966
+ builtIn: true,
1967
+ 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",
1968
+ inputs: [
1969
+ {
1970
+ name: "text",
1971
+ type: "html",
1972
+ required: true,
1973
+ autoFocus: true,
1974
+ bubble: true,
1975
+ defaultValue: "Enter some text..."
1976
+ }
1977
+ ],
1978
+ defaultStyles: {
1979
+ lineHeight: "normal",
1980
+ height: "auto",
1981
+ textAlign: "center"
1982
+ }
1983
+ };
1984
+ const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1985
+ return /* @__PURE__ */ jsxRuntime.jsx("span", {
1986
+ class: "builder-text",
1894
1987
  get dangerouslySetInnerHTML() {
1895
- return props.content;
1988
+ return props.text;
1896
1989
  },
1897
1990
  [qwik._IMMUTABLE]: {
1898
- dangerouslySetInnerHTML: qwik._wrapSignal(props, "content")
1991
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "text")
1899
1992
  }
1900
1993
  });
1901
- }, "Embed_component_Uji08ORjXbE"));
1902
- const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1903
- return /* @__PURE__ */ jsxRuntime.jsx("img", {
1904
- style: {
1905
- objectFit: props.backgroundSize || "cover",
1906
- objectPosition: props.backgroundPosition || "center"
1907
- },
1908
- get alt() {
1909
- return props.altText;
1910
- },
1911
- src: props.imgSrc || props.image,
1912
- ...props.attributes,
1913
- [qwik._IMMUTABLE]: {
1914
- alt: qwik._wrapSignal(props, "altText")
1915
- }
1916
- }, isEditing() && props.imgSrc || "default-key");
1917
- }, "ImgComponent_component_FXvIDBSffO8"));
1918
- const componentInfo$1 = {
1919
- name: "Raw:Img",
1920
- hideFromInsertMenu: true,
1994
+ }, "Text_component_15p0cKUxgIE"));
1995
+ const componentInfo$3 = {
1996
+ name: "Video",
1997
+ canHaveChildren: true,
1921
1998
  builtIn: true,
1922
- 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",
1999
+ defaultStyles: {
2000
+ minHeight: "20px",
2001
+ minWidth: "20px"
2002
+ },
2003
+ image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
1923
2004
  inputs: [
1924
2005
  {
1925
- name: "image",
2006
+ name: "video",
2007
+ type: "file",
2008
+ allowedFileTypes: [
2009
+ "mp4"
2010
+ ],
1926
2011
  bubble: true,
2012
+ defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
2013
+ required: true
2014
+ },
2015
+ {
2016
+ name: "posterImage",
1927
2017
  type: "file",
1928
2018
  allowedFileTypes: [
1929
2019
  "jpeg",
1930
- "jpg",
1931
- "png",
1932
- "svg"
2020
+ "png"
1933
2021
  ],
1934
- required: true
1935
- }
1936
- ],
1937
- noWrap: true,
1938
- static: true
1939
- };
1940
- const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
1941
- if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
1942
- const scripts = elem.getElementsByTagName("script");
1943
- for (let i = 0; i < scripts.length; i++) {
1944
- const script = scripts[i];
1945
- if (script.src) {
1946
- if (state.scriptsInserted.includes(script.src))
1947
- continue;
1948
- state.scriptsInserted.push(script.src);
1949
- const newScript = document.createElement("script");
1950
- newScript.async = true;
1951
- newScript.src = script.src;
1952
- document.head.appendChild(newScript);
1953
- } else if (!script.type || [
1954
- "text/javascript",
1955
- "application/javascript",
1956
- "application/ecmascript"
1957
- ].includes(script.type)) {
1958
- if (state.scriptsRun.includes(script.innerText))
1959
- continue;
1960
- try {
1961
- state.scriptsRun.push(script.innerText);
1962
- new Function(script.innerText)();
1963
- } catch (error) {
1964
- console.warn("`CustomCode`: Error running script:", error);
1965
- }
1966
- }
1967
- }
1968
- }
1969
- };
1970
- const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1971
- const elem = qwik.useRef();
1972
- const state = qwik.useStore({
1973
- scriptsInserted: [],
1974
- scriptsRun: []
1975
- });
1976
- qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
1977
- const [elem2, props2, state2] = qwik.useLexicalScope();
1978
- findAndRunScripts(props2, state2, elem2);
1979
- }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
1980
- elem,
1981
- props,
1982
- state
1983
- ]));
1984
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
1985
- ref: elem,
1986
- class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
1987
- get dangerouslySetInnerHTML() {
1988
- return props.code;
2022
+ helperText: "Image to show before the video plays"
2023
+ },
2024
+ {
2025
+ name: "autoPlay",
2026
+ type: "boolean",
2027
+ defaultValue: true
1989
2028
  },
1990
- [qwik._IMMUTABLE]: {
1991
- dangerouslySetInnerHTML: qwik._wrapSignal(props, "code")
1992
- }
1993
- });
1994
- }, "CustomCode_component_uYOSy7w7Zqw"));
1995
- const componentInfo = {
1996
- name: "Custom Code",
1997
- static: true,
1998
- builtIn: true,
1999
- requiredPermissions: [
2000
- "editCode"
2001
- ],
2002
- inputs: [
2003
2029
  {
2004
- name: "code",
2005
- type: "html",
2006
- required: true,
2007
- defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2008
- code: true
2030
+ name: "controls",
2031
+ type: "boolean",
2032
+ defaultValue: false
2009
2033
  },
2010
2034
  {
2011
- name: "replaceNodes",
2035
+ name: "muted",
2012
2036
  type: "boolean",
2013
- helperText: "Preserve server rendered dom nodes",
2014
- advanced: true
2037
+ defaultValue: true
2015
2038
  },
2016
2039
  {
2017
- name: "scriptsClientOnly",
2040
+ name: "loop",
2018
2041
  type: "boolean",
2019
- defaultValue: false,
2020
- helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2042
+ defaultValue: true
2043
+ },
2044
+ {
2045
+ name: "playsInline",
2046
+ type: "boolean",
2047
+ defaultValue: true
2048
+ },
2049
+ {
2050
+ name: "fit",
2051
+ type: "text",
2052
+ defaultValue: "cover",
2053
+ enum: [
2054
+ "contain",
2055
+ "cover",
2056
+ "fill",
2057
+ "auto"
2058
+ ]
2059
+ },
2060
+ {
2061
+ name: "fitContent",
2062
+ type: "boolean",
2063
+ helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
2064
+ defaultValue: true,
2021
2065
  advanced: true
2022
- }
2023
- ]
2024
- };
2025
- const getDefaultRegisteredComponents = () => [
2026
- {
2027
- component: Columns,
2028
- ...componentInfo$9
2029
- },
2030
- {
2031
- component: Image,
2032
- ...componentInfo$7
2033
- },
2034
- {
2035
- component: ImgComponent,
2036
- ...componentInfo$1
2037
- },
2038
- {
2039
- component: Text,
2040
- ...componentInfo$4
2041
- },
2042
- {
2043
- component: Video,
2044
- ...componentInfo$3
2045
- },
2046
- {
2047
- component: Symbol$1,
2048
- ...componentInfo$5
2049
- },
2050
- {
2051
- component: Button,
2052
- ...componentInfo$a
2053
- },
2054
- {
2055
- component: SectionComponent,
2056
- ...componentInfo$6
2057
- },
2058
- {
2059
- component: FragmentComponent,
2060
- ...componentInfo$8
2061
- },
2062
- {
2063
- component: Embed,
2064
- ...componentInfo$2
2065
- },
2066
- {
2067
- component: CustomCode,
2068
- ...componentInfo
2069
- }
2070
- ];
2071
- function getGlobalThis() {
2072
- if (typeof globalThis !== "undefined")
2073
- return globalThis;
2074
- if (typeof window !== "undefined")
2075
- return window;
2076
- if (typeof global !== "undefined")
2077
- return global;
2078
- if (typeof self !== "undefined")
2079
- return self;
2080
- return globalThis;
2081
- }
2082
- function getFetch() {
2083
- const globalFetch = getGlobalThis().fetch;
2084
- if (typeof globalFetch === "undefined") {
2085
- console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project.
2086
- For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
2087
- throw new Error("Builder SDK could not find a global `fetch` function");
2088
- }
2089
- return globalFetch;
2090
- }
2091
- const fetch$1 = getFetch();
2092
- const getTopLevelDomain = (host) => {
2093
- if (host === "localhost" || host === "127.0.0.1")
2094
- return host;
2095
- const parts = host.split(".");
2096
- if (parts.length > 2)
2097
- return parts.slice(1).join(".");
2098
- return host;
2099
- };
2100
- const getCookie = async ({ name, canTrack }) => {
2101
- try {
2102
- if (!canTrack)
2103
- return void 0;
2104
- return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
2105
- } catch (err) {
2106
- console.debug("[COOKIE] GET error: ", err);
2107
- return void 0;
2108
- }
2109
- };
2110
- const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
2111
- const SECURE_CONFIG = [
2112
- [
2113
- "secure",
2114
- ""
2115
- ],
2116
- [
2117
- "SameSite",
2118
- "None"
2119
- ]
2120
- ];
2121
- const createCookieString = ({ name, value, expires }) => {
2122
- const secure = isBrowser() ? location.protocol === "https:" : true;
2123
- const secureObj = secure ? SECURE_CONFIG : [
2124
- []
2125
- ];
2126
- const expiresObj = expires ? [
2127
- [
2128
- "expires",
2129
- expires.toUTCString()
2130
- ]
2131
- ] : [
2132
- []
2133
- ];
2134
- const cookieValue = [
2135
- [
2136
- name,
2137
- value
2138
- ],
2139
- ...expiresObj,
2140
- [
2141
- "path",
2142
- "/"
2143
- ],
2144
- [
2145
- "domain",
2146
- getTopLevelDomain(window.location.hostname)
2147
- ],
2148
- ...secureObj
2149
- ];
2150
- const cookie = stringifyCookie(cookieValue);
2151
- return cookie;
2152
- };
2153
- const setCookie = async ({ name, value, expires, canTrack }) => {
2154
- try {
2155
- if (!canTrack)
2156
- return;
2157
- const cookie = createCookieString({
2158
- name,
2159
- value,
2160
- expires
2161
- });
2162
- document.cookie = cookie;
2163
- } catch (err) {
2164
- console.warn("[COOKIE] SET error: ", err);
2165
- }
2166
- };
2167
- const BUILDER_STORE_PREFIX = "builderio.variations";
2168
- const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
2169
- const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
2170
- name: getContentTestKey(contentId),
2171
- canTrack
2172
- });
2173
- const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
2174
- name: getContentTestKey(contentId),
2175
- value,
2176
- canTrack
2177
- });
2178
- const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
2179
- const getRandomVariationId = ({ id, variations }) => {
2180
- let n = 0;
2181
- const random = Math.random();
2182
- for (const id1 in variations) {
2183
- const testRatio = variations[id1]?.testRatio;
2184
- n += testRatio;
2185
- if (random < n)
2186
- return id1;
2187
- }
2188
- return id;
2066
+ },
2067
+ {
2068
+ name: "position",
2069
+ type: "text",
2070
+ defaultValue: "center",
2071
+ enum: [
2072
+ "center",
2073
+ "top",
2074
+ "left",
2075
+ "right",
2076
+ "bottom",
2077
+ "top left",
2078
+ "top right",
2079
+ "bottom left",
2080
+ "bottom right"
2081
+ ]
2082
+ },
2083
+ {
2084
+ name: "height",
2085
+ type: "number",
2086
+ advanced: true
2087
+ },
2088
+ {
2089
+ name: "width",
2090
+ type: "number",
2091
+ advanced: true
2092
+ },
2093
+ {
2094
+ name: "aspectRatio",
2095
+ type: "number",
2096
+ advanced: true,
2097
+ defaultValue: 0.7004048582995948
2098
+ },
2099
+ {
2100
+ name: "lazyLoad",
2101
+ type: "boolean",
2102
+ helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
2103
+ defaultValue: true,
2104
+ advanced: true
2105
+ }
2106
+ ]
2189
2107
  };
2190
- const getTestFields = ({ item, testGroupId }) => {
2191
- const variationValue = item.variations[testGroupId];
2192
- if (testGroupId === item.id || !variationValue)
2193
- return {
2194
- testVariationId: item.id,
2195
- testVariationName: "Default"
2196
- };
2197
- else
2198
- return {
2199
- data: variationValue.data,
2200
- testVariationId: variationValue.id,
2201
- testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
2202
- };
2108
+ const videoProps = function videoProps2(props, state) {
2109
+ return {
2110
+ ...props.autoPlay === true ? {
2111
+ autoPlay: true
2112
+ } : {},
2113
+ ...props.muted === true ? {
2114
+ muted: true
2115
+ } : {},
2116
+ ...props.controls === true ? {
2117
+ controls: true
2118
+ } : {},
2119
+ ...props.loop === true ? {
2120
+ loop: true
2121
+ } : {},
2122
+ ...props.playsInline === true ? {
2123
+ playsInline: true
2124
+ } : {}
2125
+ };
2203
2126
  };
2204
- const getContentVariation = async ({ item, canTrack }) => {
2205
- const testGroupId = await getContentVariationCookie({
2206
- canTrack,
2207
- contentId: item.id
2127
+ const spreadProps = function spreadProps2(props, state) {
2128
+ return {
2129
+ ...props.attributes,
2130
+ ...videoProps(props)
2131
+ };
2132
+ };
2133
+ const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2134
+ return /* @__PURE__ */ jsxRuntime.jsx("video", {
2135
+ ...spreadProps(props),
2136
+ style: {
2137
+ width: "100%",
2138
+ height: "100%",
2139
+ ...props.attributes?.style,
2140
+ objectFit: props.fit,
2141
+ objectPosition: props.position,
2142
+ borderRadius: 1
2143
+ },
2144
+ src: props.video || "no-src",
2145
+ get poster() {
2146
+ return props.posterImage;
2147
+ },
2148
+ [qwik._IMMUTABLE]: {
2149
+ poster: qwik._wrapSignal(props, "posterImage")
2150
+ }
2208
2151
  });
2209
- const testFields = testGroupId ? getTestFields({
2210
- item,
2211
- testGroupId
2212
- }) : void 0;
2213
- if (testFields)
2214
- return testFields;
2215
- else {
2216
- const randomVariationId = getRandomVariationId({
2217
- variations: item.variations,
2218
- id: item.id
2219
- });
2220
- setContentVariationCookie({
2221
- contentId: item.id,
2222
- value: randomVariationId,
2223
- canTrack
2224
- }).catch((err) => {
2225
- console.error("could not store A/B test variation: ", err);
2226
- });
2227
- return getTestFields({
2228
- item,
2229
- testGroupId: randomVariationId
2230
- });
2231
- }
2152
+ }, "Video_component_qdcTZflYyoQ"));
2153
+ const componentInfo$2 = {
2154
+ name: "Embed",
2155
+ static: true,
2156
+ builtIn: true,
2157
+ inputs: [
2158
+ {
2159
+ name: "url",
2160
+ type: "url",
2161
+ required: true,
2162
+ defaultValue: "",
2163
+ helperText: "e.g. enter a youtube url, google map, etc",
2164
+ onChange: serializeFn((options) => {
2165
+ const url = options.get("url");
2166
+ if (url) {
2167
+ options.set("content", "Loading...");
2168
+ const apiKey = "ae0e60e78201a3f2b0de4b";
2169
+ return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
2170
+ if (options.get("url") === url) {
2171
+ if (data.html)
2172
+ options.set("content", data.html);
2173
+ else
2174
+ options.set("content", "Invalid url, please try another");
2175
+ }
2176
+ }).catch((_err) => {
2177
+ options.set("content", "There was an error embedding this URL, please try again or another URL");
2178
+ });
2179
+ } else
2180
+ options.delete("content");
2181
+ })
2182
+ },
2183
+ {
2184
+ name: "content",
2185
+ type: "html",
2186
+ defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
2187
+ hideFromUI: true
2188
+ }
2189
+ ]
2232
2190
  };
2233
- const handleABTesting = async ({ item, canTrack }) => {
2234
- if (!checkIsBuilderContentWithVariations(item))
2191
+ const SCRIPT_MIME_TYPES = [
2192
+ "text/javascript",
2193
+ "application/javascript",
2194
+ "application/ecmascript"
2195
+ ];
2196
+ const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
2197
+ const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
2198
+ if (!elem || !elem.getElementsByTagName)
2235
2199
  return;
2236
- const variationValue = await getContentVariation({
2237
- item,
2238
- canTrack
2239
- });
2240
- Object.assign(item, variationValue);
2200
+ const scripts = elem.getElementsByTagName("script");
2201
+ for (let i = 0; i < scripts.length; i++) {
2202
+ const script = scripts[i];
2203
+ if (script.src && !state.scriptsInserted.includes(script.src)) {
2204
+ state.scriptsInserted.push(script.src);
2205
+ const newScript = document.createElement("script");
2206
+ newScript.async = true;
2207
+ newScript.src = script.src;
2208
+ document.head.appendChild(newScript);
2209
+ } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
2210
+ try {
2211
+ state.scriptsRun.push(script.innerText);
2212
+ new Function(script.innerText)();
2213
+ } catch (error) {
2214
+ console.warn("`Embed`: Error running script:", error);
2215
+ }
2216
+ }
2241
2217
  };
2242
- function flatten(object, path = null, separator = ".") {
2243
- return Object.keys(object).reduce((acc, key) => {
2244
- const value = object[key];
2245
- const newPath = [
2246
- path,
2247
- key
2248
- ].filter(Boolean).join(separator);
2249
- const isObject = [
2250
- typeof value === "object",
2251
- value !== null,
2252
- !(Array.isArray(value) && value.length === 0)
2253
- ].every(Boolean);
2254
- return isObject ? {
2255
- ...acc,
2256
- ...flatten(value, newPath, separator)
2257
- } : {
2258
- ...acc,
2259
- [newPath]: value
2260
- };
2261
- }, {});
2262
- }
2263
- const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
2264
- const BUILDER_OPTIONS_PREFIX = "options.";
2265
- const convertSearchParamsToQueryObject = (searchParams) => {
2266
- const options = {};
2267
- searchParams.forEach((value, key) => {
2268
- options[key] = value;
2218
+ const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2219
+ const elem = qwik.useRef();
2220
+ const state = qwik.useStore({
2221
+ ranInitFn: false,
2222
+ scriptsInserted: [],
2223
+ scriptsRun: []
2269
2224
  });
2270
- return options;
2225
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2226
+ const [elem2, props2, state2] = qwik.useLexicalScope();
2227
+ track2(() => elem2);
2228
+ track2(() => state2.ranInitFn);
2229
+ if (elem2 && !state2.ranInitFn) {
2230
+ state2.ranInitFn = true;
2231
+ findAndRunScripts$1(props2, state2, elem2);
2232
+ }
2233
+ }, "Embed_component_useTask_bg7ez0XUtiM", [
2234
+ elem,
2235
+ props,
2236
+ state
2237
+ ]));
2238
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
2239
+ class: "builder-embed",
2240
+ ref: elem,
2241
+ get dangerouslySetInnerHTML() {
2242
+ return props.content;
2243
+ },
2244
+ [qwik._IMMUTABLE]: {
2245
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "content")
2246
+ }
2247
+ });
2248
+ }, "Embed_component_Uji08ORjXbE"));
2249
+ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2250
+ return /* @__PURE__ */ jsxRuntime.jsx("img", {
2251
+ style: {
2252
+ objectFit: props.backgroundSize || "cover",
2253
+ objectPosition: props.backgroundPosition || "center"
2254
+ },
2255
+ get alt() {
2256
+ return props.altText;
2257
+ },
2258
+ src: props.imgSrc || props.image,
2259
+ ...props.attributes,
2260
+ [qwik._IMMUTABLE]: {
2261
+ alt: qwik._wrapSignal(props, "altText")
2262
+ }
2263
+ }, isEditing() && props.imgSrc || "default-key");
2264
+ }, "ImgComponent_component_FXvIDBSffO8"));
2265
+ const componentInfo$1 = {
2266
+ name: "Raw:Img",
2267
+ hideFromInsertMenu: true,
2268
+ builtIn: true,
2269
+ 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",
2270
+ inputs: [
2271
+ {
2272
+ name: "image",
2273
+ bubble: true,
2274
+ type: "file",
2275
+ allowedFileTypes: [
2276
+ "jpeg",
2277
+ "jpg",
2278
+ "png",
2279
+ "svg"
2280
+ ],
2281
+ required: true
2282
+ }
2283
+ ],
2284
+ noWrap: true,
2285
+ static: true
2286
+ };
2287
+ const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
2288
+ if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
2289
+ const scripts = elem.getElementsByTagName("script");
2290
+ for (let i = 0; i < scripts.length; i++) {
2291
+ const script = scripts[i];
2292
+ if (script.src) {
2293
+ if (state.scriptsInserted.includes(script.src))
2294
+ continue;
2295
+ state.scriptsInserted.push(script.src);
2296
+ const newScript = document.createElement("script");
2297
+ newScript.async = true;
2298
+ newScript.src = script.src;
2299
+ document.head.appendChild(newScript);
2300
+ } else if (!script.type || [
2301
+ "text/javascript",
2302
+ "application/javascript",
2303
+ "application/ecmascript"
2304
+ ].includes(script.type)) {
2305
+ if (state.scriptsRun.includes(script.innerText))
2306
+ continue;
2307
+ try {
2308
+ state.scriptsRun.push(script.innerText);
2309
+ new Function(script.innerText)();
2310
+ } catch (error) {
2311
+ console.warn("`CustomCode`: Error running script:", error);
2312
+ }
2313
+ }
2314
+ }
2315
+ }
2271
2316
  };
2272
- const getBuilderSearchParams = (_options) => {
2273
- if (!_options)
2274
- return {};
2275
- const options = normalizeSearchParams(_options);
2276
- const newOptions = {};
2277
- Object.keys(options).forEach((key) => {
2278
- if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
2279
- const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
2280
- newOptions[trimmedKey] = options[key];
2317
+ const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2318
+ const elem = qwik.useRef();
2319
+ const state = qwik.useStore({
2320
+ scriptsInserted: [],
2321
+ scriptsRun: []
2322
+ });
2323
+ qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
2324
+ const [elem2, props2, state2] = qwik.useLexicalScope();
2325
+ findAndRunScripts(props2, state2, elem2);
2326
+ }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
2327
+ elem,
2328
+ props,
2329
+ state
2330
+ ]));
2331
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
2332
+ ref: elem,
2333
+ class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
2334
+ get dangerouslySetInnerHTML() {
2335
+ return props.code;
2336
+ },
2337
+ [qwik._IMMUTABLE]: {
2338
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "code")
2281
2339
  }
2282
2340
  });
2283
- return newOptions;
2284
- };
2285
- const getBuilderSearchParamsFromWindow = () => {
2286
- if (!isBrowser())
2287
- return {};
2288
- const searchParams = new URLSearchParams(window.location.search);
2289
- return getBuilderSearchParams(searchParams);
2341
+ }, "CustomCode_component_uYOSy7w7Zqw"));
2342
+ const componentInfo = {
2343
+ name: "Custom Code",
2344
+ static: true,
2345
+ builtIn: true,
2346
+ requiredPermissions: [
2347
+ "editCode"
2348
+ ],
2349
+ inputs: [
2350
+ {
2351
+ name: "code",
2352
+ type: "html",
2353
+ required: true,
2354
+ defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2355
+ code: true
2356
+ },
2357
+ {
2358
+ name: "replaceNodes",
2359
+ type: "boolean",
2360
+ helperText: "Preserve server rendered dom nodes",
2361
+ advanced: true
2362
+ },
2363
+ {
2364
+ name: "scriptsClientOnly",
2365
+ type: "boolean",
2366
+ defaultValue: false,
2367
+ helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2368
+ advanced: true
2369
+ }
2370
+ ]
2290
2371
  };
2291
- const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
2292
- const generateContentUrl = (options) => {
2293
- const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
2294
- if (!apiKey)
2295
- throw new Error("Missing API key");
2296
- const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
2297
- const queryOptions = {
2298
- ...getBuilderSearchParamsFromWindow(),
2299
- ...normalizeSearchParams(options.options || {})
2300
- };
2301
- const flattened = flatten(queryOptions);
2302
- for (const key in flattened)
2303
- url.searchParams.set(key, String(flattened[key]));
2304
- if (userAttributes)
2305
- url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
2306
- if (query) {
2307
- const flattened1 = flatten({
2308
- query
2309
- });
2310
- for (const key1 in flattened1)
2311
- url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
2372
+ const getDefaultRegisteredComponents = () => [
2373
+ {
2374
+ component: Button,
2375
+ ...componentInfo$a
2376
+ },
2377
+ {
2378
+ component: Columns,
2379
+ ...componentInfo$9
2380
+ },
2381
+ {
2382
+ component: CustomCode,
2383
+ ...componentInfo
2384
+ },
2385
+ {
2386
+ component: Embed,
2387
+ ...componentInfo$2
2388
+ },
2389
+ {
2390
+ component: FragmentComponent,
2391
+ ...componentInfo$8
2392
+ },
2393
+ {
2394
+ component: Image,
2395
+ ...componentInfo$7
2396
+ },
2397
+ {
2398
+ component: ImgComponent,
2399
+ ...componentInfo$1
2400
+ },
2401
+ {
2402
+ component: SectionComponent,
2403
+ ...componentInfo$6
2404
+ },
2405
+ {
2406
+ component: Symbol$1,
2407
+ ...componentInfo$5
2408
+ },
2409
+ {
2410
+ component: Text,
2411
+ ...componentInfo$4
2412
+ },
2413
+ {
2414
+ component: Video,
2415
+ ...componentInfo$3
2312
2416
  }
2313
- return url;
2314
- };
2315
- async function getContent(options) {
2316
- return (await getAllContent({
2317
- ...options,
2318
- limit: 1
2319
- })).results[0] || null;
2320
- }
2321
- async function getAllContent(options) {
2322
- const url = generateContentUrl(options);
2323
- const res = await fetch$1(url.href);
2324
- const content = await res.json();
2325
- const canTrack = options.canTrack !== false;
2326
- if (canTrack && Array.isArray(content.results))
2327
- for (const item of content.results)
2328
- await handleABTesting({
2329
- item,
2330
- canTrack
2331
- });
2332
- return content;
2333
- }
2417
+ ];
2334
2418
  function isPreviewing() {
2335
2419
  if (!isBrowser())
2336
2420
  return false;
@@ -2591,20 +2675,20 @@ const getInteractionPropertiesForEvent = (event) => {
2591
2675
  }
2592
2676
  };
2593
2677
  };
2594
- const getCssFromFont = function getCssFromFont2(props, state, font) {
2678
+ const getCssFromFont = (font) => {
2595
2679
  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
2596
2680
  const name = family.split(",")[0];
2597
2681
  const url = font.fileUrl ?? font?.files?.regular;
2598
2682
  let str = "";
2599
2683
  if (url && family && name)
2600
2684
  str += `
2601
- @font-face {
2602
- font-family: "${family}";
2603
- src: local("${name}"), url('${url}') format('woff2');
2604
- font-display: fallback;
2605
- font-weight: 400;
2606
- }
2607
- `.trim();
2685
+ @font-face {
2686
+ font-family: "${family}";
2687
+ src: local("${name}"), url('${url}') format('woff2');
2688
+ font-display: fallback;
2689
+ font-weight: 400;
2690
+ }
2691
+ `.trim();
2608
2692
  if (font.files)
2609
2693
  for (const weight in font.files) {
2610
2694
  const isNumber = String(Number(weight)) === weight;
@@ -2613,60 +2697,102 @@ const getCssFromFont = function getCssFromFont2(props, state, font) {
2613
2697
  const weightUrl = font.files[weight];
2614
2698
  if (weightUrl && weightUrl !== url)
2615
2699
  str += `
2616
- @font-face {
2617
- font-family: "${family}";
2618
- src: url('${weightUrl}') format('woff2');
2619
- font-display: fallback;
2620
- font-weight: ${weight};
2621
- }
2622
- `.trim();
2700
+ @font-face {
2701
+ font-family: "${family}";
2702
+ src: url('${weightUrl}') format('woff2');
2703
+ font-display: fallback;
2704
+ font-weight: ${weight};
2705
+ }
2706
+ `.trim();
2623
2707
  }
2624
2708
  return str;
2625
2709
  };
2626
- const getFontCss = function getFontCss2(props, state, { customFonts }) {
2627
- return customFonts?.map((font) => getCssFromFont(props, state, font))?.join(" ") || "";
2710
+ const getFontCss = ({ customFonts }) => {
2711
+ return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
2628
2712
  };
2629
- const injectedStyles = function injectedStyles2(props, state) {
2630
- return `
2631
- ${props.cssCode || ""}
2632
- ${getFontCss(props, state, {
2633
- customFonts: props.customFonts
2634
- })}`;
2713
+ const getCss = ({ cssCode, contentId }) => {
2714
+ if (!cssCode)
2715
+ return "";
2716
+ if (!contentId)
2717
+ return cssCode;
2718
+ return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
2635
2719
  };
2636
2720
  const RenderContentStyles = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2637
- const state = {};
2721
+ const state = qwik.useStore({
2722
+ injectedStyles: `
2723
+ ${getCss({
2724
+ cssCode: props.cssCode,
2725
+ contentId: props.contentId
2726
+ })}
2727
+ ${getFontCss({
2728
+ customFonts: props.customFonts
2729
+ })}
2730
+ `
2731
+ });
2638
2732
  return /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
2639
- styles: injectedStyles(props, state)
2733
+ get styles() {
2734
+ return state.injectedStyles;
2735
+ },
2736
+ [qwik._IMMUTABLE]: {
2737
+ styles: qwik._wrapSignal(state, "injectedStyles")
2738
+ }
2640
2739
  }, "V0_0");
2641
2740
  }, "RenderContentStyles_component_Og0xL34Zbvc"));
2642
- const useContent = function useContent2(props, state, elementRef) {
2643
- if (!props.content && !state.overrideContent)
2644
- return void 0;
2741
+ const getContextStateInitialValue = ({ content, data, locale }) => {
2742
+ const defaultValues = {};
2743
+ content?.data?.inputs?.forEach((input) => {
2744
+ if (input.name && input.defaultValue !== void 0 && content?.data?.state && content.data.state[input.name] === void 0)
2745
+ defaultValues[input.name] = input.defaultValue;
2746
+ });
2747
+ const stateToUse = {
2748
+ ...content?.data?.state,
2749
+ ...data,
2750
+ ...locale ? {
2751
+ locale
2752
+ } : {}
2753
+ };
2645
2754
  return {
2646
- ...props.content,
2647
- ...state.overrideContent,
2755
+ ...defaultValues,
2756
+ ...stateToUse
2757
+ };
2758
+ };
2759
+ const getContentInitialValue = ({ content, data }) => {
2760
+ return !content ? void 0 : {
2761
+ ...content,
2762
+ data: {
2763
+ ...content?.data,
2764
+ ...data
2765
+ },
2766
+ meta: content?.meta
2767
+ };
2768
+ };
2769
+ const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
2770
+ state.useContent = {
2771
+ ...state.useContent,
2772
+ ...newContent,
2648
2773
  data: {
2649
- ...props.content?.data,
2650
- ...props.data,
2651
- ...state.overrideContent?.data
2774
+ ...state.useContent?.data,
2775
+ ...newContent?.data
2652
2776
  },
2653
2777
  meta: {
2654
- ...props.content?.meta,
2655
- ...state.overrideContent?.meta,
2656
- breakpoints: state.useBreakpoints || state.overrideContent?.meta?.breakpoints || props.content?.meta?.breakpoints
2778
+ ...state.useContent?.meta,
2779
+ ...newContent?.meta,
2780
+ breakpoints: newContent?.meta?.breakpoints || state.useContent?.meta?.breakpoints
2657
2781
  }
2658
2782
  };
2659
2783
  };
2660
- const contentState = function contentState2(props, state, elementRef) {
2661
- return {
2662
- ...props.content?.data?.state,
2663
- ...props.data,
2664
- ...props.locale ? {
2665
- locale: props.locale
2666
- } : {},
2667
- ...state.overrideState
2784
+ const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakpoints) {
2785
+ state.useContent = {
2786
+ ...state.useContent,
2787
+ meta: {
2788
+ ...state.useContent?.meta,
2789
+ breakpoints
2790
+ }
2668
2791
  };
2669
2792
  };
2793
+ const setContextState = function setContextState2(props, state, elementRef, newState) {
2794
+ state.contentState = newState;
2795
+ };
2670
2796
  const processMessage = function processMessage2(props, state, elementRef, event) {
2671
2797
  const { data } = event;
2672
2798
  if (data)
@@ -2674,9 +2800,10 @@ const processMessage = function processMessage2(props, state, elementRef, event)
2674
2800
  case "builder.configureSdk": {
2675
2801
  const messageContent = data.data;
2676
2802
  const { breakpoints, contentId } = messageContent;
2677
- if (!contentId || contentId !== useContent(props, state)?.id)
2803
+ if (!contentId || contentId !== state.useContent?.id)
2678
2804
  return;
2679
- state.useBreakpoints = breakpoints;
2805
+ if (breakpoints)
2806
+ setBreakpoints(props, state, elementRef, breakpoints);
2680
2807
  state.forceReRenderCount = state.forceReRenderCount + 1;
2681
2808
  break;
2682
2809
  }
@@ -2685,7 +2812,7 @@ const processMessage = function processMessage2(props, state, elementRef, event)
2685
2812
  const key = messageContent1.key || messageContent1.alias || messageContent1.entry || messageContent1.modelName;
2686
2813
  const contentData = messageContent1.data;
2687
2814
  if (key === props.model) {
2688
- state.overrideContent = contentData;
2815
+ mergeNewContent(props, state, elementRef, contentData);
2689
2816
  state.forceReRenderCount = state.forceReRenderCount + 1;
2690
2817
  }
2691
2818
  break;
@@ -2693,18 +2820,18 @@ const processMessage = function processMessage2(props, state, elementRef, event)
2693
2820
  }
2694
2821
  };
2695
2822
  const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
2696
- const jsCode = useContent(props, state)?.data?.jsCode;
2823
+ const jsCode = state.useContent?.data?.jsCode;
2697
2824
  if (jsCode)
2698
2825
  evaluate({
2699
2826
  code: jsCode,
2700
- context: state.contextContext,
2701
- state: contentState(props, state)
2827
+ context: props.context || {},
2828
+ state: state.contentState
2702
2829
  });
2703
2830
  };
2704
2831
  const onClick = function onClick22(props, state, elementRef, event) {
2705
- if (useContent(props, state)) {
2706
- const variationId = useContent(props, state)?.testVariationId;
2707
- const contentId = useContent(props, state)?.id;
2832
+ if (state.useContent) {
2833
+ const variationId = state.useContent?.testVariationId;
2834
+ const contentId = state.useContent?.id;
2708
2835
  _track({
2709
2836
  type: "click",
2710
2837
  canTrack: state.canTrackToUse,
@@ -2721,23 +2848,23 @@ const onClick = function onClick22(props, state, elementRef, event) {
2721
2848
  const evalExpression = function evalExpression2(props, state, elementRef, expression) {
2722
2849
  return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
2723
2850
  code: group,
2724
- context: state.contextContext,
2725
- state: contentState(props, state)
2851
+ context: props.context || {},
2852
+ state: state.contentState
2726
2853
  }));
2727
2854
  };
2728
2855
  const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
2729
2856
  fetch$1(url).then((response) => response.json()).then((json) => {
2730
- const newOverrideState = {
2731
- ...state.overrideState,
2857
+ const newState = {
2858
+ ...state.contentState,
2732
2859
  [key]: json
2733
2860
  };
2734
- state.overrideState = newOverrideState;
2861
+ setContextState(props, state, elementRef, newState);
2735
2862
  }).catch((err) => {
2736
2863
  console.log("error fetching dynamic data", url, err);
2737
2864
  });
2738
2865
  };
2739
2866
  const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
2740
- const requests = useContent(props, state)?.data?.httpRequests ?? {};
2867
+ const requests = state.useContent?.data?.httpRequests ?? {};
2741
2868
  Object.entries(requests).forEach(([key, url]) => {
2742
2869
  if (url && (!state.httpReqsData[key] || isEditing())) {
2743
2870
  const evaluatedUrl = evalExpression(props, state, elementRef, url);
@@ -2752,7 +2879,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
2752
2879
  if (isEditing())
2753
2880
  window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
2754
2881
  detail: {
2755
- state: contentState(props, state),
2882
+ state: state.contentState,
2756
2883
  ref: {
2757
2884
  name: props.model
2758
2885
  }
@@ -2760,7 +2887,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
2760
2887
  }));
2761
2888
  };
2762
2889
  const shouldRenderContentStyles = function shouldRenderContentStyles2(props, state, elementRef) {
2763
- return Boolean((useContent(props, state)?.data?.cssCode || useContent(props, state)?.data?.customFonts?.length) && TARGET !== "reactNative");
2890
+ return Boolean((state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
2764
2891
  };
2765
2892
  const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2766
2893
  const elementRef = qwik.useRef();
@@ -2775,18 +2902,24 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2775
2902
  }), {}),
2776
2903
  canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
2777
2904
  clicked: false,
2778
- contextContext: props.context || {},
2905
+ contentState: getContextStateInitialValue({
2906
+ content: props.content,
2907
+ data: props.data,
2908
+ locale: props.locale
2909
+ }),
2779
2910
  forceReRenderCount: 0,
2780
2911
  httpReqsData: {},
2781
2912
  overrideContent: null,
2782
- overrideState: {},
2783
2913
  update: 0,
2784
- useBreakpoints: null
2914
+ useContent: getContentInitialValue({
2915
+ content: props.content,
2916
+ data: props.data
2917
+ })
2785
2918
  });
2786
- qwik.useContextProvider(BuilderContext, qwik.useStore({
2787
- content: useContent(props, state),
2788
- state: contentState(props, state),
2789
- context: state.contextContext,
2919
+ qwik.useContextProvider(builderContext, qwik.useStore({
2920
+ content: state.useContent,
2921
+ state: state.contentState,
2922
+ context: props.context || {},
2790
2923
  apiKey: props.apiKey,
2791
2924
  registeredComponents: state.allRegisteredComponents
2792
2925
  }));
@@ -2813,9 +2946,9 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2813
2946
  window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
2814
2947
  window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
2815
2948
  }
2816
- if (useContent(props2, state2)) {
2817
- const variationId = useContent(props2, state2)?.testVariationId;
2818
- const contentId = useContent(props2, state2)?.id;
2949
+ if (state2.useContent) {
2950
+ const variationId = state2.useContent?.testVariationId;
2951
+ const contentId = state2.useContent?.id;
2819
2952
  _track({
2820
2953
  type: "impression",
2821
2954
  canTrack: state2.canTrackToUse,
@@ -2834,7 +2967,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2834
2967
  apiKey: props2.apiKey
2835
2968
  }).then((content) => {
2836
2969
  if (content)
2837
- state2.overrideContent = content;
2970
+ mergeNewContent(props2, state2, elementRef2, content);
2838
2971
  });
2839
2972
  }
2840
2973
  evaluateJsCode(props2, state2);
@@ -2846,30 +2979,30 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2846
2979
  props,
2847
2980
  state
2848
2981
  ]));
2849
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
2982
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2850
2983
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
2851
- state2.useContent?.data && track2(state2.useContent?.data, "jsCode");
2852
- state2 && track2(state2, "contentState");
2984
+ track2(() => state2.useContent?.data?.jsCode);
2985
+ track2(() => state2.contentState);
2853
2986
  evaluateJsCode(props2, state2);
2854
- }, "RenderContent_component_useWatch_OIBatobA0hE", [
2987
+ }, "RenderContent_component_useTask_Kulmlf9pM08", [
2855
2988
  elementRef,
2856
2989
  props,
2857
2990
  state
2858
2991
  ]));
2859
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
2992
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2860
2993
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
2861
- state2.useContent?.data && track2(state2.useContent?.data, "httpRequests");
2994
+ track2(() => state2.useContent?.data?.httpRequests);
2862
2995
  runHttpRequests(props2, state2, elementRef2);
2863
- }, "RenderContent_component_useWatch_1_LQM67VNl14k", [
2996
+ }, "RenderContent_component_useTask_1_X59YMGOetns", [
2864
2997
  elementRef,
2865
2998
  props,
2866
2999
  state
2867
3000
  ]));
2868
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
3001
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2869
3002
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
2870
- state2 && track2(state2, "contentState");
3003
+ track2(() => state2.contentState);
2871
3004
  emitStateUpdate(props2, state2);
2872
- }, "RenderContent_component_useWatch_2_aGi0RpYNBO0", [
3005
+ }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
2873
3006
  elementRef,
2874
3007
  props,
2875
3008
  state
@@ -2886,7 +3019,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2886
3019
  state
2887
3020
  ]));
2888
3021
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
2889
- children: useContent(props, state) ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
3022
+ children: state.useContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
2890
3023
  ref: elementRef,
2891
3024
  onClick$: qwik.inlinedQrl((event) => {
2892
3025
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
@@ -2896,17 +3029,18 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2896
3029
  props,
2897
3030
  state
2898
3031
  ]),
2899
- "builder-content-id": useContent(props, state)?.id,
3032
+ "builder-content-id": state.useContent?.id,
2900
3033
  get "builder-model"() {
2901
3034
  return props.model;
2902
3035
  },
2903
3036
  children: [
2904
3037
  shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsxRuntime.jsx(RenderContentStyles, {
2905
- cssCode: useContent(props, state)?.data?.cssCode,
2906
- customFonts: useContent(props, state)?.data?.customFonts
3038
+ contentId: state.useContent?.id,
3039
+ cssCode: state.useContent?.data?.cssCode,
3040
+ customFonts: state.useContent?.data?.customFonts
2907
3041
  }, "03_0") : null,
2908
3042
  /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks, {
2909
- blocks: useContent(props, state)?.data?.blocks
3043
+ blocks: state.useContent?.data?.blocks
2910
3044
  }, state.forceReRenderCount)
2911
3045
  ],
2912
3046
  [qwik._IMMUTABLE]: {
@@ -2919,69 +3053,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2919
3053
  }
2920
3054
  }, "03_1");
2921
3055
  }, "RenderContent_component_hEAI0ahViXM"));
2922
- const className = function className22(props, state, builderContext) {
2923
- return [
2924
- ...[
2925
- props.attributes.class
2926
- ],
2927
- "builder-symbol",
2928
- props.symbol?.inline ? "builder-inline-symbol" : void 0,
2929
- props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
2930
- ].filter(Boolean).join(" ");
2931
- };
2932
- const contentToUse = function contentToUse2(props, state, builderContext) {
2933
- return props.symbol?.content || state.fetchedContent;
2934
- };
2935
- const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2936
- const builderContext = qwik.useContext(BuilderContext);
2937
- const state = qwik.useStore({
2938
- fetchedContent: null
2939
- });
2940
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
2941
- const [builderContext2, props2, state2] = qwik.useLexicalScope();
2942
- props2 && track2(props2, "symbol");
2943
- state2 && track2(state2, "fetchedContent");
2944
- const symbolToUse = props2.symbol;
2945
- if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
2946
- getContent({
2947
- model: symbolToUse.model,
2948
- apiKey: builderContext2.apiKey,
2949
- query: {
2950
- id: symbolToUse.entry
2951
- }
2952
- }).then((response) => {
2953
- state2.fetchedContent = response;
2954
- });
2955
- }, "Symbol_component_useWatch_9HNT04zd0Dk", [
2956
- builderContext,
2957
- props,
2958
- state
2959
- ]));
2960
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
2961
- ...props.attributes,
2962
- class: className(props),
2963
- children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent, {
2964
- get apiKey() {
2965
- return builderContext.apiKey;
2966
- },
2967
- get context() {
2968
- return builderContext.context;
2969
- },
2970
- customComponents: Object.values(builderContext.registeredComponents),
2971
- data: {
2972
- ...props.symbol?.data,
2973
- ...builderContext.state,
2974
- ...props.symbol?.content?.data?.state
2975
- },
2976
- model: props.symbol?.model,
2977
- content: contentToUse(props, state),
2978
- [qwik._IMMUTABLE]: {
2979
- apiKey: qwik._wrapSignal(builderContext, "apiKey"),
2980
- context: qwik._wrapSignal(builderContext, "context")
2981
- }
2982
- }, "Wt_0")
2983
- });
2984
- }, "Symbol_component_WVvggdkUPdk"));
3056
+ const RenderContent$1 = RenderContent;
2985
3057
  const settings = {};
2986
3058
  function setEditorSettings(newSettings) {
2987
3059
  if (isBrowser()) {
@@ -2998,7 +3070,7 @@ exports.Columns = Columns;
2998
3070
  exports.Fragment = FragmentComponent;
2999
3071
  exports.Image = Image;
3000
3072
  exports.RenderBlocks = RenderBlocks;
3001
- exports.RenderContent = RenderContent;
3073
+ exports.RenderContent = RenderContent$1;
3002
3074
  exports.Section = SectionComponent;
3003
3075
  exports.Symbol = Symbol$1;
3004
3076
  exports.Text = Text;