nestiq-component-library 1.1.164 → 1.1.166

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/index.js CHANGED
@@ -57,7 +57,7 @@ var ShareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
57
57
 
58
58
  var locationIcon$1 = "/static/media/locationIconBlack.eb8e9e9226b43573.svg";
59
59
 
60
- var css_248z$8 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n position: relative !important;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n.location{\r\n left: 0;\r\n}\r\n.vector svg {\r\n width: 6px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n }\r\n}\r\n@media (min-width: 300px) and (max-width: 670px) {\r\n .Pheader {\r\n height: 700px;\r\n }\r\n .compact {\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n.compact2{\r\n position: relative !important;\r\n display: flex !important;\r\n align-self: flex-start !important;\r\n margin-left: 25px;\r\n justify-content: start !important;\r\n align-items: flex-start !important;\r\n\r\n}\r\n.compact3{\r\n position: relative !important;\r\n display: flex !important;\r\n margin-left: 30px;\r\n margin-top: 10px !important;\r\n}\r\n.header_Text {\r\n margin-top: 0px;\r\n \r\n}\r\n.fetch_section {\r\n margin-top: 0px;\r\n height: 60px;\r\n}\r\n.propText {\r\n justify-content: start !important;\r\n align-self: flex-start !important;\r\n text-align: start !important;\r\n\r\n}\r\n.propText2 {\r\n justify-content: start !important;\r\n align-self: flex-start !important;\r\n text-align: start !important;\r\n font-weight: 1000;\r\n font-size: 24px;\r\n}\r\n}\r\n";
60
+ var css_248z$8 = ".compact_cc {\r\n padding: 32px;\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n.location {\r\n left: 0;\r\n}\r\n.vector svg {\r\n width: 6px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.textWrapper {\r\n height: 20px;\r\n}\r\n\r\n.propText {\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n }\r\n}\r\n@media (min-width: 300px) and (max-width: 670px) {\r\n .Pheader {\r\n height: 700px;\r\n }\r\n .compact {\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n }\r\n .compact2 {\r\n position: relative !important;\r\n display: flex !important;\r\n align-self: flex-start !important;\r\n margin-left: 25px;\r\n justify-content: start !important;\r\n align-items: flex-start !important;\r\n }\r\n .compact3 {\r\n position: relative !important;\r\n display: flex !important;\r\n margin-left: 30px;\r\n margin-top: 10px !important;\r\n }\r\n .header_Text {\r\n margin-top: 0px;\r\n }\r\n .fetch_section {\r\n margin-top: 0px;\r\n height: 60px;\r\n }\r\n .propText {\r\n justify-content: start !important;\r\n align-self: flex-start !important;\r\n text-align: start !important;\r\n }\r\n .propText2 {\r\n justify-content: start !important;\r\n align-self: flex-start !important;\r\n text-align: start !important;\r\n font-weight: 1000;\r\n font-size: 24px;\r\n }\r\n}\r\n";
61
61
  styleInject(css_248z$8);
62
62
 
63
63
  var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
@@ -133,36 +133,42 @@ function formatPropertyArea(area) {
133
133
  }
134
134
 
135
135
  function PropertyDetailsHeader(props) {
136
- var _a, _b, _c, _d, _e;
137
- var _f = React.useState(false), showPopUp = _f[0], setShowPopUp = _f[1];
138
- var area = (_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
136
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
137
+ var _l = React.useState(false), showPopUp = _l[0], setShowPopUp = _l[1];
138
+ (_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
139
139
  var handleOpenPopup = function () { return setShowPopUp(true); };
140
140
  var handleClosePopup = function () { return setShowPopUp(false); };
141
- return (React.createElement("div", { className: "Pheader compact d-flex flex-column flex-md-row d-flex col-12 col-lg-12 mt-5 " },
142
- React.createElement("div", { className: "header_Text d-flex col-5 col-lg-7 col-md-9 mt-4 ms-4 " },
143
- React.createElement("strong", null, (_b = props.title) !== null && _b !== void 0 ? _b : "-")),
144
- React.createElement("div", { className: "compact3 position-absolute header_Text text-truncate col-5 col-lg-5 col-md-5 d-flex flex-row ms-4" },
145
- React.createElement("img", { src: locationIcon$1, className: "vector me-2", alt: "location Icon" }),
146
- React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
147
- React.createElement("div", { className: "compact2 d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 me-2 mt-4" },
148
- React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3", onClick: handleOpenPopup })),
149
- React.createElement("div", { className: "compact2 gap-3 gap-md-0 fetch_section d-flex align-items-center flex-column flex-md-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0" },
150
- props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 h-100 d-flex flex-column align-items-md-center justify-content-center mt-4 mt-md-0" },
151
- React.createElement("span", { className: "propText2" },
152
- formatPrice((_d = (_c = props.property) === null || _c === void 0 ? void 0 : _c.askingPrice) !== null && _d !== void 0 ? _d : 0),
153
- "\u20AC"),
154
- React.createElement("span", null, "Kaufpreis"))),
155
- props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-md-center justify-content-center flex-column" },
156
- React.createElement("span", { className: "propText2" }, (_e = formatPropertyArea(props.property.constructedArea)) !== null && _e !== void 0 ? _e : 0),
157
- React.createElement("span", null, "Wohnfl\u00E4che"))),
158
- props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column" },
159
- React.createElement("span", { className: "propText2" }, props.property.rooms),
160
- React.createElement("span", null, "Zimmer"))),
161
- props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column" },
162
- React.createElement("span", { className: "propText2" },
163
- formatPropertyArea(area !== null && area !== void 0 ? area : 0),
164
- " m\u00B2"),
165
- "Grundst\u00FCck"))),
141
+ var t = {
142
+ kaufpreis: ((_b = props.translations) === null || _b === void 0 ? void 0 : _b.kaufpreis) || "Kaufpreis",
143
+ wohnflache: ((_c = props.translations) === null || _c === void 0 ? void 0 : _c.wohnflache) || "Wohnfläche",
144
+ zimmer: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.zimmer) || "Zimmer",
145
+ grundriss: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.grundriss) || "Grundriss",
146
+ };
147
+ return (React.createElement("div", { className: "compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between" },
148
+ React.createElement("div", { className: "col-12 d-flex flex-row" },
149
+ React.createElement("div", { className: "header_Text d-flex col-lg-11 col-md-11 mt-0" },
150
+ React.createElement("strong", null, (_f = props.title) !== null && _f !== void 0 ? _f : "-")),
151
+ React.createElement("div", { className: "d-flex col-lg-1 col-md-1 justify-content-end position-relative" },
152
+ React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3 position-absolute", onClick: handleOpenPopup }))),
153
+ React.createElement("div", { className: "d-flex flex-row justify-content-between" },
154
+ React.createElement("div", { className: "col-6 d-flex flex-row align-items-end jsutify-content-start gap-1" },
155
+ React.createElement("div", { className: "d-flex gap-1 justify-content-center" },
156
+ React.createElement("div", { className: "d-flex gap-2 align-items-center" },
157
+ React.createElement("img", { src: locationIcon$1, className: "", alt: "location Icon" })),
158
+ React.createElement("div", { className: "textWrapper" }, (_g = props.property) === null || _g === void 0 ? void 0 : _g.fullAddress))),
159
+ React.createElement("div", { className: "d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5" },
160
+ props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
161
+ React.createElement("span", { className: "" },
162
+ formatPrice((_j = (_h = props.property) === null || _h === void 0 ? void 0 : _h.askingPrice) !== null && _j !== void 0 ? _j : 0),
163
+ "\u20AC ",
164
+ React.createElement("br", null)),
165
+ React.createElement("span", { className: "textWrapper" }, t.kaufpreis))),
166
+ props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
167
+ React.createElement("span", { className: "" }, (_k = formatPropertyArea(props.property.constructedArea)) !== null && _k !== void 0 ? _k : 0),
168
+ React.createElement("span", { className: "textWrapper" }, t.wohnflache))),
169
+ props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
170
+ React.createElement("span", { className: "" }, props.property.rooms),
171
+ React.createElement("span", { className: "textWrapper" }, t.zimmer))))),
166
172
  showPopUp && React.createElement(SharePopup, { onClick: function () { return handleClosePopup(); } })));
167
173
  }
168
174
 
@@ -455,7 +461,7 @@ function PropertyCard$1(props) {
455
461
  React.createElement("span", null, "Wohnfl\u00E4che")))));
456
462
  }
457
463
 
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-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.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";
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 {\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
465
  styleInject(css_248z$3);
460
466
 
461
467
  var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
@@ -473,15 +479,15 @@ var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
473
479
  var immooly = "/static/media/imooly.b46514ac970e6052.svg";
474
480
 
475
481
  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];
482
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
482
483
  var _o = React.useState(false); _o[0]; _o[1];
483
- var _p = React.useState(false), sharePopUp = _p[0], setSharePopUp = _p[1];
484
- var _q = React.useState(false), isImagePopupOpen = _q[0], setIsImagePopupOpen = _q[1];
484
+ var _p = React.useState(null), mainImage = _p[0], setMainImage = _p[1];
485
+ var _q = React.useState(0), currentImageIndex = _q[0], setCurrentImageIndex = _q[1];
486
+ var imageListRef = React.useRef(null);
487
+ var _r = React.useState(false); _r[0]; _r[1];
488
+ var _s = React.useState(false); _s[0]; _s[1];
489
+ var _t = React.useState(false), sharePopUp = _t[0], setSharePopUp = _t[1];
490
+ var _u = React.useState(false), isImagePopupOpen = _u[0], setIsImagePopupOpen = _u[1];
485
491
  var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
486
492
  ? props.property.pictures
487
493
  .filter(function (picture) { return picture.pictureType.id === 2; })
@@ -535,6 +541,12 @@ function PropertyCard(props) {
535
541
  }
536
542
  };
537
543
  // const boosted = "true";
544
+ var t = {
545
+ kaufpreis: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.kaufpreis) || "Kaufpreis",
546
+ wohnflache: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.wohnflache) || "Wohnfläche",
547
+ zimmer: ((_f = props.translations) === null || _f === void 0 ? void 0 : _f.zimmer) || "Zimmer",
548
+ grundriss: ((_g = props.translations) === null || _g === void 0 ? void 0 : _g.grundriss) || "Grundriss",
549
+ };
538
550
  return (React.createElement("div", { className: "d-flex flex-row property-card" },
539
551
  React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6" },
540
552
  React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
@@ -554,14 +566,14 @@ function PropertyCard(props) {
554
566
  React.createElement("div", { className: "Grundriss kontact-button-text ms-2 ", role: "button", onClick: function () { return handleFloorPlanButton(); }, style: { marginBottom: "16px" } },
555
567
  React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
556
568
  " ",
557
- "Grundriss")))),
569
+ t.grundriss)))),
558
570
  React.createElement("div", { className: "listing-compact d-flex align-self-end flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
559
571
  React.createElement("div", { className: "d-flex flex-column gap-3 mb-4 justify-content-between", style: { height: "104px" } },
560
572
  React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
561
573
  React.createElement("span", { className: "propertyTitle align-items-start ", style: {
562
574
  paddingLeft: "32px",
563
575
  paddingTop: "32px",
564
- }, onClick: props.onClick, role: "button" }, (_d = props.property.expose) === null || _d === void 0 ? void 0 : _d.title),
576
+ }, onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title),
565
577
  React.createElement("div", { className: "d-flex gap-2", style: {
566
578
  paddingRight: "32px",
567
579
  paddingTop: "21px",
@@ -577,21 +589,21 @@ function PropertyCard(props) {
577
589
  React.createElement("div", { className: "location-wrapper" },
578
590
  React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
579
591
  React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
580
- React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between mt-3", style: {
592
+ React.createElement("div", { className: "d-flex flex-row justify-content-between mt-3", style: {
581
593
  paddingLeft: "32px",
582
594
  paddingRight: "32px",
583
595
  } },
584
- React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6 " },
585
- formatPrice((_g = (_f = (_e = props.property) === null || _e === void 0 ? void 0 : _e.evaluation) === null || _f === void 0 ? void 0 : _f.askingPrice) !== null && _g !== void 0 ? _g : 0),
596
+ React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6", style: { whiteSpace: "nowrap" } },
597
+ 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
598
  " \u20AC",
587
- React.createElement("div", { className: "price_label" }, "Kaufpreis")),
588
- React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7" },
599
+ React.createElement("div", { className: "price_label", style: { whiteSpace: "nowrap" } }, t.kaufpreis)),
600
+ React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7", style: { whiteSpace: "nowrap" } },
589
601
  props.property.constructedArea,
590
602
  " m\u00B2",
591
- React.createElement("div", { className: "details" }, "Wohnfl\u00E4che")),
592
- React.createElement("span", { className: "text-dark value col-lg-3 col-md-3 col-sm-6 text-truncate " },
593
- +((_h = props.property) === null || _h === void 0 ? void 0 : _h.rooms),
594
- React.createElement("div", { className: "details" }, "Zimmer"))),
603
+ React.createElement("div", { className: "details", style: { whiteSpace: "nowrap" } }, t.wohnflache)),
604
+ React.createElement("span", { className: "text-dark value text-center col-lg-2 col-md-2 col-sm-5 text-truncate", style: { whiteSpace: "nowrap" } },
605
+ +((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
606
+ React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
595
607
  React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
596
608
  React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
597
609
  props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },