nestiq-component-library 1.1.165 → 1.1.167

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 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";
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";
459
465
  styleInject(css_248z$3);
460
466
 
461
467
  var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
@@ -561,65 +567,36 @@ function PropertyCard(props) {
561
567
  React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
562
568
  " ",
563
569
  t.grundriss)))),
564
- React.createElement("div", { className: "listing-compact d-flex align-self-end flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
565
- React.createElement("div", { className: "d-flex flex-column gap-3 mb-4 justify-content-between", style: { height: "104px" } },
566
- React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
567
- React.createElement("span", { className: "propertyTitle align-items-start ", style: {
568
- paddingLeft: "32px",
569
- paddingTop: "32px",
570
- }, onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title),
571
- React.createElement("div", { className: "d-flex gap-2", style: {
572
- paddingRight: "32px",
573
- paddingTop: "21px",
574
- paddingLeft: "10px",
575
- } },
576
- React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
577
- React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }))),
578
- React.createElement("div", { style: {
579
- paddingLeft: "32px",
580
- paddingRight: "32px",
581
- } },
582
- " ",
583
- React.createElement("div", { className: "location-wrapper" },
584
- React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
585
- React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
586
- React.createElement("div", { className: "d-flex flex-row justify-content-between mt-3", style: {
587
- paddingLeft: "32px",
588
- paddingRight: "32px",
589
- } },
590
- React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6", style: { whiteSpace: "nowrap" } },
570
+ React.createElement("div", { className: "listing-compact_c justify-content-between d-flex flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
571
+ React.createElement("div", { className: "col-12 d-flex justify-content-end gap-2" },
572
+ React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
573
+ React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" })),
574
+ React.createElement("div", { className: "col-11" },
575
+ 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)),
576
+ React.createElement("div", { className: "col-12" },
577
+ React.createElement("div", { className: "location-wrapper" },
578
+ React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
579
+ React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
580
+ React.createElement("div", { className: "d-flex flex-row justify-content-between" },
581
+ React.createElement("span", { className: "priceValue justify-content-center align-items-center" },
591
582
  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),
592
583
  " \u20AC",
593
584
  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" } },
585
+ React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
595
586
  props.property.constructedArea,
596
587
  " m\u00B2",
597
588
  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" } },
589
+ React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
599
590
  +((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
600
591
  React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
601
- React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
602
- React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
603
- props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
604
- React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
605
- props.property.basement && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
606
- React.createElement("span", { className: "layersText" }, "Keller"))),
607
- props.property.balcony && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
608
- React.createElement("span", { className: "layersText" }, "Balkon"))),
609
- props.property.terrace && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center " },
610
- React.createElement("span", { className: "layersText" }, "Terrace"))),
611
- props.property.guestBathroom && (React.createElement("label", { className: "chipLabel" },
612
- React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
613
- props.Impliment && (React.createElement("div", { className: "", style: {
614
- paddingLeft: "32px",
615
- paddingRight: "32px",
616
- } },
617
- React.createElement("div", { className: "Frame-136 d-flex flex-row" },
618
- React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
592
+ props.Impliment && (React.createElement("div", { className: "d-lex flex-column " },
593
+ React.createElement("div", { className: "wrapperCompanySec d-flex justify-content-around flex-row" },
594
+ React.createElement("div", { className: "d-flex flex-column col-4 justify-content-between " },
619
595
  React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
620
- React.createElement("div", { className: "ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center" },
621
- React.createElement("span", { className: "fw-bold" }, "Herr Florian Gauss"),
622
- React.createElement("span", null, "Immogart UGh"))))),
596
+ React.createElement("div", { className: "d-flex flex-column align-items-center justify-content-center" },
597
+ React.createElement("div", { className: "d-flex flex-column text-center" },
598
+ React.createElement("span", { className: "" }, "Firstname Firstname"),
599
+ React.createElement("span", null, "Your company")))))),
623
600
  !props.Impliment && (React.createElement("div", { className: "d-lex flex-column ", style: {
624
601
  paddingLeft: "32px",
625
602
  paddingRight: "32px",