@cntrl-site/components 0.1.14-alpha.0 → 0.1.14-alpha.2

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 +17 -4
  2. package/dist/index.mjs +17 -4
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2343,9 +2343,21 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2343
2343
  }
2344
2344
  ),
2345
2345
  thumbnail.isActive && (() => {
2346
- const [vertical] = thumbnail.position.split("-");
2346
+ const [vertical, horizontal] = thumbnail.position.split("-");
2347
2347
  const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
2348
2348
  const thumbsPositionStyles = getPositionStyles(effectivePosition, thumbnail.offset, isEditor);
2349
+ const getJustifyContent = () => {
2350
+ if (slider.direction === "horiz") {
2351
+ if (horizontal === "left") return "flex-start";
2352
+ if (horizontal === "center") return "center";
2353
+ if (horizontal === "right") return "flex-end";
2354
+ } else {
2355
+ if (vertical === "top") return "flex-start";
2356
+ if (vertical === "middle") return "center";
2357
+ if (vertical === "bottom") return "flex-end";
2358
+ }
2359
+ return "flex-start";
2360
+ };
2349
2361
  return /* @__PURE__ */ jsxRuntime.jsx(
2350
2362
  "div",
2351
2363
  {
@@ -2374,7 +2386,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2374
2386
  [classes.thumbsAlignEnd]: thumbnail.align === "end"
2375
2387
  }),
2376
2388
  style: {
2377
- gap: scalingValue(thumbnail.grid.gap, isEditor)
2389
+ gap: scalingValue(thumbnail.grid.gap, isEditor),
2390
+ justifyContent: getJustifyContent()
2378
2391
  },
2379
2392
  children: content.map((item, index) => {
2380
2393
  const isActive = index === currentIndex;
@@ -2416,7 +2429,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2416
2429
  ...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
2417
2430
  ...thumbnail.fit === "cover" ? { width: scalingValue(activeSizeValue, isEditor), height: scalingValue(activeSizeValue, isEditor) } : {},
2418
2431
  ...getFitDimensions(),
2419
- transition: isActive ? "all 0.2s ease-out" : "none",
2432
+ transition: isActive ? "all 0.25s ease-out" : "none",
2420
2433
  opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
2421
2434
  ["--thumb-hover"]: thumbnail.activeState.opacity / 100
2422
2435
  },
@@ -2449,7 +2462,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2449
2462
  style: {
2450
2463
  objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
2451
2464
  ...thumbnail.fit === "fit" ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } : {},
2452
- ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
2465
+ ...thumbnail.fit === "cover" ? { width: "100%", height: "100%" } : {}
2453
2466
  }
2454
2467
  }
2455
2468
  )
package/dist/index.mjs CHANGED
@@ -2341,9 +2341,21 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2341
2341
  }
2342
2342
  ),
2343
2343
  thumbnail.isActive && (() => {
2344
- const [vertical] = thumbnail.position.split("-");
2344
+ const [vertical, horizontal] = thumbnail.position.split("-");
2345
2345
  const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
2346
2346
  const thumbsPositionStyles = getPositionStyles(effectivePosition, thumbnail.offset, isEditor);
2347
+ const getJustifyContent = () => {
2348
+ if (slider.direction === "horiz") {
2349
+ if (horizontal === "left") return "flex-start";
2350
+ if (horizontal === "center") return "center";
2351
+ if (horizontal === "right") return "flex-end";
2352
+ } else {
2353
+ if (vertical === "top") return "flex-start";
2354
+ if (vertical === "middle") return "center";
2355
+ if (vertical === "bottom") return "flex-end";
2356
+ }
2357
+ return "flex-start";
2358
+ };
2347
2359
  return /* @__PURE__ */ jsx(
2348
2360
  "div",
2349
2361
  {
@@ -2372,7 +2384,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2372
2384
  [classes.thumbsAlignEnd]: thumbnail.align === "end"
2373
2385
  }),
2374
2386
  style: {
2375
- gap: scalingValue(thumbnail.grid.gap, isEditor)
2387
+ gap: scalingValue(thumbnail.grid.gap, isEditor),
2388
+ justifyContent: getJustifyContent()
2376
2389
  },
2377
2390
  children: content.map((item, index) => {
2378
2391
  const isActive = index === currentIndex;
@@ -2414,7 +2427,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2414
2427
  ...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
2415
2428
  ...thumbnail.fit === "cover" ? { width: scalingValue(activeSizeValue, isEditor), height: scalingValue(activeSizeValue, isEditor) } : {},
2416
2429
  ...getFitDimensions(),
2417
- transition: isActive ? "all 0.2s ease-out" : "none",
2430
+ transition: isActive ? "all 0.25s ease-out" : "none",
2418
2431
  opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
2419
2432
  ["--thumb-hover"]: thumbnail.activeState.opacity / 100
2420
2433
  },
@@ -2447,7 +2460,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2447
2460
  style: {
2448
2461
  objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
2449
2462
  ...thumbnail.fit === "fit" ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } : {},
2450
- ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
2463
+ ...thumbnail.fit === "cover" ? { width: "100%", height: "100%" } : {}
2451
2464
  }
2452
2465
  }
2453
2466
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.14-alpha.0",
3
+ "version": "0.1.14-alpha.2",
4
4
  "description": "Custom components for control editor and public websites.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",