@builder.io/sdk-qwik 0.7.2 → 0.7.4

package/lib/browser/index.qwik.mjs

@@ -2573,6 +2573,8 @@ const componentInfo = {
   ]
 };
 const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  _jsxBranch();
   const videoProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     return {
@@ -2596,43 +2598,83 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     props
   ]));
   const spreadProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, videoProps2] = useLexicalScope();
+    const [videoProps2] = useLexicalScope();
     return {
-      ...props2.attributes,
       ...videoProps2.value
     };
   }, "Video_component_spreadProps_useComputed_ZdLsx18NYH4", [
-    props,
     videoProps
   ]));
-  return /* @__PURE__ */ _jsxS("video", {
-    ...spreadProps.value
-  }, {
-    poster: _fnSignal((p0) => p0.posterImage, [
-      props
-    ], "p0.posterImage"),
-    preload: _fnSignal((p0) => p0.preload || "metadata", [
-      props
-    ], 'p0.preload||"metadata"'),
-    src: _fnSignal((p0) => p0.video || "no-src", [
-      props
-    ], 'p0.video||"no-src"'),
-    style: _fnSignal((p0) => {
-      var _a;
-      return {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    style: {
+      position: "relative"
+    }
+  }, [
+    /* @__PURE__ */ _jsxS("video", {
+      ...spreadProps.value,
+      children: !props.lazyLoad ? /* @__PURE__ */ _jsxQ("source", null, {
+        src: _fnSignal((p0) => p0.video, [
+          props
+        ], "p0.video"),
+        type: "video/mp4"
+      }, null, 3, "j7_0") : null,
+      style: {
         width: "100%",
         height: "100%",
-        ...(_a = p0.attributes) == null ? void 0 : _a.style,
-        objectFit: p0.fit,
-        objectPosition: p0.position,
+        ...(_a = props.attributes) == null ? void 0 : _a.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
         // Hack to get object fit to work as expected and
         // not have the video overflow
-        borderRadius: 1
-      };
-    }, [
-      props
-    ], '{width:"100%",height:"100%",...p0.attributes?.style,objectFit:p0.fit,objectPosition:p0.position,borderRadius:1}')
-  }, 0, "j7_0");
+        zIndex: 2,
+        borderRadius: "1px",
+        ...props.aspectRatio ? {
+          position: "absolute"
+        } : null
+      }
+    }, {
+      class: "builder-video",
+      poster: _fnSignal((p0) => p0.posterImage, [
+        props
+      ], "p0.posterImage"),
+      preload: _fnSignal((p0) => p0.preload || "metadata", [
+        props
+      ], 'p0.preload||"metadata"'),
+      src: _fnSignal((p0) => p0.video || "no-src", [
+        props
+      ], 'p0.video||"no-src"')
+    }, 0, null),
+    props.aspectRatio && !(props.fitContent && ((_c = (_b = props.builderBlock) == null ? void 0 : _b.children) == null ? void 0 : _c.length)) ? /* @__PURE__ */ _jsxQ("div", null, {
+      style: _fnSignal((p0) => ({
+        width: "100%",
+        paddingTop: p0.aspectRatio * 100 + "%",
+        pointerEvents: "none",
+        fontSize: "0px"
+      }), [
+        props
+      ], '{width:"100%",paddingTop:p0.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}')
+    }, null, 3, "j7_1") : null,
+    ((_e = (_d = props.builderBlock) == null ? void 0 : _d.children) == null ? void 0 : _e.length) && props.fitContent ? /* @__PURE__ */ _jsxQ("div", null, {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch"
+      }
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "j7_2"), 1, "j7_3") : null,
+    ((_g = (_f = props.builderBlock) == null ? void 0 : _f.children) == null ? void 0 : _g.length) && !props.fitContent ? /* @__PURE__ */ _jsxQ("div", null, {
+      style: {
+        pointerEvents: "none",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%"
+      }
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "j7_4"), 1, "j7_5") : null
+  ], 1, "j7_6");
 }, "Video_component_qdcTZflYyoQ"));
 const getDefaultRegisteredComponents = () => [
   {
@@ -2698,12 +2740,16 @@ const serializeComponentInfo = ({ inputs, ...info }) => ({
     [key]: serializeValue(value)
   }), {}))
 });
+const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";
+const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = "builderIoAbTest";
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "builderIoRenderContent";
 const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {}).map((variant) => ({
   ...variant,
   testVariationId: variant.id,
   id: content == null ? void 0 : content.id
 }));
-const checkShouldRunVariants = ({ canTrack, content }) => {
+const checkShouldRenderVariants = ({ canTrack, content }) => {
   const hasVariants = getVariants(content).length > 0;
   if (!hasVariants)
     return false;
@@ -2713,131 +2759,27 @@ const checkShouldRunVariants = ({ canTrack, content }) => {
     return false;
   return true;
 };
-function bldrAbTest(contentId, variants, isHydrationTarget2) {
-  var _a;
-  function getAndSetVariantId2() {
-    function setCookie2(name, value, days) {
-      let expires = "";
-      if (days) {
-        const date = /* @__PURE__ */ new Date();
-        date.setTime(date.getTime() + days * 864e5);
-        expires = "; expires=" + date.toUTCString();
-      }
-      document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
-    }
-    function getCookie2(name) {
-      const nameEQ = name + "=";
-      const ca = document.cookie.split(";");
-      for (let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) === " ")
-          c = c.substring(1, c.length);
-        if (c.indexOf(nameEQ) === 0)
-          return c.substring(nameEQ.length, c.length);
-      }
-      return null;
-    }
-    const cookieName = `builder.tests.${contentId}`;
-    const variantInCookie = getCookie2(cookieName);
-    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
-    if (variantInCookie && availableIDs.includes(variantInCookie))
-      return variantInCookie;
-    let n = 0;
-    const random = Math.random();
-    for (let i = 0; i < variants.length; i++) {
-      const variant = variants[i];
-      const testRatio = variant.testRatio;
-      n += testRatio;
-      if (random < n) {
-        setCookie2(cookieName, variant.id);
-        return variant.id;
-      }
-    }
-    setCookie2(cookieName, contentId);
-    return contentId;
-  }
-  const winningVariantId = getAndSetVariantId2();
-  const styleEl = (_a = document.currentScript) == null ? void 0 : _a.previousElementSibling;
-  if (isHydrationTarget2) {
-    styleEl.remove();
-    const thisScriptEl = document.currentScript;
-    thisScriptEl == null ? void 0 : thisScriptEl.remove();
-  } else {
-    const newStyleStr = variants.concat({
-      id: contentId
-    }).filter((variant) => variant.id !== winningVariantId).map((value) => {
-      return `.variant-${value.id} {  display: none; }
-        `;
-    }).join("");
-    styleEl.innerHTML = newStyleStr;
-  }
-}
-function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
-  var _a;
-  if (!navigator.cookieEnabled)
-    return;
-  function getCookie2(name) {
-    const nameEQ = name + "=";
-    const ca = document.cookie.split(";");
-    for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) === " ")
-        c = c.substring(1, c.length);
-      if (c.indexOf(nameEQ) === 0)
-        return c.substring(nameEQ.length, c.length);
-    }
-    return null;
-  }
-  const cookieName = `builder.tests.${defaultContentId}`;
-  const variantId = getCookie2(cookieName);
-  const parentDiv = (_a = document.currentScript) == null ? void 0 : _a.parentElement;
-  const variantIsDefaultContent = variantContentId === defaultContentId;
-  if (variantId === variantContentId) {
-    if (variantIsDefaultContent)
-      return;
-    parentDiv == null ? void 0 : parentDiv.removeAttribute("hidden");
-    parentDiv == null ? void 0 : parentDiv.removeAttribute("aria-hidden");
-  } else {
-    if (variantIsDefaultContent) {
-      if (isHydrationTarget2)
-        parentDiv == null ? void 0 : parentDiv.remove();
-      else {
-        parentDiv == null ? void 0 : parentDiv.setAttribute("hidden", "true");
-        parentDiv == null ? void 0 : parentDiv.setAttribute("aria-hidden", "true");
-      }
-    }
-    return;
-  }
-  return;
-}
 const getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-const AB_TEST_FN_NAME = "builderIoAbTest";
-const CONTENT_FN_NAME = "builderIoRenderContent";
-const getScriptString = () => {
-  const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
-  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
-  return `
-  window.${AB_TEST_FN_NAME} = ${fnStr}
-  window.${CONTENT_FN_NAME} = ${fnStr2}
+const getScriptString = () => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
-};
-const getVariantsScriptString = (variants, contentId) => {
-  return `
-  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
-};
-const getRenderContentScriptString = ({ contentId, variationId }) => {
-  return `
-  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
-};
+const getUpdateCookieAndStylesScript = (variants, contentId) => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+  )`;
+const getUpdateVariantVisibilityScript = ({ contentId, variationId }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
+    "${variationId}", "${contentId}", ${isHydrationTarget}
+  )`;
 const InlinedScript = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("script", null, {
     dangerouslySetInnerHTML: _fnSignal((p0) => p0.scriptStr, [
       props
     ], "p0.scriptStr"),
-    id: _fnSignal((p0) => p0.id, [
+    id: _fnSignal((p0) => p0.id || "", [
       props
-    ], "p0.id")
+    ], 'p0.id||""')
   }, null, 3, "WO_0");
 }, "InlinedScript_component_hwThBdhA8rw"));
 function getGlobalThis() {
@@ -3217,7 +3159,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.7.2";
+const SDK_VERSION = "0.7.4";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -3475,7 +3417,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
     }));
 };
 const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   _jsxBranch();
   const elementRef = useSignal();
   const state = useStore({
@@ -3535,7 +3477,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     state
   ]));
   useOn("qvisible", /* @__PURE__ */ inlinedQrl((event, element) => {
-    var _a2, _b2, _c2, _d;
+    var _a2, _b2, _c2, _d2;
     if (isBrowser()) {
       if (isEditing() && element)
         element.dispatchEvent(new CustomEvent("initeditingbldr"));
@@ -3543,7 +3485,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       if (shouldTrackImpression) {
         const variationId = (_b2 = element.attributes.getNamedItem("variationId")) == null ? void 0 : _b2.value;
         const contentId = (_c2 = element.attributes.getNamedItem("contentId")) == null ? void 0 : _c2.value;
-        const apiKeyProp = (_d = element.attributes.getNamedItem("apiKey")) == null ? void 0 : _d.value;
+        const apiKeyProp = (_d2 = element.attributes.getNamedItem("apiKey")) == null ? void 0 : _d2.value;
         _track({
           type: "impression",
           canTrack: true,
@@ -3641,7 +3583,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         hidden: true,
         "aria-hidden": true
       },
-      class: props.classNameProp
+      class: `variant-${((_d = props.content) == null ? void 0 : _d.testVariationId) || ((_e = props.content) == null ? void 0 : _e.id)}`
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "06_0")) : null
   }, 1, "06_1");
 }, "EnableEditor_component_ko1mO8oaj8k"));
@@ -3805,7 +3747,7 @@ const ContentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
         ...serializeComponentInfo(info)
       }
     }), {}),
-    scriptStr: getRenderContentScriptString({
+    scriptStr: getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: (_a = props.content) == null ? void 0 : _a.testVariationId,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
@@ -3842,9 +3784,6 @@ const ContentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
     get enrich() {
       return props.enrich;
     },
-    get classNameProp() {
-      return props.classNameProp;
-    },
     get showContent() {
       return props.showContent;
     },
@@ -3933,9 +3872,6 @@ const ContentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
       canTrack: _fnSignal((p0) => p0.canTrack, [
         props
       ], "p0.canTrack"),
-      classNameProp: _fnSignal((p0) => p0.classNameProp, [
-        props
-      ], "p0.classNameProp"),
       content: _fnSignal((p0) => p0.content, [
         props
       ], "p0.content"),
@@ -3963,19 +3899,19 @@ const ContentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
 const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   const state = useStore({
-    shouldRenderVariants: checkShouldRunVariants({
+    shouldRenderVariants: checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   });
-  const variantScriptStr = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+  const updateCookieAndStylesScriptStr = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     var _a;
     const [props2] = useLexicalScope();
-    return getVariantsScriptString(getVariants(props2.content).map((value) => ({
+    return getUpdateCookieAndStylesScript(getVariants(props2.content).map((value) => ({
       id: value.testVariationId,
       testRatio: value.testRatio
     })), ((_a = props2.content) == null ? void 0 : _a.id) || "");
-  }, "ContentVariants_component_variantScriptStr_useComputed_ldWqWafT8Ww", [
+  }, "ContentVariants_component_updateCookieAndStylesScriptStr_useComputed_FtJXWpnoDYg", [
     props
   ]));
   const hideVariantsStyleString = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -4032,11 +3968,11 @@ const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
           }, 3, "XM_1"),
           /* @__PURE__ */ _jsxC(InlinedScript, {
             get scriptStr() {
-              return variantScriptStr.value;
+              return updateCookieAndStylesScriptStr.value;
             },
             [_IMMUTABLE]: {
               scriptStr: _fnSignal((p0) => p0.value, [
-                variantScriptStr
+                updateCookieAndStylesScriptStr
               ], "p0.value")
             }
           }, 3, "XM_2"),
@@ -4044,9 +3980,6 @@ const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
             return /* @__PURE__ */ _jsxC(ContentComponent, {
               content: variant,
               showContent: false,
-              get classNameProp() {
-                return void 0;
-              },
               get model() {
                 return props.model;
               },
@@ -4090,7 +4023,6 @@ const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
                 canTrack: _fnSignal((p0) => p0.canTrack, [
                   props
                 ], "p0.canTrack"),
-                classNameProp: _IMMUTABLE,
                 context: _fnSignal((p0) => p0.context, [
                   props
                 ], "p0.context"),
@@ -4125,10 +4057,6 @@ const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
         get content() {
           return defaultContent.value;
         },
-        get classNameProp() {
-          var _a;
-          return `variant-${(_a = props.content) == null ? void 0 : _a.id}`;
-        },
         showContent: true,
         get model() {
           return props.model;
@@ -4173,12 +4101,6 @@ const ContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
           canTrack: _fnSignal((p0) => p0.canTrack, [
             props
           ], "p0.canTrack"),
-          classNameProp: _fnSignal((p0) => {
-            var _a;
-            return `variant-${(_a = p0.content) == null ? void 0 : _a.id}`;
-          }, [
-            props
-          ], "`variant-${p0.content?.id}`"),
           content: _fnSignal((p0) => p0.value, [
             defaultContent
           ], "p0.value"),