nestiq-component-library 1.1.161 → 1.1.163

package/dist/components/ImageListPopup/ImageListPopup.d.ts

@@ -6,6 +6,7 @@ interface PopupProps {
         title: string;
         url: string;
     }[];
+    onClose?: () => void;
 }
 export default function ImageListPopup(props: PopupProps): React.JSX.Element;
 export {};

package/dist/components/NewPropertyCard/NewPropertyCard.d.ts

@@ -21,6 +21,7 @@ interface PopupProps {
         expose: {
             title: string;
         };
+        selectedFloorPlan?: string;
         pictures: {
             contentUrl: string;
             pictureType: {
@@ -35,7 +36,10 @@ interface PopupProps {
     messageOnClick: () => void;
     onclickSuccess: () => void;
     onClick: () => void;
-    onFloorPlanClick: () => void;
+    onFloorPlanClick: (images: {
+        url: string;
+        title: string;
+    }[]) => void;
 }
 export default function PropertyCard(props: PopupProps): React.JSX.Element;
 export {};

package/dist/index.es.js

@@ -181,13 +181,13 @@ var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
 var css_248z$6 = ".mainImage {\r\n  height: 80%;\r\n}\r\n\r\n.secondList {\r\n  height: 20%;\r\n  max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  align-items: center !important;\r\n  justify-content: center !important;\r\n  min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n  height: 30px;\r\n  font-size: 14px;\r\n  line-height: 2.14;\r\n  color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n  height: 30px;\r\n  fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n  width: 50px;\r\n  height: 50px;\r\n  padding: 23px 8px;\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n  background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 500px;\r\n    width: 88vw;\r\n  }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 500px;\r\n    width: 58vw;\r\n  }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 80%;\r\n    width: 58vw;\r\n  }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 80%;\r\n    width: 58vw;\r\n  }\r\n}\r\n\r\n.image-thumbnail {\r\n  position: relative;\r\n  transition: opacity 0.3s ease-in-out;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n  filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n  filter: none;\r\n  border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
 styleInject(css_248z$6);
 
-var css_248z$5 = ".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";
+var css_248z$5 = ".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.closeIconNestiq {\r\n  position: absolute;\r\n  right: 10px;\r\n  top: 10px;\r\n  width: 12px;\r\n  height: 12px;\r\n  cursor: pointer;\r\n  z-index: 1;\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\r\n.activeStyle {\r\n  border: 3px solid transparent;\r\n  border-radius: 4px;\r\n  transition: transform 0.2s ease, border-color 0.2s ease;\r\n  cursor: pointer;\r\n}\r\n\r\n.activeStyle:hover {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.activeStyle:focus {\r\n  outline: none;\r\n  transform: scale(1.05);\r\n}\r\n\r\n.activeStyle.active {\r\n  transform: scale(1.05);\r\n}\r\n";
 styleInject(css_248z$5);
 
 var iconClose = "/static/media/close.b5ce9141e80c688b.png";
 
 function ImageListPopup(props) {
-    var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
+    var _a = useState(true), showPopUp = _a[0]; _a[1];
     var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
     var imageListRef = useRef(null);
     var handleArrowClickInMainImage = function (direction) {
@@ -209,19 +209,21 @@ function ImageListPopup(props) {
         });
     };
     var handleClose = function () {
-        setShowPopUp(false);
+        if (props.onClose) {
+            props.onClose();
+        }
     };
     return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
         React.createElement("div", { className: " d-flex  flex-column  " },
             React.createElement("div", { className: "d-flex  align-self-end me-5 " },
-                React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon", onClick: handleClose })),
+                React.createElement("img", { src: iconClose, alt: "close", className: "closeIconNestiq", onClick: handleClose })),
             React.createElement("span", { className: "text-white align-self-center" }, props.pictureUrls[currentImageIndex].title),
             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("div", { className: "rounded-circle border onImageArrow d-flex  justify-content-center", 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: {
+                    React.createElement("div", { className: " rounded-5", style: {
                             backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex].url, ")"),
                             height: "465px",
                             width: "880px",
@@ -230,24 +232,27 @@ function ImageListPopup(props) {
                         } })),
                 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("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: imageListRef }, props.pictureUrls.length > 0 && (React.createElement("div", { className: "col-lg-5  d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "col-lg-12  d-flex", onClick: function () {
-                                setCurrentImageIndex(index);
-                                imageListRef.current.scrollTo({
-                                    left: index * 150,
-                                    behavior: "smooth",
-                                });
-                            }, role: "button", style: {
-                                cursor: "pointer",
-                                width: "150px",
-                                height: "150px",
-                            } },
-                            React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
+            React.createElement("div", { className: "d-flex flex-row justify-content-center w-100 mt-5" },
+                React.createElement("div", { className: "d-flex flex-row gap-4 overflow-auto px-3", ref: imageListRef, style: {
+                        maxWidth: "100%",
+                        scrollbarWidth: "thin",
+                    } }, props.pictureUrls.length > 0 && (React.createElement(React.Fragment, null, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "flex-shrink-0 activeStyle ".concat(index === currentImageIndex ? "active" : ""), onClick: function () {
+                        setCurrentImageIndex(index);
+                        imageListRef.current.scrollTo({
+                            left: index * 170, // 150px width + gap
+                            behavior: "smooth",
+                        });
+                    }, role: "button", style: {
+                        cursor: "pointer",
+                        width: "150px",
+                        height: "150px",
+                    } },
+                    React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "w-100 h-100 rounded-3 object-fit-cover", style: {
+                            display: "block",
+                        } }))); }))))))))));
 }
 
 var FloorPlanPopup = function (_a) {
@@ -384,7 +389,7 @@ function PropertyImageList(prop) {
                         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, { pictureUrls: prop.pictureUrls }),
+        isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
         isFloorPlanPopupOpen && (React.createElement(FloorPlanPopup, { contentUrl: prop.floorPlanUrl, onCloseClick: floorPlanPopupCloseHandler }))));
 }
 
@@ -466,21 +471,35 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
 var immooly = "/static/media/imooly.b46514ac970e6052.svg";
 
 function PropertyCard(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var _h = useState(false); _h[0]; _h[1];
-    var _j = useState(null), mainImage = _j[0], setMainImage = _j[1];
-    var _k = useState(0), currentImageIndex = _k[0], setCurrentImageIndex = _k[1];
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j = useState(false); _j[0]; _j[1];
+    var _k = useState(null), mainImage = _k[0], setMainImage = _k[1];
+    var _l = useState(0), currentImageIndex = _l[0], setCurrentImageIndex = _l[1];
     var imageListRef = useRef(null);
-    var _l = useState(false); _l[0]; _l[1];
     var _m = useState(false); _m[0]; _m[1];
-    var _o = useState(false), sharePopUp = _o[0], setSharePopUp = _o[1];
+    var _o = useState(false); _o[0]; _o[1];
+    var _p = useState(false), sharePopUp = _p[0], setSharePopUp = _p[1];
+    var _q = useState(false), isImagePopupOpen = _q[0], setIsImagePopupOpen = _q[1];
     var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
         ? props.property.pictures
             .filter(function (picture) { return picture.pictureType.id === 2; })
             .map(function (picture) { return "".concat(props.baseUrl).concat(picture.contentUrl); })
         : [noImageIcon];
-    var floorPlanOnClick = function () {
-        props.onFloorPlanClick();
+    var floorPlanImages = ((_c = props.property.pictures) === null || _c === void 0 ? void 0 : _c.filter(function (p) { var _a; return ((_a = p.pictureType) === null || _a === void 0 ? void 0 : _a.id) === 1; }).map(function (p, index) { return ({
+        url: props.baseUrl + p.contentUrl,
+        title: "Floor Plan ".concat(index + 1),
+    }); })) || [];
+    if (props.property.selectedFloorPlan) {
+        floorPlanImages.push({
+            url: props.property.selectedFloorPlan,
+            title: "Selected Floor Plan",
+        });
+    }
+    var handleFloorPlanButton = function () {
+        setIsImagePopupOpen(true);
+        if (props.onFloorPlanClick) {
+            props.onFloorPlanClick(floorPlanImages);
+        }
     };
     var handleMessagPopUp = function () {
         // setMessagPopUp(true);
@@ -530,7 +549,7 @@ function PropertyCard(props) {
                         React.createElement("img", { src: arrowRight, style: { right: "16px" } }))),
                 React.createElement("div", { className: "d-flex flex-row  align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4", style: { position: "absolute", left: "0" } },
                     React.createElement("div", { className: "cardTag", style: { marginBottom: "16px" } }, "".concat(currentImageIndex + 1, "/").concat(pictureUrls.length)),
-                    React.createElement("div", { className: "Grundriss kontact-button-text ms-2 ", role: "button", onClick: floorPlanOnClick, style: { marginBottom: "16px" } },
+                    React.createElement("div", { className: "Grundriss kontact-button-text ms-2 ", role: "button", onClick: function () { return handleFloorPlanButton(); }, style: { marginBottom: "16px" } },
                         React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
                         " ",
                         "Grundriss")))),
@@ -540,7 +559,7 @@ function PropertyCard(props) {
                     React.createElement("span", { className: "propertyTitle align-items-start ", style: {
                             paddingLeft: "32px",
                             paddingTop: "32px",
-                        }, onClick: props.onClick, role: "button" }, (_c = props.property.expose) === null || _c === void 0 ? void 0 : _c.title),
+                        }, onClick: props.onClick, role: "button" }, (_d = props.property.expose) === null || _d === void 0 ? void 0 : _d.title),
                     React.createElement("div", { className: "d-flex  gap-2", style: {
                             paddingRight: "32px",
                             paddingTop: "21px",
@@ -561,7 +580,7 @@ function PropertyCard(props) {
                     paddingRight: "32px",
                 } },
                 React.createElement("span", { className: "priceValue col-lg-4 col-md-4 col-sm-6  " },
-                    formatPrice((_f = (_e = (_d = props.property) === null || _d === void 0 ? void 0 : _d.evaluation) === null || _e === void 0 ? void 0 : _e.askingPrice) !== null && _f !== void 0 ? _f : 0),
+                    formatPrice((_g = (_f = (_e = props.property) === null || _e === void 0 ? void 0 : _e.evaluation) === null || _f === void 0 ? void 0 : _f.askingPrice) !== null && _g !== void 0 ? _g : 0),
                     " \u20AC",
                     React.createElement("div", { className: "price_label" }, "Kaufpreis")),
                 React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7" },
@@ -569,7 +588,7 @@ function PropertyCard(props) {
                     " m\u00B2",
                     React.createElement("div", { className: "details" }, "Wohnfl\u00E4che")),
                 React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-6 text-truncate  " },
-                    +((_g = props.property) === null || _g === void 0 ? void 0 : _g.rooms),
+                    +((_h = props.property) === null || _h === void 0 ? void 0 : _h.rooms),
                     React.createElement("div", { className: "details" }, "Zimmer")),
                 React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate " },
                     +props.property.propertyArea,
@@ -612,7 +631,8 @@ function PropertyCard(props) {
                             React.createElement("span", { className: "kontact-button-text" },
                                 "Kontakt aufnehmen",
                                 " "))))))),
-        sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
+        sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } }),
+        isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsImagePopupOpen(false); } }))));
 }
 
 var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";