nestiq-component-library 1.1.93 → 1.1.94
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/assets/images/Icon_rightArrow.svg +3 -0
- package/dist/assets/images/LayersIcon.svg +5 -0
- package/dist/assets/images/blackarrow-Right.svg +3 -0
- package/dist/assets/images/blckarrow-Left.svg +3 -0
- package/dist/assets/images/{card-arrow-left.55343410142dad3f.svg → card-arrow-left.28090aba4b4f2006.svg} +4 -4
- package/dist/assets/images/{card-arrow-right.60b3bf0e34c1800d.svg → card-arrow-right.c60af4cbbd49f3aa.svg} +4 -4
- package/dist/assets/images/chevron-left.svg +3 -0
- package/dist/assets/images/default-property.jpg +0 -0
- package/dist/assets/images/heartIcon.svg +3 -0
- package/dist/assets/images/icon-close-white.webp +0 -0
- package/dist/assets/images/icon_close 2.e41bb9a4db48e048.png +0 -0
- package/dist/assets/images/icon_close_2.png +0 -0
- package/dist/assets/images/icon_gallery.svg +4 -0
- package/dist/assets/images/icon_map.svg +10 -0
- package/dist/assets/images/icon_share_1.svg +3 -0
- package/dist/assets/images/{imooly.b46514ac970e6052.svg → imooly.890e3dd01ea33574.svg} +7 -7
- package/dist/assets/images/layer_icon.svg +5 -0
- package/dist/assets/images/locationIcon.0af399c78e0cdc20.svg +4 -0
- package/dist/assets/images/locationIcon.svg +4 -0
- package/dist/assets/images/locationIconBlack.svg +4 -0
- package/dist/assets/images/{more.ce14789c8d37e327.svg → more.1e158adc48fbb406.svg} +12 -12
- package/dist/assets/images/no-image-icon.png +0 -0
- package/dist/components/Button/Button.js +6 -0
- package/dist/components/ImageListPopup/ImageListPopup.js +26 -0
- package/dist/components/MessagePopup/ErrorPopup.d.ts +7 -0
- package/dist/components/Popup/Popup.js +12 -0
- package/dist/components/SharePopup/PopUp.d.ts +7 -0
- package/dist/index.es.js +14 -13
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +14 -13
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +36 -36
- package/src/assets/images/card-arrow-left.svg +4 -4
- package/src/assets/images/card-arrow-right.svg +4 -4
- package/src/assets/images/imooly.svg +7 -7
- package/src/assets/images/more.svg +12 -12
- package/src/components/FloorPlanPopup/FloorPlanPopup.css +3 -3
- package/src/components/FloorPlanPopup/FloorPlanPopup.tsx +83 -83
- package/src/components/ImageListPopup/ImageListPopup.css +83 -83
- package/src/components/ImageListPopup/ImageListPopup.tsx +141 -141
- package/src/components/MessagePopup/MessagePopUp.tsx +156 -156
- package/src/components/NewPropertyCard/NewPropertyCard.css +372 -370
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +287 -280
- package/src/components/Popup/Popup.tsx +29 -29
- package/src/components/PropertyImageList/PropertyImageList.tsx +2 -2
- package/src/components/ToastWrapper/ToastWrapper.tsx +25 -25
- package/src/models/message.model.ts +7 -7
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}\r\n\r\n.listImageButton {\r\n background-color: black;\r\n align-items: center !important;\r\n justify-content: center !important;\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.imagesArray {\r\n background-size: \"cover\" !important;\r\n}\r\n@media (max-width: 380px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 58vw;\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";
|
|
184
184
|
styleInject(css_248z$6);
|
|
185
185
|
|
|
186
|
-
var css_248z$5 = ".popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\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.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";
|
|
187
187
|
styleInject(css_248z$5);
|
|
188
188
|
|
|
189
189
|
var iconClose = "/static/media/close.b5ce9141e80c688b.png";
|
|
@@ -356,11 +356,11 @@ function PropertyImageList(prop) {
|
|
|
356
356
|
React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
|
|
357
357
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
|
|
358
358
|
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
|
|
359
|
-
React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
|
|
359
|
+
React.createElement("img", { src: iconArrowRight, className: "arroIconColour h-100", alt: "Right Arrow" }))))),
|
|
360
360
|
React.createElement("div", { className: "col-7 col-lg-6 d-flex flex-row" },
|
|
361
361
|
React.createElement("div", { className: "col-lg-4 col-4 p-1", role: "button", onClick: toggleAllPhotos },
|
|
362
362
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
363
|
-
React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
|
|
363
|
+
React.createElement("img", { src: iconGallery, alt: "Gallery Icon", className: "h-100" }),
|
|
364
364
|
React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
|
|
365
365
|
React.createElement("div", { className: "col-lg-4 col-3 p-1", role: "button", onClick: floorPlanClickHandler },
|
|
366
366
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
@@ -438,22 +438,22 @@ function PropertyCard$1(props) {
|
|
|
438
438
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
439
439
|
}
|
|
440
440
|
|
|
441
|
-
var css_248z$3 = ".
|
|
441
|
+
var css_248z$3 = ".padding-global {\r\n height: 737px !important;\r\n padding: 0 40px;\r\n}\r\n.header {\r\n font-size: 48px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n.listing-compacts {\r\n max-width: 750px;\r\n align-self: stretch;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n gap: 16px;\r\n border-radius: 0px 32px 32px 0px;\r\n /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */\r\n background-color: rgba(58, 58, 58, 0.068);\r\n height: 460px;\r\n padding: 32px;\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: 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.kontactbutton {\r\n width: 180px;\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-family: Inter;\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.firstLabel {\r\n width: 100px;\r\n height: 25px;\r\n gap: 6px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #031012 !important;\r\n background-color: var(--main-yellow);\r\n}\r\n\r\n.secondLabel {\r\n width: 85px;\r\n height: 25px;\r\n padding: 0 7px;\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.thirdLabels {\r\n width: 110px;\r\n padding: 0 7px;\r\n height: 25px;\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.fourthLabels {\r\n padding: 2px;\r\n\r\n width: 100px;\r\n height: 25px;\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}\r\n\r\n.layersVector {\r\n width: 15.1px;\r\n height: 16px;\r\n}\r\n\r\n.layersText {\r\n font-size: 14px;\r\n color: #1b1b1b;\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.locationTexts {\r\n font-size: 14px;\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.card{\r\nmax-width: 750px;\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: 14px;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n.value {\r\n font-size: 20px;\r\n text-align: center;\r\n font-weight: 500;\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@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 }\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";
|
|
442
442
|
styleInject(css_248z$3);
|
|
443
443
|
|
|
444
444
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
445
445
|
|
|
446
446
|
var shareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
|
|
447
447
|
|
|
448
|
-
var moreIcon = "/static/media/more.
|
|
448
|
+
var moreIcon = "/static/media/more.1e158adc48fbb406.svg";
|
|
449
449
|
|
|
450
|
-
var arrowLeft = "/static/media/card-arrow-left.
|
|
450
|
+
var arrowLeft = "/static/media/card-arrow-left.28090aba4b4f2006.svg";
|
|
451
451
|
|
|
452
|
-
var arrowRight = "/static/media/card-arrow-right.
|
|
452
|
+
var arrowRight = "/static/media/card-arrow-right.c60af4cbbd49f3aa.svg";
|
|
453
453
|
|
|
454
454
|
var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
455
455
|
|
|
456
|
-
var immooly = "/static/media/imooly.
|
|
456
|
+
var immooly = "/static/media/imooly.890e3dd01ea33574.svg";
|
|
457
457
|
|
|
458
458
|
function PropertyCard(props) {
|
|
459
459
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -503,12 +503,13 @@ function PropertyCard(props) {
|
|
|
503
503
|
console.warn("imageListRef is not set");
|
|
504
504
|
}
|
|
505
505
|
};
|
|
506
|
-
return (React.createElement("div", { className: "d-flex flex-row
|
|
507
|
-
React.createElement("div", { className: "d-flex flex-column col-md-6", onClick: props.onClick },
|
|
508
|
-
React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100
|
|
506
|
+
return (React.createElement("div", { className: "d-flex flex-row " },
|
|
507
|
+
React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6", onClick: props.onClick },
|
|
508
|
+
React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
|
|
509
509
|
backgroundImage: "url(".concat(mainImage || pictureUrls[0], ")"),
|
|
510
510
|
backgroundSize: "cover",
|
|
511
511
|
backgroundPosition: "center",
|
|
512
|
+
maxWidth: "740px",
|
|
512
513
|
} },
|
|
513
514
|
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-5" },
|
|
514
515
|
React.createElement("div", { className: "d-flex ms-2", style: { position: "absolute", left: "0" }, onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
|
|
@@ -522,8 +523,8 @@ function PropertyCard(props) {
|
|
|
522
523
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
523
524
|
" ",
|
|
524
525
|
"Grundriss")))),
|
|
525
|
-
React.createElement("div", { className: "d-flex flex-column listing-compacts col-md-6" },
|
|
526
|
-
React.createElement("div", { className: "d-flex align-self-end justify-content-end gap-2" },
|
|
526
|
+
React.createElement("div", { className: "d-flex flex-column listing-compacts col-md-6 col-lg-6" },
|
|
527
|
+
React.createElement("div", { className: "d-flex align-self-end justify-content-end gap-2", style: { maxWidth: "740px" } },
|
|
527
528
|
React.createElement("img", { src: shareIcon, alt: "Location Icon", className: "w-50 ", onClick: handleSharePopUp }),
|
|
528
529
|
React.createElement("img", { src: moreIcon, alt: "Location Icon", className: "" })),
|
|
529
530
|
React.createElement("div", null,
|