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