@cntrl-site/components 0.1.20 → 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 (5) hide show
  1. package/dist/Components/ControlSlider/ControlSlider.d.ts +3 -2
  2. package/dist/Components/props.d.ts +3 -0
  3. package/dist/index.js +25 -22
  4. package/dist/index.mjs +25 -22
  5. package/package.json +1 -1
package/dist/Components/ControlSlider/ControlSlider.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- interface SliderProps {
1
+ import { CommonComponentProps } from '../props';
2
+ type SliderProps = {
2
3
  settings: SliderSettings;
3
4
  content: SliderItem[];
4
5
  styles: SliderStyles;
5
6
  isEditor?: boolean;
6
- }
7
+ } & CommonComponentProps;
7
8
  export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
8
9
  type SliderItem = {
9
10
  image: {
package/dist/Components/props.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export type CommonComponentProps = {
2
+ metadata?: Record<string, any>;
3
+ };
package/dist/index.js CHANGED
@@ -1905,7 +1905,8 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
1905
1905
  )
1906
1906
  ] });
1907
1907
  };
1908
- const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor }) => {
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);
@@ -1922,11 +1923,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1922
1923
  const hasDraggedRef = react.useRef(false);
1923
1924
  const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
1924
1925
  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
1926
+ const itemId = (metadata == null ? void 0 : metadata.itemId) ?? null;
1925
1927
  react.useEffect(() => {
1926
1928
  const handleLayoutChange = () => {
1927
1929
  setTimeout(() => {
1928
- var _a, _b;
1929
- (_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();
1930
1932
  }, 16);
1931
1933
  };
1932
1934
  const handleComponentContentChange = () => {
@@ -1963,13 +1965,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1963
1965
  }
1964
1966
  }, [onClose, area.color, isEditor]);
1965
1967
  const handleTriggerClick = (img2, clientX, clientY) => {
1966
- var _a, _b;
1968
+ var _a2, _b;
1967
1969
  if (!img2) return;
1968
1970
  if (triggers.type === "click" && triggers.switch === "image") {
1969
1971
  if (triggers.repeat === "close" && currentIndex === content.length - 1) {
1970
1972
  handleClose();
1971
1973
  } else {
1972
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
1974
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
1973
1975
  }
1974
1976
  } else if (triggers.type === "click" && triggers.switch === "50/50") {
1975
1977
  const rect = img2.getBoundingClientRect();
@@ -2031,14 +2033,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2031
2033
  react.useEffect(() => {
2032
2034
  if (!isOpen) return;
2033
2035
  const onKeyDown = (event) => {
2034
- var _a, _b;
2036
+ var _a2, _b;
2035
2037
  if (event.key === "Escape") {
2036
2038
  handleClose();
2037
2039
  return;
2038
2040
  }
2039
2041
  if (event.key === "ArrowRight") {
2040
2042
  setCurrentIndex((prev) => (prev + 1) % Math.max(content.length, 1));
2041
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2043
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2042
2044
  return;
2043
2045
  }
2044
2046
  if (event.key === "ArrowLeft") {
@@ -2059,7 +2061,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2059
2061
  setIsClosing(false);
2060
2062
  setAnimationFinished(false);
2061
2063
  setThumbnailDimensions({});
2062
- const event = new CustomEvent("page-overlay");
2064
+ if (!itemId) return;
2065
+ const event = new CustomEvent("page-overlay", { detail: { itemId } });
2063
2066
  window.dispatchEvent(event);
2064
2067
  }
2065
2068
  return () => {
@@ -2069,7 +2072,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2069
2072
  }
2070
2073
  setAnimationFinished(false);
2071
2074
  };
2072
- }, [isOpen]);
2075
+ }, [isOpen, itemId]);
2073
2076
  react.useEffect(() => {
2074
2077
  if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
2075
2078
  setSplideKey((prev) => prev + 1);
@@ -2123,7 +2126,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2123
2126
  react.useEffect(() => {
2124
2127
  if (!isOpen) return;
2125
2128
  const handleTouchEnd = (e) => {
2126
- var _a, _b;
2129
+ var _a2, _b;
2127
2130
  if (isClosingRef.current) {
2128
2131
  e.stopPropagation();
2129
2132
  return;
@@ -2136,7 +2139,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2136
2139
  if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
2137
2140
  return;
2138
2141
  }
2139
- 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)) {
2140
2143
  const splideContainer = lightboxRef.current.splide.root;
2141
2144
  if (target && (splideContainer.contains(target) || splideContainer === target)) {
2142
2145
  return;
@@ -2175,8 +2178,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2175
2178
  }, [isOpen, handleClose, currentIndex, content]);
2176
2179
  const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
2177
2180
  react.useEffect(() => {
2178
- var _a, _b;
2179
- 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;
2180
2183
  const container = lightboxRef.current.splide.root;
2181
2184
  const DRAG_THRESHOLD = 30;
2182
2185
  const handleMove = (clientX, clientY) => {
@@ -2370,8 +2373,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2370
2373
  className: classes.arrowInner,
2371
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"})` },
2372
2375
  onClick: () => {
2373
- var _a;
2374
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("-1");
2376
+ var _a2;
2377
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("-1");
2375
2378
  },
2376
2379
  "aria-label": "Previous",
2377
2380
  children: [
@@ -2401,8 +2404,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2401
2404
  className: classes.arrowInner,
2402
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"})` },
2403
2406
  onClick: () => {
2404
- var _a;
2405
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2407
+ var _a2;
2408
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2406
2409
  },
2407
2410
  "aria-label": "Next",
2408
2411
  children: [
@@ -2428,7 +2431,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2428
2431
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2429
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" }) });
2430
2433
  })(),
2431
- imageCaption.isActive && lightboxStyles.imageCaption && (() => {
2434
+ imageCaption && imageCaption.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2432
2435
  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2433
2436
  return /* @__PURE__ */ jsxRuntime.jsx(
2434
2437
  "div",
@@ -2556,15 +2559,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2556
2559
  ["--thumb-hover"]: thumbnail.activeState.opacity / 100
2557
2560
  },
2558
2561
  onClick: (e) => {
2559
- var _a;
2562
+ var _a2;
2560
2563
  e.stopPropagation();
2561
2564
  setCurrentIndex(index);
2562
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2565
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2563
2566
  },
2564
2567
  onMouseEnter: () => {
2565
- var _a;
2568
+ var _a2;
2566
2569
  if (thumbnail.triggers === "hov") {
2567
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2570
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2568
2571
  }
2569
2572
  },
2570
2573
  children: /* @__PURE__ */ jsxRuntime.jsx(
package/dist/index.mjs CHANGED
@@ -1903,7 +1903,8 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
1903
1903
  )
1904
1904
  ] });
1905
1905
  };
1906
- const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor }) => {
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);
@@ -1920,11 +1921,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1920
1921
  const hasDraggedRef = useRef(false);
1921
1922
  const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
1922
1923
  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
1924
+ const itemId = (metadata == null ? void 0 : metadata.itemId) ?? null;
1923
1925
  useEffect(() => {
1924
1926
  const handleLayoutChange = () => {
1925
1927
  setTimeout(() => {
1926
- var _a, _b;
1927
- (_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();
1928
1930
  }, 16);
1929
1931
  };
1930
1932
  const handleComponentContentChange = () => {
@@ -1961,13 +1963,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1961
1963
  }
1962
1964
  }, [onClose, area.color, isEditor]);
1963
1965
  const handleTriggerClick = (img2, clientX, clientY) => {
1964
- var _a, _b;
1966
+ var _a2, _b;
1965
1967
  if (!img2) return;
1966
1968
  if (triggers.type === "click" && triggers.switch === "image") {
1967
1969
  if (triggers.repeat === "close" && currentIndex === content.length - 1) {
1968
1970
  handleClose();
1969
1971
  } else {
1970
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
1972
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
1971
1973
  }
1972
1974
  } else if (triggers.type === "click" && triggers.switch === "50/50") {
1973
1975
  const rect = img2.getBoundingClientRect();
@@ -2029,14 +2031,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2029
2031
  useEffect(() => {
2030
2032
  if (!isOpen) return;
2031
2033
  const onKeyDown = (event) => {
2032
- var _a, _b;
2034
+ var _a2, _b;
2033
2035
  if (event.key === "Escape") {
2034
2036
  handleClose();
2035
2037
  return;
2036
2038
  }
2037
2039
  if (event.key === "ArrowRight") {
2038
2040
  setCurrentIndex((prev) => (prev + 1) % Math.max(content.length, 1));
2039
- (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2041
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2040
2042
  return;
2041
2043
  }
2042
2044
  if (event.key === "ArrowLeft") {
@@ -2057,7 +2059,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2057
2059
  setIsClosing(false);
2058
2060
  setAnimationFinished(false);
2059
2061
  setThumbnailDimensions({});
2060
- const event = new CustomEvent("page-overlay");
2062
+ if (!itemId) return;
2063
+ const event = new CustomEvent("page-overlay", { detail: { itemId } });
2061
2064
  window.dispatchEvent(event);
2062
2065
  }
2063
2066
  return () => {
@@ -2067,7 +2070,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2067
2070
  }
2068
2071
  setAnimationFinished(false);
2069
2072
  };
2070
- }, [isOpen]);
2073
+ }, [isOpen, itemId]);
2071
2074
  useEffect(() => {
2072
2075
  if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
2073
2076
  setSplideKey((prev) => prev + 1);
@@ -2121,7 +2124,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2121
2124
  useEffect(() => {
2122
2125
  if (!isOpen) return;
2123
2126
  const handleTouchEnd = (e) => {
2124
- var _a, _b;
2127
+ var _a2, _b;
2125
2128
  if (isClosingRef.current) {
2126
2129
  e.stopPropagation();
2127
2130
  return;
@@ -2134,7 +2137,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2134
2137
  if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
2135
2138
  return;
2136
2139
  }
2137
- 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)) {
2138
2141
  const splideContainer = lightboxRef.current.splide.root;
2139
2142
  if (target && (splideContainer.contains(target) || splideContainer === target)) {
2140
2143
  return;
@@ -2173,8 +2176,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2173
2176
  }, [isOpen, handleClose, currentIndex, content]);
2174
2177
  const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
2175
2178
  useEffect(() => {
2176
- var _a, _b;
2177
- 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;
2178
2181
  const container = lightboxRef.current.splide.root;
2179
2182
  const DRAG_THRESHOLD = 30;
2180
2183
  const handleMove = (clientX, clientY) => {
@@ -2368,8 +2371,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2368
2371
  className: classes.arrowInner,
2369
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"})` },
2370
2373
  onClick: () => {
2371
- var _a;
2372
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("-1");
2374
+ var _a2;
2375
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("-1");
2373
2376
  },
2374
2377
  "aria-label": "Previous",
2375
2378
  children: [
@@ -2399,8 +2402,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2399
2402
  className: classes.arrowInner,
2400
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"})` },
2401
2404
  onClick: () => {
2402
- var _a;
2403
- return (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
2405
+ var _a2;
2406
+ return (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
2404
2407
  },
2405
2408
  "aria-label": "Next",
2406
2409
  children: [
@@ -2426,7 +2429,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2426
2429
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2427
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" }) });
2428
2431
  })(),
2429
- imageCaption.isActive && lightboxStyles.imageCaption && (() => {
2432
+ imageCaption && imageCaption.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2430
2433
  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2431
2434
  return /* @__PURE__ */ jsx(
2432
2435
  "div",
@@ -2554,15 +2557,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2554
2557
  ["--thumb-hover"]: thumbnail.activeState.opacity / 100
2555
2558
  },
2556
2559
  onClick: (e) => {
2557
- var _a;
2560
+ var _a2;
2558
2561
  e.stopPropagation();
2559
2562
  setCurrentIndex(index);
2560
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2563
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2561
2564
  },
2562
2565
  onMouseEnter: () => {
2563
- var _a;
2566
+ var _a2;
2564
2567
  if (thumbnail.triggers === "hov") {
2565
- (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
2568
+ (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
2566
2569
  }
2567
2570
  },
2568
2571
  children: /* @__PURE__ */ jsx(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.20",
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",