nestiq-component-library 1.0.45 → 1.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FloorPlanPopup/FloorPlanPopup.d.ts +7 -0
- package/dist/components/ImageListPopup/ImageListPopup.d.ts +1 -0
- package/dist/components/Popup/Popup.d.ts +1 -0
- package/dist/components/PropertyCard/PropertyCard.d.ts +1 -2
- package/dist/components/PropertyImageList/PropertyImageList.d.ts +1 -0
- package/dist/components/SharePopup/SharePopup.d.ts +4 -0
- package/dist/components/ToastWrapper/ToastWrapper.d.ts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.es.js +98 -34
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +100 -32
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
- package/src/components/FloorPlanPopup/FloorPlanPopup.css +3 -0
- package/src/components/FloorPlanPopup/FloorPlanPopup.tsx +83 -0
- package/src/components/ImageListPopup/ImageListPopup.css +0 -24
- package/src/components/ImageListPopup/ImageListPopup.tsx +3 -2
- package/src/components/Popup/Popup.css +0 -13
- package/src/components/Popup/Popup.tsx +1 -0
- package/src/components/PropertyCard/PropertyCard.css +6 -5
- package/src/components/PropertyCard/PropertyCard.tsx +29 -30
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +2 -6
- package/src/components/PropertyImageList/PropertyImageList.tsx +33 -8
- package/src/components/SharePopup/{PopUp.css → SharePopup.css} +0 -14
- package/src/components/SharePopup/{PopUp.tsx → SharePopup.tsx} +11 -12
- package/src/components/ToastWrapper/ToastWrapper.tsx +25 -0
- package/src/index.tsx +8 -1
- package/src/styles/common.css +12 -0
- package/src/assets/images/Logo-Nestiq_black.svg +0 -7
- package/src/assets/images/arrow-right-short.svg +0 -3
- package/src/assets/images/arrow-right.svg +0 -10
- package/src/assets/images/close_white.png +0 -0
- package/src/assets/images/dropdownIcon.svg +0 -16
- package/src/assets/images/facebook_icon.svg +0 -3
- package/src/assets/images/google_icon.svg +0 -10
- package/src/assets/images/heartIcon.svg +0 -3
- package/src/assets/images/icon-close-white.webp +0 -0
- package/src/assets/images/icon_checkmark.svg +0 -10
- package/src/assets/images/icon_close 2.png +0 -0
- package/src/assets/images/icon_share 1.svg +0 -3
- package/src/assets/images/icon_user.png +0 -0
- package/src/assets/images/left arrow.svg +0 -16
- package/src/assets/images/left-arrow.svg +0 -4
- package/src/assets/images/mail-icon.png +0 -0
- package/src/assets/images/no-image-icon.png +0 -0
- package/src/assets/images/right arrow.svg +0 -16
- package/src/assets/images/right-arrow.svg +0 -4
- package/src/assets/images/warning.svg +0 -11
- package/src/assets/images/x.svg +0 -3
- package/src/components/PropertyCard/PropertyDaet.json +0 -1210
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "../PropertyCard/PropertyCard.css";
|
|
3
3
|
interface PopupProps {
|
|
4
|
-
|
|
4
|
+
property: {
|
|
5
5
|
city: string;
|
|
6
6
|
historicalProtection: boolean;
|
|
7
7
|
basement: boolean;
|
|
@@ -18,7 +18,6 @@ interface PopupProps {
|
|
|
18
18
|
}[];
|
|
19
19
|
};
|
|
20
20
|
onClick: any;
|
|
21
|
-
pictureUrl: any[];
|
|
22
21
|
baseUrl: string;
|
|
23
22
|
}
|
|
24
23
|
export default function PropertyCard(props: PopupProps): React.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
import "react-toastify/dist/ReactToastify.css";
|
|
1
2
|
export { default as Button } from "./components/Button/Button";
|
|
2
3
|
export { default as Popup } from "./components/Popup/Popup";
|
|
3
4
|
export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
|
|
4
5
|
export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";
|
|
5
6
|
export { default as PropertyCard } from "./components/PropertyCard//PropertyCard";
|
|
7
|
+
export { default as SharePopup } from "./components/SharePopup/SharePopup";
|
|
8
|
+
export { default as FloorPlanPopup } from "./components/FloorPlanPopup/FloorPlanPopup";
|
|
9
|
+
export { default as ToastWrapper, showToast, } from "./components/ToastWrapper/ToastWrapper";
|
package/dist/index.es.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import 'react-toastify/dist/ReactToastify.css';
|
|
2
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
3
|
+
import { toast, ToastContainer } from 'react-toastify';
|
|
2
4
|
|
|
3
5
|
var Button = function (_a) {
|
|
4
6
|
var label = _a.label;
|
|
5
7
|
return React.createElement("button", null, label);
|
|
6
8
|
};
|
|
7
9
|
|
|
8
|
-
var
|
|
10
|
+
var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
|
|
9
11
|
|
|
10
12
|
function styleInject(css, ref) {
|
|
11
13
|
if ( ref === void 0 ) ref = {};
|
|
@@ -34,7 +36,10 @@ function styleInject(css, ref) {
|
|
|
34
36
|
}
|
|
35
37
|
}
|
|
36
38
|
|
|
37
|
-
var css_248z$
|
|
39
|
+
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";
|
|
40
|
+
styleInject(css_248z$6);
|
|
41
|
+
|
|
42
|
+
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}";
|
|
38
43
|
styleInject(css_248z$5);
|
|
39
44
|
|
|
40
45
|
var Popup = function (_a) {
|
|
@@ -42,7 +47,7 @@ var Popup = function (_a) {
|
|
|
42
47
|
return (React.createElement("div", { className: "popup-overlay" },
|
|
43
48
|
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" },
|
|
44
49
|
React.createElement("div", { className: "end-0 top-0 position-absolute " },
|
|
45
|
-
React.createElement("img", { src:
|
|
50
|
+
React.createElement("img", { src: x, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
|
|
46
51
|
children)));
|
|
47
52
|
};
|
|
48
53
|
|
|
@@ -57,18 +62,16 @@ var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
|
|
|
57
62
|
|
|
58
63
|
var facebook = "/static/media/facebook.ce73eacbfffe8a27.svg";
|
|
59
64
|
|
|
60
|
-
var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
|
|
61
|
-
|
|
62
65
|
var linkedln = "/static/media/linkedin.7539333145b03678.svg";
|
|
63
66
|
|
|
64
67
|
var Xtwitter = "/static/media/twitter-x.48a4ac3f560f0a62.svg";
|
|
65
68
|
|
|
66
69
|
var whatsapp = "/static/media/whatsapp.28e6b0b24adc9289.svg";
|
|
67
70
|
|
|
68
|
-
var css_248z$3 = ".
|
|
71
|
+
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";
|
|
69
72
|
styleInject(css_248z$3);
|
|
70
73
|
|
|
71
|
-
function
|
|
74
|
+
function SharePopup() {
|
|
72
75
|
var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
|
|
73
76
|
var handleClose = function () {
|
|
74
77
|
setShowPopUp(false);
|
|
@@ -77,7 +80,7 @@ function PopUp(props) {
|
|
|
77
80
|
var copyToClipboard = function () {
|
|
78
81
|
urlInputRef.current.select();
|
|
79
82
|
document.execCommand("copy");
|
|
80
|
-
|
|
83
|
+
toast.success("URL copied to clipboard!");
|
|
81
84
|
};
|
|
82
85
|
return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
|
|
83
86
|
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) {
|
|
|
147
150
|
" m\u00B2",
|
|
148
151
|
React.createElement("br", null),
|
|
149
152
|
"Grundst\u00FCck"))),
|
|
150
|
-
showPopUp &&
|
|
153
|
+
showPopUp && React.createElement(SharePopup, null)));
|
|
151
154
|
}
|
|
152
155
|
|
|
153
156
|
var iconArrowRight = "/static/media/Icon_rightArrow.bced4a705c07148d.svg";
|
|
@@ -167,7 +170,7 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
|
167
170
|
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";
|
|
168
171
|
styleInject(css_248z$2);
|
|
169
172
|
|
|
170
|
-
var css_248z$1 = ".popup-
|
|
173
|
+
var css_248z$1 = ".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";
|
|
171
174
|
styleInject(css_248z$1);
|
|
172
175
|
|
|
173
176
|
var iconClose = "/static/media/close.b5ce9141e80c688b.png";
|
|
@@ -232,10 +235,57 @@ function ImageListPopup(props) {
|
|
|
232
235
|
React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
|
|
233
236
|
}
|
|
234
237
|
|
|
238
|
+
var FloorPlanPopup = function (_a) {
|
|
239
|
+
var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
|
|
240
|
+
var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
|
|
241
|
+
useEffect(function () {
|
|
242
|
+
if (contentUrl) {
|
|
243
|
+
var fileFormat = contentUrl.split(".").pop();
|
|
244
|
+
if (fileFormat === "png" ||
|
|
245
|
+
fileFormat === "jpg" ||
|
|
246
|
+
fileFormat === "jpeg" ||
|
|
247
|
+
fileFormat === "svg") {
|
|
248
|
+
setIsContentImage(true);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}, [contentUrl]);
|
|
252
|
+
var downloadButtonClickHandler = function () {
|
|
253
|
+
// Create a temporary anchor element
|
|
254
|
+
var link = document.createElement("a");
|
|
255
|
+
link.href = contentUrl;
|
|
256
|
+
link.setAttribute("download", ""); // This attribute hints the browser to download the file
|
|
257
|
+
// Append the anchor to the body and click it to trigger the download
|
|
258
|
+
document.body.appendChild(link);
|
|
259
|
+
link.click();
|
|
260
|
+
// Clean up: remove the anchor element
|
|
261
|
+
document.body.removeChild(link);
|
|
262
|
+
};
|
|
263
|
+
return (React.createElement("div", { className: "popup-overlay" },
|
|
264
|
+
React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
|
|
265
|
+
React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
|
|
266
|
+
React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
|
|
267
|
+
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
268
|
+
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
269
|
+
isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
|
|
270
|
+
backgroundImage: "url(".concat(contentUrl, ")"),
|
|
271
|
+
height: "350px",
|
|
272
|
+
width: "600px",
|
|
273
|
+
backgroundSize: "cover",
|
|
274
|
+
backgroundPosition: "center",
|
|
275
|
+
} })),
|
|
276
|
+
!isContentImage && (React.createElement("div", { className: "text-white text-center" },
|
|
277
|
+
"No Preview Available",
|
|
278
|
+
React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
|
|
279
|
+
" ",
|
|
280
|
+
"Download",
|
|
281
|
+
" "))))))));
|
|
282
|
+
};
|
|
283
|
+
|
|
235
284
|
function PropertyImageList(prop) {
|
|
236
285
|
var _a;
|
|
237
286
|
var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
|
|
238
287
|
var _c = useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
|
|
288
|
+
var _d = useState(false), isFloorPlanPopupOpen = _d[0], setIsFloorPlanPopupOpen = _d[1];
|
|
239
289
|
var imageListRef = useRef(null);
|
|
240
290
|
var handleArrowClickInMainImage = function (direction) {
|
|
241
291
|
if (prop.pictureUrls.length === 0)
|
|
@@ -258,6 +308,14 @@ function PropertyImageList(prop) {
|
|
|
258
308
|
var toggleAllPhotos = function () {
|
|
259
309
|
setIsImagePopupOpen(!isImagePopupOpen);
|
|
260
310
|
};
|
|
311
|
+
var floorPlanClickHandler = function () {
|
|
312
|
+
if (prop.floorPlanUrl) {
|
|
313
|
+
setIsFloorPlanPopupOpen(true);
|
|
314
|
+
}
|
|
315
|
+
};
|
|
316
|
+
var floorPlanPopupCloseHandler = function () {
|
|
317
|
+
setIsFloorPlanPopupOpen(false);
|
|
318
|
+
};
|
|
261
319
|
return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
|
|
262
320
|
React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
|
|
263
321
|
backgroundImage: "url(".concat((_a = prop.pictureUrls[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.url, ")"),
|
|
@@ -290,7 +348,7 @@ function PropertyImageList(prop) {
|
|
|
290
348
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
291
349
|
React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
|
|
292
350
|
React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
|
|
293
|
-
React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
|
|
351
|
+
React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: floorPlanClickHandler },
|
|
294
352
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
295
353
|
React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
|
|
296
354
|
React.createElement("span", { className: "listImgText" }, "Grundriss"))),
|
|
@@ -302,14 +360,15 @@ function PropertyImageList(prop) {
|
|
|
302
360
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
303
361
|
React.createElement("img", { src: iconMap, alt: "Map Icon" }),
|
|
304
362
|
React.createElement("span", { className: "listImgText" }, "Karte"))))),
|
|
305
|
-
isImagePopupOpen && React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls })
|
|
363
|
+
isImagePopupOpen && React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls }),
|
|
364
|
+
isFloorPlanPopupOpen && (React.createElement(FloorPlanPopup, { contentUrl: prop.floorPlanUrl, onCloseClick: floorPlanPopupCloseHandler }))));
|
|
306
365
|
}
|
|
307
366
|
|
|
308
367
|
var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
|
|
309
368
|
|
|
310
369
|
var locationIcon = "/static/media/locationIcon.0af399c78e0cdc20.svg";
|
|
311
370
|
|
|
312
|
-
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.
|
|
371
|
+
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";
|
|
313
372
|
styleInject(css_248z);
|
|
314
373
|
|
|
315
374
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
@@ -317,11 +376,11 @@ var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
|
317
376
|
function PropertyCard(props) {
|
|
318
377
|
var _a, _b;
|
|
319
378
|
var _c = useState(false); _c[0]; _c[1];
|
|
320
|
-
props.
|
|
321
|
-
? "".concat(props.baseUrl).concat(props.
|
|
379
|
+
var pictureUrl = props.property.pictures && props.property.pictures.length > 0
|
|
380
|
+
? "".concat(props.baseUrl).concat(props.property.pictures[0].contentUrl)
|
|
322
381
|
: noImageIcon;
|
|
323
|
-
return (React.createElement("div", { key: props.
|
|
324
|
-
backgroundImage: "url(".concat(
|
|
382
|
+
return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
|
|
383
|
+
backgroundImage: "url(".concat(pictureUrl, ")"),
|
|
325
384
|
backgroundSize: "cover",
|
|
326
385
|
backgroundPosition: "center",
|
|
327
386
|
}, onClick: props.onClick, role: "button" },
|
|
@@ -330,41 +389,46 @@ function PropertyCard(props) {
|
|
|
330
389
|
React.createElement("label", { className: "p-1 firstLabel d-flex flex-row justify-content-center align-items-center" },
|
|
331
390
|
React.createElement("img", { src: layerIcon, alt: "Location Icon", className: "layersVector" }),
|
|
332
391
|
React.createElement("span", { className: "layersText" }, "Grundriss")),
|
|
333
|
-
props.
|
|
392
|
+
props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels d-flex flex-row justify-content-center align-items-center" },
|
|
334
393
|
React.createElement("span", { className: "layersText p-1" }, "Denkmalschutz"))),
|
|
335
|
-
props.
|
|
336
|
-
React.createElement("span", { className: "layersText p-1" }, "Keller"))),
|
|
337
|
-
props.properties.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
|
|
338
|
-
React.createElement("span", { className: "layersText p-1" }, "Balkon")))),
|
|
394
|
+
props.property.basement && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
|
|
395
|
+
React.createElement("span", { className: "layersText p-1" }, "Keller")))),
|
|
339
396
|
React.createElement("div", { className: "d-flex align-items-center ms-2 start-0 gap-2" },
|
|
340
|
-
props.
|
|
397
|
+
props.property.terrace && (React.createElement("label", { className: "p-1 thirdLabels d-flex flex-row justify-content-center align-items-center " },
|
|
341
398
|
React.createElement("span", { className: "layersText" }, "Terrace"))),
|
|
342
|
-
props.
|
|
399
|
+
props.property.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
|
|
400
|
+
React.createElement("span", { className: "layersText p-1" }, "Balkon"))),
|
|
401
|
+
props.property.guestBathroom && (React.createElement("label", { className: "col-1 fourthLabels d-flex flex-row justify-content-center align-items-center " },
|
|
343
402
|
React.createElement("span", { className: "layersText p-1" }, "Gäste-WC"))))),
|
|
344
403
|
React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
|
|
345
404
|
React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2" },
|
|
346
|
-
React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1" }, (_b = (_a = props.
|
|
405
|
+
React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1" }, (_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.askingPrice) !== null && _b !== void 0 ? _b : 0,
|
|
347
406
|
" \u20AC")),
|
|
348
|
-
React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
|
|
407
|
+
React.createElement("div", { className: "d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2" },
|
|
349
408
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
|
|
350
|
-
React.createElement("span", { className: "locationText " }, props.
|
|
409
|
+
React.createElement("span", { className: "locationText text-truncate" }, props.property.city || "N/A")),
|
|
351
410
|
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" },
|
|
352
411
|
React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
|
|
353
|
-
+props.
|
|
412
|
+
+props.property.rooms,
|
|
354
413
|
React.createElement("br", null),
|
|
355
414
|
React.createElement("span", null, "Zimmer")),
|
|
356
415
|
React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
|
|
357
|
-
+props.
|
|
358
|
-
React.createElement("br", null),
|
|
359
|
-
+props.properties.bathrooms,
|
|
416
|
+
+props.property.bathrooms,
|
|
360
417
|
React.createElement("br", null),
|
|
361
418
|
React.createElement("span", null, "B\u00E4d")),
|
|
362
419
|
React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
|
|
363
|
-
props.
|
|
420
|
+
props.property.usableArea,
|
|
364
421
|
" m\u00B2",
|
|
365
422
|
React.createElement("br", null),
|
|
366
423
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
367
424
|
}
|
|
368
425
|
|
|
369
|
-
|
|
426
|
+
// Utility function to show a toast
|
|
427
|
+
var showToast = function (message, type) {
|
|
428
|
+
if (type === void 0) { type = "info"; }
|
|
429
|
+
toast(message, { type: type });
|
|
430
|
+
};
|
|
431
|
+
var ToastWrapper = function () { return (React.createElement(ToastContainer, { position: "top-right", autoClose: 5000, hideProgressBar: false, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true })); };
|
|
432
|
+
|
|
433
|
+
export { Button, FloorPlanPopup, Popup, PropertyCard, PropertyDetailsHeader, PropertyImageList, SharePopup, ToastWrapper, showToast };
|
|
370
434
|
//# sourceMappingURL=index.es.js.map
|