@cntrl-site/components 0.1.0-alpha.17 → 0.1.0-alpha.19

package/dist/index.mjs

@@ -563,15 +563,28 @@ const ControlSliderComponent = {
               },
               offset: {
                 type: "object",
+                title: "Offset",
                 display: {
-                  type: "offset-controls"
+                  type: "group"
                 },
                 properties: {
                   x: {
-                    type: "number"
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   },
                   y: {
-                    type: "number"
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   }
                 }
               },
@@ -624,15 +637,28 @@ const ControlSliderComponent = {
               },
               offset: {
                 type: "object",
+                title: "Offset",
                 display: {
-                  type: "offset-controls"
+                  type: "group"
                 },
                 properties: {
                   x: {
-                    type: "number"
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   },
                   y: {
-                    type: "number"
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   }
                 }
               },
@@ -688,14 +714,26 @@ const ControlSliderComponent = {
               offset: {
                 type: "object",
                 display: {
-                  type: "offset-controls"
+                  type: "group"
                 },
                 properties: {
                   x: {
-                    type: "number"
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   },
                   y: {
-                    type: "number"
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   }
                 }
               },
@@ -1463,7 +1501,6 @@ const thumbsAlignStart = "Lightbox-module__thumbsAlignStart___uiFIV";
 const thumbsAlignCenter = "Lightbox-module__thumbsAlignCenter___sbUPA";
 const thumbsAlignEnd = "Lightbox-module__thumbsAlignEnd___OA9N4";
 const thumbItem = "Lightbox-module__thumbItem___zROyu";
-const thumbImage = "Lightbox-module__thumbImage___xGakV";
 const closeButton = "Lightbox-module__closeButton___r3Dur";
 const fadeIn = "Lightbox-module__fadeIn___sHwRK";
 const slideInLeft = "Lightbox-module__slideInLeft___P-XRo";
@@ -1494,7 +1531,6 @@ const styles = {
   thumbsAlignCenter,
   thumbsAlignEnd,
   thumbItem,
-  thumbImage,
   closeButton,
   fadeIn,
   slideInLeft,
@@ -1503,7 +1539,7 @@ const styles = {
   slideInBottom,
   scaleSlide
 };
-const getPositionStyles = (position, offset) => {
+const getPositionStyles = (position, offset, isEditor) => {
   const styles2 = {};
   const [vertical, horizontal] = position.split("-");
   if (vertical === "top") {
@@ -1527,16 +1563,41 @@ const getPositionStyles = (position, offset) => {
     styles2.right = "0";
   }
   if (vertical === "middle" && horizontal === "center") {
-    styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
+    styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
   } else if (vertical === "middle") {
-    styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
+    styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
   } else if (horizontal === "center") {
-    styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
+    styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), ${scalingValue(offset.y, isEditor)})`;
   } else {
-    styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
+    styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, ${scalingValue(offset.y, isEditor)})`;
   }
   return styles2;
 };
+function getDisplayedImageRect(img2) {
+  const container = img2.getBoundingClientRect();
+  const containerW = container.width;
+  const containerH = container.height;
+  const imgW = img2.naturalWidth;
+  const imgH = img2.naturalHeight;
+  const containerRatio = containerW / containerH;
+  const imgRatio = imgW / imgH;
+  let renderedW, renderedH;
+  if (imgRatio > containerRatio) {
+    renderedW = containerW;
+    renderedH = containerW / imgRatio;
+  } else {
+    renderedH = containerH;
+    renderedW = containerH * imgRatio;
+  }
+  const offsetX = (containerW - renderedW) / 2 + container.left;
+  const offsetY = (containerH - renderedH) / 2 + container.top;
+  return {
+    x: offsetX,
+    y: offsetY,
+    width: renderedW,
+    height: renderedH
+  };
+}
 function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
@@ -1558,13 +1619,16 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId, isEditor })
+    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor })
   ] });
 }
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
+const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
   const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [splideKey, setSplideKey] = React.useState(0);
   const lightboxRef = useRef(null);
-  const resizeObserverRef = useRef(null);
+  const prevSliderTypeRef = useRef(null);
+  const imageRef = useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
@@ -1594,6 +1658,13 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   };
   const onImageClick = (e) => {
     var _a, _b;
+    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+    if (!rect) return;
+    const inside = e.clientX >= rect.x && e.clientX <= rect.x + rect.width && e.clientY >= rect.y && e.clientY <= rect.y + rect.height;
+    if (!inside) {
+      onClose();
+      return;
+    }
     if (triggers.type === "click" && triggers.switch === "image") {
       e.stopPropagation();
       (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
@@ -1601,11 +1672,11 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     if (triggers.type === "click" && triggers.switch === "50/50") {
       e.stopPropagation();
       const img2 = e.currentTarget;
-      const rect = img2.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
-      const clickY = e.clientY - rect.top;
-      const imgWidth = rect.width;
-      const imgHeight = rect.height;
+      const rect2 = img2.getBoundingClientRect();
+      const clickX = e.clientX - rect2.left;
+      const clickY = e.clientY - rect2.top;
+      const imgWidth = rect2.width;
+      const imgHeight = rect2.height;
       let dir;
       if (slider.direction === "horiz") {
         dir = clickX < imgWidth / 2 ? "-1" : "+1";
@@ -1638,6 +1709,12 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   useEffect(() => {
     if (isOpen) setCurrentIndex(0);
   }, [isOpen]);
+  useEffect(() => {
+    if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
+      setSplideKey((prev) => prev + 1);
+    }
+    prevSliderTypeRef.current = slider.type;
+  }, [slider.type]);
   useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
@@ -1651,49 +1728,6 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
       document.body.style.backgroundColor = "";
     };
   }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    if (resizeObserverRef.current) {
-      resizeObserverRef.current.disconnect();
-      resizeObserverRef.current = null;
-    }
-    const timeoutId = setTimeout(() => {
-      const activeSlide = document.querySelector(".splide__slide.is-active");
-      if (!activeSlide) return;
-      const img2 = activeSlide.querySelector("img");
-      const container = activeSlide.querySelector(`.${styles.imgWrapper}`);
-      if (!img2 || !container) return;
-      const updateImageSize = () => {
-        if (!img2.naturalWidth || !img2.naturalHeight) return;
-        const imageAspectRatio = img2.naturalWidth / img2.naturalHeight;
-        const containerWidth = container.clientWidth;
-        const containerHeight = container.clientHeight;
-        const containerAspectRatio = containerWidth / containerHeight;
-        if (imageAspectRatio > containerAspectRatio) {
-          img2.style.width = "100%";
-        } else {
-          img2.style.height = "100%";
-        }
-      };
-      if (img2.complete) {
-        updateImageSize();
-      } else {
-        img2.onload = updateImageSize;
-      }
-      resizeObserverRef.current = new ResizeObserver(() => {
-        updateImageSize();
-      });
-      resizeObserverRef.current.observe(container);
-      resizeObserverRef.current.observe(img2);
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-    };
-  }, [isOpen, currentIndex, content]);
   const handleArrowClick = (dir) => {
     var _a;
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1760,6 +1794,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
           style: { ...isEditor && { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)` } },
           onClick: handleBackdropClick,
           onTouchEnd: handleBackdropClick,
+          onTouchStart: handleBackdropClick,
           children: /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1769,8 +1804,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                 animationDuration: `${appearDurationMs}ms`,
                 animationTimingFunction: "ease",
                 animationFillMode: "both",
-                ...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
-                "--splide-speed": triggers.duration || "500ms"
+                ...appear.type === "mix" && { animationDelay: `${backdropDurationMs / 2}ms` },
+                "--splide-speed": slider.duration || "500ms"
               },
               children: [
                 /* @__PURE__ */ jsx(
@@ -1783,7 +1818,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                     className: styles.lightboxSplide,
                     options: {
                       arrows: false,
-                      speed: triggers.duration ? parseInt(triggers.duration) : 500,
+                      speed: slider.duration ? parseInt(slider.duration) : 500,
                       direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
                       pagination: false,
                       drag: triggers.type === "drag",
@@ -1794,9 +1829,9 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                       padding: 0,
                       rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
                     },
-                    style: { "--splide-speed": triggers.duration || "500ms" },
+                    style: { "--splide-speed": slider.duration || "500ms" },
                     children: content.map((item, index) => {
-                      const positionStyles = getPositionStyles(layout.position, layout.offset);
+                      const positionStyles = getPositionStyles(layout.position, layout.offset, isEditor);
                       const imageStyle2 = slider.type === "scale" ? (() => {
                         const { transform, ...restStyles } = positionStyles;
                         return {
@@ -1809,10 +1844,11 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         {
                           className: styles.imgWrapper,
                           onClick: handleImageWrapperClick,
-                          style: { padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px` },
+                          style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
                           children: /* @__PURE__ */ jsx(
                             "img",
                             {
+                              ref: imageRef,
                               className: cn(styles.imageStyle, {
                                 [styles.contain]: item.image.objectFit === "contain",
                                 [styles.cover]: item.image.objectFit === "cover",
@@ -1827,9 +1863,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         }
                       ) }, index);
                     })
-                  }
+                  },
+                  splideKey
                 ),
-                controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+                controls.isActive && controls.arrowsImgUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -1840,7 +1877,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         {
                           className: styles.arrowInner,
                           style: {
-                            transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                            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"})`
                           },
                           onClick: (e) => {
                             handleArrowClick("-1");
@@ -1868,7 +1905,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         {
                           className: styles.arrowInner,
                           style: {
-                            transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                            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"})`
                           },
                           onClick: (e) => {
                             handleArrowClick("+1");
@@ -1889,7 +1926,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                   )
                 ] }),
                 area.closeIconUrl && (() => {
-                  const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
+                  const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
                   const scaleTransform = `scale(${area.closeIconScale})`;
                   const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
                   return /* @__PURE__ */ jsx(
@@ -1910,10 +1947,34 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                   {
                     className: styles.caption,
                     style: {
-                      ...getPositionStyles(caption2.alignment, caption2.offset),
-                      ["--link-hover-color"]: caption2.hover
+                      ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
+                      fontFamily: fontSettings.fontFamily,
+                      fontWeight: fontSettings.fontWeight,
+                      fontStyle: fontSettings.fontStyle,
+                      width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
+                      letterSpacing: scalingValue(letterSpacing, isEditor),
+                      wordSpacing: scalingValue(wordSpacing, isEditor),
+                      textAlign,
+                      fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
+                      lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
+                      textTransform: textAppearance.textTransform ?? "none",
+                      textDecoration: textAppearance.textDecoration ?? "none",
+                      fontVariant: textAppearance.fontVariant ?? "normal",
+                      color,
+                      transitionDuration: slider.duration ? `${Math.round(parseInt(slider.duration) / 2)}ms` : "500ms"
                     },
-                    children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-styles": "caption",
+                        className: styles.captionTextInner,
+                        style: {
+                          position: "relative"
+                        },
+                        children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
+                      }
+                    )
                   }
                 ),
                 thumbnail.isActive && /* @__PURE__ */ jsx(
@@ -1930,9 +1991,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                     ),
                     style: {
                       gap: `${thumbnail.grid.gap}px`,
-                      ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
-                      ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
-                      ...getPositionStyles(thumbnail.position, thumbnail.offset)
+                      ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
                     },
                     children: content.map((item, index) => {
                       const isActive = index === currentIndex;
@@ -1941,11 +2000,13 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         {
                           className: styles.thumbItem,
                           style: {
-                            transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
-                            ...slider.direction === "horiz" ? { height: "100%" } : {},
-                            ...slider.direction === "vert" ? { width: "100%" } : {},
-                            opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
-                            ["--thumb-hover"]: thumbnail.activeState.opacity
+                            ...slider.direction === "horiz" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.height}px` } : {},
+                            ...slider.direction === "vert" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.width}px` } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.width}px` } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.height}px` } : {},
+                            transition: isActive ? "all 0.2s ease" : "none",
+                            opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
+                            ["--thumb-hover"]: thumbnail.activeState.opacity / 100
                           },
                           onClick: (e) => {
                             var _a;
@@ -1958,13 +2019,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                             {
                               src: item.image.url,
                               alt: item.image.name ?? "",
-                              className: styles.thumbImage,
                               style: {
                                 objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
-                                ...thumbnail.fit === "fit" && slider.direction === "horiz" ? { width: "fit-content" } : {},
-                                ...thumbnail.fit === "fit" && slider.direction === "vert" ? { height: "fit-content" } : {},
-                                ...slider.direction === "horiz" ? { height: "100%", width: "auto" } : {},
-                                ...slider.direction === "vert" ? { width: "100%", height: "auto" } : {}
+                                ...thumbnail.fit === "fit" ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } : {},
+                                ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
                               }
                             }
                           )
@@ -1992,8 +2050,8 @@ const LightboxComponent = {
     url: "https://cdn.cntrl.site/projects/01GJ2SPDSH73MC92WW7ZA2CWBY/articles-assets/01KA24CHYZXJBZ0Q714B05A7VD.mp4"
   },
   defaultSize: {
-    width: 400,
-    height: 400
+    width: 440,
+    height: 550
   },
   schema: {
     type: "object",
@@ -2018,6 +2076,7 @@ const LightboxComponent = {
                   url: {
                     type: "string",
                     display: {
+                      mode: "cover",
                       type: "settings-image-input"
                     }
                   }
@@ -2090,14 +2149,6 @@ const LightboxComponent = {
                       type: "ratio-group"
                     },
                     enum: ["image", "50/50"]
-                  },
-                  duration: {
-                    type: "string",
-                    label: "T",
-                    display: {
-                      type: "step-selector"
-                    },
-                    enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
                   }
                 }
               },
@@ -2120,6 +2171,14 @@ const LightboxComponent = {
                       type: "ratio-group"
                     },
                     enum: ["horiz", "vert"]
+                  },
+                  duration: {
+                    type: "string",
+                    label: "T",
+                    display: {
+                      type: "step-selector"
+                    },
+                    enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
                   }
                 }
               },
@@ -2201,15 +2260,28 @@ const LightboxComponent = {
                   },
                   offset: {
                     type: "object",
+                    title: "Offset",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2234,7 +2306,7 @@ const LightboxComponent = {
                       scale: {
                         type: "number",
                         title: "Scale",
-                        min: 0.5,
+                        min: 1,
                         max: 5,
                         step: 0.1,
                         display: {
@@ -2271,15 +2343,28 @@ const LightboxComponent = {
                   },
                   offset: {
                     type: "object",
+                    title: "Offset",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2325,16 +2410,29 @@ const LightboxComponent = {
                     }
                   },
                   offset: {
+                    title: "Offset",
                     type: "object",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2413,15 +2511,28 @@ const LightboxComponent = {
                   },
                   closeIconOffset: {
                     type: "object",
+                    title: "Offset",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   }
@@ -2447,16 +2558,29 @@ const LightboxComponent = {
                     enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
                   },
                   offset: {
+                    title: "Offset",
                     type: "object",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2488,12 +2612,12 @@ const LightboxComponent = {
             },
             triggers: {
               type: "click",
-              switch: "image",
-              duration: "2000ms"
+              switch: "image"
             },
             slider: {
               type: "fade",
-              direction: "horiz"
+              direction: "horiz",
+              duration: "1000ms"
             },
             thumbnail: {
               isActive: true,
@@ -2622,47 +2746,27 @@ const LightboxComponent = {
               name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
               value: false
             }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "click"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "click"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "drag"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "drag"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
-              value: false
-            }
           }
+          // {
+          //   if: {
+          //     name: 'lightboxBlock.triggers.type',
+          //     value: 'click'
+          //   },
+          //   then: {
+          //     name: 'properties.lightboxBlock.properties.slider.properties.switch.display.visible',
+          //     value: true
+          //   }
+          // },
+          // {
+          //   if: {
+          //     name: 'lightboxBlock.triggers.type',
+          //     value: 'drag'
+          //   },
+          //   then: {
+          //     name: 'properties.lightboxBlock.properties.slider.properties.switch.display.visible',
+          //     value: false
+          //   }
+          // }
         ]
       },
       content: {