@cntrl-site/components 0.1.22 → 0.1.23

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 (4) hide show
  1. package/dist/Components/Lightbox/Lightbox.d.ts +1 -1
  2. package/dist/index.js +10 -17
  3. package/dist/index.mjs +10 -17
  4. package/package.json +1 -1
package/dist/Components/Lightbox/Lightbox.d.ts CHANGED
@@ -93,7 +93,7 @@ type LightboxSettings = {
93
93
  closeIconColor?: string;
94
94
  closeIconHover?: string;
95
95
  };
96
- imageCaption: Caption;
96
+ caption: Caption;
97
97
  };
98
98
  };
99
99
  type LightboxStyles = {
package/dist/index.js CHANGED
@@ -1921,7 +1921,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1921
1921
  const appearAnimationEndHandlerRef = react.useRef(null);
1922
1922
  const dragStartRef = react.useRef(null);
1923
1923
  const hasDraggedRef = react.useRef(false);
1924
- const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
1924
+ const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1925
1925
  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
1926
1926
  const itemId = (metadata == null ? void 0 : metadata.itemId) ?? null;
1927
1927
  react.useEffect(() => {
@@ -2216,22 +2216,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2216
2216
  dragStartRef.current = null;
2217
2217
  };
2218
2218
  const handlePointerUp = (e) => {
2219
- if (!dragStartRef.current) {
2220
- document.removeEventListener("pointerup", handlePointerUp);
2221
- document.removeEventListener("pointercancel", handlePointerUp);
2222
- document.removeEventListener("pointermove", handlePointerMove);
2223
- return;
2219
+ if (dragStartRef.current) {
2220
+ handleUp(e.clientX, e.clientY);
2224
2221
  }
2225
- handleUp(e.clientX, e.clientY);
2226
2222
  document.removeEventListener("pointerup", handlePointerUp);
2227
2223
  document.removeEventListener("pointercancel", handlePointerUp);
2228
2224
  document.removeEventListener("pointermove", handlePointerMove);
2229
2225
  };
2230
2226
  const handleTouchEnd = (e) => {
2231
2227
  if (!dragStartRef.current) {
2232
- document.removeEventListener("touchend", handleTouchEnd);
2233
- document.removeEventListener("touchcancel", handleTouchEnd);
2234
- document.removeEventListener("touchmove", handleTouchMove);
2235
2228
  return;
2236
2229
  }
2237
2230
  if (e.changedTouches.length > 0) {
@@ -2431,14 +2424,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2431
2424
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2432
2425
  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" }) });
2433
2426
  })(),
2434
- imageCaption && imageCaption.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2427
+ caption2 && caption2.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2435
2428
  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2436
2429
  return /* @__PURE__ */ jsxRuntime.jsx(
2437
2430
  "div",
2438
2431
  {
2439
2432
  className: classes.caption,
2440
2433
  style: {
2441
- ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
2434
+ ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
2442
2435
  fontFamily: fontSettings.fontFamily,
2443
2436
  fontWeight: fontSettings.fontWeight,
2444
2437
  fontStyle: fontSettings.fontStyle,
@@ -2459,7 +2452,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2459
2452
  {
2460
2453
  "data-styles": "caption",
2461
2454
  className: classes.captionTextInner,
2462
- style: { ["--link-hover-color"]: imageCaption.hover },
2455
+ style: { ["--link-hover-color"]: caption2.hover },
2463
2456
  children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
2464
2457
  }
2465
2458
  )
@@ -3126,7 +3119,7 @@ const LightboxComponent = {
3126
3119
  }
3127
3120
  }
3128
3121
  },
3129
- imageCaption: {
3122
+ caption: {
3130
3123
  title: "DESC",
3131
3124
  icon: "text-icon",
3132
3125
  tooltip: "Description",
@@ -3248,7 +3241,7 @@ const LightboxComponent = {
3248
3241
  closeIconOffset: { x: 0, y: 0 },
3249
3242
  closeIconScale: 1
3250
3243
  },
3251
- imageCaption: {
3244
+ caption: {
3252
3245
  isActive: true,
3253
3246
  alignment: "middle-center",
3254
3247
  offset: { x: 0, y: 0 },
@@ -3318,7 +3311,7 @@ const LightboxComponent = {
3318
3311
  closeIconOffset: { x: 0, y: 0 },
3319
3312
  closeIconScale: 1
3320
3313
  },
3321
- imageCaption: {
3314
+ caption: {
3322
3315
  isActive: true,
3323
3316
  alignment: "middle-center",
3324
3317
  offset: { x: 0, y: 0 },
@@ -3388,7 +3381,7 @@ const LightboxComponent = {
3388
3381
  closeIconOffset: { x: 0, y: 0 },
3389
3382
  closeIconScale: 1
3390
3383
  },
3391
- imageCaption: {
3384
+ caption: {
3392
3385
  isActive: true,
3393
3386
  alignment: "middle-center",
3394
3387
  offset: { x: 0, y: 0 },
package/dist/index.mjs CHANGED
@@ -1919,7 +1919,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1919
1919
  const appearAnimationEndHandlerRef = useRef(null);
1920
1920
  const dragStartRef = useRef(null);
1921
1921
  const hasDraggedRef = useRef(false);
1922
- const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
1922
+ const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1923
1923
  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
1924
1924
  const itemId = (metadata == null ? void 0 : metadata.itemId) ?? null;
1925
1925
  useEffect(() => {
@@ -2214,22 +2214,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2214
2214
  dragStartRef.current = null;
2215
2215
  };
2216
2216
  const handlePointerUp = (e) => {
2217
- if (!dragStartRef.current) {
2218
- document.removeEventListener("pointerup", handlePointerUp);
2219
- document.removeEventListener("pointercancel", handlePointerUp);
2220
- document.removeEventListener("pointermove", handlePointerMove);
2221
- return;
2217
+ if (dragStartRef.current) {
2218
+ handleUp(e.clientX, e.clientY);
2222
2219
  }
2223
- handleUp(e.clientX, e.clientY);
2224
2220
  document.removeEventListener("pointerup", handlePointerUp);
2225
2221
  document.removeEventListener("pointercancel", handlePointerUp);
2226
2222
  document.removeEventListener("pointermove", handlePointerMove);
2227
2223
  };
2228
2224
  const handleTouchEnd = (e) => {
2229
2225
  if (!dragStartRef.current) {
2230
- document.removeEventListener("touchend", handleTouchEnd);
2231
- document.removeEventListener("touchcancel", handleTouchEnd);
2232
- document.removeEventListener("touchmove", handleTouchMove);
2233
2226
  return;
2234
2227
  }
2235
2228
  if (e.changedTouches.length > 0) {
@@ -2429,14 +2422,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2429
2422
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2430
2423
  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" }) });
2431
2424
  })(),
2432
- imageCaption && imageCaption.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2425
+ caption2 && caption2.isActive && lightboxStyles.imageCaption && ((_a = content[currentIndex]) == null ? void 0 : _a.imageCaption) && (() => {
2433
2426
  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2434
2427
  return /* @__PURE__ */ jsx(
2435
2428
  "div",
2436
2429
  {
2437
2430
  className: classes.caption,
2438
2431
  style: {
2439
- ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
2432
+ ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
2440
2433
  fontFamily: fontSettings.fontFamily,
2441
2434
  fontWeight: fontSettings.fontWeight,
2442
2435
  fontStyle: fontSettings.fontStyle,
@@ -2457,7 +2450,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2457
2450
  {
2458
2451
  "data-styles": "caption",
2459
2452
  className: classes.captionTextInner,
2460
- style: { ["--link-hover-color"]: imageCaption.hover },
2453
+ style: { ["--link-hover-color"]: caption2.hover },
2461
2454
  children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
2462
2455
  }
2463
2456
  )
@@ -3124,7 +3117,7 @@ const LightboxComponent = {
3124
3117
  }
3125
3118
  }
3126
3119
  },
3127
- imageCaption: {
3120
+ caption: {
3128
3121
  title: "DESC",
3129
3122
  icon: "text-icon",
3130
3123
  tooltip: "Description",
@@ -3246,7 +3239,7 @@ const LightboxComponent = {
3246
3239
  closeIconOffset: { x: 0, y: 0 },
3247
3240
  closeIconScale: 1
3248
3241
  },
3249
- imageCaption: {
3242
+ caption: {
3250
3243
  isActive: true,
3251
3244
  alignment: "middle-center",
3252
3245
  offset: { x: 0, y: 0 },
@@ -3316,7 +3309,7 @@ const LightboxComponent = {
3316
3309
  closeIconOffset: { x: 0, y: 0 },
3317
3310
  closeIconScale: 1
3318
3311
  },
3319
- imageCaption: {
3312
+ caption: {
3320
3313
  isActive: true,
3321
3314
  alignment: "middle-center",
3322
3315
  offset: { x: 0, y: 0 },
@@ -3386,7 +3379,7 @@ const LightboxComponent = {
3386
3379
  closeIconOffset: { x: 0, y: 0 },
3387
3380
  closeIconScale: 1
3388
3381
  },
3389
- imageCaption: {
3382
+ caption: {
3390
3383
  isActive: true,
3391
3384
  alignment: "middle-center",
3392
3385
  offset: { x: 0, y: 0 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.22",
3
+ "version": "0.1.23",
4
4
  "description": "Custom components for control editor and public websites.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",