nestiq-component-library 1.1.169 → 1.1.171

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 (13) hide show
  1. package/dist/components/NewPropertyCard/NewPropertyCard.d.ts +0 -1
  2. package/dist/components/PropertyImageList/PropertyImageList.d.ts +18 -1
  3. package/dist/index.es.js +75 -73
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +75 -73
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/FloorPlanPopup/FloorPlanPopup.css +3 -3
  9. package/src/components/NewPropertyCard/NewPropertyCard.tsx +0 -8
  10. package/src/components/Popup/Popup.tsx +29 -29
  11. package/src/components/PropertyImageList/PropertyImageList.tsx +45 -17
  12. package/src/components/ToastWrapper/ToastWrapper.tsx +25 -25
  13. package/src/models/message.model.ts +7 -7
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, _c, _d, _e;
268
+ var _f = React.useState(0), currentImageIndex = _f[0], setCurrentImageIndex = _f[1];
269
+ var _g = React.useState(false), isImagePopupOpen = _g[0], setIsImagePopupOpen = _g[1];
270
+ var _h = React.useState(false), isFloorPlanPopupOpen = _h[0], setIsFloorPlanPopupOpen = _h[1];
318
271
  var imageListRef = React.useRef(null);
319
272
  var handleArrowClickInMainImage = function (direction) {
320
273
  if (!prop.pictureUrls.length)
@@ -325,30 +278,36 @@ 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
+ }); })) || [];
338
297
  var toggleAllPhotos = function () {
339
298
  setIsImagePopupOpen(!isImagePopupOpen);
340
299
  };
341
300
  var floorPlanClickHandler = function () {
342
- if (prop.floorPlanUrl) {
343
- setIsFloorPlanPopupOpen(true);
344
- }
301
+ setIsFloorPlanPopupOpen(true);
345
302
  };
346
- var floorPlanPopupCloseHandler = function () {
347
- setIsFloorPlanPopupOpen(false);
303
+ var t = {
304
+ allPhotos: ((_b = prop.translations) === null || _b === void 0 ? void 0 : _b.allPhotos) || "Alle Fotos",
305
+ map: ((_c = prop.translations) === null || _c === void 0 ? void 0 : _c.map) || "Karte",
306
+ grundriss: ((_d = prop.translations) === null || _d === void 0 ? void 0 : _d.grundriss) || "Grundriss",
348
307
  };
349
308
  return (React.createElement("div", { className: "col-8 Pimagelist " },
350
309
  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, ")"),
310
+ backgroundImage: "url(".concat((_e = prop.pictureUrls[currentImageIndex]) === null || _e === void 0 ? void 0 : _e.url, ")"),
352
311
  backgroundSize: "cover",
353
312
  backgroundPosition: "center",
354
313
  } },
@@ -384,11 +343,13 @@ function PropertyImageList(prop) {
384
343
  React.createElement("div", { className: "col-lg-4 col-4 py-0 px-1", role: "button", onClick: toggleAllPhotos },
385
344
  React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
386
345
  React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
387
- React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
346
+ React.createElement("span", { className: "listImgText" },
347
+ " ",
348
+ t.allPhotos))),
388
349
  React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: floorPlanClickHandler },
389
350
  React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
390
351
  React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
391
- React.createElement("span", { className: "listImgText" }, "Grundriss"))),
352
+ React.createElement("span", { className: "listImgText" }, t.grundriss))),
392
353
  React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: function () {
393
354
  return window.scrollTo({
394
355
  top: document.documentElement.scrollHeight,
@@ -396,9 +357,9 @@ function PropertyImageList(prop) {
396
357
  } },
397
358
  React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
398
359
  React.createElement("img", { src: iconMap, alt: "Map Icon" }),
399
- React.createElement("span", { className: "listImgText" }, "Karte")))))),
400
- isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
401
- isFloorPlanPopupOpen && (React.createElement(FloorPlanPopup, { contentUrl: prop.floorPlanUrl, onCloseClick: floorPlanPopupCloseHandler }))));
360
+ React.createElement("span", { className: "listImgText" }, t.map)))))),
361
+ isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.allPictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
362
+ isFloorPlanPopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsFloorPlanPopupOpen(false); } }))));
402
363
  }
403
364
 
404
365
  var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
@@ -461,6 +422,53 @@ function PropertyCard$1(props) {
461
422
  React.createElement("span", null, "Wohnfl\u00E4che")))));
462
423
  }
463
424
 
425
+ var FloorPlanPopup = function (_a) {
426
+ var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
427
+ var _b = React.useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
428
+ React.useEffect(function () {
429
+ var _a;
430
+ if (contentUrl) {
431
+ var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
432
+ if (fileFormat === "png" ||
433
+ fileFormat === "jpg" ||
434
+ fileFormat === "jpeg" ||
435
+ fileFormat === "svg") {
436
+ setIsContentImage(true);
437
+ }
438
+ }
439
+ }, [contentUrl]);
440
+ var downloadButtonClickHandler = function () {
441
+ // Create a temporary anchor element
442
+ var link = document.createElement("a");
443
+ link.href = contentUrl;
444
+ link.setAttribute("download", ""); // This attribute hints the browser to download the file
445
+ // Append the anchor to the body and click it to trigger the download
446
+ document.body.appendChild(link);
447
+ link.click();
448
+ // Clean up: remove the anchor element
449
+ document.body.removeChild(link);
450
+ };
451
+ return (React.createElement("div", { className: "popup-overlay" },
452
+ React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
453
+ React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
454
+ React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
455
+ React.createElement("div", { className: "d-flex justify-content-center" },
456
+ React.createElement("div", { className: "p-2 bd-highlight" },
457
+ isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
458
+ backgroundImage: "url(".concat(contentUrl, ")"),
459
+ height: "350px",
460
+ width: "600px",
461
+ backgroundSize: "cover",
462
+ backgroundPosition: "center",
463
+ } })),
464
+ !isContentImage && (React.createElement("div", { className: "text-white text-center" },
465
+ "No Preview Available",
466
+ React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
467
+ " ",
468
+ "Download",
469
+ " "))))))));
470
+ };
471
+
464
472
  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
473
  styleInject(css_248z$3);
466
474
 
@@ -497,12 +505,6 @@ function PropertyCard(props) {
497
505
  url: props.baseUrl + p.contentUrl,
498
506
  title: "Floor Plan ".concat(index + 1),
499
507
  }); })) || [];
500
- if (props.property.selectedFloorPlan) {
501
- floorPlanImages.push({
502
- url: props.property.selectedFloorPlan,
503
- title: "Selected Floor Plan",
504
- });
505
- }
506
508
  var handleFloorPlanButton = function () {
507
509
  setIsImagePopupOpen(true);
508
510
  if (props.onFloorPlanClick) {