@cntrl-site/components 0.1.0-3 → 0.1.0-5

package/dist/Components/Lightbox/Lightbox.d.ts

@@ -29,7 +29,6 @@ type Alignment = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'midd
 type Caption = {
     isActive: boolean;
     alignment: Alignment;
-    color: string;
     offset: Offset;
     hover: string;
 };

package/dist/index.js

@@ -1483,14 +1483,29 @@ const styles = {
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId }) {
   const [open, setOpen] = React.useState(false);
+  const [wrapperRef, setWrapperRef] = React.useState(null);
+  const [coverDimensions, setCoverDimensions] = React.useState(void 0);
   const { url: coverUrl } = settings.cover;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  React.useEffect(() => {
+    if (!wrapperRef) return;
+    const observer = new ResizeObserver((entries) => {
+      if (!wrapperRef) return;
+      const [wrapper2] = entries;
+      setCoverDimensions({
+        width: Math.round(wrapper2.contentRect.width),
+        height: Math.round(wrapper2.contentRect.height)
+      });
+    });
+    observer.observe(wrapperRef);
+    return () => observer.unobserve(wrapperRef);
+  }, [wrapperRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setWrapperRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: coverUrl,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: (coverDimensions == null ? void 0 : coverDimensions.width) ? coverDimensions.width : "100%", height: (coverDimensions == null ? void 0 : coverDimensions.height) ? coverDimensions.height : "100%", cursor: "pointer" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1696,7 +1711,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                 )
               ] }),
               settings.area.closeIconUrl && /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
-              settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x, color: settings.caption.color }, children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
+              settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x }, children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
               settings.thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -1767,7 +1782,7 @@ const LightboxComponent = {
         properties: {
           cover: {
             title: "COVER",
-            icon: "image",
+            icon: "cover",
             tooltip: "Cover Image",
             type: "object",
             properties: {
@@ -1874,7 +1889,7 @@ const LightboxComponent = {
           },
           thumbnail: {
             title: "THUMB",
-            icon: "pagination",
+            icon: "thumbnail",
             tooltip: "Thumbnail",
             type: "object",
             properties: {
@@ -1902,7 +1917,7 @@ const LightboxComponent = {
                 type: "string",
                 title: "Align",
                 display: {
-                  type: "ratio-group"
+                  type: "align-grid"
                 },
                 enum: ["top", "center", "bottom"]
               },
@@ -2105,7 +2120,7 @@ const LightboxComponent = {
           },
           area: {
             title: "AREA",
-            icon: "background",
+            icon: "area",
             tooltip: "Area",
             type: "object",
             properties: {
@@ -2181,14 +2196,6 @@ const LightboxComponent = {
                   }
                 }
               },
-              color: {
-                title: "Color",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
               hover: {
                 title: "Hover",
                 type: "string",
@@ -2259,7 +2266,6 @@ const LightboxComponent = {
           caption: {
             alignment: "middle-center",
             offset: { x: 0, y: 0 },
-            color: "#000000",
             hover: "#cccccc"
           }
         },

package/dist/index.mjs

@@ -1480,15 +1480,30 @@ const styles = {
   slideInBottom
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId }) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const [wrapperRef, setWrapperRef] = useState(null);
+  const [coverDimensions, setCoverDimensions] = useState(void 0);
   const { url: coverUrl } = settings.cover;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  useEffect(() => {
+    if (!wrapperRef) return;
+    const observer = new ResizeObserver((entries) => {
+      if (!wrapperRef) return;
+      const [wrapper2] = entries;
+      setCoverDimensions({
+        width: Math.round(wrapper2.contentRect.width),
+        height: Math.round(wrapper2.contentRect.height)
+      });
+    });
+    observer.observe(wrapperRef);
+    return () => observer.unobserve(wrapperRef);
+  }, [wrapperRef]);
+  return /* @__PURE__ */ jsxs("div", { ref: setWrapperRef, children: [
     /* @__PURE__ */ jsx(
       "img",
       {
         src: coverUrl,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: (coverDimensions == null ? void 0 : coverDimensions.width) ? coverDimensions.width : "100%", height: (coverDimensions == null ? void 0 : coverDimensions.height) ? coverDimensions.height : "100%", cursor: "pointer" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1694,7 +1709,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                 )
               ] }),
               settings.area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
-              settings.caption.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x, color: settings.caption.color }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
+              settings.caption.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
               settings.thumbnail.isActive && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -1765,7 +1780,7 @@ const LightboxComponent = {
         properties: {
           cover: {
             title: "COVER",
-            icon: "image",
+            icon: "cover",
             tooltip: "Cover Image",
             type: "object",
             properties: {
@@ -1872,7 +1887,7 @@ const LightboxComponent = {
           },
           thumbnail: {
             title: "THUMB",
-            icon: "pagination",
+            icon: "thumbnail",
             tooltip: "Thumbnail",
             type: "object",
             properties: {
@@ -1900,7 +1915,7 @@ const LightboxComponent = {
                 type: "string",
                 title: "Align",
                 display: {
-                  type: "ratio-group"
+                  type: "align-grid"
                 },
                 enum: ["top", "center", "bottom"]
               },
@@ -2103,7 +2118,7 @@ const LightboxComponent = {
           },
           area: {
             title: "AREA",
-            icon: "background",
+            icon: "area",
             tooltip: "Area",
             type: "object",
             properties: {
@@ -2179,14 +2194,6 @@ const LightboxComponent = {
                   }
                 }
               },
-              color: {
-                title: "Color",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
               hover: {
                 title: "Hover",
                 type: "string",
@@ -2257,7 +2264,6 @@ const LightboxComponent = {
           caption: {
             alignment: "middle-center",
             offset: { x: 0, y: 0 },
-            color: "#000000",
             hover: "#cccccc"
           }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.0-3",
+  "version": "0.1.0-5",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",