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.es.js
CHANGED
|
@@ -181,7 +181,7 @@ var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
|
181
181
|
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}";
|
|
182
182
|
styleInject(css_248z$6);
|
|
183
183
|
|
|
184
|
-
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";
|
|
184
|
+
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";
|
|
185
185
|
styleInject(css_248z$5);
|
|
186
186
|
|
|
187
187
|
var iconClose = "/static/media/close.b5ce9141e80c688b.png";
|
|
@@ -220,7 +220,7 @@ function ImageListPopup(props) {
|
|
|
220
220
|
React.createElement("span", { className: "text-white align-self-center" }, props.pictureUrls[currentImageIndex].title),
|
|
221
221
|
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
222
222
|
React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
|
|
223
|
-
React.createElement("div", { className: "rounded-circle border onImageArrow
|
|
223
|
+
React.createElement("div", { className: "rounded-circle border onImageArrow d-flex justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
|
|
224
224
|
React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
|
|
225
225
|
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
226
226
|
React.createElement("div", { className: " rounded-5", style: {
|
|
@@ -232,16 +232,14 @@ function ImageListPopup(props) {
|
|
|
232
232
|
} })),
|
|
233
233
|
React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
|
|
234
234
|
" ",
|
|
235
|
-
React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex
|
|
235
|
+
React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
|
|
236
236
|
React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
|
|
237
237
|
React.createElement("div", { className: "d-flex flex-row" }),
|
|
238
238
|
React.createElement("div", { className: "d-flex flex-row justify-content-center w-100 mt-5" },
|
|
239
239
|
React.createElement("div", { className: "d-flex flex-row gap-4 overflow-auto px-3", ref: imageListRef, style: {
|
|
240
240
|
maxWidth: "100%",
|
|
241
241
|
scrollbarWidth: "thin",
|
|
242
|
-
} }, 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
|
|
243
|
-
? "border border-3 border-primary"
|
|
244
|
-
: ""), onClick: function () {
|
|
242
|
+
} }, 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 () {
|
|
245
243
|
setCurrentImageIndex(index);
|
|
246
244
|
imageListRef.current.scrollTo({
|
|
247
245
|
left: index * 170, // 150px width + gap
|
|
@@ -574,14 +572,14 @@ function PropertyCard(props) {
|
|
|
574
572
|
paddingRight: "32px",
|
|
575
573
|
} },
|
|
576
574
|
" ",
|
|
577
|
-
React.createElement("div", { className: "location-wrapper
|
|
575
|
+
React.createElement("div", { className: "location-wrapper" },
|
|
578
576
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
|
|
579
577
|
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A")))),
|
|
580
|
-
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between
|
|
578
|
+
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between mt-3", style: {
|
|
581
579
|
paddingLeft: "32px",
|
|
582
580
|
paddingRight: "32px",
|
|
583
581
|
} },
|
|
584
|
-
React.createElement("span", { className: "priceValue col-lg-
|
|
582
|
+
React.createElement("span", { className: "priceValue col-lg-5 col-md-5 col-sm-6 " },
|
|
585
583
|
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),
|
|
586
584
|
" \u20AC",
|
|
587
585
|
React.createElement("div", { className: "price_label" }, "Kaufpreis")),
|
|
@@ -589,13 +587,9 @@ function PropertyCard(props) {
|
|
|
589
587
|
props.property.constructedArea,
|
|
590
588
|
" m\u00B2",
|
|
591
589
|
React.createElement("div", { className: "details" }, "Wohnfl\u00E4che")),
|
|
592
|
-
React.createElement("span", { className: "text-dark value col-lg-
|
|
590
|
+
React.createElement("span", { className: "text-dark value col-lg-3 col-md-3 col-sm-6 text-truncate " },
|
|
593
591
|
+((_h = props.property) === null || _h === void 0 ? void 0 : _h.rooms),
|
|
594
|
-
React.createElement("div", { className: "details" }, "Zimmer")),
|
|
595
|
-
React.createElement("span", { className: "text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate " },
|
|
596
|
-
+props.property.propertyArea,
|
|
597
|
-
" m\u00B2",
|
|
598
|
-
React.createElement("div", { className: "details" }, "Grundst\u00FCck"))),
|
|
592
|
+
React.createElement("div", { className: "details" }, "Zimmer"))),
|
|
599
593
|
React.createElement("div", { className: "labelTopClass d-flex start-0 col-sm-5 col-lg-8 ", style: { padding: "0 28px" } },
|
|
600
594
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
601
595
|
props.property.historicalProtection && (React.createElement("label", { className: "chipLabel justify-content-center align-items-center" },
|