nestiq-component-library 1.0.46 → 1.1.0

package/dist/components/FloorPlanPopup/FloorPlanPopup.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PopupProps {
+    contentUrl: string;
+    onCloseClick: () => void;
+}
+declare const FloorPlanPopup: React.FC<PopupProps>;
+export default FloorPlanPopup;

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

@@ -1,5 +1,6 @@
 import "./ImageListPopup.css";
 import React from "react";
+import "../../styles/common.css";
 interface PopupProps {
     pictureUrls: {
         title: string;

package/dist/components/Popup/Popup.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import "./Popup.css";
+import "../../styles/common.css";
 interface PopupProps {
     children: React.ReactNode;
     onCloseClick: () => void;

package/dist/components/PropertyCard/PropertyCard.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import "../PropertyCard/PropertyCard.css";
 interface PopupProps {
-    properties: {
+    property: {
         city: string;
         historicalProtection: boolean;
         basement: boolean;
@@ -12,13 +12,14 @@ interface PopupProps {
         usableArea: string;
         id: string;
         rooms: string;
-        askingPrice: string;
+        evaluation?: {
+            askingPrice: number;
+        };
         pictures: {
             contentUrl: string;
         }[];
     };
     onClick: any;
-    pictureUrl: any[];
     baseUrl: string;
 }
 export default function PropertyCard(props: PopupProps): React.JSX.Element;

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

@@ -6,6 +6,7 @@ interface PopupProps {
         title: string;
         url: string;
     }[];
+    floorPlanUrl: string;
 }
 export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
 export {};

package/dist/components/SharePopup/SharePopup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./SharePopup.css";
+import "../../styles/common.css";
+export default function SharePopup(): React.JSX.Element;

package/dist/components/ToastWrapper/ToastWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const showToast: (message: string, type?: "info" | "success" | "warning" | "error") => void;
+declare const ToastWrapper: React.FC;
+export default ToastWrapper;

package/dist/functions/util.d.ts

@@ -0,0 +1 @@
+export declare function formatPrice(number: number): string;

package/dist/index.d.ts

@@ -1,5 +1,10 @@
+import "react-toastify/dist/ReactToastify.css";
 export { default as Button } from "./components/Button/Button";
 export { default as Popup } from "./components/Popup/Popup";
 export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
 export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";
 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 ToastWrapper, showToast, } from "./components/ToastWrapper/ToastWrapper";
+export { formatPrice } from "./functions/util";

package/dist/index.es.js

@@ -1,11 +1,13 @@
-import React, { useState, useRef } from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import React, { useState, useRef, useEffect } from 'react';
+import { toast, ToastContainer } from 'react-toastify';
 
 var Button = function (_a) {
     var label = _a.label;
     return React.createElement("button", null, label);
 };
 
-var closeIcon = "/static/media/icon_close_2.e41bb9a4db48e048.png";
+var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -34,7 +36,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$5 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\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.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
+var css_248z$6 = ".popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
+styleInject(css_248z$6);
+
+var css_248z$5 = ".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: 9998;\r\n}";
 styleInject(css_248z$5);
 
 var Popup = function (_a) {
@@ -42,7 +47,7 @@ var Popup = function (_a) {
     return (React.createElement("div", { className: "popup-overlay" },
         React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
             React.createElement("div", { className: "end-0 top-0 position-absolute " },
-                React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
+                React.createElement("img", { src: x, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
             children)));
 };
 
@@ -57,18 +62,16 @@ var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
 
 var facebook = "/static/media/facebook.ce73eacbfffe8a27.svg";
 
-var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
-
 var linkedln = "/static/media/linkedin.7539333145b03678.svg";
 
 var Xtwitter = "/static/media/twitter-x.48a4ac3f560f0a62.svg";
 
 var whatsapp = "/static/media/whatsapp.28e6b0b24adc9289.svg";
 
-var css_248z$3 = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\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.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 2000; /* Ensure it's above other content */\r\n \r\n}\r\n\r\n.shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  \r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: #ffb525;\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: #ffb525;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\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}\r\n.button_success-right {\r\n  width: 184px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #ffb525;\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: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 #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #ffb525;\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\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}\r\n.button_icon-right {\r\n  width: 184px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9, .Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width:23rem;\r\n  align-self: center;\r\n  align-content: center;\r\n \r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button{\r\n  width: 260px;\r\n  height: 45px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000 , #666 );\r\n  \r\n  \r\n}\r\n.Account-popup{\r\n   \r\n    height: 713px;\r\n    padding: 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 #d7d9e3;\r\n    background-color: #fff;\r\n    max-width: 1000px;\r\n  \r\n}\r\n.lightertxt{\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\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: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000 , #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\nbackground-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n    color: #000;\r\n\r\n}\r\n/* */\r\n";
+var css_248z$3 = ".shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  \r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: #ffb525;\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: #ffb525;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\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}\r\n.button_success-right {\r\n  width: 184px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #ffb525;\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: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 #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #ffb525;\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\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}\r\n.button_icon-right {\r\n  width: 184px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9, .Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width:23rem;\r\n  align-self: center;\r\n  align-content: center;\r\n \r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button{\r\n  width: 260px;\r\n  height: 45px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000 , #666 );\r\n  \r\n  \r\n}\r\n.Account-popup{\r\n   \r\n    height: 713px;\r\n    padding: 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 #d7d9e3;\r\n    background-color: #fff;\r\n    max-width: 1000px;\r\n  \r\n}\r\n.lightertxt{\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\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: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\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: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000 , #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\nbackground-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n    color: #000;\r\n\r\n}\r\n/* */\r\n";
 styleInject(css_248z$3);
 
-function PopUp(props) {
+function SharePopup() {
     var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
     var handleClose = function () {
         setShowPopUp(false);
@@ -77,7 +80,7 @@ function PopUp(props) {
     var copyToClipboard = function () {
         urlInputRef.current.select();
         document.execCommand("copy");
-        // toast.success("URL copied to clipboard!");
+        toast.success("URL copied to clipboard!");
     };
     return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
         React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
@@ -147,7 +150,7 @@ function PropertyDetailsHeader(props) {
                 " m\u00B2",
                 React.createElement("br", null),
                 "Grundst\u00FCck"))),
-        showPopUp && (React.createElement(PopUp, { onClick: handlePopUp }))));
+        showPopUp && React.createElement(SharePopup, null)));
 }
 
 var iconArrowRight = "/static/media/Icon_rightArrow.bced4a705c07148d.svg";
@@ -167,7 +170,7 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.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";
+var css_248z$1 = ".popup-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 1rem;\n  position: absolute;\n  top: 0;\n}\n\n.popup-title {\n  color: white;\n  font-size: 24px;\n  font-weight: bold;\n}\n\n.btn-close {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  background: none;\n  border: none;\n  color: white;\n  font-size: 24px;\n  cursor: pointer;\n}\n\n.popup-body {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  flex: 1;\n}\n\n.main-image {\n  max-width: 100%;\n  max-height: 80vh;\n  border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n  background: none;\n  border: none;\n  color: white;\n  font-size: 48px;\n  cursor: pointer;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.btn-prev {\n  left: 10px;\n}\n\n.btn-next {\n  right: 10px;\n}\n\n.popup-thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  padding: 1rem;\n}\n\n.thumbnail {\n  width: 60px;\n  height: 60px;\n  object-fit: cover;\n  border-radius: 8px;\n  cursor: pointer;\n  opacity: 0.6;\n}\n\n.thumbnail.active {\n  border: 2px solid white;\n  opacity: 1;\n}\n";
 styleInject(css_248z$1);
 
 var iconClose = "/static/media/close.b5ce9141e80c688b.png";
@@ -232,10 +235,57 @@ function ImageListPopup(props) {
                             React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
 }
 
+var FloorPlanPopup = function (_a) {
+    var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
+    var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
+    useEffect(function () {
+        if (contentUrl) {
+            var fileFormat = contentUrl.split(".").pop();
+            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 imageListRef = useRef(null);
     var handleArrowClickInMainImage = function (direction) {
         if (prop.pictureUrls.length === 0)
@@ -258,6 +308,14 @@ function PropertyImageList(prop) {
     var toggleAllPhotos = function () {
         setIsImagePopupOpen(!isImagePopupOpen);
     };
+    var floorPlanClickHandler = function () {
+        if (prop.floorPlanUrl) {
+            setIsFloorPlanPopupOpen(true);
+        }
+    };
+    var floorPlanPopupCloseHandler = function () {
+        setIsFloorPlanPopupOpen(false);
+    };
     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((_a = prop.pictureUrls[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.url, ")"),
@@ -290,7 +348,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: 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: "col-lg-4 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("span", { className: "listImgText" }, "Grundriss"))),
@@ -302,26 +360,31 @@ 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 }),
+        isFloorPlanPopupOpen && (React.createElement(FloorPlanPopup, { contentUrl: prop.floorPlanUrl, onCloseClick: floorPlanPopupCloseHandler }))));
 }
 
 var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
 
 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: #ffb525;\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.thirdLabel {\r\n  padding: 8px;\r\n  width: 130px;\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.fourthLabel {\r\n  padding: 6px;\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: #ffb525;\r\n  background-color: #ffb525;\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";
+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: #ffb525;\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: #ffb525;\r\n  background-color: #ffb525;\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";
 
+function formatPrice(number) {
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}
+
 function PropertyCard(props) {
-    var _a, _b;
-    var _c = useState(false); _c[0]; _c[1];
-    props.properties.pictures && props.properties.pictures.length > 0
-        ? "".concat(props.baseUrl).concat(props.properties.pictures[0].contentUrl)
+    var _a, _b, _c;
+    var _d = useState(false); _d[0]; _d[1];
+    var pictureUrl = props.property.pictures && props.property.pictures.length > 0
+        ? "".concat(props.baseUrl).concat(props.property.pictures[0].contentUrl)
         : noImageIcon;
-    return (React.createElement("div", { key: props.properties.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
-            backgroundImage: "url(".concat(props.pictureUrl, ")"),
+    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",
             backgroundPosition: "center",
         }, onClick: props.onClick, role: "button" },
@@ -330,41 +393,47 @@ function PropertyCard(props) {
                 React.createElement("label", { className: "p-1 firstLabel d-flex flex-row justify-content-center align-items-center" },
                     React.createElement("img", { src: layerIcon, alt: "Location Icon", className: "layersVector" }),
                     React.createElement("span", { className: "layersText" }, "Grundriss")),
-                props.properties.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
+                props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels d-flex flex-row justify-content-center align-items-center" },
                     React.createElement("span", { className: "layersText p-1" }, "Denkmalschutz"))),
-                props.properties.basement && (React.createElement("label", { className: "secondLabel  d-flex flex-row justify-content-center align-items-center" },
-                    React.createElement("span", { className: "layersText p-1" }, "Keller"))),
-                props.properties.balcony && (React.createElement("label", { className: "secondLabel  d-flex flex-row justify-content-center align-items-center" },
-                    React.createElement("span", { className: "layersText p-1" }, "Balkon")))),
+                props.property.basement && (React.createElement("label", { className: "secondLabel  d-flex flex-row justify-content-center align-items-center" },
+                    React.createElement("span", { className: "layersText p-1" }, "Keller")))),
             React.createElement("div", { className: "d-flex align-items-center  ms-2 start-0 gap-2" },
-                props.properties.terrace && (React.createElement("label", { className: "p-1 thirdLabel d-flex flex-row justify-content-center align-items-center " },
+                props.property.terrace && (React.createElement("label", { className: "p-1 thirdLabels d-flex flex-row justify-content-center align-items-center " },
                     React.createElement("span", { className: "layersText" }, "Terrace"))),
-                props.properties.guestBathroom && (React.createElement("label", { className: "col-1 fourthLabel d-flex flex-row justify-content-center align-items-center " },
+                props.property.balcony && (React.createElement("label", { className: "secondLabel  d-flex flex-row justify-content-center align-items-center" },
+                    React.createElement("span", { className: "layersText p-1" }, "Balkon"))),
+                props.property.guestBathroom && (React.createElement("label", { className: "col-1 fourthLabels d-flex flex-row justify-content-center align-items-center " },
                     React.createElement("span", { className: "layersText p-1" }, "Gäste-WC"))))),
         React.createElement("div", { className: "d-flex align-items-center  position-absolute top-0 end-0 p-3" }),
         React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0  p-2" },
-            React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1" }, (_b = (_a = props.properties) === null || _a === void 0 ? void 0 : _a.askingPrice) !== null && _b !== void 0 ? _b : 0,
+            React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1" },
+                formatPrice((_c = (_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.evaluation) === null || _b === void 0 ? void 0 : _b.askingPrice) !== null && _c !== void 0 ? _c : 0),
                 " \u20AC")),
-        React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
+        React.createElement("div", { className: "d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2" },
             React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
-            React.createElement("span", { className: "locationText " }, props.properties.city || "N/A p-1")),
+            React.createElement("span", { className: "locationText text-truncate" }, props.property.city || "N/A")),
         React.createElement("div", { className: "d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0" },
             React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
-                +props.properties.rooms,
+                +props.property.rooms,
                 React.createElement("br", null),
                 React.createElement("span", null, "Zimmer")),
             React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
-                +props.properties.bathrooms,
-                React.createElement("br", null),
-                +props.properties.bathrooms,
+                +props.property.bathrooms,
                 React.createElement("br", null),
                 React.createElement("span", null, "B\u00E4d")),
             React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
-                props.properties.usableArea,
+                props.property.usableArea,
                 " m\u00B2",
                 React.createElement("br", null),
                 React.createElement("span", null, "Wohnfl\u00E4che")))));
 }
 
-export { Button, Popup, PropertyCard, PropertyDetailsHeader, PropertyImageList };
+// Utility function to show a toast
+var showToast = function (message, type) {
+    if (type === void 0) { type = "info"; }
+    toast(message, { type: 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, showToast };
 //# sourceMappingURL=index.es.js.map