nestiq-component-library 1.1.169 → 1.1.170

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.
Files changed (7) hide show
  1. package/dist/components/PropertyImageList/PropertyImageList.d.ts +10 -0
  2. package/dist/index.es.js +71 -64
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +71 -64
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/PropertyImageList/PropertyImageList.tsx +32 -11
package/dist/components/PropertyImageList/PropertyImageList.d.ts CHANGED
@@ -7,6 +7,16 @@ interface PopupProps {
7
7
  url: string;
8
8
  }[];
9
9
  floorPlanUrl: string;
10
+ property: {
11
+ selectedFloorPlan?: string;
12
+ pictures: {
13
+ contentUrl: string;
14
+ pictureType: {
15
+ id: number;
16
+ };
17
+ }[];
18
+ };
19
+ baseUrl: string;
10
20
  }
11
21
  export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
12
22
  export {};
package/dist/index.es.js CHANGED
@@ -261,58 +261,11 @@ function ImageListPopup(props) {
261
261
  } }))); }))))))))));
262
262
  }
263
263
 
264
- var FloorPlanPopup = function (_a) {
265
- var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
266
- var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
267
- useEffect(function () {
268
- var _a;
269
- if (contentUrl) {
270
- var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
271
- if (fileFormat === "png" ||
272
- fileFormat === "jpg" ||
273
- fileFormat === "jpeg" ||
274
- fileFormat === "svg") {
275
- setIsContentImage(true);
276
- }
277
- }
278
- }, [contentUrl]);
279
- var downloadButtonClickHandler = function () {
280
- // Create a temporary anchor element
281
- var link = document.createElement("a");
282
- link.href = contentUrl;
283
- link.setAttribute("download", ""); // This attribute hints the browser to download the file
284
- // Append the anchor to the body and click it to trigger the download
285
- document.body.appendChild(link);
286
- link.click();
287
- // Clean up: remove the anchor element
288
- document.body.removeChild(link);
289
- };
290
- return (React.createElement("div", { className: "popup-overlay" },
291
- React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
292
- React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
293
- React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
294
- React.createElement("div", { className: "d-flex justify-content-center" },
295
- React.createElement("div", { className: "p-2 bd-highlight" },
296
- isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
297
- backgroundImage: "url(".concat(contentUrl, ")"),
298
- height: "350px",
299
- width: "600px",
300
- backgroundSize: "cover",
301
- backgroundPosition: "center",
302
- } })),
303
- !isContentImage && (React.createElement("div", { className: "text-white text-center" },
304
- "No Preview Available",
305
- React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
306
- " ",
307
- "Download",
308
- " "))))))));
309
- };
310
-
311
264
  function PropertyImageList(prop) {
312
- var _a;
313
- var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
314
- var _c = useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
315
- var _d = useState(false), isFloorPlanPopupOpen = _d[0], setIsFloorPlanPopupOpen = _d[1];
265
+ var _a, _b;
266
+ var _c = useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
267
+ var _d = useState(false), isImagePopupOpen = _d[0], setIsImagePopupOpen = _d[1];
268
+ var _e = useState(false), isFloorPlanPopupOpen = _e[0], setIsFloorPlanPopupOpen = _e[1];
316
269
  var imageListRef = useRef(null);
317
270
  var handleArrowClickInMainImage = function (direction) {
318
271
  if (!prop.pictureUrls.length)
@@ -323,30 +276,37 @@ function PropertyImageList(prop) {
323
276
  newIndex =
324
277
  (prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
325
278
  }
326
- else if (direction === "right") {
279
+ else {
327
280
  newIndex = (prevIndex + 1) % prop.pictureUrls.length;
328
281
  }
282
+ if (imageListRef.current) {
283
+ imageListRef.current.scrollTo({
284
+ left: newIndex * 150,
285
+ behavior: "smooth",
286
+ });
287
+ }
329
288
  return newIndex || 0;
330
289
  });
331
- imageListRef.current.scrollTo({
332
- left: currentImageIndex * (direction === "left" ? -150 : 150),
333
- behavior: "smooth",
334
- });
335
290
  };
291
+ var floorPlanImages = ((_a = prop.property.pictures) === null || _a === void 0 ? void 0 : _a.filter(function (p) { var _a; return ((_a = p.pictureType) === null || _a === void 0 ? void 0 : _a.id) === 1; }).map(function (p, index) { return ({
292
+ url: prop.baseUrl + p.contentUrl,
293
+ title: "Floor Plan ".concat(index + 1),
294
+ }); })) || [];
295
+ if (prop.property.selectedFloorPlan) {
296
+ floorPlanImages.push({
297
+ url: prop.property.selectedFloorPlan,
298
+ title: "Selected Floor Plan",
299
+ });
300
+ }
336
301
  var toggleAllPhotos = function () {
337
302
  setIsImagePopupOpen(!isImagePopupOpen);
338
303
  };
339
304
  var floorPlanClickHandler = function () {
340
- if (prop.floorPlanUrl) {
341
- setIsFloorPlanPopupOpen(true);
342
- }
343
- };
344
- var floorPlanPopupCloseHandler = function () {
345
- setIsFloorPlanPopupOpen(false);
305
+ setIsFloorPlanPopupOpen(true);
346
306
  };
347
307
  return (React.createElement("div", { className: "col-8 Pimagelist " },
348
308
  React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
349
- backgroundImage: "url(".concat((_a = prop.pictureUrls[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.url, ")"),
309
+ backgroundImage: "url(".concat((_b = prop.pictureUrls[currentImageIndex]) === null || _b === void 0 ? void 0 : _b.url, ")"),
350
310
  backgroundSize: "cover",
351
311
  backgroundPosition: "center",
352
312
  } },
@@ -396,7 +356,7 @@ function PropertyImageList(prop) {
396
356
  React.createElement("img", { src: iconMap, alt: "Map Icon" }),
397
357
  React.createElement("span", { className: "listImgText" }, "Karte")))))),
398
358
  isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
399
- isFloorPlanPopupOpen && (React.createElement(FloorPlanPopup, { contentUrl: prop.floorPlanUrl, onCloseClick: floorPlanPopupCloseHandler }))));
359
+ isFloorPlanPopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsFloorPlanPopupOpen(false); } }))));
400
360
  }
401
361
 
402
362
  var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
@@ -459,6 +419,53 @@ function PropertyCard$1(props) {
459
419
  React.createElement("span", null, "Wohnfl\u00E4che")))));
460
420
  }
461
421
 
422
+ var FloorPlanPopup = function (_a) {
423
+ var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
424
+ var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
425
+ useEffect(function () {
426
+ var _a;
427
+ if (contentUrl) {
428
+ var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
429
+ if (fileFormat === "png" ||
430
+ fileFormat === "jpg" ||
431
+ fileFormat === "jpeg" ||
432
+ fileFormat === "svg") {
433
+ setIsContentImage(true);
434
+ }
435
+ }
436
+ }, [contentUrl]);
437
+ var downloadButtonClickHandler = function () {
438
+ // Create a temporary anchor element
439
+ var link = document.createElement("a");
440
+ link.href = contentUrl;
441
+ link.setAttribute("download", ""); // This attribute hints the browser to download the file
442
+ // Append the anchor to the body and click it to trigger the download
443
+ document.body.appendChild(link);
444
+ link.click();
445
+ // Clean up: remove the anchor element
446
+ document.body.removeChild(link);
447
+ };
448
+ return (React.createElement("div", { className: "popup-overlay" },
449
+ React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
450
+ React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
451
+ React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
452
+ React.createElement("div", { className: "d-flex justify-content-center" },
453
+ React.createElement("div", { className: "p-2 bd-highlight" },
454
+ isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
455
+ backgroundImage: "url(".concat(contentUrl, ")"),
456
+ height: "350px",
457
+ width: "600px",
458
+ backgroundSize: "cover",
459
+ backgroundPosition: "center",
460
+ } })),
461
+ !isContentImage && (React.createElement("div", { className: "text-white text-center" },
462
+ "No Preview Available",
463
+ React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
464
+ " ",
465
+ "Download",
466
+ " "))))))));
467
+ };
468
+
462
469
  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";
463
470
  styleInject(css_248z$3);
464
471