nestiq-component-library 1.1.160 → 1.1.162

package/dist/index.js

@@ -74,8 +74,7 @@ var css_248z$7 = ".shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  b
 styleInject(css_248z$7);
 
 function SharePopup(props) {
-    var _a;
-    var _b = React.useState(true), showPopUp = _b[0]; _b[1];
+    var _a = React.useState(true), showPopUp = _a[0]; _a[1];
     var handleClose = function () {
         props.onClick();
     };
@@ -113,7 +112,7 @@ function SharePopup(props) {
                         React.createElement("span", { className: "socialMediaIconText" }, "E-Mail")))),
             React.createElement("div", { className: "col-10 mx-auto" },
                 React.createElement("div", { className: " row align-items-center position-relative" },
-                    React.createElement("input", { ref: urlInputRef, type: "text", className: "popup_search-input rounded-4 border border-0 ", placeholder: "Enter link here", value: ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.override_location) || window.location.href, readOnly: true }),
+                    React.createElement("input", { ref: urlInputRef, type: "text", className: "popup_search-input rounded-4 border border-0 ", placeholder: "Enter link here", value: window.location.href, readOnly: true }),
                     React.createElement("button", { onClick: copyToClipboard, className: "popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6", type: "button", id: "button" },
                         React.createElement("strong", null, "Kopieren")))))))));
 }
@@ -184,15 +183,14 @@ 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";
 styleInject(css_248z$5);
 
 var iconClose = "/static/media/close.b5ce9141e80c688b.png";
 
 function ImageListPopup(props) {
-    var _a, _b;
-    var _c = React.useState(true), showPopUp = _c[0], setShowPopUp = _c[1];
-    var _d = React.useState(0), currentImageIndex = _d[0], setCurrentImageIndex = _d[1];
+    var _a = React.useState(true), showPopUp = _a[0]; _a[1];
+    var _b = React.useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
     var imageListRef = React.useRef(null);
     var handleArrowClickInMainImage = function (direction) {
         if (props.pictureUrls.length === 0)
@@ -213,20 +211,22 @@ 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("span", { className: "text-white align-self-center" }, (_a = props.pictureUrls[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.title),
+                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("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((_b = props.pictureUrls[currentImageIndex]) === null || _b === void 0 ? void 0 : _b.url, ")"),
+                    React.createElement("div", { className: " rounded-5", style: {
+                            backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex].url, ")"),
                             height: "465px",
                             width: "880px",
                             backgroundSize: "cover",
@@ -237,21 +237,26 @@ function ImageListPopup(props) {
                     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 === null || picture === void 0 ? void 0 : 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 ".concat(index === currentImageIndex
+                        ? "border border-3 border-primary"
+                        : ""), 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) {
@@ -388,7 +393,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 }))));
 }
 
@@ -459,15 +464,15 @@ var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
 
 var shareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
 
-var moreIcon = "/static/media/more.1e158adc48fbb406.svg";
+var moreIcon = "/static/media/more.ce14789c8d37e327.svg";
 
-var arrowLeft = "/static/media/card-arrow-left.28090aba4b4f2006.svg";
+var arrowLeft = "/static/media/card-arrow-left.55343410142dad3f.svg";
 
-var arrowRight = "/static/media/card-arrow-right.c60af4cbbd49f3aa.svg";
+var arrowRight = "/static/media/card-arrow-right.60b3bf0e34c1800d.svg";
 
 var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
 
-var immooly = "/static/media/imooly.890e3dd01ea33574.svg";
+var immooly = "/static/media/imooly.b46514ac970e6052.svg";
 
 function PropertyCard(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -478,11 +483,27 @@ function PropertyCard(props) {
     var _m = React.useState(false); _m[0]; _m[1];
     var _o = React.useState(false); _o[0]; _o[1];
     var _p = React.useState(false), sharePopUp = _p[0], setSharePopUp = _p[1];
+    var _q = React.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.map(function (picture) { return "".concat(props.baseUrl).concat(picture.contentUrl); })
+        ? 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);
@@ -490,13 +511,6 @@ function PropertyCard(props) {
     };
     var handleSharePopUp = function () {
         setSharePopUp(true);
-        // const path = document.querySelector(
-        //   "#root > div:nth-child(3) > div:nth-child(3) > div.d-flex.px-lg-5.px-md-3.flex-column.col-12.filter-section-wrapper.mx-auto.mt-3 > div.mt-2.d-flex.flex-column.gap-4 > div:nth-child(1) > div:nth-child(3) > div > div > div.col-10.mx-auto > div > input"
-        // );
-        // console.log(path);
-        // if (path) {
-        //   path.innerHTML = window.location.href + props.property.id;
-        // }
     };
     var handleArrowClickInMainImage = function (direction) {
         if (!props.property || pictureUrls.length === 0)
@@ -539,7 +553,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")))),
@@ -549,7 +563,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",
@@ -570,7 +584,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" },
@@ -578,7 +592,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,
@@ -621,9 +635,8 @@ function PropertyCard(props) {
                             React.createElement("span", { className: "kontact-button-text" },
                                 "Kontakt aufnehmen",
                                 " "))))))),
-        sharePopUp && (React.createElement(SharePopup, { options: {
-                override_location: (_h = props === null || props === void 0 ? void 0 : props.options) === null || _h === void 0 ? void 0 : _h.override_share_link,
-            }, 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";