@cntrl-site/components 0.1.21 → 0.1.22

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.
Files changed (3) hide show
  1. package/dist/index.js +20 -19
  2. package/dist/index.mjs +20 -19
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1906,6 +1906,7 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
1906
1906
  ] });
1907
1907
  };
1908
1908
  const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor, metadata }) => {
1909
+ var _a;
1909
1910
  const [currentIndex, setCurrentIndex] = react.useState(0);
1910
1911
  const [splideKey, setSplideKey] = react.useState(0);
1911
1912
  const [isClosing, setIsClosing] = react.useState(false);
@@ -1926,8 +1927,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1926
1927
  react.useEffect(() => {
1927
1928
  const handleLayoutChange = () => {
1928
1929
  setTimeout(() => {
1929
- var _a, _b;
1930
- (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
1930
+ var _a2, _b;
1931
+ (_b = (_a2 = lightboxRef.current) == null ? void 0 : _a2.splide) == null ? void 0 : _b.refresh();
1931
1932
  }, 16);
1932
1933
  };
1933
1934
  const handleComponentContentChange = () => {
@@ -1964,13 +1965,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1964
1965
  }
1965
1966
  }, [onClose, area.color, isEditor]);
1966
1967
  const handleTriggerClick = (img2, clientX, clientY) => {
1967
- var _a, _b;
1968
+ var _a2, _b;
1968
1969
  if (!img2) return;
1969
1970
  if (triggers.type === "click" && triggers.switch === "image") {
1970
1971
  if (triggers.repeat === "close" && currentIndex === content.length - 1) {
1971
1972
  handleClose();
1972
1973
  } else {
1973
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
1974
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
1974
1975
  }
1975
1976
  } else if (triggers.type === "click" && triggers.switch === "50/50") {
1976
1977
  const rect = img2.getBoundingClientRect();
@@ -2032,14 +2033,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2032
2033
  react.useEffect(() => {
2033
2034
  if (!isOpen) return;
2034
2035
  const onKeyDown = (event) => {
2035
- var _a, _b;
2036
+ var _a2, _b;
2036
2037
  if (event.key === "Escape") {
2037
2038
  handleClose();
2038
2039
  return;
2039
2040
  }
2040
2041
  if (event.key === "ArrowRight") {
2041
2042
  setCurrentIndex((prev) => (prev + 1) % Math.max(content.length, 1));
2042
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2043
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2043
2044
  return;
2044
2045
  }
2045
2046
  if (event.key === "ArrowLeft") {
@@ -2125,7 +2126,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2125
2126
  react.useEffect(() => {
2126
2127
  if (!isOpen) return;
2127
2128
  const handleTouchEnd = (e) => {
2128
- var _a, _b;
2129
+ var _a2, _b;
2129
2130
  if (isClosingRef.current) {
2130
2131
  e.stopPropagation();
2131
2132
  return;
@@ -2138,7 +2139,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2138
2139
  if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
2139
2140
  return;
2140
2141
  }
2141
- if (slider.type === "slide" && triggers.type === "drag" && ((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) {
2142
+ if (slider.type === "slide" && triggers.type === "drag" && ((_b = (_a2 = lightboxRef.current) == null ? void 0 : _a2.splide) == null ? void 0 : _b.root)) {
2142
2143
  const splideContainer = lightboxRef.current.splide.root;
2143
2144
  if (target && (splideContainer.contains(target) || splideContainer === target)) {
2144
2145
  return;
@@ -2177,8 +2178,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2177
2178
  }, [isOpen, handleClose, currentIndex, content]);
2178
2179
  const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
2179
2180
  react.useEffect(() => {
2180
- var _a, _b;
2181
- if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) return;
2181
+ var _a2, _b;
2182
+ if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a2 = lightboxRef.current) == null ? void 0 : _a2.splide) == null ? void 0 : _b.root)) return;
2182
2183
  const container = lightboxRef.current.splide.root;
2183
2184
  const DRAG_THRESHOLD = 30;
2184
2185
  const handleMove = (clientX, clientY) => {
@@ -2372,8 +2373,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2372
2373
  className: classes.arrowInner,
2373
2374
  style: { transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
2374
2375
  onClick: () => {
2375
- var _a;
2376
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("-1");
2376
+ var _a2;
2377
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("-1");
2377
2378
  },
2378
2379
  "aria-label": "Previous",
2379
2380
  children: [
@@ -2403,8 +2404,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2403
2404
  className: classes.arrowInner,
2404
2405
  style: { transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
2405
2406
  onClick: () => {
2406
- var _a;
2407
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2407
+ var _a2;
2408
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2408
2409
  },
2409
2410
  "aria-label": "Next",
2410
2411
  children: [
@@ -2430,7 +2431,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2430
2431
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2431
2432
  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor ?? "#000000", hoverFill: area.closeIconHover ?? "#cccccc" }) });
2432
2433
  })(),
2433
- imageCaption.isActive && lightboxStyles.imageCaption && (() => {
2434
+ imageCaption && imageCaption.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2434
2435
  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2435
2436
  return /* @__PURE__ */ jsxRuntime.jsx(
2436
2437
  "div",
@@ -2558,15 +2559,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2558
2559
  ["--thumb-hover"]: thumbnail.activeState.opacity / 100
2559
2560
  },
2560
2561
  onClick: (e) => {
2561
- var _a;
2562
+ var _a2;
2562
2563
  e.stopPropagation();
2563
2564
  setCurrentIndex(index);
2564
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2565
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2565
2566
  },
2566
2567
  onMouseEnter: () => {
2567
- var _a;
2568
+ var _a2;
2568
2569
  if (thumbnail.triggers === "hov") {
2569
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2570
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2570
2571
  }
2571
2572
  },
2572
2573
  children: /* @__PURE__ */ jsxRuntime.jsx(
package/dist/index.mjs CHANGED
@@ -1904,6 +1904,7 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
1904
1904
  ] });
1905
1905
  };
1906
1906
  const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor, metadata }) => {
1907
+ var _a;
1907
1908
  const [currentIndex, setCurrentIndex] = useState(0);
1908
1909
  const [splideKey, setSplideKey] = useState(0);
1909
1910
  const [isClosing, setIsClosing] = useState(false);
@@ -1924,8 +1925,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1924
1925
  useEffect(() => {
1925
1926
  const handleLayoutChange = () => {
1926
1927
  setTimeout(() => {
1927
- var _a, _b;
1928
- (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
1928
+ var _a2, _b;
1929
+ (_b = (_a2 = lightboxRef.current) == null ? void 0 : _a2.splide) == null ? void 0 : _b.refresh();
1929
1930
  }, 16);
1930
1931
  };
1931
1932
  const handleComponentContentChange = () => {
@@ -1962,13 +1963,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1962
1963
  }
1963
1964
  }, [onClose, area.color, isEditor]);
1964
1965
  const handleTriggerClick = (img2, clientX, clientY) => {
1965
- var _a, _b;
1966
+ var _a2, _b;
1966
1967
  if (!img2) return;
1967
1968
  if (triggers.type === "click" && triggers.switch === "image") {
1968
1969
  if (triggers.repeat === "close" && currentIndex === content.length - 1) {
1969
1970
  handleClose();
1970
1971
  } else {
1971
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
1972
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
1972
1973
  }
1973
1974
  } else if (triggers.type === "click" && triggers.switch === "50/50") {
1974
1975
  const rect = img2.getBoundingClientRect();
@@ -2030,14 +2031,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2030
2031
  useEffect(() => {
2031
2032
  if (!isOpen) return;
2032
2033
  const onKeyDown = (event) => {
2033
- var _a, _b;
2034
+ var _a2, _b;
2034
2035
  if (event.key === "Escape") {
2035
2036
  handleClose();
2036
2037
  return;
2037
2038
  }
2038
2039
  if (event.key === "ArrowRight") {
2039
2040
  setCurrentIndex((prev) => (prev + 1) % Math.max(content.length, 1));
2040
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2041
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2041
2042
  return;
2042
2043
  }
2043
2044
  if (event.key === "ArrowLeft") {
@@ -2123,7 +2124,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2123
2124
  useEffect(() => {
2124
2125
  if (!isOpen) return;
2125
2126
  const handleTouchEnd = (e) => {
2126
- var _a, _b;
2127
+ var _a2, _b;
2127
2128
  if (isClosingRef.current) {
2128
2129
  e.stopPropagation();
2129
2130
  return;
@@ -2136,7 +2137,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2136
2137
  if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
2137
2138
  return;
2138
2139
  }
2139
- if (slider.type === "slide" && triggers.type === "drag" && ((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) {
2140
+ if (slider.type === "slide" && triggers.type === "drag" && ((_b = (_a2 = lightboxRef.current) == null ? void 0 : _a2.splide) == null ? void 0 : _b.root)) {
2140
2141
  const splideContainer = lightboxRef.current.splide.root;
2141
2142
  if (target && (splideContainer.contains(target) || splideContainer === target)) {
2142
2143
  return;
@@ -2175,8 +2176,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2175
2176
  }, [isOpen, handleClose, currentIndex, content]);
2176
2177
  const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
2177
2178
  useEffect(() => {
2178
- var _a, _b;
2179
- if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) return;
2179
+ var _a2, _b;
2180
+ if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a2 = lightboxRef.current) == null ? void 0 : _a2.splide) == null ? void 0 : _b.root)) return;
2180
2181
  const container = lightboxRef.current.splide.root;
2181
2182
  const DRAG_THRESHOLD = 30;
2182
2183
  const handleMove = (clientX, clientY) => {
@@ -2370,8 +2371,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2370
2371
  className: classes.arrowInner,
2371
2372
  style: { transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
2372
2373
  onClick: () => {
2373
- var _a;
2374
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("-1");
2374
+ var _a2;
2375
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("-1");
2375
2376
  },
2376
2377
  "aria-label": "Previous",
2377
2378
  children: [
@@ -2401,8 +2402,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2401
2402
  className: classes.arrowInner,
2402
2403
  style: { transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
2403
2404
  onClick: () => {
2404
- var _a;
2405
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2405
+ var _a2;
2406
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2406
2407
  },
2407
2408
  "aria-label": "Next",
2408
2409
  children: [
@@ -2428,7 +2429,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2428
2429
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2429
2430
  return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor ?? "#000000", hoverFill: area.closeIconHover ?? "#cccccc" }) });
2430
2431
  })(),
2431
- imageCaption.isActive && lightboxStyles.imageCaption && (() => {
2432
+ imageCaption && imageCaption.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2432
2433
  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2433
2434
  return /* @__PURE__ */ jsx(
2434
2435
  "div",
@@ -2556,15 +2557,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2556
2557
  ["--thumb-hover"]: thumbnail.activeState.opacity / 100
2557
2558
  },
2558
2559
  onClick: (e) => {
2559
- var _a;
2560
+ var _a2;
2560
2561
  e.stopPropagation();
2561
2562
  setCurrentIndex(index);
2562
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2563
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2563
2564
  },
2564
2565
  onMouseEnter: () => {
2565
- var _a;
2566
+ var _a2;
2566
2567
  if (thumbnail.triggers === "hov") {
2567
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2568
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2568
2569
  }
2569
2570
  },
2570
2571
  children: /* @__PURE__ */ jsx(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
4
4
  "description": "Custom components for control editor and public websites.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",