nestiq-component-library 1.1.162 → 1.1.164
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 +9 -15
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +9 -15
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ImageListPopup/ImageListPopup.css +20 -0
- package/src/components/ImageListPopup/ImageListPopup.tsx +4 -6
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +6 -6
package/dist/index.js
CHANGED
|
@@ -183,7 +183,7 @@ var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
|
183
183
|
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 88vw;\r\n }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 58vw;\r\n }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n\r\n.image-thumbnail {\r\n position: relative;\r\n transition: opacity 0.3s ease-in-out;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n filter: none;\r\n border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
|
|
184
184
|
styleInject(css_248z$6);
|
|
185
185
|
|
|
186
|
-
var css_248z$5 = ".popup-header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n padding: 1rem;\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.closeIconNestiq {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n width: 12px;\r\n height: 12px;\r\n cursor: pointer;\r\n z-index: 1;\r\n}\r\n\r\n.popup-title {\r\n color: white;\r\n font-size: 24px;\r\n font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n position: absolute;\r\n right: 1rem;\r\n top: 1rem;\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 24px;\r\n cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n position: relative;\r\n flex: 1;\r\n}\r\n\r\n.main-image {\r\n max-width: 100%;\r\n max-height: 80vh;\r\n border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 48px;\r\n cursor: pointer;\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n left: 10px;\r\n}\r\n\r\n.btn-next {\r\n right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n width: 60px;\r\n height: 60px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n border: 2px solid white;\r\n opacity: 1;\r\n}\r\n";
|
|
186
|
+
var css_248z$5 = ".popup-header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n padding: 1rem;\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.closeIconNestiq {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n width: 12px;\r\n height: 12px;\r\n cursor: pointer;\r\n z-index: 1;\r\n}\r\n\r\n.popup-title {\r\n color: white;\r\n font-size: 24px;\r\n font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n position: absolute;\r\n right: 1rem;\r\n top: 1rem;\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 24px;\r\n cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n position: relative;\r\n flex: 1;\r\n}\r\n\r\n.main-image {\r\n max-width: 100%;\r\n max-height: 80vh;\r\n border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 48px;\r\n cursor: pointer;\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n left: 10px;\r\n}\r\n\r\n.btn-next {\r\n right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n width: 60px;\r\n height: 60px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n border: 2px solid white;\r\n opacity: 1;\r\n}\r\n\r\n.activeStyle {\r\n border: 3px solid transparent;\r\n border-radius: 4px;\r\n transition: transform 0.2s ease, border-color 0.2s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.activeStyle:hover {\r\n transform: scale(1.05);\r\n}\r\n\r\n.activeStyle:focus {\r\n outline: none;\r\n transform: scale(1.05);\r\n}\r\n\r\n.activeStyle.active {\r\n transform: scale(1.05);\r\n}\r\n";
|
|
187
187
|
styleInject(css_248z$5);
|
|
188
188
|
|
|
189
189
|
var iconClose = "/static/media/close.b5ce9141e80c688b.png";
|
|
@@ -222,7 +222,7 @@ function ImageListPopup(props) {
|
|
|
222
222
|
React.createElement("span", { className: "text-white align-self-center" }, props.pictureUrls[currentImageIndex].title),
|
|
223
223
|
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
224
224
|
React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
|
|
225
|
-
React.createElement("div", { className: "rounded-circle border onImageArrow
|
|
225
|
+
React.createElement("div", { className: "rounded-circle border onImageArrow d-flex justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
|
|
226
226
|
React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
|
|
227
227
|
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
228
228
|
React.createElement("div", { className: " rounded-5", style: {
|
|
@@ -234,16 +234,14 @@ function ImageListPopup(props) {
|
|
|
234
234
|
} })),
|
|
235
235
|
React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
|
|
236
236
|
" ",
|
|
237
|
-
React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex
|
|
237
|
+
React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
|
|
238
238
|
React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
|
|
239
239
|
React.createElement("div", { className: "d-flex flex-row" }),
|
|
240
240
|
React.createElement("div", { className: "d-flex flex-row justify-content-center w-100 mt-5" },
|
|
241
241
|
React.createElement("div", { className: "d-flex flex-row gap-4 overflow-auto px-3", ref: imageListRef, style: {
|
|
242
242
|
maxWidth: "100%",
|
|
243
243
|
scrollbarWidth: "thin",
|
|
244
|
-
} }, props.pictureUrls.length > 0 && (React.createElement(React.Fragment, null, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "flex-shrink-0 ".concat(index === currentImageIndex
|
|
245
|
-
? "border border-3 border-primary"
|
|
246
|
-
: ""), onClick: function () {
|
|
244
|
+
} }, props.pictureUrls.length > 0 && (React.createElement(React.Fragment, null, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "flex-shrink-0 activeStyle ".concat(index === currentImageIndex ? "active" : ""), onClick: function () {
|
|
247
245
|
setCurrentImageIndex(index);
|
|
248
246
|
imageListRef.current.scrollTo({
|
|
249
247
|
left: index * 170, // 150px width + gap
|
|
@@ -576,14 +574,14 @@ function PropertyCard(props) {
|
|
|
576
574
|
paddingRight: "32px",
|
|
577
575
|
} },
|
|
578
576
|
" ",
|
|
579
|
-
React.createElement("div", { className: "location-wrapper
|
|
577
|
+
React.createElement("div", { className: "location-wrapper" },
|
|
580
578
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
581
579
|
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
|
|
582
|
-
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between
|
|
580
|
+
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between mt-3", style: {
|
|
583
581
|
paddingLeft: "32px",
|
|
584
582
|
paddingRight: "32px",
|
|
585
583
|
} },
|
|
586
|
-
React.createElement("span", { className: "priceValue col-lg-
|
|
584
|
+
React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6 " },
|
|
587
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),
|
|
588
586
|
" \u20AC",
|
|
589
587
|
React.createElement("div", { className: "price_label" }, "Kaufpreis")),
|
|
@@ -591,13 +589,9 @@ function PropertyCard(props) {
|
|
|
591
589
|
props.property.constructedArea,
|
|
592
590
|
" m\u00B2",
|
|
593
591
|
React.createElement("div", { className: "details" }, "Wohnfl\u00E4che")),
|
|
594
|
-
React.createElement("span", { className: "text-dark value col-lg-
|
|
592
|
+
React.createElement("span", { className: "text-dark value col-lg-3 col-md-3 col-sm-6 text-truncate " },
|
|
595
593
|
+((_h = props.property) === null || _h === void 0 ? void 0 : _h.rooms),
|
|
596
|
-
React.createElement("div", { className: "details" }, "Zimmer")),
|
|
597
|
-
React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate " },
|
|
598
|
-
+props.property.propertyArea,
|
|
599
|
-
" m\u00B2",
|
|
600
|
-
React.createElement("div", { className: "details" }, "Grundst\u00FCck"))),
|
|
594
|
+
React.createElement("div", { className: "details" }, "Zimmer"))),
|
|
601
595
|
React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
|
|
602
596
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
603
597
|
props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|