nestiq-component-library 1.1.34 → 1.1.36

package/dist/assets/images/card-arrow-left.28090aba4b4f2006.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="50" height="50" rx="25" fill="#fff" fill-opacity=".8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.127 17.18a.614.614 0 0 1 0 .872L22.177 25l6.95 6.948a.617.617 0 0 1-.871.872l-7.384-7.384a.616.616 0 0 1 0-.872l7.384-7.383a.616.616 0 0 1 .871 0z" fill="#000"/>
+</svg>

package/dist/assets/images/card-arrow-right.c60af4cbbd49f3aa.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="50" height="50" rx="25" fill="#fff" fill-opacity=".8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.873 32.82a.614.614 0 0 1 0-.872L27.823 25l-6.95-6.948a.617.617 0 0 1 .871-.872l7.384 7.384a.616.616 0 0 1 0 .872l-7.384 7.383a.616.616 0 0 1-.871 0z" fill="#000"/>
+</svg>

package/dist/assets/images/more.1e158adc48fbb406.svg

@@ -0,0 +1,12 @@
+<svg width="4" height="20" viewBox="0 0 4 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#fxcoqj8dma)" fill="#313131">
+        <circle cx="2" cy="2" r="2"/>
+        <circle cx="2" cy="10" r="2"/>
+        <circle cx="2" cy="18" r="2"/>
+    </g>
+    <defs>
+        <clipPath id="fxcoqj8dma">
+            <path fill="#fff" d="M0 0h4v20H0z"/>
+        </clipPath>
+    </defs>
+</svg>

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

@@ -0,0 +1,28 @@
+import React from "react";
+import "../PropertyCard/PropertyCard.css";
+interface PopupProps {
+    property: {
+        city: string;
+        historicalProtection: boolean;
+        basement: boolean;
+        balcony: boolean;
+        terrace: boolean;
+        guestBathroom: boolean;
+        bathrooms: string;
+        usableArea: string;
+        id: string;
+        rooms: string;
+        constructedArea: string;
+        evaluation?: {
+            askingPrice: number;
+        };
+        pictures: {
+            contentUrl: string;
+        }[];
+    };
+    onClick: any;
+    baseUrl: string;
+    title: string;
+}
+export default function PropertyCard(props: PopupProps): React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as PropertyImageList } from "./components/PropertyImageList//Pr
 export { default as PropertyCard } from "./components/PropertyCard//PropertyCard";
 export { default as SharePopup } from "./components/SharePopup/SharePopup";
 export { default as FloorPlanPopup } from "./components/FloorPlanPopup/FloorPlanPopup";
+export { default as NewPropertyCard } from "./components/NewPropertyCard/NewPropertyCard";
 export { default as ToastWrapper, showToast, } from "./components/ToastWrapper/ToastWrapper";
 export { formatPrice, formatPropertyArea } from "./functions/util";
 import "./styles/common.css";

package/dist/index.es.js

@@ -176,7 +176,7 @@ var iconGallery = "/static/media/icon_gallery.269b721daf2ca907.svg";
 
 var iconMap = "/static/media/icon_map.2318ec664c3e615e.svg";
 
-var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
+var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
 
 var css_248z$2 = ".mainImage {\r\n  height: 80%;\r\n}\r\n\r\n.secondList {\r\n  height: 20%;\r\n}\r\n\r\n.listImageButton {\r\n  background-color: black;\r\n  align-items: center !important;\r\n  justify-content: center !important;\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.imagesArray {\r\n  background-size: \"cover\" !important;\r\n}\r\n@media (max-width: 380px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 500px;\r\n    width: 58vw;\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";
 styleInject(css_248z$2);
@@ -362,7 +362,7 @@ function PropertyImageList(prop) {
                             React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
                     React.createElement("div", { className: "col-lg-4 col-3 p-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, alt: "Layers Icon" }),
+                            React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
                             React.createElement("span", { className: "listImgText" }, "Grundriss"))),
                     React.createElement("div", { className: "col-lg-4 col-3 p-1", role: "button", onClick: function () {
                             return window.scrollTo({
@@ -383,14 +383,14 @@ var locationIcon = "/static/media/locationIcon.0af399c78e0cdc20.svg";
 var css_248z = ".padding-global {\r\n  height: 737px !important;\r\n  padding: 0 40px;\r\n}\r\n.header {\r\n  font-size: 48px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.firstLabel {\r\n  width: 100px;\r\n  height: 25px;\r\n  gap: 6px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #031012 !important;\r\n  background-color: var(--main-yellow);\r\n}\r\n\r\n.secondLabel {\r\n  width: 85px;\r\n  height: 25px;\r\n  padding: 0 7px;\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}\r\n\r\n.thirdLabels {\r\n  padding: 4px;\r\n  width: 110px;\r\n  height: 25px;\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}\r\n\r\n.fourthLabels {\r\n  padding: 2px;\r\n\r\n  width: 100px;\r\n  height: 25px;\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}\r\n\r\n.layersVector {\r\n  width: 15.1px;\r\n  height: 16px;\r\n}\r\n\r\n.layersText {\r\n  font-size: 14px;\r\n  color: #1b1b1b;\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: var(--main-yellow);\r\n  background-color: var(--main-yellow);\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.locationText {\r\n  font-size: 14px;\r\n  color: white;\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: #fff;\r\n}\r\n\r\n.detail {\r\n  font-size: 12px;\r\n  text-align: center;\r\n  color: #fff;\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.cardStyle {\r\n  width: 405px;\r\n  max-width: 2405px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 350px;\r\n  border-radius: 30px !important;\r\n}\r\n\r\n.rightConer {\r\n  width: 200px;\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  }\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);
 
-var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
+var noImageIcon$1 = "/static/media/default-property.9987f19670be82b6.jpg";
 
-function PropertyCard(props) {
+function PropertyCard$1(props) {
     var _a, _b, _c, _d;
     var _e = useState(false); _e[0]; _e[1];
     var pictureUrl = props.property.pictures && props.property.pictures.length > 0
         ? "".concat(props.baseUrl).concat(props.property.pictures[0].contentUrl)
-        : noImageIcon;
+        : noImageIcon$1;
     return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
             backgroundImage: "url(".concat(pictureUrl, ")"),
             backgroundSize: "cover",
@@ -436,6 +436,148 @@ function PropertyCard(props) {
                 React.createElement("span", null, "Wohnfl\u00E4che")))));
 }
 
+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 arrowLeft = "/static/media/card-arrow-left.28090aba4b4f2006.svg";
+
+var arrowRight = "/static/media/card-arrow-right.c60af4cbbd49f3aa.svg";
+
+var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
+
+function PropertyCard(props) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g = useState(false); _g[0]; _g[1];
+    var _h = useState(null), mainImage = _h[0], setMainImage = _h[1];
+    var _j = useState(0), currentImageIndex = _j[0], setCurrentImageIndex = _j[1];
+    var imageListRef = useRef(null);
+    var _k = useState(false), floorPlan = _k[0], setFloorPlan = _k[1];
+    var _l = useState(false); _l[0]; var setMessagPopUp = _l[1];
+    var _m = useState(false), sharePopUp = _m[0], setSharePopUp = _m[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); })
+        : [noImageIcon];
+    var floorPlanOnClick = function () {
+        setFloorPlan(true);
+    };
+    var handleMessagPopUp = function () {
+        setMessagPopUp(true);
+    };
+    var handleSharePopUp = function () {
+        setSharePopUp(true);
+    };
+    var handleArrowClickInMainImage = function (direction) {
+        if (!props.property || pictureUrls.length === 0)
+            return;
+        var newIndex = currentImageIndex;
+        if (direction === "left") {
+            newIndex =
+                (currentImageIndex - 1 + pictureUrls.length) % pictureUrls.length;
+        }
+        else if (direction === "right") {
+            newIndex = (currentImageIndex + 1) % pictureUrls.length;
+        }
+        setCurrentImageIndex(newIndex);
+        setMainImage(pictureUrls[newIndex]);
+        // Ensure the ref exists before calling scrollTo
+        if (imageListRef.current) {
+            imageListRef.current.scrollTo({
+                left: newIndex * 150,
+                behavior: "smooth",
+            });
+        }
+        else {
+            console.warn("imageListRef is not set");
+        }
+    };
+    return (React.createElement("div", { className: "d-flex flex-row " },
+        React.createElement("div", { className: "d-flex flex-column" },
+            React.createElement("div", { key: props.property.id, className: "card-body mb-4 position-relative cardStyles", style: {
+                    backgroundImage: "url(".concat(mainImage || pictureUrls[0], ")"),
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                } },
+                React.createElement("div", { className: "d-flex flex-row justify-content-between gap-5" },
+                    React.createElement("div", { className: "d-flex", style: { position: "absolute", left: "0" }, onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
+                        React.createElement("img", { src: arrowLeft })),
+                    React.createElement("div", null),
+                    React.createElement("div", { onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
+                        React.createElement("img", { src: arrowRight, style: { position: "absolute", right: "0" } }))),
+                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" }, "".concat(currentImageIndex + 1, "/").concat(pictureUrls.length)),
+                    React.createElement("div", { className: "Grundriss kontact-button-text ", role: "button", onClick: floorPlanOnClick },
+                        React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
+                        " ",
+                        "Grundriss")))),
+        React.createElement("div", { className: "d-flex flex-column listing-compacts col-12" },
+            React.createElement("div", { className: "d-flex align-self-end justify-content-end gap-2" },
+                React.createElement("img", { src: shareIcon, alt: "Location Icon", className: "w-50 ", onClick: handleSharePopUp }),
+                React.createElement("img", { src: moreIcon, alt: "Location Icon", className: "" })),
+            React.createElement("div", null,
+                React.createElement("span", { className: "propertyTitle align-items-start " },
+                    "Charmante Altbauwohnung in zentraler Lage \u2013 ideal f\u00FCr Familien oder Paare",
+                    props.title)),
+            React.createElement("div", null,
+                " ",
+                React.createElement("div", { className: "d-flex " },
+                    React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
+                    React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
+            React.createElement("div", { className: "d-flex  flex-row " },
+                React.createElement("div", { className: "d-flex col-5" },
+                    React.createElement("span", { className: "value   " },
+                        formatPrice((_e = (_d = (_c = props.property) === null || _c === void 0 ? void 0 : _c.evaluation) === null || _d === void 0 ? void 0 : _d.askingPrice) !== null && _e !== void 0 ? _e : 0),
+                        " \u20AC",
+                        React.createElement("br", null),
+                        React.createElement("span", { className: "details" }, "Kaufpreis"))),
+                React.createElement("span", { className: "text-dark value col-lg-4 col-md-4 col-sm-6 text-truncate  " },
+                    +props.property.rooms,
+                    React.createElement("br", null),
+                    React.createElement("span", { className: "details" },
+                        " ",
+                        React.createElement("span", null, "Zimmer"))),
+                React.createElement("span", { className: "text-dark value col-lg-3 col-md-3 col-sm-4 text-truncate " },
+                    +props.property.bathrooms,
+                    React.createElement("br", null),
+                    React.createElement("span", { className: "details" },
+                        React.createElement("span", null, "Bad"))),
+                React.createElement("span", { className: "text-dark value col-lg-6 col-md-5 col-sm-7  me-3" },
+                    props.property.usableArea,
+                    " m\u00B2",
+                    React.createElement("br", null),
+                    React.createElement("span", { className: "details" },
+                        React.createElement("span", null, "Wohnfl\u00E4che")))),
+            React.createElement("div", { className: "labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 " },
+                React.createElement("div", { className: " align-items-center d-flex flex-row  gap-2" },
+                    props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels justify-content-center align-items-center" },
+                        React.createElement("span", { className: "layersText " }, "Denkmalschutz"))),
+                    props.property.basement && (React.createElement("label", { className: "secondLabel  justify-content-center align-items-center" },
+                        React.createElement("span", { className: "layersText " }, "Keller"))),
+                    props.property.balcony && (React.createElement("label", { className: "secondLabel  justify-content-center align-items-center" },
+                        React.createElement("span", { className: "layersText " }, "Balkon"))))),
+            React.createElement("div", { className: "d-flex flex-row align-items-center  gap-2" },
+                props.property.terrace && (React.createElement("label", { className: "thirdLabels justify-content-center align-items-center " },
+                    React.createElement("span", { className: "layersText" }, "Terrace"))),
+                React.createElement("div", { className: "d-flex " }, props.property.guestBathroom && (React.createElement("label", { className: "col-1 thirdLabels justify-content-center align-items-center " },
+                    React.createElement("span", { className: "layersText  " }, "Gäste-WC"))))),
+            React.createElement("div", { className: "Frame-136 d-flex flex-row" },
+                React.createElement("div", { className: "d-flex flex-column col-5 justify-content-between" },
+                    React.createElement("span", { className: "h4" },
+                        React.createElement("strong", null, "McGrath"),
+                        " ")),
+                React.createElement("div", { className: "d-flex flex-column justify-content-between" },
+                    React.createElement("span", null,
+                        React.createElement("strong", null, "Herr John McGrath"),
+                        " "),
+                    React.createElement("span", null, "McGrath"),
+                    React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
+                        React.createElement("span", { className: "kontact-button-text" }, "Kontakt aufnehmen "))))),
+        floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: ((_f = props.property.pictures[0]) === null || _f === void 0 ? void 0 : _f.contentUrl) || noImageIcon, onCloseClick: function () { return setFloorPlan(false); } })),
+        sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
+}
+
 // Utility function to show a toast
 var showToast = function (message, type) {
     if (type === void 0) { type = "info"; }
@@ -443,5 +585,5 @@ var showToast = function (message, type) {
 };
 var ToastWrapper = function () { return (React.createElement(ToastContainer, { position: "top-right", autoClose: 5000, hideProgressBar: false, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true })); };
 
-export { Button, FloorPlanPopup, Popup, PropertyCard, PropertyDetailsHeader, PropertyImageList, SharePopup, ToastWrapper, formatPrice, formatPropertyArea, showToast };
+export { Button, FloorPlanPopup, PropertyCard as NewPropertyCard, Popup, PropertyCard$1 as PropertyCard, PropertyDetailsHeader, PropertyImageList, SharePopup, ToastWrapper, formatPrice, formatPropertyArea, showToast };
 //# sourceMappingURL=index.es.js.map