nestiq-component-library 1.1.166 → 1.1.168
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/NewPropertyCard/NewPropertyCard.d.ts +5 -0
- package/dist/index.es.js +33 -77
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +33 -77
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NewPropertyCard/NewPropertyCard.css +31 -6
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +77 -109
package/dist/index.es.js
CHANGED
|
@@ -459,7 +459,7 @@ function PropertyCard$1(props) {
|
|
|
459
459
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
460
460
|
}
|
|
461
461
|
|
|
462
|
-
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px
|
|
462
|
+
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n /* max-width: 1280px; */\r\n height: auto;\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.priceValue,\r\n.value {\r\n white-space: nowrap;\r\n}\r\n\r\n.price_label,\r\n.details {\r\n white-space: nowrap;\r\n}\r\n\r\n.listing-compact_c {\r\n /* max-width: 750px; */\r\n gap: 8px;\r\n padding: 24px;\r\n border-radius: 0 32px 32px 0;\r\n background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.wrapperCompanySec {\r\n height: 119px;\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\r\n.kontactbutton_cc {\r\n width: 180px;\r\n height: 43px;\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\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-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 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 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.labelTopClass {\r\n height: 32px;\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";
|
|
463
463
|
styleInject(css_248z$3);
|
|
464
464
|
|
|
465
465
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
@@ -477,15 +477,15 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
|
477
477
|
var immooly = "/static/media/imooly.b46514ac970e6052.svg";
|
|
478
478
|
|
|
479
479
|
function PropertyCard(props) {
|
|
480
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
481
|
-
var
|
|
482
|
-
var
|
|
483
|
-
var
|
|
480
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
481
|
+
var _p = useState(false); _p[0]; _p[1];
|
|
482
|
+
var _q = useState(null), mainImage = _q[0], setMainImage = _q[1];
|
|
483
|
+
var _r = useState(0), currentImageIndex = _r[0], setCurrentImageIndex = _r[1];
|
|
484
484
|
var imageListRef = useRef(null);
|
|
485
|
-
var _r = useState(false); _r[0]; _r[1];
|
|
486
485
|
var _s = useState(false); _s[0]; _s[1];
|
|
487
|
-
var _t = useState(false)
|
|
488
|
-
var _u = useState(false),
|
|
486
|
+
var _t = useState(false); _t[0]; _t[1];
|
|
487
|
+
var _u = useState(false), sharePopUp = _u[0], setSharePopUp = _u[1];
|
|
488
|
+
var _v = useState(false), isImagePopupOpen = _v[0], setIsImagePopupOpen = _v[1];
|
|
489
489
|
var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
|
|
490
490
|
? props.property.pictures
|
|
491
491
|
.filter(function (picture) { return picture.pictureType.id === 2; })
|
|
@@ -507,10 +507,6 @@ function PropertyCard(props) {
|
|
|
507
507
|
props.onFloorPlanClick(floorPlanImages);
|
|
508
508
|
}
|
|
509
509
|
};
|
|
510
|
-
var handleMessagPopUp = function () {
|
|
511
|
-
// setMessagPopUp(true);
|
|
512
|
-
props.messageOnClick();
|
|
513
|
-
};
|
|
514
510
|
var handleSharePopUp = function () {
|
|
515
511
|
setSharePopUp(true);
|
|
516
512
|
};
|
|
@@ -565,80 +561,40 @@ function PropertyCard(props) {
|
|
|
565
561
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
566
562
|
" ",
|
|
567
563
|
t.grundriss)))),
|
|
568
|
-
React.createElement("div", { className: "listing-
|
|
569
|
-
React.createElement("div", { className: "d-flex
|
|
570
|
-
React.createElement("
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
|
|
581
|
-
React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }))),
|
|
582
|
-
React.createElement("div", { style: {
|
|
583
|
-
paddingLeft: "32px",
|
|
584
|
-
paddingRight: "32px",
|
|
585
|
-
} },
|
|
586
|
-
" ",
|
|
587
|
-
React.createElement("div", { className: "location-wrapper" },
|
|
588
|
-
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
589
|
-
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
|
|
590
|
-
React.createElement("div", { className: "d-flex flex-row justify-content-between mt-3", style: {
|
|
591
|
-
paddingLeft: "32px",
|
|
592
|
-
paddingRight: "32px",
|
|
593
|
-
} },
|
|
594
|
-
React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6", style: { whiteSpace: "nowrap" } },
|
|
564
|
+
React.createElement("div", { className: "listing-compact_c justify-content-between d-flex flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
|
|
565
|
+
React.createElement("div", { className: "col-12 d-flex justify-content-end gap-2" },
|
|
566
|
+
React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
|
|
567
|
+
React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" })),
|
|
568
|
+
React.createElement("div", { className: "col-11" },
|
|
569
|
+
React.createElement("span", { className: "propertyTitle align-items-start ", onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title)),
|
|
570
|
+
React.createElement("div", { className: "col-12" },
|
|
571
|
+
React.createElement("div", { className: "location-wrapper" },
|
|
572
|
+
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
573
|
+
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
|
|
574
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between" },
|
|
575
|
+
React.createElement("span", { className: "priceValue justify-content-center align-items-center" },
|
|
595
576
|
formatPrice((_l = (_k = (_j = props.property) === null || _j === void 0 ? void 0 : _j.evaluation) === null || _k === void 0 ? void 0 : _k.askingPrice) !== null && _l !== void 0 ? _l : 0),
|
|
596
577
|
" \u20AC",
|
|
597
578
|
React.createElement("div", { className: "price_label", style: { whiteSpace: "nowrap" } }, t.kaufpreis)),
|
|
598
|
-
React.createElement("span", { className: "text-dark value
|
|
579
|
+
React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
|
|
599
580
|
props.property.constructedArea,
|
|
600
581
|
" m\u00B2",
|
|
601
582
|
React.createElement("div", { className: "details", style: { whiteSpace: "nowrap" } }, t.wohnflache)),
|
|
602
|
-
React.createElement("span", { className: "text-dark value
|
|
583
|
+
React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
|
|
603
584
|
+((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
|
|
604
585
|
React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
|
|
605
|
-
React.createElement("div", { className: "
|
|
606
|
-
React.createElement("div", { className: "
|
|
607
|
-
|
|
608
|
-
React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
|
|
609
|
-
props.property.basement && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|
|
610
|
-
React.createElement("span", { className: "layersText" }, "Keller"))),
|
|
611
|
-
props.property.balcony && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|
|
612
|
-
React.createElement("span", { className: "layersText" }, "Balkon"))),
|
|
613
|
-
props.property.terrace && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center " },
|
|
614
|
-
React.createElement("span", { className: "layersText" }, "Terrace"))),
|
|
615
|
-
props.property.guestBathroom && (React.createElement("label", { className: "chipLabel" },
|
|
616
|
-
React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
|
|
617
|
-
props.Impliment && (React.createElement("div", { className: "", style: {
|
|
618
|
-
paddingLeft: "32px",
|
|
619
|
-
paddingRight: "32px",
|
|
620
|
-
} },
|
|
621
|
-
React.createElement("div", { className: "Frame-136 d-flex flex-row" },
|
|
622
|
-
React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
|
|
623
|
-
React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
|
|
624
|
-
React.createElement("div", { className: "ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center" },
|
|
625
|
-
React.createElement("span", { className: "fw-bold" }, "Herr Florian Gauss"),
|
|
626
|
-
React.createElement("span", null, "Immogart UGh"))))),
|
|
627
|
-
!props.Impliment && (React.createElement("div", { className: "d-lex flex-column ", style: {
|
|
628
|
-
paddingLeft: "32px",
|
|
629
|
-
paddingRight: "32px",
|
|
630
|
-
} },
|
|
631
|
-
React.createElement("div", { className: "Frame-136 d-flex flex-row" },
|
|
632
|
-
React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
|
|
586
|
+
React.createElement("div", { className: "d-lex flex-column " },
|
|
587
|
+
React.createElement("div", { className: "wrapperCompanySec d-flex justify-content-around flex-row" },
|
|
588
|
+
React.createElement("div", { className: "d-flex flex-column col-4 justify-content-between " },
|
|
633
589
|
React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
|
|
634
|
-
React.createElement("div", { className: "d-flex flex-column
|
|
635
|
-
React.createElement("div", { className: "d-flex flex-column
|
|
636
|
-
React.createElement("span", { className: "" },
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
React.createElement("span", { className: "
|
|
640
|
-
|
|
641
|
-
" "))))))
|
|
590
|
+
React.createElement("div", { className: "d-flex flex-column align-items-center justify-content-center" },
|
|
591
|
+
React.createElement("div", { className: "d-flex flex-column text-center" },
|
|
592
|
+
React.createElement("span", { className: "fw-bold" }, props.userData
|
|
593
|
+
? "".concat(props.userData.firstname, " ").concat(props.userData.lastname)
|
|
594
|
+
: "Firstname Lastname"),
|
|
595
|
+
React.createElement("span", { className: "fst-italic fw-normal" }, ((_o = props.userData) === null || _o === void 0 ? void 0 : _o.company)
|
|
596
|
+
? props.userData.company
|
|
597
|
+
: "Your Company")))))),
|
|
642
598
|
sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } }),
|
|
643
599
|
isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsImagePopupOpen(false); } }))));
|
|
644
600
|
}
|