nestiq-component-library 1.0.46 → 1.1.0
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 +4 -3
- 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/functions/util.d.ts +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.es.js +105 -36
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +108 -34
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
- package/rollup.config.mjs +35 -35
- package/src/components/FloorPlanPopup/FloorPlanPopup.css +3 -0
- package/src/components/FloorPlanPopup/FloorPlanPopup.tsx +83 -0
- package/src/components/ImageListPopup/ImageListPopup.css +83 -107
- package/src/components/ImageListPopup/ImageListPopup.tsx +141 -140
- package/src/components/Popup/Popup.css +0 -13
- package/src/components/Popup/Popup.tsx +29 -28
- package/src/components/PropertyCard/PropertyCard.css +6 -5
- package/src/components/PropertyCard/PropertyCard.tsx +136 -135
- package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +80 -84
- package/src/components/PropertyImageList/PropertyImageList.tsx +198 -173
- package/src/components/SharePopup/{PopUp.css → SharePopup.css} +0 -14
- package/src/components/SharePopup/{PopUp.tsx → SharePopup.tsx} +139 -140
- package/src/components/ToastWrapper/ToastWrapper.tsx +25 -0
- package/src/functions/util.ts +3 -0
- package/src/index.tsx +20 -7
- package/src/styles/common.css +12 -0
- package/dist/assets/images/Icon_rightArrow.svg +0 -3
- package/dist/assets/images/LayersIcon.svg +0 -5
- package/dist/assets/images/blackarrow-Right.svg +0 -3
- package/dist/assets/images/blckarrow-Left.svg +0 -3
- package/dist/assets/images/chevron-left.svg +0 -3
- package/dist/assets/images/default-property.jpg +0 -0
- package/dist/assets/images/heartIcon.svg +0 -3
- package/dist/assets/images/icon-close-white.webp +0 -0
- package/dist/assets/images/icon_close 2.e41bb9a4db48e048.png +0 -0
- package/dist/assets/images/icon_close_2.png +0 -0
- package/dist/assets/images/icon_gallery.svg +0 -4
- package/dist/assets/images/icon_map.svg +0 -10
- package/dist/assets/images/icon_share_1.svg +0 -3
- package/dist/assets/images/layer_icon.svg +0 -5
- package/dist/assets/images/locationIcon.svg +0 -4
- package/dist/assets/images/locationIconBlack.svg +0 -4
- package/dist/assets/images/no-image-icon.png +0 -0
- package/dist/components/Button/Button.js +0 -6
- package/dist/components/ImageListPopup/ImageListPopup.js +0 -26
- package/dist/components/Popup/Popup.js +0 -12
- package/dist/components/SharePopup/PopUp.d.ts +0 -7
- 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 {\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";
|
|
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,26 +362,31 @@ 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";
|
|
318
377
|
|
|
378
|
+
function formatPrice(number) {
|
|
379
|
+
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
380
|
+
}
|
|
381
|
+
|
|
319
382
|
function PropertyCard(props) {
|
|
320
|
-
var _a, _b;
|
|
321
|
-
var
|
|
322
|
-
props.
|
|
323
|
-
? "".concat(props.baseUrl).concat(props.
|
|
383
|
+
var _a, _b, _c;
|
|
384
|
+
var _d = React.useState(false); _d[0]; _d[1];
|
|
385
|
+
var pictureUrl = props.property.pictures && props.property.pictures.length > 0
|
|
386
|
+
? "".concat(props.baseUrl).concat(props.property.pictures[0].contentUrl)
|
|
324
387
|
: noImageIcon;
|
|
325
|
-
return (React.createElement("div", { key: props.
|
|
326
|
-
backgroundImage: "url(".concat(
|
|
388
|
+
return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
|
|
389
|
+
backgroundImage: "url(".concat(pictureUrl, ")"),
|
|
327
390
|
backgroundSize: "cover",
|
|
328
391
|
backgroundPosition: "center",
|
|
329
392
|
}, onClick: props.onClick, role: "button" },
|
|
@@ -332,45 +395,56 @@ function PropertyCard(props) {
|
|
|
332
395
|
React.createElement("label", { className: "p-1 firstLabel d-flex flex-row justify-content-center align-items-center" },
|
|
333
396
|
React.createElement("img", { src: layerIcon, alt: "Location Icon", className: "layersVector" }),
|
|
334
397
|
React.createElement("span", { className: "layersText" }, "Grundriss")),
|
|
335
|
-
props.
|
|
398
|
+
props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels d-flex flex-row justify-content-center align-items-center" },
|
|
336
399
|
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")))),
|
|
400
|
+
props.property.basement && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
|
|
401
|
+
React.createElement("span", { className: "layersText p-1" }, "Keller")))),
|
|
341
402
|
React.createElement("div", { className: "d-flex align-items-center ms-2 start-0 gap-2" },
|
|
342
|
-
props.
|
|
403
|
+
props.property.terrace && (React.createElement("label", { className: "p-1 thirdLabels d-flex flex-row justify-content-center align-items-center " },
|
|
343
404
|
React.createElement("span", { className: "layersText" }, "Terrace"))),
|
|
344
|
-
props.
|
|
405
|
+
props.property.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
|
|
406
|
+
React.createElement("span", { className: "layersText p-1" }, "Balkon"))),
|
|
407
|
+
props.property.guestBathroom && (React.createElement("label", { className: "col-1 fourthLabels d-flex flex-row justify-content-center align-items-center " },
|
|
345
408
|
React.createElement("span", { className: "layersText p-1" }, "Gäste-WC"))))),
|
|
346
409
|
React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
|
|
347
410
|
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" },
|
|
411
|
+
React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1" },
|
|
412
|
+
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),
|
|
349
413
|
" \u20AC")),
|
|
350
|
-
React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
|
|
414
|
+
React.createElement("div", { className: "d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2" },
|
|
351
415
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
|
|
352
|
-
React.createElement("span", { className: "locationText " }, props.
|
|
416
|
+
React.createElement("span", { className: "locationText text-truncate" }, props.property.city || "N/A")),
|
|
353
417
|
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
418
|
React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
|
|
355
|
-
+props.
|
|
419
|
+
+props.property.rooms,
|
|
356
420
|
React.createElement("br", null),
|
|
357
421
|
React.createElement("span", null, "Zimmer")),
|
|
358
422
|
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,
|
|
423
|
+
+props.property.bathrooms,
|
|
362
424
|
React.createElement("br", null),
|
|
363
425
|
React.createElement("span", null, "B\u00E4d")),
|
|
364
426
|
React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
|
|
365
|
-
props.
|
|
427
|
+
props.property.usableArea,
|
|
366
428
|
" m\u00B2",
|
|
367
429
|
React.createElement("br", null),
|
|
368
430
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
369
431
|
}
|
|
370
432
|
|
|
433
|
+
// Utility function to show a toast
|
|
434
|
+
var showToast = function (message, type) {
|
|
435
|
+
if (type === void 0) { type = "info"; }
|
|
436
|
+
reactToastify.toast(message, { type: type });
|
|
437
|
+
};
|
|
438
|
+
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 })); };
|
|
439
|
+
|
|
371
440
|
exports.Button = Button;
|
|
441
|
+
exports.FloorPlanPopup = FloorPlanPopup;
|
|
372
442
|
exports.Popup = Popup;
|
|
373
443
|
exports.PropertyCard = PropertyCard;
|
|
374
444
|
exports.PropertyDetailsHeader = PropertyDetailsHeader;
|
|
375
445
|
exports.PropertyImageList = PropertyImageList;
|
|
446
|
+
exports.SharePopup = SharePopup;
|
|
447
|
+
exports.ToastWrapper = ToastWrapper;
|
|
448
|
+
exports.formatPrice = formatPrice;
|
|
449
|
+
exports.showToast = showToast;
|
|
376
450
|
//# sourceMappingURL=index.js.map
|