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