nestiq-component-library 1.1.169 → 1.1.171

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

@@ -21,7 +21,6 @@ interface PopupProps {
         expose: {
             title: string;
         };
-        selectedFloorPlan?: string;
         pictures: {
             contentUrl: string;
             pictureType: {

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

@@ -6,7 +6,24 @@ interface PopupProps {
         title: string;
         url: string;
     }[];
-    floorPlanUrl: string;
+    allPictureUrls: {
+        title: string;
+        url: string;
+    }[];
+    property: {
+        pictures: {
+            contentUrl: string;
+            pictureType: {
+                id: number;
+            };
+        }[];
+    };
+    translations?: {
+        allPhotos?: string;
+        map?: string;
+        grundriss?: string;
+    };
+    baseUrl: string;
 }
 export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
 export {};

package/dist/index.es.js

@@ -261,58 +261,11 @@ function ImageListPopup(props) {
                         } }))); }))))))))));
 }
 
-var FloorPlanPopup = function (_a) {
-    var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
-    var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
-    useEffect(function () {
-        var _a;
-        if (contentUrl) {
-            var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            if (fileFormat === "png" ||
-                fileFormat === "jpg" ||
-                fileFormat === "jpeg" ||
-                fileFormat === "svg") {
-                setIsContentImage(true);
-            }
-        }
-    }, [contentUrl]);
-    var downloadButtonClickHandler = function () {
-        // Create a temporary anchor element
-        var link = document.createElement("a");
-        link.href = contentUrl;
-        link.setAttribute("download", ""); // This attribute hints the browser to download the file
-        // Append the anchor to the body and click it to trigger the download
-        document.body.appendChild(link);
-        link.click();
-        // Clean up: remove the anchor element
-        document.body.removeChild(link);
-    };
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: " d-flex w-50 flex-column  col-6 " },
-            React.createElement("div", { className: "d-flex  align-self-end me-5 mt-5" },
-                React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
-            React.createElement("div", { className: "d-flex justify-content-center" },
-                React.createElement("div", { className: "p-2 bd-highlight" },
-                    isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
-                            backgroundImage: "url(".concat(contentUrl, ")"),
-                            height: "350px",
-                            width: "600px",
-                            backgroundSize: "cover",
-                            backgroundPosition: "center",
-                        } })),
-                    !isContentImage && (React.createElement("div", { className: "text-white text-center" },
-                        "No Preview Available",
-                        React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
-                            " ",
-                            "Download",
-                            " "))))))));
-};
-
 function PropertyImageList(prop) {
-    var _a;
-    var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
-    var _c = useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
-    var _d = useState(false), isFloorPlanPopupOpen = _d[0], setIsFloorPlanPopupOpen = _d[1];
+    var _a, _b, _c, _d, _e;
+    var _f = useState(0), currentImageIndex = _f[0], setCurrentImageIndex = _f[1];
+    var _g = useState(false), isImagePopupOpen = _g[0], setIsImagePopupOpen = _g[1];
+    var _h = useState(false), isFloorPlanPopupOpen = _h[0], setIsFloorPlanPopupOpen = _h[1];
     var imageListRef = useRef(null);
     var handleArrowClickInMainImage = function (direction) {
         if (!prop.pictureUrls.length)
@@ -323,30 +276,36 @@ function PropertyImageList(prop) {
                 newIndex =
                     (prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
             }
-            else if (direction === "right") {
+            else {
                 newIndex = (prevIndex + 1) % prop.pictureUrls.length;
             }
+            if (imageListRef.current) {
+                imageListRef.current.scrollTo({
+                    left: newIndex * 150,
+                    behavior: "smooth",
+                });
+            }
             return newIndex || 0;
         });
-        imageListRef.current.scrollTo({
-            left: currentImageIndex * (direction === "left" ? -150 : 150),
-            behavior: "smooth",
-        });
     };
+    var floorPlanImages = ((_a = prop.property.pictures) === null || _a === void 0 ? void 0 : _a.filter(function (p) { var _a; return ((_a = p.pictureType) === null || _a === void 0 ? void 0 : _a.id) === 1; }).map(function (p, index) { return ({
+        url: prop.baseUrl + p.contentUrl,
+        title: "Floor Plan ".concat(index + 1),
+    }); })) || [];
     var toggleAllPhotos = function () {
         setIsImagePopupOpen(!isImagePopupOpen);
     };
     var floorPlanClickHandler = function () {
-        if (prop.floorPlanUrl) {
-            setIsFloorPlanPopupOpen(true);
-        }
+        setIsFloorPlanPopupOpen(true);
     };
-    var floorPlanPopupCloseHandler = function () {
-        setIsFloorPlanPopupOpen(false);
+    var t = {
+        allPhotos: ((_b = prop.translations) === null || _b === void 0 ? void 0 : _b.allPhotos) || "Alle Fotos",
+        map: ((_c = prop.translations) === null || _c === void 0 ? void 0 : _c.map) || "Karte",
+        grundriss: ((_d = prop.translations) === null || _d === void 0 ? void 0 : _d.grundriss) || "Grundriss",
     };
     return (React.createElement("div", { className: "col-8 Pimagelist " },
         React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
-                backgroundImage: "url(".concat((_a = prop.pictureUrls[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.url, ")"),
+                backgroundImage: "url(".concat((_e = prop.pictureUrls[currentImageIndex]) === null || _e === void 0 ? void 0 : _e.url, ")"),
                 backgroundSize: "cover",
                 backgroundPosition: "center",
             } },
@@ -382,11 +341,13 @@ function PropertyImageList(prop) {
                     React.createElement("div", { className: "col-lg-4 col-4 py-0 px-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("span", { className: "listImgText" },
+                                " ",
+                                t.allPhotos))),
                     React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: floorPlanClickHandler },
                         React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
                             React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
-                            React.createElement("span", { className: "listImgText" }, "Grundriss"))),
+                            React.createElement("span", { className: "listImgText" }, t.grundriss))),
                     React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: function () {
                             return window.scrollTo({
                                 top: document.documentElement.scrollHeight,
@@ -394,9 +355,9 @@ 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, onClose: function () { return setIsImagePopupOpen(false); } })),
-        isFloorPlanPopupOpen && (React.createElement(FloorPlanPopup, { contentUrl: prop.floorPlanUrl, onCloseClick: floorPlanPopupCloseHandler }))));
+                            React.createElement("span", { className: "listImgText" }, t.map)))))),
+        isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.allPictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
+        isFloorPlanPopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsFloorPlanPopupOpen(false); } }))));
 }
 
 var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
@@ -459,6 +420,53 @@ function PropertyCard$1(props) {
                 React.createElement("span", null, "Wohnfl\u00E4che")))));
 }
 
+var FloorPlanPopup = function (_a) {
+    var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
+    var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
+    useEffect(function () {
+        var _a;
+        if (contentUrl) {
+            var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            if (fileFormat === "png" ||
+                fileFormat === "jpg" ||
+                fileFormat === "jpeg" ||
+                fileFormat === "svg") {
+                setIsContentImage(true);
+            }
+        }
+    }, [contentUrl]);
+    var downloadButtonClickHandler = function () {
+        // Create a temporary anchor element
+        var link = document.createElement("a");
+        link.href = contentUrl;
+        link.setAttribute("download", ""); // This attribute hints the browser to download the file
+        // Append the anchor to the body and click it to trigger the download
+        document.body.appendChild(link);
+        link.click();
+        // Clean up: remove the anchor element
+        document.body.removeChild(link);
+    };
+    return (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: " d-flex w-50 flex-column  col-6 " },
+            React.createElement("div", { className: "d-flex  align-self-end me-5 mt-5" },
+                React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
+            React.createElement("div", { className: "d-flex justify-content-center" },
+                React.createElement("div", { className: "p-2 bd-highlight" },
+                    isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
+                            backgroundImage: "url(".concat(contentUrl, ")"),
+                            height: "350px",
+                            width: "600px",
+                            backgroundSize: "cover",
+                            backgroundPosition: "center",
+                        } })),
+                    !isContentImage && (React.createElement("div", { className: "text-white text-center" },
+                        "No Preview Available",
+                        React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
+                            " ",
+                            "Download",
+                            " "))))))));
+};
+
 var css_248z$3 = ".property-card {\r\n  width: 100%;\r\n  /* max-width: 1280px; */\r\n  height: auto;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border-radius: 32px;\r\n\r\n  /* @media (min-width: 1500px) {\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n  } */\r\n}\r\n\r\n.priceValue,\r\n.value {\r\n  white-space: nowrap;\r\n}\r\n\r\n.price_label,\r\n.details {\r\n  white-space: nowrap;\r\n}\r\n\r\n.listing-compact_c {\r\n  /* max-width: 750px; */\r\n  gap: 8px;\r\n  padding: 24px;\r\n  border-radius: 0 32px 32px 0;\r\n  background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.wrapperCompanySec {\r\n  height: 119px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 16px;\r\n  padding: 10px 16px;\r\n  border-radius: 16px;\r\n  border: solid 1px rgba(0, 0, 0, 0.1);\r\n  background-color: #fff;\r\n}\r\n\r\n.kontactbutton_cc {\r\n  width: 180px;\r\n  height: 43px;\r\n  gap: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n\r\n.cc-height {\r\n  height: 460px;\r\n}\r\n\r\n.listing-height {\r\n  height: 422px;\r\n}\r\n\r\n.cardStyles {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 460px;\r\n  border-radius: 32px 0px 0px 32px !important;\r\n}\r\n.cardTag {\r\n  width: 75px;\r\n  height: 30px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #313131;\r\n  background-color: #fff;\r\n}\r\n.Grundriss {\r\n  width: 120px;\r\n  height: 30px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  font-size: 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Frame-136 {\r\n  height: 85px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 16px;\r\n  padding: 10px 16px;\r\n  border-radius: 16px;\r\n  border: solid 1px rgba(0, 0, 0, 0.1);\r\n  background-color: #fff;\r\n}\r\n.kontactbutton {\r\n  width: 198px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.kontact-button-text {\r\n  flex-grow: 0;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #fff;\r\n}\r\n.propertyTitle {\r\n  display: flex;\r\n  flex-grow: 0;\r\n  font-size: 24px;\r\n  font-weight: 580;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: start;\r\n  color: #313131;\r\n}\r\n\r\n.chipLabel {\r\n  height: 30px;\r\n  padding: 0 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  display: flex;\r\n}\r\n\r\n.layersVector {\r\n  width: 15.1px;\r\n  height: 16px;\r\n}\r\n\r\n.layersText {\r\n  padding: 0 8px;\r\n  font-size: 14px;\r\n  color: #1b1b1b;\r\n  line-height: 2.14;\r\n  text-wrap: nowrap;\r\n}\r\n\r\n.style-img {\r\n  object-fit: cover;\r\n  border-radius: 30px !important;\r\n}\r\n\r\n.Vector {\r\n  width: 12px;\r\n  height: 16.1px;\r\n  flex-grow: 0;\r\n  margin: 0.4px 6px 0.4px 0;\r\n}\r\n\r\n.customButton {\r\n  width: 262px;\r\n  height: 43px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: #161410;\r\n  background-color: #181716;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button_text {\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.heartVector {\r\n  width: 23px;\r\n  height: 26.7px;\r\n  cursor: pointer;\r\n}\r\n\r\n.heartVector.liked {\r\n  fill: rgb(255, 255, 255) !important;\r\n}\r\n\r\n.location-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.location-icon {\r\n  width: 16px;\r\n  height: 21px;\r\n  flex-grow: 0;\r\n  object-fit: contain;\r\n}\r\n\r\n.locationTexts {\r\n  font-size: 16px;\r\n  color: #344041;\r\n  text-align: center;\r\n}\r\n\r\n.arrowVector {\r\n  width: 23px;\r\n  height: 23px;\r\n  flex-grow: 0;\r\n  object-fit: contain;\r\n}\r\n\r\n.Price {\r\n  font-size: 26px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #ffffff;\r\n}\r\n\r\n.details {\r\n  font-size: 16px;\r\n  color: #344041;\r\n}\r\n\r\n.price_label {\r\n  font-size: 16px;\r\n  text-align: left;\r\n  color: #344041;\r\n}\r\n\r\n.value {\r\n  font-size: 20px;\r\n  font-weight: 500;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  line-height: 1;\r\n}\r\n.priceValue {\r\n  font-size: 20px;\r\n  font-weight: 500;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  line-height: 1;\r\n}\r\n\r\n.class {\r\n  background-color: #1b1b1b;\r\n}\r\n\r\n.header {\r\n  height: 64px;\r\n  justify-content: center;\r\n}\r\n\r\n.rightConer {\r\n  width: 200px;\r\n}\r\n.labelTopClass {\r\n  height: 32px;\r\n}\r\n@media all and (min-width: 2560px) {\r\n  .header {\r\n    font-size: 38px;\r\n\r\n    display: flex;\r\n  }\r\n  .cardStyle {\r\n    gap: 0px;\r\n    width: 350px;\r\n    height: 300px;\r\n    /* margin-left: 250px; */\r\n  }\r\n}\r\n@media (max-width: 1399px) {\r\n  .header {\r\n    font-size: 38px;\r\n    align-self: center;\r\n    margin-left: 150px;\r\n  }\r\n  .cardStyle {\r\n    gap: 0px;\r\n    width: 350px;\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n  .header {\r\n    font-size: 38px;\r\n  }\r\n  .cardStyle {\r\n    width: 300px;\r\n    height: 250px;\r\n  }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n  .detail {\r\n    font-size: 11px;\r\n    padding: 2px;\r\n  }\r\n  .Price {\r\n    font-size: 19px;\r\n  }\r\n  .header {\r\n    font-size: 28px;\r\n  }\r\n  .locationText {\r\n    font-size: 12px;\r\n  }\r\n  .customButton {\r\n    width: 200px !important;\r\n  }\r\n  .button_text {\r\n    font-size: 13px;\r\n  }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n  .labelTopClass {\r\n    width: 105px !important;\r\n  }\r\n  .layersText {\r\n    font-size: 9px;\r\n    padding: 0 2rem;\r\n  }\r\n  .firstLabel {\r\n    gap: 2px;\r\n  }\r\n  .layersVector {\r\n    width: 9px;\r\n    height: 10px;\r\n    gap: 0px;\r\n  }\r\n  .cardStyle {\r\n    width: 320px !important;\r\n    height: 220px !important;\r\n  }\r\n  .header {\r\n    font-size: 24px;\r\n  }\r\n  .detail {\r\n    font-size: 10px;\r\n    padding: 2px;\r\n  }\r\n  .Price {\r\n    font-size: 18px;\r\n  }\r\n  .locationText {\r\n    font-size: 10px;\r\n  }\r\n  .Vector {\r\n    width: 8px;\r\n    height: 16px;\r\n    margin: 0px 2px 0.4px;\r\n  }\r\n}\r\n\r\n@media (max-width: 280px) {\r\n  .cardStyle {\r\n    width: 260px !important;\r\n    height: 160px !important;\r\n  }\r\n  .detail {\r\n    margin-bottom: 5px;\r\n    font-size: 0.6ch;\r\n  }\r\n  .Price {\r\n    font-size: 9px;\r\n  }\r\n  .locationText {\r\n    font-size: 6px;\r\n  }\r\n  .Vector {\r\n    width: 7px;\r\n    height: 10px;\r\n    margin: 0px 2px 4px;\r\n  }\r\n  .heartVector {\r\n    width: 15px;\r\n    height: 20px;\r\n  }\r\n}\r\n";
 styleInject(css_248z$3);
 
@@ -495,12 +503,6 @@ function PropertyCard(props) {
         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) {