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.
@@ -2,6 +2,7 @@ import React from "react";
2
2
  import "./PropertyDetailsHeader.css";
3
3
  export interface PopupProps {
4
4
  property: {
5
+ fullAddress: string;
5
6
  city: string;
6
7
  constructedArea: string;
7
8
  rooms: string;
@@ -9,5 +10,11 @@ export interface PopupProps {
9
10
  askingPrice: number;
10
11
  };
11
12
  title: string;
13
+ translations?: {
14
+ kaufpreis?: string;
15
+ wohnflache?: string;
16
+ zimmer?: string;
17
+ grundriss?: string;
18
+ };
12
19
  }
13
20
  export default function PropertyDetailsHeader(props: PopupProps): React.JSX.Element;
package/dist/index.es.js CHANGED
@@ -55,7 +55,7 @@ var ShareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
55
55
 
56
56
  var locationIcon$1 = "/static/media/locationIconBlack.eb8e9e9226b43573.svg";
57
57
 
58
- 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";
58
+ 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";
59
59
  styleInject(css_248z$8);
60
60
 
61
61
  var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
@@ -131,36 +131,42 @@ function formatPropertyArea(area) {
131
131
  }
132
132
 
133
133
  function PropertyDetailsHeader(props) {
134
- var _a, _b, _c, _d, _e;
135
- var _f = useState(false), showPopUp = _f[0], setShowPopUp = _f[1];
136
- var area = (_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
134
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
135
+ var _l = useState(false), showPopUp = _l[0], setShowPopUp = _l[1];
136
+ (_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
137
137
  var handleOpenPopup = function () { return setShowPopUp(true); };
138
138
  var handleClosePopup = function () { return setShowPopUp(false); };
139
- return (React.createElement("div", { className: "Pheader compact d-flex flex-column flex-md-row d-flex col-12 col-lg-12 mt-5 " },
140
- React.createElement("div", { className: "header_Text d-flex col-5 col-lg-7 col-md-9 mt-4 ms-4 " },
141
- React.createElement("strong", null, (_b = props.title) !== null && _b !== void 0 ? _b : "-")),
142
- 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" },
143
- React.createElement("img", { src: locationIcon$1, className: "vector me-2", alt: "location Icon" }),
144
- React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
145
- 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" },
146
- React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3", onClick: handleOpenPopup })),
147
- 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" },
148
- 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" },
149
- React.createElement("span", { className: "propText2" },
150
- formatPrice((_d = (_c = props.property) === null || _c === void 0 ? void 0 : _c.askingPrice) !== null && _d !== void 0 ? _d : 0),
151
- "\u20AC"),
152
- React.createElement("span", null, "Kaufpreis"))),
153
- 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" },
154
- React.createElement("span", { className: "propText2" }, (_e = formatPropertyArea(props.property.constructedArea)) !== null && _e !== void 0 ? _e : 0),
155
- React.createElement("span", null, "Wohnfl\u00E4che"))),
156
- props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column" },
157
- React.createElement("span", { className: "propText2" }, props.property.rooms),
158
- React.createElement("span", null, "Zimmer"))),
159
- props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column" },
160
- React.createElement("span", { className: "propText2" },
161
- formatPropertyArea(area !== null && area !== void 0 ? area : 0),
162
- " m\u00B2"),
163
- "Grundst\u00FCck"))),
139
+ var t = {
140
+ kaufpreis: ((_b = props.translations) === null || _b === void 0 ? void 0 : _b.kaufpreis) || "Kaufpreis",
141
+ wohnflache: ((_c = props.translations) === null || _c === void 0 ? void 0 : _c.wohnflache) || "Wohnfläche",
142
+ zimmer: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.zimmer) || "Zimmer",
143
+ grundriss: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.grundriss) || "Grundriss",
144
+ };
145
+ return (React.createElement("div", { className: "compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between" },
146
+ React.createElement("div", { className: "col-12 d-flex flex-row" },
147
+ React.createElement("div", { className: "header_Text d-flex col-lg-11 col-md-11 mt-0" },
148
+ React.createElement("strong", null, (_f = props.title) !== null && _f !== void 0 ? _f : "-")),
149
+ React.createElement("div", { className: "d-flex col-lg-1 col-md-1 justify-content-end position-relative" },
150
+ React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3 position-absolute", onClick: handleOpenPopup }))),
151
+ React.createElement("div", { className: "d-flex flex-row justify-content-between" },
152
+ React.createElement("div", { className: "col-6 d-flex flex-row align-items-end jsutify-content-start gap-1" },
153
+ React.createElement("div", { className: "d-flex gap-1 justify-content-center" },
154
+ React.createElement("div", { className: "d-flex gap-2 align-items-center" },
155
+ React.createElement("img", { src: locationIcon$1, className: "", alt: "location Icon" })),
156
+ React.createElement("div", { className: "textWrapper" }, (_g = props.property) === null || _g === void 0 ? void 0 : _g.fullAddress))),
157
+ 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" },
158
+ props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
159
+ React.createElement("span", { className: "" },
160
+ formatPrice((_j = (_h = props.property) === null || _h === void 0 ? void 0 : _h.askingPrice) !== null && _j !== void 0 ? _j : 0),
161
+ "\u20AC ",
162
+ React.createElement("br", null)),
163
+ React.createElement("span", { className: "textWrapper" }, t.kaufpreis))),
164
+ props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
165
+ React.createElement("span", { className: "" }, (_k = formatPropertyArea(props.property.constructedArea)) !== null && _k !== void 0 ? _k : 0),
166
+ React.createElement("span", { className: "textWrapper" }, t.wohnflache))),
167
+ props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
168
+ React.createElement("span", { className: "" }, props.property.rooms),
169
+ React.createElement("span", { className: "textWrapper" }, t.zimmer))))),
164
170
  showPopUp && React.createElement(SharePopup, { onClick: function () { return handleClosePopup(); } })));
165
171
  }
166
172
 
@@ -453,7 +459,7 @@ function PropertyCard$1(props) {
453
459
  React.createElement("span", null, "Wohnfl\u00E4che")))));
454
460
  }
455
461
 
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";
462
+ 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";
457
463
  styleInject(css_248z$3);
458
464
 
459
465
  var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
@@ -559,65 +565,36 @@ function PropertyCard(props) {
559
565
  React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
560
566
  " ",
561
567
  t.grundriss)))),
562
- React.createElement("div", { className: "listing-compact d-flex align-self-end flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
563
- React.createElement("div", { className: "d-flex flex-column gap-3 mb-4 justify-content-between", style: { height: "104px" } },
564
- React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
565
- React.createElement("span", { className: "propertyTitle align-items-start ", style: {
566
- paddingLeft: "32px",
567
- paddingTop: "32px",
568
- }, onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title),
569
- React.createElement("div", { className: "d-flex gap-2", style: {
570
- paddingRight: "32px",
571
- paddingTop: "21px",
572
- paddingLeft: "10px",
573
- } },
574
- React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
575
- React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }))),
576
- React.createElement("div", { style: {
577
- paddingLeft: "32px",
578
- paddingRight: "32px",
579
- } },
580
- " ",
581
- React.createElement("div", { className: "location-wrapper" },
582
- React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
583
- React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
584
- React.createElement("div", { className: "d-flex flex-row justify-content-between mt-3", style: {
585
- paddingLeft: "32px",
586
- paddingRight: "32px",
587
- } },
588
- React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6", style: { whiteSpace: "nowrap" } },
568
+ React.createElement("div", { className: "listing-compact_c justify-content-between d-flex flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
569
+ React.createElement("div", { className: "col-12 d-flex justify-content-end gap-2" },
570
+ React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
571
+ React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" })),
572
+ React.createElement("div", { className: "col-11" },
573
+ 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)),
574
+ React.createElement("div", { className: "col-12" },
575
+ React.createElement("div", { className: "location-wrapper" },
576
+ React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
577
+ React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
578
+ React.createElement("div", { className: "d-flex flex-row justify-content-between" },
579
+ React.createElement("span", { className: "priceValue justify-content-center align-items-center" },
589
580
  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),
590
581
  " \u20AC",
591
582
  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" } },
583
+ React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
593
584
  props.property.constructedArea,
594
585
  " m\u00B2",
595
586
  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" } },
587
+ React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
597
588
  +((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
598
589
  React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
599
- React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
600
- React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
601
- props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
602
- React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
603
- props.property.basement && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
604
- React.createElement("span", { className: "layersText" }, "Keller"))),
605
- props.property.balcony && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
606
- React.createElement("span", { className: "layersText" }, "Balkon"))),
607
- props.property.terrace && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center " },
608
- React.createElement("span", { className: "layersText" }, "Terrace"))),
609
- props.property.guestBathroom && (React.createElement("label", { className: "chipLabel" },
610
- React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
611
- props.Impliment && (React.createElement("div", { className: "", style: {
612
- paddingLeft: "32px",
613
- paddingRight: "32px",
614
- } },
615
- React.createElement("div", { className: "Frame-136 d-flex flex-row" },
616
- React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
590
+ props.Impliment && (React.createElement("div", { className: "d-lex flex-column " },
591
+ React.createElement("div", { className: "wrapperCompanySec d-flex justify-content-around flex-row" },
592
+ React.createElement("div", { className: "d-flex flex-column col-4 justify-content-between " },
617
593
  React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
618
- React.createElement("div", { className: "ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center" },
619
- React.createElement("span", { className: "fw-bold" }, "Herr Florian Gauss"),
620
- React.createElement("span", null, "Immogart UGh"))))),
594
+ React.createElement("div", { className: "d-flex flex-column align-items-center justify-content-center" },
595
+ React.createElement("div", { className: "d-flex flex-column text-center" },
596
+ React.createElement("span", { className: "" }, "Firstname Firstname"),
597
+ React.createElement("span", null, "Your company")))))),
621
598
  !props.Impliment && (React.createElement("div", { className: "d-lex flex-column ", style: {
622
599
  paddingLeft: "32px",
623
600
  paddingRight: "32px",