@wix/editor-react-components 1.2499.0 → 1.2501.0

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.
@@ -1365,18 +1365,18 @@ function composeContextScopes(...scopes) {
1365
1365
  createScope.scopeName = baseScope.scopeName;
1366
1366
  return createScope;
1367
1367
  }
1368
- function setRef$2(ref, value) {
1368
+ function setRef(ref, value) {
1369
1369
  if (typeof ref === "function") {
1370
1370
  return ref(value);
1371
1371
  } else if (ref !== null && ref !== void 0) {
1372
1372
  ref.current = value;
1373
1373
  }
1374
1374
  }
1375
- function composeRefs$2(...refs) {
1375
+ function composeRefs(...refs) {
1376
1376
  return (node) => {
1377
1377
  let hasCleanup = false;
1378
1378
  const cleanups = refs.map((ref) => {
1379
- const cleanup = setRef$2(ref, node);
1379
+ const cleanup = setRef(ref, node);
1380
1380
  if (!hasCleanup && typeof cleanup == "function") {
1381
1381
  hasCleanup = true;
1382
1382
  }
@@ -1389,15 +1389,15 @@ function composeRefs$2(...refs) {
1389
1389
  if (typeof cleanup == "function") {
1390
1390
  cleanup();
1391
1391
  } else {
1392
- setRef$2(refs[i], null);
1392
+ setRef(refs[i], null);
1393
1393
  }
1394
1394
  }
1395
1395
  };
1396
1396
  }
1397
1397
  };
1398
1398
  }
1399
- function useComposedRefs$2(...refs) {
1400
- return React.useCallback(composeRefs$2(...refs), refs);
1399
+ function useComposedRefs(...refs) {
1400
+ return React.useCallback(composeRefs(...refs), refs);
1401
1401
  }
1402
1402
  // @__NO_SIDE_EFFECTS__
1403
1403
  function createSlot$2(ownerName) {
@@ -1431,7 +1431,7 @@ function createSlotClone$2(ownerName) {
1431
1431
  const childrenRef = getElementRef$3(children);
1432
1432
  const props2 = mergeProps$2(slotProps, children.props);
1433
1433
  if (children.type !== React.Fragment) {
1434
- props2.ref = forwardedRef ? composeRefs$2(forwardedRef, childrenRef) : childrenRef;
1434
+ props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
1435
1435
  }
1436
1436
  return React.cloneElement(children, props2);
1437
1437
  }
@@ -1502,7 +1502,7 @@ function createCollection(name) {
1502
1502
  (props, forwardedRef) => {
1503
1503
  const { scope, children } = props;
1504
1504
  const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
1505
- const composedRefs = useComposedRefs$2(forwardedRef, context.collectionRef);
1505
+ const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
1506
1506
  return /* @__PURE__ */ jsx(CollectionSlotImpl, { ref: composedRefs, children });
1507
1507
  }
1508
1508
  );
@@ -1514,7 +1514,7 @@ function createCollection(name) {
1514
1514
  (props, forwardedRef) => {
1515
1515
  const { scope, children, ...itemData } = props;
1516
1516
  const ref = React__default.useRef(null);
1517
- const composedRefs = useComposedRefs$2(forwardedRef, ref);
1517
+ const composedRefs = useComposedRefs(forwardedRef, ref);
1518
1518
  const context = useCollectionContext(ITEM_SLOT_NAME, scope);
1519
1519
  React__default.useEffect(() => {
1520
1520
  context.itemMap.set(ref, { ref, ...itemData });
@@ -1544,40 +1544,6 @@ function createCollection(name) {
1544
1544
  createCollectionScope2
1545
1545
  ];
1546
1546
  }
1547
- function setRef$1(ref, value) {
1548
- if (typeof ref === "function") {
1549
- return ref(value);
1550
- } else if (ref !== null && ref !== void 0) {
1551
- ref.current = value;
1552
- }
1553
- }
1554
- function composeRefs$1(...refs) {
1555
- return (node) => {
1556
- let hasCleanup = false;
1557
- const cleanups = refs.map((ref) => {
1558
- const cleanup = setRef$1(ref, node);
1559
- if (!hasCleanup && typeof cleanup == "function") {
1560
- hasCleanup = true;
1561
- }
1562
- return cleanup;
1563
- });
1564
- if (hasCleanup) {
1565
- return () => {
1566
- for (let i = 0; i < cleanups.length; i++) {
1567
- const cleanup = cleanups[i];
1568
- if (typeof cleanup == "function") {
1569
- cleanup();
1570
- } else {
1571
- setRef$1(refs[i], null);
1572
- }
1573
- }
1574
- };
1575
- }
1576
- };
1577
- }
1578
- function useComposedRefs$1(...refs) {
1579
- return React.useCallback(composeRefs$1(...refs), refs);
1580
- }
1581
1547
  function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
1582
1548
  return function handleEvent(event) {
1583
1549
  originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -1686,7 +1652,7 @@ function createSlotClone$1(ownerName) {
1686
1652
  const childrenRef = getElementRef$2(children);
1687
1653
  const props2 = mergeProps$1(slotProps, children.props);
1688
1654
  if (children.type !== React.Fragment) {
1689
- props2.ref = forwardedRef ? composeRefs$1(forwardedRef, childrenRef) : childrenRef;
1655
+ props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
1690
1656
  }
1691
1657
  return React.cloneElement(children, props2);
1692
1658
  }
@@ -1779,40 +1745,6 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
1779
1745
  }
1780
1746
  var useLayoutEffect2$1 = (globalThis == null ? void 0 : globalThis.document) ? React.useLayoutEffect : () => {
1781
1747
  };
1782
- function setRef(ref, value) {
1783
- if (typeof ref === "function") {
1784
- return ref(value);
1785
- } else if (ref !== null && ref !== void 0) {
1786
- ref.current = value;
1787
- }
1788
- }
1789
- function composeRefs(...refs) {
1790
- return (node) => {
1791
- let hasCleanup = false;
1792
- const cleanups = refs.map((ref) => {
1793
- const cleanup = setRef(ref, node);
1794
- if (!hasCleanup && typeof cleanup == "function") {
1795
- hasCleanup = true;
1796
- }
1797
- return cleanup;
1798
- });
1799
- if (hasCleanup) {
1800
- return () => {
1801
- for (let i = 0; i < cleanups.length; i++) {
1802
- const cleanup = cleanups[i];
1803
- if (typeof cleanup == "function") {
1804
- cleanup();
1805
- } else {
1806
- setRef(refs[i], null);
1807
- }
1808
- }
1809
- };
1810
- }
1811
- };
1812
- }
1813
- function useComposedRefs(...refs) {
1814
- return React.useCallback(composeRefs(...refs), refs);
1815
- }
1816
1748
  // @__NO_SIDE_EFFECTS__
1817
1749
  function createSlot(ownerName) {
1818
1750
  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -2287,7 +2219,7 @@ var AccordionImpl = React__default.forwardRef(
2287
2219
  (props, forwardedRef) => {
2288
2220
  const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
2289
2221
  const accordionRef = React__default.useRef(null);
2290
- const composedRefs = useComposedRefs$1(accordionRef, forwardedRef);
2222
+ const composedRefs = useComposedRefs(accordionRef, forwardedRef);
2291
2223
  const getItems = useCollection(__scopeAccordion);
2292
2224
  const direction = useDirection(dir);
2293
2225
  const isDirectionLTR = direction === "ltr";
@@ -4,101 +4,16 @@ import { a as getDataAttributes, n as normalizeWixUri } from "../chunks/dataUtil
4
4
  import { e as getTabIndexAttribute } from "../chunks/a11y.js";
5
5
  import { L as Link } from "../chunks/Link.js";
6
6
  import * as React from "react";
7
- import { a as getData, c as getFileExtension, d as fileType, b as alignTypes, f as fittingTypes, g as getPlaceholder, S as STATIC_MEDIA_URL$2 } from "../chunks/index5.js";
8
- import { f as fastdom } from "../chunks/fastdom.js";
7
+ import { a as getData, g as getPlaceholder, S as STATIC_MEDIA_URL$1 } from "../chunks/index5.js";
8
+ import { g as getMediaSizeQueryString, c as camelToKebab, a as getMediaUrlByContext, i as initCustomElement } from "../chunks/customElementInit.js";
9
9
  import { useService } from "@wix/services-manager-react";
10
10
  import { R as RenderingContextDefinition } from "../chunks/index3.js";
11
- const camelToKebab = (str) => str.replace(/[A-Z]+(?![^A-Z])|[A-Z]/g, (a, b) => (b ? "-" : "") + a.toLowerCase());
12
- const CSS_NUMERIC_VALUES = {
13
- columnCount: 1,
14
- columns: 1,
15
- fontWeight: 1,
16
- lineHeight: 1,
17
- opacity: 1,
18
- zIndex: 1,
19
- zoom: 1
20
- };
21
- const pick = (obj, props) => {
22
- const propsArr = Array.isArray(props) ? props : [props];
23
- return propsArr.reduce((subObj, prop) => {
24
- const val = obj[prop];
25
- return val !== void 0 ? Object.assign(subObj, { [prop]: val }) : subObj;
26
- }, {});
27
- };
28
- const addDefaultUnitIfNeeded = (prop, value) => typeof value === "number" && !CSS_NUMERIC_VALUES[prop] ? `${value}px` : value.toString();
29
- const setStyle = (node, styleProperties) => node && styleProperties && Object.keys(styleProperties).forEach((prop) => {
30
- const styleProp = prop;
31
- const propValue = styleProperties[styleProp];
32
- if (propValue !== void 0) {
33
- node.style[styleProp] = addDefaultUnitIfNeeded(styleProp, propValue);
34
- } else {
35
- node.style.removeProperty(styleProp);
36
- }
37
- });
38
- const getScreenHeight = (heightOverride) => heightOverride || document.documentElement.clientHeight || window.innerHeight || 0;
39
- const getImageComputedProperties = (extendedImageInfo, envConsts, htmlTag) => {
40
- if (!extendedImageInfo.targetWidth || !extendedImageInfo.targetHeight || !extendedImageInfo.imageData.uri) {
41
- return { uri: "", css: {}, transformed: false };
42
- }
43
- const { imageData } = extendedImageInfo;
44
- const fittingType = extendedImageInfo.displayMode || fittingTypes.SCALE_TO_FILL;
45
- const imageOptions = Object.assign(pick(imageData, ["upscaleMethod"]), pick(extendedImageInfo, [
46
- "filters",
47
- "encoding",
48
- "allowFullGIFTransformation"
49
- ]), extendedImageInfo.quality || imageData.quality, {
50
- hasAnimation: (extendedImageInfo == null ? void 0 : extendedImageInfo.hasAnimation) || (imageData == null ? void 0 : imageData.hasAnimation)
51
- });
52
- const devicePixelRatioFromData = extendedImageInfo.imageData.devicePixelRatio || envConsts.devicePixelRatio;
53
- const devicePixelRatio = getDevicePixelRatio$1(devicePixelRatioFromData);
54
- const src = Object.assign(pick(imageData, ["width", "height", "crop", "name", "focalPoint"]), { id: imageData.uri });
55
- const target = {
56
- width: extendedImageInfo.targetWidth,
57
- height: extendedImageInfo.targetHeight,
58
- htmlTag,
59
- pixelAspectRatio: devicePixelRatio,
60
- alignment: extendedImageInfo.alignType || alignTypes.CENTER
61
- };
62
- const imageComputedProperties = getData(fittingType, src, target, imageOptions);
63
- imageComputedProperties.uri = getMediaUrlByContext(imageComputedProperties.uri, envConsts.staticMediaUrl, envConsts.mediaRootUrl);
64
- return imageComputedProperties;
65
- };
66
- const getMediaUrlByContext = (imageUri, staticMediaUrl, mediaRootUrl) => {
67
- var _a;
68
- const isExternalUrl = /(^https?)|(^data)|(^blob)|(^\/\/)/.test(imageUri);
69
- if (isExternalUrl) {
70
- return imageUri;
71
- }
72
- let path = `${staticMediaUrl}/`;
73
- if (imageUri) {
74
- if (/^micons\//.test(imageUri)) {
75
- path = mediaRootUrl;
76
- } else if (((_a = /[^.]+$/.exec(imageUri)) == null ? void 0 : _a[0]) === "ico") {
77
- path = path.replace("media", "ficons");
78
- }
79
- }
80
- return path + imageUri;
81
- };
82
- const getDevicePixelRatio$1 = (devicePixelRatio) => {
83
- const queryParams = window.location.search.split("&").map((query) => query.split("="));
84
- const devicePixelRatioQueryParam = queryParams.find((query) => {
85
- var _a;
86
- return (_a = query[0]) == null ? void 0 : _a.toLowerCase().includes("devicepixelratio");
87
- });
88
- const devicePixelRatioValueForceFromUrl = (devicePixelRatioQueryParam == null ? void 0 : devicePixelRatioQueryParam[1]) ? Number(devicePixelRatioQueryParam[1]) : null;
89
- return devicePixelRatioValueForceFromUrl || devicePixelRatio || 1;
90
- };
91
- const getImageSrc = (imageNode) => imageNode.getAttribute("src");
92
- const imageIsAnimated = (uri, hasAnimation) => getFileExtension(uri) === fileType.GIF || getFileExtension(uri) === fileType.WEBP && hasAnimation;
93
- const getMediaSizeQueryString = (media) => {
94
- return Object.entries(media).filter(([_, value]) => value || value === 0).map(([key, value]) => `(${camelToKebab(key)}: ${value}px)`).join(" and ");
95
- };
96
11
  const image = "image__iWj48";
97
12
  const styles = {
98
13
  image
99
14
  };
100
- const STATIC_MEDIA_URL$1 = "https://static.wixstatic.com/media/";
101
- const MEDIA_ROOT_URL$1 = "https://static.wixstatic.com/";
15
+ const STATIC_MEDIA_URL = "https://static.wixstatic.com/media/";
16
+ const MEDIA_ROOT_URL = "https://static.wixstatic.com/";
102
17
  function getURL(image2, targetSize) {
103
18
  if (!image2.height || !image2.width) {
104
19
  return "";
@@ -137,7 +52,7 @@ function getURL(image2, targetSize) {
137
52
  devicePixelRatio
138
53
  };
139
54
  const { uri } = getData("fill", src, target, options);
140
- return uri && getMediaUrlByContext(uri, STATIC_MEDIA_URL$1, MEDIA_ROOT_URL$1);
55
+ return uri && getMediaUrlByContext(uri, STATIC_MEDIA_URL, MEDIA_ROOT_URL);
141
56
  }
142
57
  const ImageNG = (props) => {
143
58
  const { id, alt, sources, priority, decorative, role, dataset } = props;
@@ -169,394 +84,6 @@ const ImageNG = (props) => {
169
84
  React.createElement("img", { ...priority === "high" ? { fetchpriority: "high" } : { loading: "lazy" }, ...decorative && { "aria-hidden": true }, src: fullSizeSrc, alt: decorative ? "" : alt, role, width: image2.width, height: image2.height })
170
85
  );
171
86
  };
172
- const MOBILE_SAFE_ADDRESSBAR_HEIGHT = 80;
173
- function getHeightOverride(height, mediaHeightOverrideType) {
174
- return mediaHeightOverrideType === "fixed" || mediaHeightOverrideType === "viewport" ? document.documentElement.clientHeight + MOBILE_SAFE_ADDRESSBAR_HEIGHT : height;
175
- }
176
- function computeScaleOverrides(imageStyle, targetScale = 1) {
177
- return targetScale !== 1 ? {
178
- ...imageStyle,
179
- width: "100%",
180
- height: "100%"
181
- } : imageStyle;
182
- }
183
- function computeStyleOverrides(mediaHeightOverrideType, imageStyle, displayMode, targetScale, isResponsive) {
184
- const styleWithScale = computeScaleOverrides(imageStyle, targetScale);
185
- if (isResponsive) {
186
- delete styleWithScale.height;
187
- styleWithScale.width = "100%";
188
- }
189
- if (!mediaHeightOverrideType) {
190
- return styleWithScale;
191
- }
192
- const style2 = { ...styleWithScale };
193
- if (displayMode === "fill") {
194
- style2.position = "absolute";
195
- style2.top = "0";
196
- } else if (displayMode === "fit") {
197
- style2.height = "100%";
198
- }
199
- if (mediaHeightOverrideType === "fixed") {
200
- style2["will-change"] = "transform";
201
- }
202
- if (style2.objectPosition) {
203
- style2.objectPosition = imageStyle.objectPosition.replace(/(center|bottom)$/, "top");
204
- }
205
- return style2;
206
- }
207
- function getSourceSetsTargetHeightByEffect(sourceSets, offsetWidth, offsetHeight, screenHeight, services) {
208
- const sourceSetsTargetHeights = {};
209
- sourceSets.forEach(({ mediaQuery, scrollEffect }) => {
210
- var _a;
211
- sourceSetsTargetHeights[mediaQuery] = ((_a = services.getMediaDimensionsByEffect) == null ? void 0 : _a.call(services, scrollEffect, offsetWidth, offsetHeight, screenHeight).height) || offsetHeight;
212
- });
213
- return sourceSetsTargetHeights;
214
- }
215
- function computeSrcSets(measures, imageInfo, envConsts) {
216
- const { sourceSets } = imageInfo;
217
- if (!sourceSets || !sourceSets.length) {
218
- return;
219
- }
220
- const mediaToUri = {};
221
- sourceSets.forEach(({ mediaQuery, crop, focalPoint }) => {
222
- const imageInfoClone = {
223
- ...imageInfo,
224
- targetHeight: (measures.sourceSetsTargetHeights || {})[mediaQuery] || 0,
225
- imageData: {
226
- ...imageInfo.imageData,
227
- crop,
228
- focalPoint
229
- }
230
- };
231
- const imageComputedProperties = getImageComputedProperties(imageInfoClone, envConsts, "img");
232
- mediaToUri[mediaQuery] = imageComputedProperties.uri || "";
233
- });
234
- return mediaToUri;
235
- }
236
- function measure(id, measures, domNodes, { containerElm, bgEffect = "none", sourceSets }, services) {
237
- var _a, _b;
238
- const innerImage = domNodes.image;
239
- const wixImage = domNodes[id];
240
- const screenHeight = getScreenHeight((_a = services.getScreenHeightOverride) == null ? void 0 : _a.call(services));
241
- const mediaHeightOverrideType = containerElm == null ? void 0 : containerElm.dataset.mediaHeightOverrideType;
242
- const hasBgEffect = bgEffect && bgEffect !== "none" || sourceSets && sourceSets.some((srcset) => srcset.scrollEffect);
243
- const sourceOfDimensions = containerElm && hasBgEffect ? containerElm : wixImage;
244
- const cssBgEffect = window.getComputedStyle(wixImage).getPropertyValue("--bg-scrub-effect");
245
- const { width, height } = ((_b = services.getMediaDimensionsByEffect) == null ? void 0 : _b.call(services, cssBgEffect || bgEffect, sourceOfDimensions.offsetWidth, sourceOfDimensions.offsetHeight, screenHeight)) || {
246
- width: wixImage.offsetWidth,
247
- height: wixImage.offsetHeight
248
- };
249
- if (sourceSets) {
250
- measures.sourceSetsTargetHeights = getSourceSetsTargetHeightByEffect(sourceSets, sourceOfDimensions.offsetWidth, sourceOfDimensions.offsetHeight, screenHeight, services);
251
- }
252
- if (!innerImage) {
253
- return;
254
- }
255
- const imgSrc = getImageSrc(innerImage);
256
- if (cssBgEffect) {
257
- measures.top = 0.5 * (wixImage.offsetHeight - height);
258
- measures.left = 0.5 * (wixImage.offsetWidth - width);
259
- }
260
- measures.width = width;
261
- measures.height = getHeightOverride(height, mediaHeightOverrideType);
262
- measures.screenHeight = screenHeight;
263
- measures.imgSrc = imgSrc;
264
- measures.boundingRect = wixImage.getBoundingClientRect();
265
- measures.mediaHeightOverrideType = mediaHeightOverrideType;
266
- measures.srcset = innerImage.srcset;
267
- }
268
- function patch(id, measures, domNodes, imageInfo, services, envConsts, loadImage, isResponsive, bgEffect, loadImageImmediately) {
269
- var _a, _b;
270
- if (!Object.keys(measures).length) {
271
- return;
272
- }
273
- const { imageData } = imageInfo;
274
- const wixImageNode = domNodes[id];
275
- const image2 = domNodes.image;
276
- if (bgEffect) {
277
- imageData.devicePixelRatio = 1;
278
- }
279
- const targetScale = imageInfo.targetScale || 1;
280
- const allowFullGIFTransformation = (_a = services.isExperimentOpen) == null ? void 0 : _a.call(services, "specs.thunderbolt.allowFullGIFTransformation");
281
- const extendedImageInfo = {
282
- ...imageInfo,
283
- ...!imageInfo.skipMeasure && {
284
- targetWidth: (measures.width || 0) * targetScale,
285
- targetHeight: (measures.height || 0) * targetScale
286
- },
287
- displayMode: imageData.displayMode,
288
- allowFullGIFTransformation
289
- };
290
- const imageComputedProperties = getImageComputedProperties(extendedImageInfo, envConsts, "img");
291
- const computedStyle = ((_b = imageComputedProperties == null ? void 0 : imageComputedProperties.css) == null ? void 0 : _b.img) || {};
292
- const imageStyle = computeStyleOverrides(measures.mediaHeightOverrideType, computedStyle, imageData.displayMode, targetScale, isResponsive);
293
- setStyle(image2, imageStyle);
294
- if (measures.top || measures.left) {
295
- setStyle(wixImageNode, {
296
- top: `${measures.top}px`,
297
- left: `${measures.left}px`
298
- });
299
- }
300
- const src = (imageComputedProperties == null ? void 0 : imageComputedProperties.uri) || "";
301
- const hasAnimation = (imageData == null ? void 0 : imageData.hasAnimation) || (imageInfo == null ? void 0 : imageInfo.hasAnimation);
302
- const mediaToUri = computeSrcSets(measures, extendedImageInfo, envConsts);
303
- if (loadImageImmediately) {
304
- image2.dataset.ssrSrcDone = "true";
305
- }
306
- if (imageInfo.isLQIP && imageInfo.lqipTransition && !("transitioned" in wixImageNode.dataset)) {
307
- wixImageNode.dataset.transitioned = "";
308
- if (image2.complete) {
309
- image2.onload = function() {
310
- image2.dataset.loadDone = "";
311
- };
312
- } else {
313
- image2.onload = function() {
314
- if (image2.complete) {
315
- image2.dataset.loadDone = "";
316
- } else {
317
- image2.onload = function() {
318
- image2.dataset.loadDone = "";
319
- };
320
- }
321
- };
322
- }
323
- }
324
- if (loadImage) {
325
- if (imageIsAnimated(imageData.uri, hasAnimation)) {
326
- image2.setAttribute("fetchpriority", "low");
327
- image2.setAttribute("loading", "lazy");
328
- image2.setAttribute("decoding", "async");
329
- } else {
330
- image2.setAttribute("fetchpriority", "high");
331
- }
332
- image2.currentSrc !== src && image2.setAttribute("src", src);
333
- const srcIsMissingFromSrcset = measures.srcset && !measures.srcset.split(", ").some((source) => source.split(" ")[0] === src);
334
- if (srcIsMissingFromSrcset) {
335
- image2.setAttribute("srcset", src);
336
- }
337
- if (domNodes.picture && extendedImageInfo.sourceSets) {
338
- Array.from(domNodes.picture.querySelectorAll("source")).forEach((sourceNode) => {
339
- const mediaQuery = sourceNode.media || "";
340
- const uri = mediaToUri == null ? void 0 : mediaToUri[mediaQuery];
341
- if (sourceNode.srcset !== uri) {
342
- sourceNode.setAttribute("srcset", uri || "");
343
- }
344
- });
345
- }
346
- }
347
- }
348
- const imageLayout = {
349
- measure,
350
- patch
351
- };
352
- const TIMEOUT = 250;
353
- const imageEffectMap = {
354
- parallax: "ImageParallax",
355
- fixed: "ImageReveal"
356
- };
357
- function wowImageFactory(services, environmentConsts, contextWindow) {
358
- return class WowImage extends contextWindow.HTMLElement {
359
- constructor() {
360
- super();
361
- this.childListObserver = null;
362
- this.timeoutId = null;
363
- }
364
- attributeChangedCallback(_, oldValue) {
365
- if (oldValue) {
366
- this.reLayout();
367
- }
368
- }
369
- connectedCallback() {
370
- if (environmentConsts.disableImagesLazyLoading) {
371
- this.reLayout();
372
- } else {
373
- this.observeIntersect();
374
- }
375
- }
376
- disconnectedCallback() {
377
- this.unobserveResize();
378
- this.unobserveIntersect();
379
- this.unobserveChildren();
380
- }
381
- static get observedAttributes() {
382
- return ["data-image-info"];
383
- }
384
- reLayout() {
385
- const domNodes = {};
386
- const measures = {};
387
- const imageId = this.getAttribute("id");
388
- const imageInfo = JSON.parse(this.dataset.imageInfo || "");
389
- const isResponsive = this.dataset.isResponsive === "true";
390
- const { bgEffectName } = this.dataset;
391
- const { scrollEffect } = imageInfo.imageData;
392
- const { sourceSets } = imageInfo;
393
- const bgEffect = bgEffectName || scrollEffect && imageEffectMap[scrollEffect];
394
- if (sourceSets && sourceSets.length) {
395
- sourceSets.forEach((sourceSet) => {
396
- if (sourceSet.scrollEffect) {
397
- sourceSet.scrollEffect = imageEffectMap[sourceSet.scrollEffect];
398
- }
399
- });
400
- }
401
- domNodes[imageId] = this;
402
- if (imageInfo.containerId) {
403
- domNodes[imageInfo.containerId] = contextWindow.document.getElementById(`${imageInfo.containerId}`);
404
- }
405
- const containerElm = imageInfo.containerId ? domNodes[imageInfo.containerId] : void 0;
406
- domNodes.image = this.querySelector("img");
407
- domNodes.picture = this.querySelector("picture");
408
- if (!domNodes.image) {
409
- const target = this;
410
- this.observeChildren(target);
411
- return;
412
- }
413
- this.unobserveChildren();
414
- this.observeChildren(this);
415
- services.mutationService.measure(() => {
416
- imageLayout.measure(imageId, measures, domNodes, {
417
- containerElm,
418
- bgEffect,
419
- sourceSets
420
- }, services);
421
- });
422
- const patchImage = (shouldLoadImage, loadImageImmediately2) => {
423
- services.mutationService.mutate(() => {
424
- imageLayout.patch(imageId, measures, domNodes, imageInfo, services, environmentConsts, shouldLoadImage, isResponsive, bgEffect, loadImageImmediately2);
425
- });
426
- };
427
- const imageElement = domNodes.image;
428
- const ssrSrcNeedProcessing = this.dataset.hasSsrSrc && !imageElement.dataset.ssrSrcDone;
429
- const loadImageImmediately = !getImageSrc(imageElement) || ssrSrcNeedProcessing;
430
- if (loadImageImmediately) {
431
- patchImage(true, true);
432
- } else {
433
- this.debounceImageLoad(patchImage);
434
- }
435
- }
436
- /**
437
- * Debounce consecutive image loads
438
- *
439
- * @param {function} patchImage closure for patching the image
440
- */
441
- debounceImageLoad(patchImage) {
442
- clearTimeout(this.timeoutId);
443
- this.timeoutId = contextWindow.setTimeout(() => {
444
- patchImage(true);
445
- }, TIMEOUT);
446
- patchImage(false);
447
- }
448
- observeResize() {
449
- var _a;
450
- (_a = services.resizeService) == null ? void 0 : _a.observe(this);
451
- }
452
- unobserveResize() {
453
- var _a;
454
- (_a = services.resizeService) == null ? void 0 : _a.unobserve(this);
455
- }
456
- observeIntersect() {
457
- var _a;
458
- (_a = services.intersectionService) == null ? void 0 : _a.observe(this);
459
- }
460
- unobserveIntersect() {
461
- var _a;
462
- (_a = services.intersectionService) == null ? void 0 : _a.unobserve(this);
463
- }
464
- /**
465
- * Observe DOM mutations to wait for addition of missing children
466
- *
467
- * @param {HTMLElement} parent
468
- */
469
- observeChildren(parent) {
470
- if (!this.childListObserver) {
471
- this.childListObserver = new contextWindow.MutationObserver(() => {
472
- this.reLayout();
473
- });
474
- }
475
- this.childListObserver.observe(parent, { childList: true });
476
- }
477
- /**
478
- * Remove DOM MutationObserver if one was created
479
- */
480
- unobserveChildren() {
481
- if (this.childListObserver) {
482
- this.childListObserver.disconnect();
483
- this.childListObserver = null;
484
- }
485
- }
486
- };
487
- }
488
- function init(contextWindow, services) {
489
- const elementName = "wow-image";
490
- contextWindow = contextWindow || window;
491
- if (contextWindow.customElements.get(elementName) === void 0) {
492
- let resizeObserver;
493
- if (contextWindow.ResizeObserver) {
494
- resizeObserver = new contextWindow.ResizeObserver((entries) => entries.map((entry) => entry.target.reLayout()));
495
- }
496
- let intersectionObserver;
497
- if (contextWindow.IntersectionObserver) {
498
- intersectionObserver = new IntersectionObserver((entries) => entries.map((entry) => {
499
- if (entry.isIntersecting) {
500
- const wowImage2 = entry.target;
501
- wowImage2.unobserveIntersect();
502
- wowImage2.observeResize();
503
- }
504
- return entry;
505
- }), {
506
- /**
507
- * old: 50% from 1080 (desktop) is 540px, 800 (mobile) 400px
508
- * new: 150% from 1080 (desktop) is 1620, 800 (mobile) 1200
509
- * chrome [loading=lazy]: 4g - 1250px, lower then 3g - 2500px
510
- * @see https://web.dev/articles/browser-level-image-lazy-loading#improved-thresholds
511
- */
512
- rootMargin: "150% 100%"
513
- });
514
- }
515
- return function(env) {
516
- const WowImage = wowImageFactory({
517
- resizeService: resizeObserver,
518
- intersectionService: intersectionObserver,
519
- mutationService: fastdom,
520
- ...services
521
- }, env, contextWindow);
522
- contextWindow.customElements.define(elementName, WowImage);
523
- };
524
- }
525
- return;
526
- }
527
- const getDevicePixelRatio = () => {
528
- const isMSMobileDevice = /iemobile/i.test(navigator.userAgent);
529
- if (isMSMobileDevice) {
530
- return Math.round(window.screen.availWidth / (window.screen.width || window.document.documentElement.clientWidth));
531
- }
532
- return window.devicePixelRatio;
533
- };
534
- const getIsImagesLazyLoadingDisabled = () => {
535
- try {
536
- return new URL(window.location.href).searchParams.get("disableLazyLoading") === "true";
537
- } catch {
538
- return false;
539
- }
540
- };
541
- const STATIC_MEDIA_URL = "https://static.wixstatic.com/media";
542
- const MEDIA_ROOT_URL = "https://static.wixstatic.com";
543
- function initCustomElement(services = {}, contextWindow = null, envConsts = {}) {
544
- if (typeof window === "undefined") {
545
- return;
546
- }
547
- const env = {
548
- staticMediaUrl: STATIC_MEDIA_URL,
549
- mediaRootUrl: MEDIA_ROOT_URL,
550
- experiments: {},
551
- devicePixelRatio: getDevicePixelRatio(),
552
- disableImagesLazyLoading: getIsImagesLazyLoadingDisabled(),
553
- ...envConsts
554
- };
555
- const define = init(contextWindow, services);
556
- if (define) {
557
- define(env);
558
- }
559
- }
560
87
  const root = "root__FuiJG";
561
88
  const image3 = "image3__6ufCe";
562
89
  const fitWidth = "fitWidth__0L5O4";
@@ -644,7 +171,7 @@ const Image3 = (props) => {
644
171
  loading: priority === "low" ? "lazy" : void 0,
645
172
  fetchpriority: priority === "high" ? "high" : void 0,
646
173
  alt: image2.alt ?? "",
647
- src: renderingContext.SEO ? `${STATIC_MEDIA_URL$2}${seoImageUrl}` : void 0,
174
+ src: renderingContext.SEO ? `${STATIC_MEDIA_URL$1}${seoImageUrl}` : void 0,
648
175
  ...role && { role }
649
176
  }
650
177
  ) })