nestiq-component-library 1.0.23 → 1.0.24

package/dist/components/PropertyImageList/PropertyImageList.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import "./PropertyImageList.css";
 import PopupProps from "../ImageListPopup/ImageListPopup";
 interface PopupProps {
@@ -10,7 +11,8 @@ interface PopupProps {
     };
     pictureUrls: any[];
     currentImageIndex: number;
+    imageListRef: any;
     isImagePopupOpen: boolean;
 }
-export default function PropertyImageList(prop: PopupProps): void;
+export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
 export {};

package/dist/index.es.js

@@ -89,17 +89,110 @@ function PropertyDetailsHeader(props) {
                 "Grundst\u00FCck")))));
 }
 
+var iconArrowRight = "Icon_rightArrow.svg";
+
+var blcIconArrowRight = "blackarrow-Right.svg";
+
+var blcIconArrowLeft = "blckarrow-Left.svg";
+
+var iconArrowLeft = "chevron-left.svg";
+
+var iconGallery = "icon_gallery.svg";
+
+var iconMap = "icon_map.svg";
+
+var iconLayers = "layer_icon.svg";
+
 var css_248z$2 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n  .Pimagelist {\r\n    max-width: 1800px;\r\n   \r\n    \r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n";
 styleInject(css_248z$2);
 
 var css_248z$1 = ".popup-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.7);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n  background-color: transparent;\r\n  border-radius: 8px;\r\n  max-width: 90%;\r\n  max-height: 90%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.popup-header {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 1rem;\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\n.popup-title {\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n  position: absolute;\r\n  right: 1rem;\r\n  top: 1rem;\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  position: relative;\r\n  flex: 1;\r\n}\r\n\r\n.main-image {\r\n  max-width: 100%;\r\n  max-height: 80vh;\r\n  border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 48px;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n  left: 10px;\r\n}\r\n\r\n.btn-next {\r\n  right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n  width: 60px;\r\n  height: 60px;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n  border: 2px solid white;\r\n  opacity: 1;\r\n}\r\n";
 styleInject(css_248z$1);
 
+function ImageListPopup(props) {
+    var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
+    // const { id } = useParams();
+    var _b = useState(null); _b[0]; var setMainImage = _b[1];
+    var _c = useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
+    // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
+    useRef(null);
+    // const baseUrl = "https://api-dev.nestiq.de";
+    // const pictureUrls = props.property.pictures.map(
+    //   (picture) => `${baseUrl}${picture.contentUrl}`
+    // );
+    props.pictureUrls.map(function (pic) {
+        return {
+            src: pic,
+            title: "Not Specified",
+        };
+    });
+    useEffect(function () {
+        if (props.pictureUrls.length > 0) {
+            setMainImage(props.pictureUrls[0]);
+        }
+    }, [props.pictureUrls]);
+    var handleArrowClickInMainImage = function (direction) {
+        if (!props.property || props.pictureUrls.length === 0)
+            return;
+        var newIndex = currentImageIndex;
+        if (direction === "left") {
+            newIndex =
+                (currentImageIndex - 1 + props.pictureUrls.length) %
+                    props.pictureUrls.length;
+        }
+        else if (direction === "right") {
+            newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
+        }
+        setCurrentImageIndex(newIndex);
+        setMainImage(props.pictureUrls[newIndex]);
+        props.imageListRef.current.scrollTo({
+            left: newIndex * 150,
+            behavior: "smooth",
+        });
+    };
+    var handleClose = function () {
+        setShowPopUp(false);
+    };
+    return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: " d-flex  flex-column  col-6 " },
+            React.createElement("div", { className: "d-flex  align-self-end me-0 ms-5" },
+                React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon  ", onClick: handleClose })),
+            React.createElement("div", { className: "d-flex justify-content-center" },
+                React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
+                    React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex  ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
+                        React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
+                React.createElement("div", { className: "p-2 bd-highlight" },
+                    React.createElement("div", { className: " rounded-5 mainImage ", style: {
+                            backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex], ")"),
+                            height: "350px",
+                            width: "600px",
+                            backgroundSize: "cover",
+                            backgroundPosition: "center",
+                        } })),
+                React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
+                    " ",
+                    React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex     justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
+                        React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
+            React.createElement("div", { className: "d-flex flex-row" }),
+            React.createElement("div", { className: "d-flex flex-row gap-4  w-100 secondList " },
+                React.createElement("div", { className: "col-lg-12 d-flex flex-row p-1  align-self-center mt-5" },
+                    React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
+                        React.createElement("div", { className: "col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto ", ref: props.imageListRef }, props.property && (React.createElement("div", { className: "col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
+                                setMainImage(imageUrl);
+                                setCurrentImageIndex(index);
+                                props.imageListRef.current.scrollTo({
+                                    left: index * 150,
+                                    behavior: "smooth",
+                                });
+                            }, role: "button" },
+                            React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
+}
+
 function PropertyImageList(prop) {
     var _a = useState(null); _a[0]; var setMainImage = _a[1];
-    var _b = useState(0); _b[0]; _b[1];
-    var _c = useState(false); _c[0]; _c[1];
-    useRef(null);
+    var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
+    var _c = useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
+    var imageListRef = useRef(null);
     var _d = useState(false); _d[0]; _d[1];
     // const [pictureUrls, setPictureUrls] = useState([]);
     // const baseUrl = "https://api-dev.nestiq.de";
@@ -111,6 +204,74 @@ function PropertyImageList(prop) {
             setMainImage(prop.pictureUrls[0]);
         }
     }, [prop.pictureUrls]);
+    var handleArrowClickInMainImage = function (direction) {
+        if (!prop.property || prop.pictureUrls.length === 0)
+            return;
+        var newIndex = currentImageIndex;
+        if (direction === "left") {
+            newIndex =
+                (currentImageIndex - 1 + prop.pictureUrls.length) %
+                    prop.pictureUrls.length;
+        }
+        else if (direction === "right") {
+            newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
+        }
+        setCurrentImageIndex(newIndex);
+        setMainImage(prop.pictureUrls[newIndex]);
+        prop.imageListRef.current.scrollTo({
+            left: newIndex * 150,
+            behavior: "smooth",
+        });
+    };
+    var toggleAllPhotos = function () {
+        setIsImagePopupOpen(!isImagePopupOpen);
+    };
+    return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
+        React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
+                backgroundImage: "url(".concat(prop.pictureUrls[currentImageIndex], ")"),
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+            } },
+            React.createElement("div", { className: "rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
+                React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
+            React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
+                React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
+        React.createElement("div", { className: "d-flex flex-row gap-1 col-12 secondList" },
+            React.createElement("div", { className: "col-lg-6 d-flex flex-row p-1" },
+                React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
+                    React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
+                        React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                            React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
+                    React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1", ref: imageListRef }, prop.property && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
+                            setMainImage(imageUrl);
+                            setCurrentImageIndex(index);
+                            prop.imageListRef.current.scrollTo({
+                                left: index * 150,
+                                behavior: "smooth",
+                            });
+                        }, role: "button" },
+                        React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
+                    React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
+                        React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
+                            React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
+            React.createElement("div", { className: "col-6 d-flex flex-row" },
+                React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: toggleAllPhotos },
+                    React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                        React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
+                        React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
+                React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
+                    React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                        React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
+                        React.createElement("span", { className: "listImgText" }, "Grundriss"))),
+                React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: function () {
+                        return window.scrollTo({
+                            top: document.documentElement.scrollHeight,
+                        });
+                    } },
+                    React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                        React.createElement("img", { src: iconMap, alt: "Map Icon" }),
+                        React.createElement("span", { className: "listImgText" }, "Karte"))))),
+        isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
 }
 
 var layerIcon = "LayersIcon.svg";

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"names":[],"mappings":";;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
+{"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"names":[],"mappings":";;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/index.js

@@ -91,17 +91,110 @@ function PropertyDetailsHeader(props) {
                 "Grundst\u00FCck")))));
 }
 
+var iconArrowRight = "Icon_rightArrow.svg";
+
+var blcIconArrowRight = "blackarrow-Right.svg";
+
+var blcIconArrowLeft = "blckarrow-Left.svg";
+
+var iconArrowLeft = "chevron-left.svg";
+
+var iconGallery = "icon_gallery.svg";
+
+var iconMap = "icon_map.svg";
+
+var iconLayers = "layer_icon.svg";
+
 var css_248z$2 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n  .Pimagelist {\r\n    max-width: 1800px;\r\n   \r\n    \r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n";
 styleInject(css_248z$2);
 
 var css_248z$1 = ".popup-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.7);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n  background-color: transparent;\r\n  border-radius: 8px;\r\n  max-width: 90%;\r\n  max-height: 90%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.popup-header {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 1rem;\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\n.popup-title {\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n  position: absolute;\r\n  right: 1rem;\r\n  top: 1rem;\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  position: relative;\r\n  flex: 1;\r\n}\r\n\r\n.main-image {\r\n  max-width: 100%;\r\n  max-height: 80vh;\r\n  border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 48px;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n  left: 10px;\r\n}\r\n\r\n.btn-next {\r\n  right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n  width: 60px;\r\n  height: 60px;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n  border: 2px solid white;\r\n  opacity: 1;\r\n}\r\n";
 styleInject(css_248z$1);
 
+function ImageListPopup(props) {
+    var _a = React.useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
+    // const { id } = useParams();
+    var _b = React.useState(null); _b[0]; var setMainImage = _b[1];
+    var _c = React.useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
+    // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
+    React.useRef(null);
+    // const baseUrl = "https://api-dev.nestiq.de";
+    // const pictureUrls = props.property.pictures.map(
+    //   (picture) => `${baseUrl}${picture.contentUrl}`
+    // );
+    props.pictureUrls.map(function (pic) {
+        return {
+            src: pic,
+            title: "Not Specified",
+        };
+    });
+    React.useEffect(function () {
+        if (props.pictureUrls.length > 0) {
+            setMainImage(props.pictureUrls[0]);
+        }
+    }, [props.pictureUrls]);
+    var handleArrowClickInMainImage = function (direction) {
+        if (!props.property || props.pictureUrls.length === 0)
+            return;
+        var newIndex = currentImageIndex;
+        if (direction === "left") {
+            newIndex =
+                (currentImageIndex - 1 + props.pictureUrls.length) %
+                    props.pictureUrls.length;
+        }
+        else if (direction === "right") {
+            newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
+        }
+        setCurrentImageIndex(newIndex);
+        setMainImage(props.pictureUrls[newIndex]);
+        props.imageListRef.current.scrollTo({
+            left: newIndex * 150,
+            behavior: "smooth",
+        });
+    };
+    var handleClose = function () {
+        setShowPopUp(false);
+    };
+    return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: " d-flex  flex-column  col-6 " },
+            React.createElement("div", { className: "d-flex  align-self-end me-0 ms-5" },
+                React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon  ", onClick: handleClose })),
+            React.createElement("div", { className: "d-flex justify-content-center" },
+                React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
+                    React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex  ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
+                        React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
+                React.createElement("div", { className: "p-2 bd-highlight" },
+                    React.createElement("div", { className: " rounded-5 mainImage ", style: {
+                            backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex], ")"),
+                            height: "350px",
+                            width: "600px",
+                            backgroundSize: "cover",
+                            backgroundPosition: "center",
+                        } })),
+                React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
+                    " ",
+                    React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex     justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
+                        React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
+            React.createElement("div", { className: "d-flex flex-row" }),
+            React.createElement("div", { className: "d-flex flex-row gap-4  w-100 secondList " },
+                React.createElement("div", { className: "col-lg-12 d-flex flex-row p-1  align-self-center mt-5" },
+                    React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
+                        React.createElement("div", { className: "col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto ", ref: props.imageListRef }, props.property && (React.createElement("div", { className: "col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
+                                setMainImage(imageUrl);
+                                setCurrentImageIndex(index);
+                                props.imageListRef.current.scrollTo({
+                                    left: index * 150,
+                                    behavior: "smooth",
+                                });
+                            }, role: "button" },
+                            React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
+}
+
 function PropertyImageList(prop) {
     var _a = React.useState(null); _a[0]; var setMainImage = _a[1];
-    var _b = React.useState(0); _b[0]; _b[1];
-    var _c = React.useState(false); _c[0]; _c[1];
-    React.useRef(null);
+    var _b = React.useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
+    var _c = React.useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
+    var imageListRef = React.useRef(null);
     var _d = React.useState(false); _d[0]; _d[1];
     // const [pictureUrls, setPictureUrls] = useState([]);
     // const baseUrl = "https://api-dev.nestiq.de";
@@ -113,6 +206,74 @@ function PropertyImageList(prop) {
             setMainImage(prop.pictureUrls[0]);
         }
     }, [prop.pictureUrls]);
+    var handleArrowClickInMainImage = function (direction) {
+        if (!prop.property || prop.pictureUrls.length === 0)
+            return;
+        var newIndex = currentImageIndex;
+        if (direction === "left") {
+            newIndex =
+                (currentImageIndex - 1 + prop.pictureUrls.length) %
+                    prop.pictureUrls.length;
+        }
+        else if (direction === "right") {
+            newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
+        }
+        setCurrentImageIndex(newIndex);
+        setMainImage(prop.pictureUrls[newIndex]);
+        prop.imageListRef.current.scrollTo({
+            left: newIndex * 150,
+            behavior: "smooth",
+        });
+    };
+    var toggleAllPhotos = function () {
+        setIsImagePopupOpen(!isImagePopupOpen);
+    };
+    return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
+        React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
+                backgroundImage: "url(".concat(prop.pictureUrls[currentImageIndex], ")"),
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+            } },
+            React.createElement("div", { className: "rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
+                React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
+            React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
+                React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
+        React.createElement("div", { className: "d-flex flex-row gap-1 col-12 secondList" },
+            React.createElement("div", { className: "col-lg-6 d-flex flex-row p-1" },
+                React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
+                    React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
+                        React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                            React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
+                    React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1", ref: imageListRef }, prop.property && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
+                            setMainImage(imageUrl);
+                            setCurrentImageIndex(index);
+                            prop.imageListRef.current.scrollTo({
+                                left: index * 150,
+                                behavior: "smooth",
+                            });
+                        }, role: "button" },
+                        React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
+                    React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
+                        React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
+                            React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
+            React.createElement("div", { className: "col-6 d-flex flex-row" },
+                React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: toggleAllPhotos },
+                    React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                        React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
+                        React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
+                React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
+                    React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                        React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
+                        React.createElement("span", { className: "listImgText" }, "Grundriss"))),
+                React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: function () {
+                        return window.scrollTo({
+                            top: document.documentElement.scrollHeight,
+                        });
+                    } },
+                    React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
+                        React.createElement("img", { src: iconMap, alt: "Map Icon" }),
+                        React.createElement("span", { className: "listImgText" }, "Karte"))))),
+        isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
 }
 
 var layerIcon = "LayersIcon.svg";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"names":[],"mappings":";;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
+{"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"names":[],"mappings":";;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestiq-component-library",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -18,16 +18,18 @@ interface PopupProps {
     rooms: string;
     propertyArea: string;
     askingPrice: string;
+    
   };
   pictureUrls: any[];
   currentImageIndex: number;
+  imageListRef: any;
   isImagePopupOpen: boolean;
 }
 export default function PropertyImageList(prop: PopupProps) {
   const [mainImage, setMainImage] = useState(null);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const imageListRef = useRef<HTMLDivElement | null>(null);
+  const imageListRef = useRef(null);
   const [open, setopen] = useState<boolean>(false);
   // const [pictureUrls, setPictureUrls] = useState([]);
 
@@ -56,163 +58,151 @@ export default function PropertyImageList(prop: PopupProps) {
     setCurrentImageIndex(newIndex);
     setMainImage(prop.pictureUrls[newIndex]);
 
-    if (imageListRef.current) {
-      imageListRef.current.scrollTo({
-        left: newIndex * 150,
-        behavior: "smooth",
-      });
-    }
+    prop.imageListRef.current.scrollTo({
+      left: newIndex * 150,
+      behavior: "smooth",
+    });
+  };
 
-    const toggleAllPhotos = () => {
-      setIsImagePopupOpen(!isImagePopupOpen);
-    };
+  const toggleAllPhotos = () => {
+    setIsImagePopupOpen(!isImagePopupOpen);
+  };
 
-    return (
-      <div className="col-8 me-2 Pimagelist">
+  return (
+    <div className="col-8 me-2 Pimagelist">
+      <div
+        className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
+        style={{
+          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        {/* Arrows on the main image */}
         <div
-          className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
-          style={{
-            backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-          }}
+          className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
+          role="button"
+          onClick={() => handleArrowClickInMainImage("left")}
         >
-          {/* Arrows on the main image */}
-          <div
-            className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
-            role="button"
-            onClick={() => handleArrowClickInMainImage("left")}
-          >
-            <img
-              src={blcIconArrowLeft}
-              className="blackArrow"
-              alt="Left Arrow"
-            />
-          </div>
-          <div
-            role="button"
-            className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
-            onClick={() => handleArrowClickInMainImage("right")}
-          >
-            <img
-              src={blcIconArrowRight}
-              className="blackArrow"
-              alt="Right Arrow"
-            />
-          </div>
+          <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
         </div>
+        <div
+          role="button"
+          className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
+          onClick={() => handleArrowClickInMainImage("right")}
+        >
+          <img
+            src={blcIconArrowRight}
+            className="blackArrow"
+            alt="Right Arrow"
+          />
+        </div>
+      </div>
 
-        {/* Image Thumbnails */}
-        <div className="d-flex flex-row gap-1 col-12 secondList">
-          <div className="col-lg-6 d-flex flex-row p-1">
-            <div className="col-12 position-relative d-flex justify-content-center">
-              <div
-                className="col-1 h-100 d-flex position-absolute start-0"
-                onClick={() => handleArrowClickInMainImage("left")}
-                role="button"
-              >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                  <img
-                    src={iconArrowLeft}
-                    className="arroIconColour"
-                    alt="Left Arrow"
-                  />
-                </div>
-              </div>
-              <div
-                className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
-                ref={imageListRef}
-              >
-                {prop.property && (
-                  <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
-                    {prop.pictureUrls.map((imageUrl, index) => (
-                      <div
-                        key={index}
-                        className="col-lg-12 h-100 d-flex"
-                        onClick={() => {
-                          setMainImage(imageUrl);
-                          setCurrentImageIndex(index);
-                          if (imageListRef.current) {
-                            imageListRef.current.scrollTo({
-                              left: index * 150,
-                              behavior: "smooth",
-                            });
-                          }
-                        }}
-                        role="button"
-                      >
-                        <img
-                          src={imageUrl}
-                          alt={`Image ${index + 1}`}
-                          className="col-12 h-100 rounded-3 object-fit-cover"
-                        />
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <div
-                className="col-1 h-100 d-flex position-absolute end-0 top-0"
-                onClick={() => handleArrowClickInMainImage("right")}
-                role="button"
-              >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
-                  <img
-                    src={iconArrowRight}
-                    className="arroIconColour"
-                    alt="Right Arrow"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
-          <div className="col-6 d-flex flex-row">
+      {/* Image Thumbnails */}
+      <div className="d-flex flex-row gap-1 col-12 secondList">
+        <div className="col-lg-6 d-flex flex-row p-1">
+          <div className="col-12 position-relative d-flex justify-content-center">
             <div
-              className="col-lg-4 p-1"
+              className="col-1 h-100 d-flex position-absolute start-0"
+              onClick={() => handleArrowClickInMainImage("left")}
               role="button"
-              onClick={toggleAllPhotos}
             >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconGallery} alt="Gallery Icon" />
-                <span className="listImgText">Alle Fotos</span>
+              <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                <img
+                  src={iconArrowLeft}
+                  className="arroIconColour"
+                  alt="Left Arrow"
+                />
               </div>
             </div>
-            <div className="col-lg-4 p-1" role="button">
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconLayers} alt="Layers Icon" />
-                <span className="listImgText">Grundriss</span>
-              </div>
+            <div
+              className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
+              ref={imageListRef}
+            >
+              {prop.property && (
+                <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
+                  {prop.pictureUrls.map((imageUrl, index) => (
+                    <div
+                      key={index}
+                      className="col-lg-12 h-100 d-flex"
+                      onClick={() => {
+                        setMainImage(imageUrl);
+                        setCurrentImageIndex(index);
+                        prop.imageListRef.current.scrollTo({
+                          left: index * 150,
+                          behavior: "smooth",
+                        });
+                      }}
+                      role="button"
+                    >
+                      <img
+                        src={imageUrl}
+                        alt={`Image ${index + 1}`}
+                        className="col-12 h-100 rounded-3 object-fit-cover"
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
             <div
-              className="col-lg-4 p-1"
+              className="col-1 h-100 d-flex position-absolute end-0 top-0"
+              onClick={() => handleArrowClickInMainImage("right")}
               role="button"
-              onClick={() =>
-                window.scrollTo({
-                  top: document.documentElement.scrollHeight,
-                })
-              }
             >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconMap} alt="Map Icon" />
-                <span className="listImgText">Karte</span>
+              <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
+                <img
+                  src={iconArrowRight}
+                  className="arroIconColour"
+                  alt="Right Arrow"
+                />
               </div>
             </div>
           </div>
         </div>
 
-        {/* Popup for all photos */}
-        {isImagePopupOpen && (
-          <ImageListPopup
-            currentImageIndex={currentImageIndex}
-            handleArrowClickInMainImage={handleArrowClickInMainImage}
-            imageListRef={imageListRef}
-            pictureUrls={prop.pictureUrls}
-            property={prop.property}
-          />
-        )}
+        {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
+        <div className="col-6 d-flex flex-row">
+          <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
+            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+              <img src={iconGallery} alt="Gallery Icon" />
+              <span className="listImgText">Alle Fotos</span>
+            </div>
+          </div>
+          <div className="col-lg-4 p-1" role="button">
+            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+              <img src={iconLayers} alt="Layers Icon" />
+              <span className="listImgText">Grundriss</span>
+            </div>
+          </div>
+          <div
+            className="col-lg-4 p-1"
+            role="button"
+            onClick={() =>
+              window.scrollTo({
+                top: document.documentElement.scrollHeight,
+              })
+            }
+          >
+            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+              <img src={iconMap} alt="Map Icon" />
+              <span className="listImgText">Karte</span>
+            </div>
+          </div>
+        </div>
       </div>
-    );
-  };
+
+      {/* Popup for all photos */}
+      {isImagePopupOpen && (
+        <ImageListPopup
+          currentImageIndex={currentImageIndex}
+          handleArrowClickInMainImage={handleArrowClickInMainImage}
+          imageListRef={imageListRef}
+          pictureUrls={prop.pictureUrls}
+          property={prop.property}
+        />
+      )}
+    </div>
+  );
 }