@wix/editor-react-components 1.2500.0 → 1.2502.0

package/dist/site/components/chunks/customElementInit.js

@@ -0,0 +1,658 @@
+import { a as getData, b as getFileExtension, f as fileType, c as alignTypes, d as fittingTypes, M as MEDIA_ROOT_URL, S as STATIC_MEDIA_URL } from "./index5.js";
+import { g as getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+var fastdom$2 = { exports: {} };
+var fastdom$1 = fastdom$2.exports;
+var hasRequiredFastdom;
+function requireFastdom() {
+  if (hasRequiredFastdom) return fastdom$2.exports;
+  hasRequiredFastdom = 1;
+  (function(module) {
+    !(function(win) {
+      var debug = function() {
+      };
+      var raf = win.requestAnimationFrame || win.webkitRequestAnimationFrame || win.mozRequestAnimationFrame || win.msRequestAnimationFrame || function(cb) {
+        return setTimeout(cb, 16);
+      };
+      function FastDom() {
+        var self = this;
+        self.reads = [];
+        self.writes = [];
+        self.raf = raf.bind(win);
+      }
+      FastDom.prototype = {
+        constructor: FastDom,
+        /**
+         * We run this inside a try catch
+         * so that if any jobs error, we
+         * are able to recover and continue
+         * to flush the batch until it's empty.
+         *
+         * @param {Array} tasks
+         */
+        runTasks: function(tasks) {
+          var task;
+          while (task = tasks.shift()) task();
+        },
+        /**
+         * Adds a job to the read batch and
+         * schedules a new frame if need be.
+         *
+         * @param  {Function} fn
+         * @param  {Object} ctx the context to be bound to `fn` (optional).
+         * @public
+         */
+        measure: function(fn, ctx) {
+          var task = !ctx ? fn : fn.bind(ctx);
+          this.reads.push(task);
+          scheduleFlush(this);
+          return task;
+        },
+        /**
+         * Adds a job to the
+         * write batch and schedules
+         * a new frame if need be.
+         *
+         * @param  {Function} fn
+         * @param  {Object} ctx the context to be bound to `fn` (optional).
+         * @public
+         */
+        mutate: function(fn, ctx) {
+          var task = !ctx ? fn : fn.bind(ctx);
+          this.writes.push(task);
+          scheduleFlush(this);
+          return task;
+        },
+        /**
+         * Clears a scheduled 'read' or 'write' task.
+         *
+         * @param {Object} task
+         * @return {Boolean} success
+         * @public
+         */
+        clear: function(task) {
+          return remove(this.reads, task) || remove(this.writes, task);
+        },
+        /**
+         * Extend this FastDom with some
+         * custom functionality.
+         *
+         * Because fastdom must *always* be a
+         * singleton, we're actually extending
+         * the fastdom instance. This means tasks
+         * scheduled by an extension still enter
+         * fastdom's global task queue.
+         *
+         * The 'super' instance can be accessed
+         * from `this.fastdom`.
+         *
+         * @example
+         *
+         * var myFastdom = fastdom.extend({
+         *   initialize: function() {
+         *     // runs on creation
+         *   },
+         *
+         *   // override a method
+         *   measure: function(fn) {
+         *     // do extra stuff ...
+         *
+         *     // then call the original
+         *     return this.fastdom.measure(fn);
+         *   },
+         *
+         *   ...
+         * });
+         *
+         * @param  {Object} props  properties to mixin
+         * @return {FastDom}
+         */
+        extend: function(props) {
+          if (typeof props != "object") throw new Error("expected object");
+          var child = Object.create(this);
+          mixin(child, props);
+          child.fastdom = this;
+          if (child.initialize) child.initialize();
+          return child;
+        },
+        // override this with a function
+        // to prevent Errors in console
+        // when tasks throw
+        catch: null
+      };
+      function scheduleFlush(fastdom2) {
+        if (!fastdom2.scheduled) {
+          fastdom2.scheduled = true;
+          fastdom2.raf(flush.bind(null, fastdom2));
+        }
+      }
+      function flush(fastdom2) {
+        var writes = fastdom2.writes;
+        var reads = fastdom2.reads;
+        var error;
+        try {
+          debug("flushing reads", reads.length);
+          fastdom2.runTasks(reads);
+          debug("flushing writes", writes.length);
+          fastdom2.runTasks(writes);
+        } catch (e) {
+          error = e;
+        }
+        fastdom2.scheduled = false;
+        if (reads.length || writes.length) scheduleFlush(fastdom2);
+        if (error) {
+          debug("task errored", error.message);
+          if (fastdom2.catch) fastdom2.catch(error);
+          else throw error;
+        }
+      }
+      function remove(array, item) {
+        var index = array.indexOf(item);
+        return !!~index && !!array.splice(index, 1);
+      }
+      function mixin(target, source) {
+        for (var key in source) {
+          if (source.hasOwnProperty(key)) target[key] = source[key];
+        }
+      }
+      var exports$1 = win.fastdom = win.fastdom || new FastDom();
+      module.exports = exports$1;
+    })(typeof window !== "undefined" ? window : typeof fastdom$1 != "undefined" ? fastdom$1 : globalThis);
+  })(fastdom$2);
+  return fastdom$2.exports;
+}
+var fastdomExports = requireFastdom();
+const fastdom = /* @__PURE__ */ getDefaultExportFromCjs(fastdomExports);
+const camelToKebab = (str) => str.replace(/[A-Z]+(?![^A-Z])|[A-Z]/g, (a, b) => (b ? "-" : "") + a.toLowerCase());
+const CSS_NUMERIC_VALUES = {
+  columnCount: 1,
+  columns: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  zIndex: 1,
+  zoom: 1
+};
+const pick = (obj, props) => {
+  const propsArr = Array.isArray(props) ? props : [props];
+  return propsArr.reduce((subObj, prop) => {
+    const val = obj[prop];
+    return val !== void 0 ? Object.assign(subObj, { [prop]: val }) : subObj;
+  }, {});
+};
+const addDefaultUnitIfNeeded = (prop, value) => typeof value === "number" && !CSS_NUMERIC_VALUES[prop] ? `${value}px` : value.toString();
+const setStyle = (node, styleProperties) => node && styleProperties && Object.keys(styleProperties).forEach((prop) => {
+  const styleProp = prop;
+  const propValue = styleProperties[styleProp];
+  if (propValue !== void 0) {
+    node.style[styleProp] = addDefaultUnitIfNeeded(styleProp, propValue);
+  } else {
+    node.style.removeProperty(styleProp);
+  }
+});
+const getScreenHeight = (heightOverride) => heightOverride || document.documentElement.clientHeight || window.innerHeight || 0;
+const matchesUserDomainMediaPrefix = (uri, prefixes) => prefixes.some((prefix) => uri.startsWith(`${prefix}_`));
+const ensureTrailingSlash = (value) => value.endsWith("/") ? value : `${value}/`;
+const resolveStaticMediaBaseUrl = ({ uri, envConsts }) => {
+  const { externalBaseUrl, userDomainMediaPrefixes = [], staticMediaUrl } = envConsts;
+  if (matchesUserDomainMediaPrefix(uri, userDomainMediaPrefixes) && externalBaseUrl) {
+    return `${ensureTrailingSlash(externalBaseUrl)}_media/`;
+  }
+  return ensureTrailingSlash(staticMediaUrl);
+};
+const getImageComputedProperties = (extendedImageInfo, envConsts, htmlTag) => {
+  if (!extendedImageInfo.targetWidth || !extendedImageInfo.targetHeight || !extendedImageInfo.imageData.uri) {
+    return { uri: "", css: {}, transformed: false };
+  }
+  const { imageData } = extendedImageInfo;
+  const fittingType = extendedImageInfo.displayMode || fittingTypes.SCALE_TO_FILL;
+  const imageOptions = Object.assign(pick(imageData, ["upscaleMethod"]), pick(extendedImageInfo, [
+    "filters",
+    "encoding",
+    "allowFullGIFTransformation",
+    "allowWebpAvifTransforms"
+  ]), extendedImageInfo.quality || imageData.quality, {
+    hasAnimation: (extendedImageInfo == null ? void 0 : extendedImageInfo.hasAnimation) || (imageData == null ? void 0 : imageData.hasAnimation)
+  });
+  const devicePixelRatioFromData = extendedImageInfo.imageData.devicePixelRatio || envConsts.devicePixelRatio;
+  const devicePixelRatio = getDevicePixelRatio$1(devicePixelRatioFromData);
+  const src = Object.assign(pick(imageData, ["width", "height", "crop", "name", "focalPoint"]), { id: imageData.uri });
+  const target = {
+    width: extendedImageInfo.targetWidth,
+    height: extendedImageInfo.targetHeight,
+    htmlTag,
+    pixelAspectRatio: devicePixelRatio,
+    alignment: extendedImageInfo.alignType || alignTypes.CENTER
+  };
+  const imageComputedProperties = getData(fittingType, src, target, imageOptions);
+  const staticMediaUrl = imageData.userDomainMediaURL ? imageData.userDomainMediaURL : resolveStaticMediaBaseUrl({
+    uri: imageData.uri,
+    envConsts
+  });
+  imageComputedProperties.uri = getMediaUrlByContext(imageComputedProperties.uri, staticMediaUrl, envConsts.mediaRootUrl);
+  return imageComputedProperties;
+};
+const getMediaUrlByContext = (imageUri, staticMediaUrl, mediaRootUrl) => {
+  var _a;
+  const isExternalUrl = /(^https?)|(^data)|(^blob)|(^\/\/)/.test(imageUri);
+  if (isExternalUrl) {
+    return imageUri;
+  }
+  let path = ensureTrailingSlash(staticMediaUrl);
+  if (imageUri) {
+    if (/^micons\//.test(imageUri)) {
+      path = ensureTrailingSlash(mediaRootUrl);
+    } else if (((_a = /[^.]+$/.exec(imageUri)) == null ? void 0 : _a[0]) === "ico") {
+      path = path.replace("media", "ficons");
+    }
+  }
+  return path + imageUri;
+};
+const getDevicePixelRatio$1 = (devicePixelRatio) => {
+  const queryParams = window.location.search.split("&").map((query) => query.split("="));
+  const devicePixelRatioQueryParam = queryParams.find((query) => {
+    var _a;
+    return (_a = query[0]) == null ? void 0 : _a.toLowerCase().includes("devicepixelratio");
+  });
+  const devicePixelRatioValueForceFromUrl = (devicePixelRatioQueryParam == null ? void 0 : devicePixelRatioQueryParam[1]) ? Number(devicePixelRatioQueryParam[1]) : null;
+  return devicePixelRatioValueForceFromUrl || devicePixelRatio || 1;
+};
+const getImageSrc = (imageNode) => imageNode.getAttribute("src");
+const imageIsAnimated = (uri, hasAnimation) => getFileExtension(uri) === fileType.GIF || getFileExtension(uri) === fileType.WEBP && hasAnimation;
+const getMediaSizeQueryString = (media) => {
+  return Object.entries(media).filter(([_, value]) => value || value === 0).map(([key, value]) => `(${camelToKebab(key)}: ${value}px)`).join(" and ");
+};
+const MOBILE_SAFE_ADDRESSBAR_HEIGHT = 80;
+function getHeightOverride(height, mediaHeightOverrideType) {
+  return mediaHeightOverrideType === "fixed" || mediaHeightOverrideType === "viewport" ? document.documentElement.clientHeight + MOBILE_SAFE_ADDRESSBAR_HEIGHT : height;
+}
+function computeScaleOverrides(imageStyle, targetScale = 1) {
+  return targetScale !== 1 ? {
+    ...imageStyle,
+    width: "100%",
+    height: "100%"
+  } : imageStyle;
+}
+function computeStyleOverrides(mediaHeightOverrideType, imageStyle, displayMode, targetScale, isResponsive) {
+  const styleWithScale = computeScaleOverrides(imageStyle, targetScale);
+  if (isResponsive) {
+    delete styleWithScale.height;
+    styleWithScale.width = "100%";
+  }
+  if (!mediaHeightOverrideType) {
+    return styleWithScale;
+  }
+  const style = { ...styleWithScale };
+  if (displayMode === "fill") {
+    style.position = "absolute";
+    style.top = "0";
+  } else if (displayMode === "fit") {
+    style.height = "100%";
+  }
+  if (mediaHeightOverrideType === "fixed") {
+    style["will-change"] = "transform";
+  }
+  if (style.objectPosition) {
+    style.objectPosition = imageStyle.objectPosition.replace(/(center|bottom)$/, "top");
+  }
+  return style;
+}
+function getSourceSetsTargetHeightByEffect(sourceSets, offsetWidth, offsetHeight, screenHeight, services) {
+  const sourceSetsTargetHeights = {};
+  sourceSets.forEach(({ mediaQuery, scrollEffect }) => {
+    var _a;
+    sourceSetsTargetHeights[mediaQuery] = ((_a = services.getMediaDimensionsByEffect) == null ? void 0 : _a.call(services, scrollEffect, offsetWidth, offsetHeight, screenHeight).height) || offsetHeight;
+  });
+  return sourceSetsTargetHeights;
+}
+function computeSrcSets(measures, imageInfo, envConsts) {
+  const { sourceSets } = imageInfo;
+  if (!sourceSets || !sourceSets.length) {
+    return;
+  }
+  const mediaToUri = {};
+  sourceSets.forEach(({ mediaQuery, crop, focalPoint }) => {
+    const imageInfoClone = {
+      ...imageInfo,
+      targetHeight: (measures.sourceSetsTargetHeights || {})[mediaQuery] || 0,
+      imageData: {
+        ...imageInfo.imageData,
+        crop,
+        focalPoint
+      }
+    };
+    const imageComputedProperties = getImageComputedProperties(imageInfoClone, envConsts, "img");
+    mediaToUri[mediaQuery] = imageComputedProperties.uri || "";
+  });
+  return mediaToUri;
+}
+function measure(id, measures, domNodes, { containerElm, bgEffect = "none", sourceSets }, services) {
+  var _a, _b;
+  const innerImage = domNodes.image;
+  const wixImage = domNodes[id];
+  const screenHeight = getScreenHeight((_a = services.getScreenHeightOverride) == null ? void 0 : _a.call(services));
+  const mediaHeightOverrideType = containerElm == null ? void 0 : containerElm.dataset.mediaHeightOverrideType;
+  const hasBgEffect = bgEffect && bgEffect !== "none" || sourceSets && sourceSets.some((srcset) => srcset.scrollEffect);
+  const sourceOfDimensions = containerElm && hasBgEffect ? containerElm : wixImage;
+  const cssBgEffect = window.getComputedStyle(wixImage).getPropertyValue("--bg-scrub-effect");
+  const { width, height } = ((_b = services.getMediaDimensionsByEffect) == null ? void 0 : _b.call(services, cssBgEffect || bgEffect, sourceOfDimensions.offsetWidth, sourceOfDimensions.offsetHeight, screenHeight)) || {
+    width: wixImage.offsetWidth,
+    height: wixImage.offsetHeight
+  };
+  if (sourceSets) {
+    measures.sourceSetsTargetHeights = getSourceSetsTargetHeightByEffect(sourceSets, sourceOfDimensions.offsetWidth, sourceOfDimensions.offsetHeight, screenHeight, services);
+  }
+  if (!innerImage) {
+    return;
+  }
+  const imgSrc = getImageSrc(innerImage);
+  if (cssBgEffect) {
+    measures.top = 0.5 * (wixImage.offsetHeight - height);
+    measures.left = 0.5 * (wixImage.offsetWidth - width);
+  }
+  measures.width = width;
+  measures.height = getHeightOverride(height, mediaHeightOverrideType);
+  measures.screenHeight = screenHeight;
+  measures.imgSrc = imgSrc;
+  measures.boundingRect = wixImage.getBoundingClientRect();
+  measures.mediaHeightOverrideType = mediaHeightOverrideType;
+  measures.srcset = innerImage.srcset;
+}
+function patch(id, measures, domNodes, imageInfo, services, envConsts, loadImage, isResponsive, bgEffect, loadImageImmediately) {
+  var _a, _b, _c;
+  if (!Object.keys(measures).length) {
+    return;
+  }
+  const { imageData } = imageInfo;
+  const wixImageNode = domNodes[id];
+  const image = domNodes.image;
+  if (bgEffect) {
+    imageData.devicePixelRatio = 1;
+  }
+  const targetScale = imageInfo.targetScale || 1;
+  const allowFullGIFTransformation = (_a = services.isExperimentOpen) == null ? void 0 : _a.call(services, "specs.thunderbolt.allowFullGIFTransformation");
+  const allowWebpAvifTransforms = (_b = services.isExperimentOpen) == null ? void 0 : _b.call(services, "specs.thunderbolt.allowWebpAvifTransforms");
+  const extendedImageInfo = {
+    ...imageInfo,
+    ...!imageInfo.skipMeasure && {
+      targetWidth: (measures.width || 0) * targetScale,
+      targetHeight: (measures.height || 0) * targetScale
+    },
+    displayMode: imageData.displayMode,
+    allowFullGIFTransformation,
+    allowWebpAvifTransforms
+  };
+  const imageComputedProperties = getImageComputedProperties(extendedImageInfo, envConsts, "img");
+  const computedStyle = ((_c = imageComputedProperties == null ? void 0 : imageComputedProperties.css) == null ? void 0 : _c.img) || {};
+  const imageStyle = computeStyleOverrides(measures.mediaHeightOverrideType, computedStyle, imageData.displayMode, targetScale, isResponsive);
+  setStyle(image, imageStyle);
+  if (measures.top || measures.left) {
+    setStyle(wixImageNode, {
+      top: `${measures.top}px`,
+      left: `${measures.left}px`
+    });
+  }
+  const src = (imageComputedProperties == null ? void 0 : imageComputedProperties.uri) || "";
+  const hasAnimation = (imageData == null ? void 0 : imageData.hasAnimation) || (imageInfo == null ? void 0 : imageInfo.hasAnimation);
+  const mediaToUri = computeSrcSets(measures, extendedImageInfo, envConsts);
+  if (loadImageImmediately) {
+    image.dataset.ssrSrcDone = "true";
+  }
+  if (imageInfo.isLQIP && imageInfo.lqipTransition && !("transitioned" in wixImageNode.dataset)) {
+    wixImageNode.dataset.transitioned = "";
+    if (image.complete) {
+      image.onload = function() {
+        image.dataset.loadDone = "";
+      };
+    } else {
+      image.onload = function() {
+        if (image.complete) {
+          image.dataset.loadDone = "";
+        } else {
+          image.onload = function() {
+            image.dataset.loadDone = "";
+          };
+        }
+      };
+    }
+  }
+  if (loadImage) {
+    if (imageIsAnimated(imageData.uri, hasAnimation)) {
+      image.setAttribute("fetchpriority", "low");
+      image.setAttribute("loading", "lazy");
+      image.setAttribute("decoding", "async");
+    } else {
+      image.setAttribute("fetchpriority", "high");
+    }
+    image.currentSrc !== src && image.setAttribute("src", src);
+    const srcIsMissingFromSrcset = measures.srcset && !measures.srcset.split(", ").some((source) => source.split(" ")[0] === src);
+    if (srcIsMissingFromSrcset) {
+      image.setAttribute("srcset", src);
+    }
+    if (domNodes.picture && extendedImageInfo.sourceSets) {
+      Array.from(domNodes.picture.querySelectorAll("source")).forEach((sourceNode) => {
+        const mediaQuery = sourceNode.media || "";
+        const uri = mediaToUri == null ? void 0 : mediaToUri[mediaQuery];
+        if (sourceNode.srcset !== uri) {
+          sourceNode.setAttribute("srcset", uri || "");
+        }
+      });
+    }
+  }
+}
+const imageLayout = {
+  measure,
+  patch
+};
+const TIMEOUT = 250;
+const imageEffectMap = {
+  parallax: "ImageParallax",
+  fixed: "ImageReveal"
+};
+function wowImageFactory(services, environmentConsts, contextWindow) {
+  return class WowImage extends contextWindow.HTMLElement {
+    constructor() {
+      super();
+      this.childListObserver = null;
+      this.timeoutId = null;
+    }
+    attributeChangedCallback(_, oldValue) {
+      if (oldValue) {
+        this.reLayout();
+      }
+    }
+    connectedCallback() {
+      if (environmentConsts.disableImagesLazyLoading) {
+        this.reLayout();
+      } else {
+        this.observeIntersect();
+      }
+    }
+    disconnectedCallback() {
+      this.unobserveResize();
+      this.unobserveIntersect();
+      this.unobserveChildren();
+    }
+    static get observedAttributes() {
+      return ["data-image-info"];
+    }
+    reLayout() {
+      const domNodes = {};
+      const measures = {};
+      const imageId = this.getAttribute("id");
+      const imageInfo = JSON.parse(this.dataset.imageInfo || "");
+      const isResponsive = this.dataset.isResponsive === "true";
+      const { bgEffectName } = this.dataset;
+      const { scrollEffect } = imageInfo.imageData;
+      const { sourceSets } = imageInfo;
+      const bgEffect = bgEffectName || scrollEffect && imageEffectMap[scrollEffect];
+      if (sourceSets && sourceSets.length) {
+        sourceSets.forEach((sourceSet) => {
+          if (sourceSet.scrollEffect) {
+            sourceSet.scrollEffect = imageEffectMap[sourceSet.scrollEffect];
+          }
+        });
+      }
+      domNodes[imageId] = this;
+      if (imageInfo.containerId) {
+        domNodes[imageInfo.containerId] = contextWindow.document.getElementById(`${imageInfo.containerId}`);
+      }
+      const containerElm = imageInfo.containerId ? domNodes[imageInfo.containerId] : void 0;
+      domNodes.image = this.querySelector("img");
+      domNodes.picture = this.querySelector("picture");
+      if (!domNodes.image) {
+        const target = this;
+        this.observeChildren(target);
+        return;
+      }
+      this.unobserveChildren();
+      this.observeChildren(this);
+      services.mutationService.measure(() => {
+        imageLayout.measure(imageId, measures, domNodes, {
+          containerElm,
+          bgEffect,
+          sourceSets
+        }, services);
+      });
+      const patchImage = (shouldLoadImage, loadImageImmediately2) => {
+        services.mutationService.mutate(() => {
+          imageLayout.patch(imageId, measures, domNodes, imageInfo, services, environmentConsts, shouldLoadImage, isResponsive, bgEffect, loadImageImmediately2);
+        });
+      };
+      const imageElement = domNodes.image;
+      const ssrSrcNeedProcessing = this.dataset.hasSsrSrc && !imageElement.dataset.ssrSrcDone;
+      const loadImageImmediately = !getImageSrc(imageElement) || ssrSrcNeedProcessing;
+      if (loadImageImmediately) {
+        patchImage(true, true);
+      } else {
+        this.debounceImageLoad(patchImage);
+      }
+    }
+    /**
+     * Debounce consecutive image loads
+     *
+     * @param {function} patchImage closure for patching the image
+     */
+    debounceImageLoad(patchImage) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = contextWindow.setTimeout(() => {
+        patchImage(true);
+      }, TIMEOUT);
+      patchImage(false);
+    }
+    observeResize() {
+      var _a;
+      (_a = services.resizeService) == null ? void 0 : _a.observe(this);
+    }
+    unobserveResize() {
+      var _a;
+      (_a = services.resizeService) == null ? void 0 : _a.unobserve(this);
+    }
+    observeIntersect() {
+      var _a;
+      (_a = services.intersectionService) == null ? void 0 : _a.observe(this);
+    }
+    unobserveIntersect() {
+      var _a;
+      (_a = services.intersectionService) == null ? void 0 : _a.unobserve(this);
+    }
+    /**
+     * Observe DOM mutations to wait for addition of missing children
+     *
+     * @param {HTMLElement} parent
+     */
+    observeChildren(parent) {
+      if (!this.childListObserver) {
+        this.childListObserver = new contextWindow.MutationObserver(() => {
+          this.reLayout();
+        });
+      }
+      this.childListObserver.observe(parent, { childList: true });
+    }
+    /**
+     * Remove DOM MutationObserver if one was created
+     */
+    unobserveChildren() {
+      if (this.childListObserver) {
+        this.childListObserver.disconnect();
+        this.childListObserver = null;
+      }
+    }
+  };
+}
+function init(contextWindow, services) {
+  const elementName = "wow-image";
+  contextWindow = contextWindow || window;
+  if (contextWindow.customElements.get(elementName) === void 0) {
+    let resizeObserver;
+    if (contextWindow.ResizeObserver) {
+      resizeObserver = new contextWindow.ResizeObserver((entries) => entries.map((entry) => entry.target.reLayout()));
+    }
+    let intersectionObserver;
+    if (contextWindow.IntersectionObserver) {
+      intersectionObserver = new IntersectionObserver((entries) => entries.map((entry) => {
+        if (entry.isIntersecting) {
+          const wowImage = entry.target;
+          wowImage.unobserveIntersect();
+          wowImage.observeResize();
+        }
+        return entry;
+      }), {
+        /**
+         * old: 50% from 1080 (desktop) is 540px, 800 (mobile) 400px
+         * new: 150% from 1080 (desktop) is 1620, 800 (mobile) 1200
+         * chrome [loading=lazy]: 4g - 1250px, lower then 3g - 2500px
+         * @see https://web.dev/articles/browser-level-image-lazy-loading#improved-thresholds
+         */
+        rootMargin: "150% 100%"
+      });
+    }
+    return function(env) {
+      const WowImage = wowImageFactory({
+        resizeService: resizeObserver,
+        intersectionService: intersectionObserver,
+        mutationService: fastdom,
+        ...services
+      }, env, contextWindow);
+      contextWindow.customElements.define(elementName, WowImage);
+    };
+  }
+  return;
+}
+const getDevicePixelRatio = () => {
+  const isMSMobileDevice = /iemobile/i.test(navigator.userAgent);
+  if (isMSMobileDevice) {
+    return Math.round(window.screen.availWidth / (window.screen.width || window.document.documentElement.clientWidth));
+  }
+  return window.devicePixelRatio;
+};
+const getIsImagesLazyLoadingDisabled = () => {
+  try {
+    return new URL(window.location.href).searchParams.get("disableLazyLoading") === "true";
+  } catch {
+    return false;
+  }
+};
+function initCustomElement(services = {}, contextWindow = null, envConsts = {}) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const env = {
+    staticMediaUrl: STATIC_MEDIA_URL,
+    mediaRootUrl: MEDIA_ROOT_URL,
+    experiments: {},
+    devicePixelRatio: getDevicePixelRatio(),
+    disableImagesLazyLoading: getIsImagesLazyLoadingDisabled(),
+    ...envConsts
+  };
+  const define = init(contextWindow, services);
+  if (define) {
+    define(env);
+  }
+}
+export {
+  getMediaUrlByContext as a,
+  camelToKebab as c,
+  fastdom as f,
+  getMediaSizeQueryString as g,
+  initCustomElement as i
+};

package/dist/site/components/chunks/index5.js

@@ -1460,10 +1460,10 @@ export {
   MEDIA_ROOT_URL as M,
   STATIC_MEDIA_URL as S,
   getData as a,
-  alignTypes as b,
-  getFileExtension as c,
-  fileType as d,
-  fittingTypes as f,
+  getFileExtension as b,
+  alignTypes as c,
+  fittingTypes as d,
+  fileType as f,
   getPlaceholder as g,
   imageKit as i
 };