nestiq-component-library 1.1.141 → 1.1.143
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/assets/images/{card-arrow-left.28090aba4b4f2006.svg → card-arrow-left.55343410142dad3f.svg} +4 -4
- package/dist/assets/images/{card-arrow-right.c60af4cbbd49f3aa.svg → card-arrow-right.60b3bf0e34c1800d.svg} +4 -4
- package/dist/assets/images/{imooly.890e3dd01ea33574.svg → imooly.b46514ac970e6052.svg} +7 -7
- package/dist/assets/images/{more.1e158adc48fbb406.svg → more.ce14789c8d37e327.svg} +12 -12
- package/dist/index.es.js +68 -71
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +68 -71
- package/dist/index.js.map +1 -1
- package/nestiq-component-library-1.1.143.tgz +0 -0
- package/package.json +1 -1
- package/rollup.config.mjs +36 -36
- package/src/assets/images/card-arrow-left.svg +4 -4
- package/src/assets/images/card-arrow-right.svg +4 -4
- package/src/assets/images/imooly.svg +7 -7
- package/src/assets/images/more.svg +12 -12
- package/src/components/FloorPlanPopup/FloorPlanPopup.css +3 -3
- package/src/components/FloorPlanPopup/FloorPlanPopup.tsx +83 -83
- package/src/components/ImageListPopup/ImageListPopup.css +83 -83
- package/src/components/ImageListPopup/ImageListPopup.tsx +141 -141
- package/src/components/NewPropertyCard/NewPropertyCard.css +52 -43
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +358 -359
- package/src/components/Popup/Popup.tsx +29 -29
- package/src/components/PropertyImageList/PropertyImageList.css +24 -6
- package/src/components/PropertyImageList/PropertyImageList.tsx +213 -206
- package/src/components/ToastWrapper/ToastWrapper.tsx +25 -25
- package/src/models/message.model.ts +7 -7
- 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.0af399c78e0cdc20.svg +0 -4
- 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/MessagePopup/ErrorPopup.d.ts +0 -7
- package/dist/components/Popup/Popup.js +0 -12
- package/dist/components/SharePopup/PopUp.d.ts +0 -7
package/dist/index.js
CHANGED
|
@@ -180,10 +180,10 @@ var iconMap = "/static/media/icon_map.2318ec664c3e615e.svg";
|
|
|
180
180
|
|
|
181
181
|
var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
182
182
|
|
|
183
|
-
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size:
|
|
183
|
+
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 88vw;\r\n }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 58vw;\r\n }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n\r\n.image-thumbnail {\r\n position: relative;\r\n transition: opacity 0.3s ease-in-out;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n filter: none;\r\n border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
|
|
184
184
|
styleInject(css_248z$6);
|
|
185
185
|
|
|
186
|
-
var css_248z$5 = ".popup-header {\
|
|
186
|
+
var css_248z$5 = ".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";
|
|
187
187
|
styleInject(css_248z$5);
|
|
188
188
|
|
|
189
189
|
var iconClose = "/static/media/close.b5ce9141e80c688b.png";
|
|
@@ -301,20 +301,21 @@ function PropertyImageList(prop) {
|
|
|
301
301
|
var _d = React.useState(false), isFloorPlanPopupOpen = _d[0], setIsFloorPlanPopupOpen = _d[1];
|
|
302
302
|
var imageListRef = React.useRef(null);
|
|
303
303
|
var handleArrowClickInMainImage = function (direction) {
|
|
304
|
-
if (prop.pictureUrls.length
|
|
304
|
+
if (!prop.pictureUrls.length)
|
|
305
305
|
return;
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
prop.pictureUrls.length;
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
306
|
+
setCurrentImageIndex(function (prevIndex) {
|
|
307
|
+
var newIndex;
|
|
308
|
+
if (direction === "left") {
|
|
309
|
+
newIndex =
|
|
310
|
+
(prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
|
|
311
|
+
}
|
|
312
|
+
else if (direction === "right") {
|
|
313
|
+
newIndex = (prevIndex + 1) % prop.pictureUrls.length;
|
|
314
|
+
}
|
|
315
|
+
return newIndex || 0;
|
|
316
|
+
});
|
|
316
317
|
imageListRef.current.scrollTo({
|
|
317
|
-
left:
|
|
318
|
+
left: currentImageIndex * (direction === "left" ? -150 : 150),
|
|
318
319
|
behavior: "smooth",
|
|
319
320
|
});
|
|
320
321
|
};
|
|
@@ -340,13 +341,19 @@ function PropertyImageList(prop) {
|
|
|
340
341
|
React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
|
|
341
342
|
React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
|
|
342
343
|
React.createElement("div", { className: "d-none d-md-block" },
|
|
343
|
-
React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12
|
|
344
|
-
React.createElement("div", { className: "\tcol-lg-6 col-6 d-flex flex-row
|
|
344
|
+
React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12 secondList" },
|
|
345
|
+
React.createElement("div", { className: "\tcol-lg-6 col-6 d-flex flex-row py-0 px-1" },
|
|
345
346
|
React.createElement("div", { className: "\t col-12 position-relative d-flex justify-content-center" },
|
|
346
347
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
|
|
347
348
|
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
348
349
|
React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
|
|
349
|
-
React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-
|
|
350
|
+
React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden", ref: imageListRef }, prop.pictureUrls.length > 0 && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex image-thumbnail ".concat(index === currentImageIndex
|
|
351
|
+
? "selected"
|
|
352
|
+
: "greyed-out", " ").concat(index === 0
|
|
353
|
+
? "ms-1"
|
|
354
|
+
: index === prop.pictureUrls.length - 1
|
|
355
|
+
? "me-1"
|
|
356
|
+
: ""), onClick: function () {
|
|
350
357
|
setCurrentImageIndex(index);
|
|
351
358
|
imageListRef.current.scrollTo({
|
|
352
359
|
left: index * 150,
|
|
@@ -355,18 +362,18 @@ function PropertyImageList(prop) {
|
|
|
355
362
|
}, role: "button" },
|
|
356
363
|
React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
|
|
357
364
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
|
|
358
|
-
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3
|
|
365
|
+
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
359
366
|
React.createElement("img", { src: iconArrowRight, className: "arroIconColour ", alt: "Right Arrow" }))))),
|
|
360
367
|
React.createElement("div", { className: "col-7 col-lg-6 d-flex flex-row" },
|
|
361
|
-
React.createElement("div", { className: "col-lg-4 col-4
|
|
368
|
+
React.createElement("div", { className: "col-lg-4 col-4 py-0 px-1", role: "button", onClick: toggleAllPhotos },
|
|
362
369
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
363
370
|
React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
|
|
364
371
|
React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
|
|
365
|
-
React.createElement("div", { className: "col-lg-4 col-3
|
|
372
|
+
React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: floorPlanClickHandler },
|
|
366
373
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
367
374
|
React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
|
|
368
375
|
React.createElement("span", { className: "listImgText" }, "Grundriss"))),
|
|
369
|
-
React.createElement("div", { className: "col-lg-4 col-3
|
|
376
|
+
React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: function () {
|
|
370
377
|
return window.scrollTo({
|
|
371
378
|
top: document.documentElement.scrollHeight,
|
|
372
379
|
});
|
|
@@ -438,22 +445,22 @@ function PropertyCard$1(props) {
|
|
|
438
445
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
439
446
|
}
|
|
440
447
|
|
|
441
|
-
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\r\n\r\n @media (min-width: 1500px) {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n.listing-compact {\r\n align-self: stretch;\r\n max-width: 750px;\r\n flex-direction: column;\r\n gap:
|
|
448
|
+
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border-radius: 32px;\r\n\r\n @media (min-width: 1500px) {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n.listing-compact {\r\n align-self: stretch;\r\n max-width: 750px;\r\n flex-direction: column;\r\n gap: 32px;\r\n border-radius: 0 32px 32px 0;\r\n background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.cc-height {\r\n height: 460px;\r\n}\r\n\r\n.listing-height {\r\n height: 422px;\r\n}\r\n\r\n.cardStyles {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 460px;\r\n border-radius: 32px 0px 0px 32px !important;\r\n}\r\n.cardTag {\r\n width: 75px;\r\n height: 30px;\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: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n border: solid 1px #313131;\r\n background-color: #fff;\r\n}\r\n.Grundriss {\r\n width: 120px;\r\n height: 30px;\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: 10px;\r\n font-size: 14px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.Frame-136 {\r\n height: 85px;\r\n align-self: stretch;\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: 16px;\r\n padding: 10px 16px;\r\n border-radius: 16px;\r\n border: solid 1px rgba(0, 0, 0, 0.1);\r\n background-color: #fff;\r\n}\r\n.kontactbutton {\r\n width: 198px;\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: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.kontact-button-text {\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: #fff;\r\n}\r\n.propertyTitle {\r\n display: flex;\r\n flex-grow: 0;\r\n font-size: 24px;\r\n font-weight: 580;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: start;\r\n color: #313131;\r\n}\r\n\r\n.chipLabel {\r\n height: 30px;\r\n padding: 0 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 #000;\r\n background-color: #fff;\r\n display: flex;\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 padding: 0 8px;\r\n font-size: 14px;\r\n color: #1b1b1b;\r\n line-height: 2.14;\r\n text-wrap: nowrap;\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: #161410;\r\n background-color: #181716;\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\r\n.location-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.location-icon {\r\n width: 16px;\r\n height: 21px;\r\n flex-grow: 0;\r\n object-fit: contain;\r\n}\r\n\r\n.locationTexts {\r\n font-size: 16px;\r\n color: #344041;\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: #ffffff;\r\n}\r\n\r\n.details {\r\n font-size: 16px;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.price_label {\r\n font-size: 16px;\r\n text-align: left;\r\n color: #344041;\r\n}\r\n\r\n.value {\r\n font-size: 20px;\r\n text-align: center;\r\n font-weight: 500;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n line-height: 1;\r\n}\r\n.priceValue {\r\n font-size: 20px;\r\n font-weight: 500;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n line-height: 1;\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.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 padding: 0 2rem;\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";
|
|
442
449
|
styleInject(css_248z$3);
|
|
443
450
|
|
|
444
451
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
445
452
|
|
|
446
453
|
var shareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
|
|
447
454
|
|
|
448
|
-
var moreIcon = "/static/media/more.
|
|
455
|
+
var moreIcon = "/static/media/more.ce14789c8d37e327.svg";
|
|
449
456
|
|
|
450
|
-
var arrowLeft = "/static/media/card-arrow-left.
|
|
457
|
+
var arrowLeft = "/static/media/card-arrow-left.55343410142dad3f.svg";
|
|
451
458
|
|
|
452
|
-
var arrowRight = "/static/media/card-arrow-right.
|
|
459
|
+
var arrowRight = "/static/media/card-arrow-right.60b3bf0e34c1800d.svg";
|
|
453
460
|
|
|
454
461
|
var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
455
462
|
|
|
456
|
-
var immooly = "/static/media/imooly.
|
|
463
|
+
var immooly = "/static/media/imooly.b46514ac970e6052.svg";
|
|
457
464
|
|
|
458
465
|
function PropertyCard(props) {
|
|
459
466
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -524,68 +531,59 @@ function PropertyCard(props) {
|
|
|
524
531
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
525
532
|
" ",
|
|
526
533
|
"Grundriss")))),
|
|
527
|
-
React.createElement("div", { className: "listing-compact d-flex flex-column col-6" },
|
|
528
|
-
React.createElement("div", { className: "d-flex flex-
|
|
529
|
-
React.createElement("
|
|
534
|
+
React.createElement("div", { className: "listing-compact d-flex flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
|
|
535
|
+
React.createElement("div", { className: "d-flex flex-column gap-3" },
|
|
536
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
|
|
537
|
+
React.createElement("span", { className: "propertyTitle align-items-start ", style: {
|
|
538
|
+
paddingLeft: "32px",
|
|
539
|
+
paddingTop: "32px",
|
|
540
|
+
}, onClick: props.onClick, role: "button" }, (_c = props.property.expose) === null || _c === void 0 ? void 0 : _c.title),
|
|
541
|
+
React.createElement("div", { className: "d-flex gap-2", style: {
|
|
542
|
+
paddingRight: "32px",
|
|
543
|
+
paddingTop: "21px",
|
|
544
|
+
paddingLeft: "10px",
|
|
545
|
+
} },
|
|
546
|
+
React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
|
|
547
|
+
React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }))),
|
|
548
|
+
React.createElement("div", { style: {
|
|
530
549
|
paddingLeft: "32px",
|
|
531
|
-
paddingTop: "32px",
|
|
532
|
-
}, onClick: props.onClick, role: "button" }, (_c = props.property.expose) === null || _c === void 0 ? void 0 : _c.title),
|
|
533
|
-
React.createElement("div", { className: "d-flex gap-2", style: {
|
|
534
550
|
paddingRight: "32px",
|
|
535
|
-
paddingTop: "21px",
|
|
536
|
-
paddingLeft: "76px",
|
|
537
551
|
} },
|
|
538
|
-
|
|
539
|
-
React.createElement("
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
paddingRight: "32px",
|
|
543
|
-
paddingTop: "28px",
|
|
544
|
-
} },
|
|
545
|
-
" ",
|
|
546
|
-
React.createElement("div", { className: "d-flex " },
|
|
547
|
-
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
|
|
548
|
-
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
|
|
552
|
+
" ",
|
|
553
|
+
React.createElement("div", { className: "location-wrapper" },
|
|
554
|
+
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
555
|
+
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
|
|
549
556
|
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between ", style: {
|
|
550
557
|
paddingLeft: "32px",
|
|
551
558
|
paddingRight: "32px",
|
|
552
|
-
paddingTop: "28px",
|
|
553
559
|
} },
|
|
554
560
|
React.createElement("span", { className: "priceValue col-lg-4 col-md-4 col-sm-6 " },
|
|
555
561
|
formatPrice((_f = (_e = (_d = props.property) === null || _d === void 0 ? void 0 : _d.evaluation) === null || _e === void 0 ? void 0 : _e.askingPrice) !== null && _f !== void 0 ? _f : 0),
|
|
556
562
|
" \u20AC",
|
|
557
|
-
React.createElement("
|
|
558
|
-
|
|
559
|
-
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7 " },
|
|
563
|
+
React.createElement("div", { className: "price_label" }, "Kaufpreis")),
|
|
564
|
+
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7" },
|
|
560
565
|
props.property.constructedArea,
|
|
561
566
|
" m\u00B2",
|
|
562
|
-
React.createElement("
|
|
563
|
-
React.createElement("span", { className: "details" },
|
|
564
|
-
React.createElement("span", null, "Wohnfl\u00E4che"))),
|
|
567
|
+
React.createElement("div", { className: "details" }, "Wohnfl\u00E4che")),
|
|
565
568
|
React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-6 text-truncate " },
|
|
566
569
|
+((_g = props.property) === null || _g === void 0 ? void 0 : _g.rooms),
|
|
567
|
-
React.createElement("
|
|
568
|
-
React.createElement("span", { className: "details" },
|
|
569
|
-
" ",
|
|
570
|
-
React.createElement("span", null, "Zimmer"))),
|
|
570
|
+
React.createElement("div", { className: "details" }, "Zimmer")),
|
|
571
571
|
React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate " },
|
|
572
572
|
+props.property.propertyArea,
|
|
573
573
|
" m\u00B2",
|
|
574
|
-
React.createElement("
|
|
575
|
-
|
|
576
|
-
React.createElement("span", null, "Grundst\u00FCck")))),
|
|
577
|
-
React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "28px" } },
|
|
574
|
+
React.createElement("div", { className: "details" }, "Grundst\u00FCck"))),
|
|
575
|
+
React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
|
|
578
576
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
579
|
-
props.property.historicalProtection && (React.createElement("label", { className: "
|
|
580
|
-
React.createElement("span", { className: "layersText
|
|
581
|
-
props.property.basement && (React.createElement("label", { className: "
|
|
582
|
-
React.createElement("span", { className: "layersText
|
|
583
|
-
props.property.balcony && (React.createElement("label", { className: "
|
|
584
|
-
React.createElement("span", { className: "layersText
|
|
585
|
-
props.property.terrace && (React.createElement("label", { className: "
|
|
577
|
+
props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|
|
578
|
+
React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
|
|
579
|
+
props.property.basement && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|
|
580
|
+
React.createElement("span", { className: "layersText" }, "Keller"))),
|
|
581
|
+
props.property.balcony && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|
|
582
|
+
React.createElement("span", { className: "layersText" }, "Balkon"))),
|
|
583
|
+
props.property.terrace && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center " },
|
|
586
584
|
React.createElement("span", { className: "layersText" }, "Terrace"))),
|
|
587
|
-
props.property.guestBathroom && (React.createElement("label", { className: "
|
|
588
|
-
React.createElement("span", { className: "layersText
|
|
585
|
+
props.property.guestBathroom && (React.createElement("label", { className: "chipLabel" },
|
|
586
|
+
React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
|
|
589
587
|
props.Impliment && (React.createElement("div", { className: "", style: {
|
|
590
588
|
paddingLeft: "32px",
|
|
591
589
|
paddingRight: "32px",
|
|
@@ -603,13 +601,12 @@ function PropertyCard(props) {
|
|
|
603
601
|
!props.Impliment && (React.createElement("div", { className: "", style: {
|
|
604
602
|
paddingLeft: "32px",
|
|
605
603
|
paddingRight: "32px",
|
|
606
|
-
paddingBottom: "32px",
|
|
607
604
|
} },
|
|
608
605
|
React.createElement("div", { className: "Frame-136 d-flex flex-row" },
|
|
609
606
|
React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
|
|
610
607
|
React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
|
|
611
608
|
React.createElement("div", { className: "d-flex flex-column flex-lg-row justify-content-between" },
|
|
612
|
-
React.createElement("div", { className: "d-flex flex-column col-
|
|
609
|
+
React.createElement("div", { className: "d-flex flex-column col-6" },
|
|
613
610
|
React.createElement("span", { className: "" }, "Herr Florian Gauss"),
|
|
614
611
|
React.createElement("span", null, "Immogart UGh")),
|
|
615
612
|
React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
|