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