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