nestiq-component-library 1.1.98 → 1.1.100
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.es.js
CHANGED
|
@@ -436,7 +436,7 @@ function PropertyCard$1(props) {
|
|
|
436
436
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
437
437
|
}
|
|
438
438
|
|
|
439
|
-
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\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-
|
|
439
|
+
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\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 flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n gap: 16px;\r\n border-radius: 0px 32px 32px 0px;\r\n /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */\r\n background-color: rgba(58, 58, 58, 0.068);\r\n height: 460px;\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: 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.kontactbutton {\r\n width: 180px;\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.firstLabel {\r\n width: 100px;\r\n height: 25px;\r\n gap: 6px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #031012 !important;\r\n background-color: var(--main-yellow);\r\n}\r\n\r\n.secondLabel {\r\n width: 85px;\r\n height: 25px;\r\n padding: 0 7px;\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.thirdLabels {\r\n width: 110px;\r\n padding: 0 7px;\r\n height: 25px;\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.fourthLabels {\r\n padding: 2px;\r\n\r\n width: 100px;\r\n height: 25px;\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}\r\n\r\n.layersVector {\r\n width: 15.1px;\r\n height: 16px;\r\n}\r\n\r\n.layersText {\r\n font-size: 14px;\r\n color: #1b1b1b;\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.locationTexts {\r\n font-size: 14px;\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: 14px;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n.value {\r\n font-size: 20px;\r\n text-align: center;\r\n font-weight: 500;\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@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 }\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";
|
|
440
440
|
styleInject(css_248z$3);
|
|
441
441
|
|
|
442
442
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
@@ -502,37 +502,45 @@ function PropertyCard(props) {
|
|
|
502
502
|
}
|
|
503
503
|
};
|
|
504
504
|
return (React.createElement("div", { className: "d-flex flex-row property-card" },
|
|
505
|
-
React.createElement("div", { className: "d-flex flex-column col-md-6", onClick: props.onClick },
|
|
505
|
+
React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6", onClick: props.onClick },
|
|
506
506
|
React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
|
|
507
507
|
backgroundImage: "url(".concat(mainImage || pictureUrls[0], ")"),
|
|
508
508
|
backgroundSize: "cover",
|
|
509
509
|
backgroundPosition: "center",
|
|
510
|
+
maxWidth: "640",
|
|
510
511
|
} },
|
|
511
512
|
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-5" },
|
|
512
|
-
React.createElement("div", { className: "d-flex ms-2", style: { position: "absolute",
|
|
513
|
+
React.createElement("div", { className: "d-flex ms-2", style: { position: "absolute", marginLeft: "16px" }, onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
|
|
513
514
|
React.createElement("img", { src: arrowLeft })),
|
|
514
515
|
React.createElement("div", null),
|
|
515
516
|
React.createElement("div", { className: "d-flex me-2", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
|
|
516
|
-
React.createElement("img", { src: arrowRight, style: { position: "absolute", right: "
|
|
517
|
+
React.createElement("img", { src: arrowRight, style: { position: "absolute", right: "16px" } }))),
|
|
517
518
|
React.createElement("div", { className: "d-flex flex-row align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4", style: { position: "absolute", left: "0" } },
|
|
518
519
|
React.createElement("div", { className: "cardTag" }, "".concat(currentImageIndex + 1, "/").concat(pictureUrls.length)),
|
|
519
520
|
React.createElement("div", { className: "Grundriss kontact-button-text ", role: "button", onClick: floorPlanOnClick },
|
|
520
521
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
521
522
|
" ",
|
|
522
523
|
"Grundriss")))),
|
|
523
|
-
React.createElement("div", { className: "d-flex flex-column listing-
|
|
524
|
-
React.createElement("div", { className: "d-flex
|
|
525
|
-
React.createElement("
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
524
|
+
React.createElement("div", { className: "d-flex flex-column listing-compact col-6" },
|
|
525
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
|
|
526
|
+
React.createElement("span", { className: "propertyTitle align-items-start ", style: {
|
|
527
|
+
paddingLeft: "32px",
|
|
528
|
+
paddingTop: "32px",
|
|
529
|
+
} }, (_c = props.property.expose) === null || _c === void 0 ? void 0 : _c.title),
|
|
530
|
+
React.createElement("div", { className: "d-flex gap-2", style: {
|
|
531
|
+
paddingRight: "32px",
|
|
532
|
+
paddingTop: "21px",
|
|
533
|
+
paddingLeft: "76px",
|
|
534
|
+
} },
|
|
535
|
+
React.createElement("img", { src: shareIcon, alt: "Location Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" } }),
|
|
536
|
+
React.createElement("img", { src: moreIcon, alt: "Location Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" } }))),
|
|
537
|
+
React.createElement("div", { style: { paddingLeft: "32px", paddingRight: "32px" } },
|
|
530
538
|
" ",
|
|
531
539
|
React.createElement("div", { className: "d-flex " },
|
|
532
540
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
|
|
533
541
|
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
|
|
534
|
-
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between " },
|
|
535
|
-
React.createElement("span", { className: "value col-lg-
|
|
542
|
+
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between ", style: { paddingLeft: "32px", paddingRight: "32px" } },
|
|
543
|
+
React.createElement("span", { className: "value col-lg-4 col-md-4 col-sm-6 " },
|
|
536
544
|
formatPrice((_f = (_e = (_d = props.property) === null || _d === void 0 ? void 0 : _d.evaluation) === null || _e === void 0 ? void 0 : _e.askingPrice) !== null && _f !== void 0 ? _f : 0),
|
|
537
545
|
" \u20AC",
|
|
538
546
|
React.createElement("br", null),
|
|
@@ -548,13 +556,13 @@ function PropertyCard(props) {
|
|
|
548
556
|
React.createElement("br", null),
|
|
549
557
|
React.createElement("span", { className: "details" },
|
|
550
558
|
React.createElement("span", null, "Bad"))),
|
|
551
|
-
React.createElement("span", { className: "text-dark value col-lg-
|
|
559
|
+
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7 " },
|
|
552
560
|
props.property.usableArea,
|
|
553
561
|
" m\u00B2",
|
|
554
562
|
React.createElement("br", null),
|
|
555
563
|
React.createElement("span", { className: "details" },
|
|
556
564
|
React.createElement("span", null, "Wohnfl\u00E4che")))),
|
|
557
|
-
React.createElement("div", { className: "labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 " },
|
|
565
|
+
React.createElement("div", { className: "labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 ", style: { paddingLeft: "32px", paddingRight: "32px" } },
|
|
558
566
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
559
567
|
props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels justify-content-center align-items-center" },
|
|
560
568
|
React.createElement("span", { className: "layersText " }, "Denkmalschutz"))),
|
|
@@ -566,13 +574,18 @@ function PropertyCard(props) {
|
|
|
566
574
|
React.createElement("span", { className: "layersText" }, "Terrace"))),
|
|
567
575
|
props.property.guestBathroom && (React.createElement("label", { className: "col-1 thirdLabels justify-content-center align-items-center " },
|
|
568
576
|
React.createElement("span", { className: "layersText " }, "Gäste-WC"))))),
|
|
569
|
-
React.createElement("div", { className: "
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
577
|
+
React.createElement("div", { className: "", style: {
|
|
578
|
+
paddingLeft: "32px",
|
|
579
|
+
paddingRight: "32px",
|
|
580
|
+
paddingTop: "32px",
|
|
581
|
+
} },
|
|
582
|
+
React.createElement("div", { className: "Frame-136 d-flex flex-row" },
|
|
583
|
+
React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
|
|
584
|
+
React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
|
|
585
|
+
React.createElement("div", { className: "d-flex flex-column flex-lg-row justify-content-between" },
|
|
586
|
+
React.createElement("span", { className: "d-flex col-5" }, "Herr Florian Gauss Immogart UGh"),
|
|
587
|
+
React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
|
|
588
|
+
React.createElement("span", { className: "kontact-button-text" }, "Kontakt aufnehmen ")))))),
|
|
576
589
|
floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: props.floorPlanUrl, onCloseClick: function () { return setFloorPlan(false); } })),
|
|
577
590
|
sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
|
|
578
591
|
}
|