nestiq-component-library 1.1.163 → 1.1.165
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 +6 -0
- package/dist/index.es.js +27 -25
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +27 -25
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NewPropertyCard/NewPropertyCard.css +11 -3
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +44 -11
package/dist/index.js
CHANGED
|
@@ -455,7 +455,7 @@ function PropertyCard$1(props) {
|
|
|
455
455
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
456
456
|
}
|
|
457
457
|
|
|
458
|
-
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 max-width: 750px;\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-
|
|
458
|
+
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 {\r\n max-width: 750px;\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-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";
|
|
459
459
|
styleInject(css_248z$3);
|
|
460
460
|
|
|
461
461
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
@@ -473,15 +473,15 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
|
473
473
|
var immooly = "/static/media/imooly.b46514ac970e6052.svg";
|
|
474
474
|
|
|
475
475
|
function PropertyCard(props) {
|
|
476
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
477
|
-
var _j = React.useState(false); _j[0]; _j[1];
|
|
478
|
-
var _k = React.useState(null), mainImage = _k[0], setMainImage = _k[1];
|
|
479
|
-
var _l = React.useState(0), currentImageIndex = _l[0], setCurrentImageIndex = _l[1];
|
|
480
|
-
var imageListRef = React.useRef(null);
|
|
481
|
-
var _m = React.useState(false); _m[0]; _m[1];
|
|
476
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
482
477
|
var _o = React.useState(false); _o[0]; _o[1];
|
|
483
|
-
var _p = React.useState(
|
|
484
|
-
var _q = React.useState(
|
|
478
|
+
var _p = React.useState(null), mainImage = _p[0], setMainImage = _p[1];
|
|
479
|
+
var _q = React.useState(0), currentImageIndex = _q[0], setCurrentImageIndex = _q[1];
|
|
480
|
+
var imageListRef = React.useRef(null);
|
|
481
|
+
var _r = React.useState(false); _r[0]; _r[1];
|
|
482
|
+
var _s = React.useState(false); _s[0]; _s[1];
|
|
483
|
+
var _t = React.useState(false), sharePopUp = _t[0], setSharePopUp = _t[1];
|
|
484
|
+
var _u = React.useState(false), isImagePopupOpen = _u[0], setIsImagePopupOpen = _u[1];
|
|
485
485
|
var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
|
|
486
486
|
? props.property.pictures
|
|
487
487
|
.filter(function (picture) { return picture.pictureType.id === 2; })
|
|
@@ -535,6 +535,12 @@ function PropertyCard(props) {
|
|
|
535
535
|
}
|
|
536
536
|
};
|
|
537
537
|
// const boosted = "true";
|
|
538
|
+
var t = {
|
|
539
|
+
kaufpreis: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.kaufpreis) || "Kaufpreis",
|
|
540
|
+
wohnflache: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.wohnflache) || "Wohnfläche",
|
|
541
|
+
zimmer: ((_f = props.translations) === null || _f === void 0 ? void 0 : _f.zimmer) || "Zimmer",
|
|
542
|
+
grundriss: ((_g = props.translations) === null || _g === void 0 ? void 0 : _g.grundriss) || "Grundriss",
|
|
543
|
+
};
|
|
538
544
|
return (React.createElement("div", { className: "d-flex flex-row property-card" },
|
|
539
545
|
React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6" },
|
|
540
546
|
React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
|
|
@@ -554,14 +560,14 @@ function PropertyCard(props) {
|
|
|
554
560
|
React.createElement("div", { className: "Grundriss kontact-button-text ms-2 ", role: "button", onClick: function () { return handleFloorPlanButton(); }, style: { marginBottom: "16px" } },
|
|
555
561
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
556
562
|
" ",
|
|
557
|
-
|
|
563
|
+
t.grundriss)))),
|
|
558
564
|
React.createElement("div", { className: "listing-compact d-flex align-self-end flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
|
|
559
565
|
React.createElement("div", { className: "d-flex flex-column gap-3 mb-4 justify-content-between", style: { height: "104px" } },
|
|
560
566
|
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
|
|
561
567
|
React.createElement("span", { className: "propertyTitle align-items-start ", style: {
|
|
562
568
|
paddingLeft: "32px",
|
|
563
569
|
paddingTop: "32px",
|
|
564
|
-
}, onClick: props.onClick, role: "button" }, (
|
|
570
|
+
}, onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title),
|
|
565
571
|
React.createElement("div", { className: "d-flex gap-2", style: {
|
|
566
572
|
paddingRight: "32px",
|
|
567
573
|
paddingTop: "21px",
|
|
@@ -574,28 +580,24 @@ function PropertyCard(props) {
|
|
|
574
580
|
paddingRight: "32px",
|
|
575
581
|
} },
|
|
576
582
|
" ",
|
|
577
|
-
React.createElement("div", { className: "location-wrapper
|
|
583
|
+
React.createElement("div", { className: "location-wrapper" },
|
|
578
584
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
579
585
|
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
|
|
580
|
-
React.createElement("div", { className: "d-flex
|
|
586
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between mt-3", style: {
|
|
581
587
|
paddingLeft: "32px",
|
|
582
588
|
paddingRight: "32px",
|
|
583
589
|
} },
|
|
584
|
-
React.createElement("span", { className: "priceValue col-lg-
|
|
585
|
-
formatPrice((
|
|
590
|
+
React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6", style: { whiteSpace: "nowrap" } },
|
|
591
|
+
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),
|
|
586
592
|
" \u20AC",
|
|
587
|
-
React.createElement("div", { className: "price_label" },
|
|
588
|
-
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7" },
|
|
593
|
+
React.createElement("div", { className: "price_label", style: { whiteSpace: "nowrap" } }, t.kaufpreis)),
|
|
594
|
+
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7", style: { whiteSpace: "nowrap" } },
|
|
589
595
|
props.property.constructedArea,
|
|
590
596
|
" m\u00B2",
|
|
591
|
-
React.createElement("div", { className: "details" },
|
|
592
|
-
React.createElement("span", { className: "text-dark value col-lg-
|
|
593
|
-
+((
|
|
594
|
-
React.createElement("div", { className: "details" },
|
|
595
|
-
React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate " },
|
|
596
|
-
+props.property.propertyArea,
|
|
597
|
-
" m\u00B2",
|
|
598
|
-
React.createElement("div", { className: "details" }, "Grundst\u00FCck"))),
|
|
597
|
+
React.createElement("div", { className: "details", style: { whiteSpace: "nowrap" } }, t.wohnflache)),
|
|
598
|
+
React.createElement("span", { className: "text-dark value text-center col-lg-2 col-md-2 col-sm-5 text-truncate", style: { whiteSpace: "nowrap" } },
|
|
599
|
+
+((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
|
|
600
|
+
React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
|
|
599
601
|
React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
|
|
600
602
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
601
603
|
props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|