nestiq-component-library 1.0.16 → 1.0.19

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 (16) hide show
  1. package/dist/components/PropertyCard/PropertyCard.d.ts +24 -0
  2. package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +1 -2
  3. package/dist/components/PropertyImageList/PropertyImageList.d.ts +1 -0
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.es.js +143 -10
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.js +143 -9
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/ImageListPopup/ImageListPopup.tsx +2 -2
  11. package/src/components/PropertyCard/PropertyCard.css +268 -0
  12. package/src/components/PropertyCard/PropertyCard.tsx +141 -0
  13. package/src/components/PropertyCard/PropertyDaet.json +1210 -0
  14. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +6 -2
  15. package/src/components/PropertyImageList/PropertyImageList.tsx +8 -2
  16. package/src/index.tsx +2 -0
package/dist/components/PropertyCard/PropertyCard.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import "../PropertyCard/PropertyCard.css";
3
+ interface PopupProps {
4
+ property: {
5
+ city: string;
6
+ pictures: {
7
+ contentUrl: string;
8
+ }[];
9
+ historicalProtection: boolean;
10
+ basement: boolean;
11
+ balcony: boolean;
12
+ terrace: boolean;
13
+ guestBathroom: boolean;
14
+ bathrooms: string;
15
+ usableArea: string;
16
+ id: string;
17
+ contentUrl: string;
18
+ rooms: string;
19
+ };
20
+ onClick: any;
21
+ pictureUrl: any[];
22
+ }
23
+ export default function PropertyCard(props: PopupProps): React.JSX.Element;
24
+ export {};
package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import "./PropertyDetailsHeader.css";
3
- interface PopupProps {
3
+ export interface PopupProps {
4
4
  property: {
5
5
  city: string;
6
6
  constructedArea: string;
@@ -11,4 +11,3 @@ interface PopupProps {
11
11
  showPopUp: boolean;
12
12
  }
13
13
  export default function PropertyDetailsHeader(props: PopupProps): React.JSX.Element;
14
- export {};
package/dist/components/PropertyImageList/PropertyImageList.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import "./PropertyImageList.css";
3
+ import PopupProps from "../ImageListPopup/ImageListPopup";
3
4
  interface PopupProps {
4
5
  property: {
5
6
  city: string;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as Button } from "./components/Button/Button";
2
2
  export { default as Popup } from "./components/Popup/Popup";
3
3
  export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
4
- export { default as PropertyImageList } from "./components/PropertyImageList/PropertyImageList";
4
+ export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";
5
+ export { default as PropertyCard } from "./components/PropertyCard//PropertyCard";
package/dist/index.es.js CHANGED
@@ -5,7 +5,7 @@ var Button = function (_a) {
5
5
  return React.createElement("button", null, label);
6
6
  };
7
7
 
8
- var closeIcon = "icon_close_2.png";
8
+ var iconClose = "icon_close_2.png";
9
9
 
10
10
  function styleInject(css, ref) {
11
11
  if ( ref === void 0 ) ref = {};
@@ -34,15 +34,15 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- var css_248z$2 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
38
- styleInject(css_248z$2);
37
+ var css_248z$4 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
38
+ styleInject(css_248z$4);
39
39
 
40
40
  var Popup = function (_a) {
41
41
  var onCloseClick = _a.onCloseClick, children = _a.children;
42
42
  return (React.createElement("div", { className: "popup-overlay" },
43
43
  React.createElement("div", { className: "shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
44
44
  React.createElement("div", { className: "end-0 top-0 position-absolute " },
45
- React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
45
+ React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
46
46
  children)));
47
47
  };
48
48
 
@@ -50,8 +50,8 @@ var ShareIcon = "icon_share_1.svg";
50
50
 
51
51
  var locationIcon = "locationIconBlack.svg";
52
52
 
53
- var css_248z$1 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
54
- styleInject(css_248z$1);
53
+ var css_248z$3 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
54
+ styleInject(css_248z$3);
55
55
 
56
56
  function PropertyDetailsHeader(props) {
57
57
  var _a = useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -103,8 +103,90 @@ var iconMap = "icon_map.svg";
103
103
 
104
104
  var iconLayers = "layer_icon.svg";
105
105
 
106
- var css_248z = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
107
- styleInject(css_248z);
106
+ var css_248z$2 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
107
+ styleInject(css_248z$2);
108
+
109
+ var css_248z$1 = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: transparent;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.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";
110
+ styleInject(css_248z$1);
111
+
112
+ function ImageListPopup(props) {
113
+ var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
114
+ // const { id } = useParams();
115
+ var _b = useState(null); _b[0]; var setMainImage = _b[1];
116
+ var _c = useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
117
+ // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
118
+ useRef(null);
119
+ // const baseUrl = "https://api-dev.nestiq.de";
120
+ // const pictureUrls = props.property.pictures.map(
121
+ // (picture) => `${baseUrl}${picture.contentUrl}`
122
+ // );
123
+ props.pictureUrls.map(function (pic) {
124
+ return {
125
+ src: pic,
126
+ title: "Not Specified",
127
+ };
128
+ });
129
+ useEffect(function () {
130
+ if (props.pictureUrls.length > 0) {
131
+ setMainImage(props.pictureUrls[0]);
132
+ }
133
+ }, [props.pictureUrls]);
134
+ var handleArrowClickInMainImage = function (direction) {
135
+ if (!props.property || props.pictureUrls.length === 0)
136
+ return;
137
+ var newIndex = currentImageIndex;
138
+ if (direction === "left") {
139
+ newIndex =
140
+ (currentImageIndex - 1 + props.pictureUrls.length) %
141
+ props.pictureUrls.length;
142
+ }
143
+ else if (direction === "right") {
144
+ newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
145
+ }
146
+ setCurrentImageIndex(newIndex);
147
+ setMainImage(props.pictureUrls[newIndex]);
148
+ props.imageListRef.current.scrollTo({
149
+ left: newIndex * 150,
150
+ behavior: "smooth",
151
+ });
152
+ };
153
+ var handleClose = function () {
154
+ setShowPopUp(false);
155
+ };
156
+ return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
157
+ React.createElement("div", { className: " d-flex flex-column col-6 " },
158
+ React.createElement("div", { className: "d-flex align-self-end me-0 ms-5" },
159
+ React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon ", onClick: handleClose })),
160
+ React.createElement("div", { className: "d-flex justify-content-center" },
161
+ React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
162
+ React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
163
+ React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
164
+ React.createElement("div", { className: "p-2 bd-highlight" },
165
+ React.createElement("div", { className: " rounded-5 mainImage ", style: {
166
+ backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex], ")"),
167
+ height: "350px",
168
+ width: "600px",
169
+ backgroundSize: "cover",
170
+ backgroundPosition: "center",
171
+ } })),
172
+ React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
173
+ " ",
174
+ React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
175
+ React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
176
+ React.createElement("div", { className: "d-flex flex-row" }),
177
+ React.createElement("div", { className: "d-flex flex-row gap-4 w-100 secondList " },
178
+ React.createElement("div", { className: "col-lg-12 d-flex flex-row p-1 align-self-center mt-5" },
179
+ React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
180
+ React.createElement("div", { className: "col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto ", ref: props.imageListRef }, props.property && (React.createElement("div", { className: "col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
181
+ setMainImage(imageUrl);
182
+ setCurrentImageIndex(index);
183
+ props.imageListRef.current.scrollTo({
184
+ left: index * 150,
185
+ behavior: "smooth",
186
+ });
187
+ }, role: "button" },
188
+ React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
189
+ }
108
190
 
109
191
  function PropertyImageList(prop) {
110
192
  var _a = useState(null); _a[0]; var setMainImage = _a[1];
@@ -188,8 +270,59 @@ function PropertyImageList(prop) {
188
270
  } },
189
271
  React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
190
272
  React.createElement("img", { src: iconMap, alt: "Map Icon" }),
191
- React.createElement("span", { className: "listImgText" }, "Karte")))))));
273
+ React.createElement("span", { className: "listImgText" }, "Karte"))))),
274
+ isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
275
+ }
276
+
277
+ var css_248z = ".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\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: #ffb525;\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}\r\n\r\n.thirdLabel {\r\n width: 90px;\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.fourthLabel {\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: #ffb525;\r\n background-color: #ffb525;\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.locationText {\r\n font-size: 14px;\r\n color: white;\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: #fff;\r\n}\r\n\r\n.detail {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\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.cardStyle {\r\n width: 405px;\r\n max-width: 2405px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 350px;\r\n border-radius: 30px !important;\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";
278
+ styleInject(css_248z);
279
+
280
+ function PropertyCard(props) {
281
+ var _a = useState(false); _a[0]; _a[1];
282
+ return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
283
+ backgroundImage: "url(".concat(props.pictureUrl, ")"),
284
+ backgroundSize: "cover",
285
+ backgroundPosition: "center",
286
+ }, onClick: props.onClick, role: "button" },
287
+ React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
288
+ React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
289
+ React.createElement("label", { className: "firstLabel d-flex flex-row justify-content-center align-items-center" },
290
+ React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "layersVector" }),
291
+ React.createElement("span", { className: "layersText" }, "Grundriss")),
292
+ props.property.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
293
+ React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
294
+ props.property.basement && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
295
+ React.createElement("span", { className: "layersText " }, "Keller"))),
296
+ props.property.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
297
+ React.createElement("span", { className: "layersText " }, "Balkon")))),
298
+ React.createElement("div", { className: "d-flex align-items-center ms-2 start-0 gap-2" },
299
+ props.property.terrace && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center " },
300
+ React.createElement("span", { className: "layersText" }, "Terrace"))),
301
+ props.property.guestBathroom && (React.createElement("label", { className: "fourthLabel d-flex flex-row justify-content-center align-items-center " },
302
+ React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
303
+ React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
304
+ React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2" },
305
+ React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate" })),
306
+ React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
307
+ React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "Vector" }),
308
+ React.createElement("span", { className: "locationText " }, props.property.city || "N/A")),
309
+ React.createElement("div", { className: "d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0" },
310
+ React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
311
+ +props.property.rooms,
312
+ React.createElement("br", null),
313
+ React.createElement("span", null, "Zimmer")),
314
+ React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
315
+ +props.property.bathrooms,
316
+ React.createElement("br", null),
317
+ +props.property.bathrooms,
318
+ React.createElement("br", null),
319
+ React.createElement("span", null, "Bad")),
320
+ React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
321
+ props.property.usableArea,
322
+ " m\u00B2",
323
+ React.createElement("br", null),
324
+ React.createElement("span", null, "Wohnfl\u00E4che")))));
192
325
  }
193
326
 
194
- export { Button, Popup, PropertyDetailsHeader, PropertyImageList };
327
+ export { Button, Popup, PropertyCard, PropertyDetailsHeader, PropertyImageList };
195
328
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\""],"names":[],"mappings":";;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\""],"names":[],"mappings":";;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ var Button = function (_a) {
7
7
  return React.createElement("button", null, label);
8
8
  };
9
9
 
10
- var closeIcon = "icon_close_2.png";
10
+ var iconClose = "icon_close_2.png";
11
11
 
12
12
  function styleInject(css, ref) {
13
13
  if ( ref === void 0 ) ref = {};
@@ -36,15 +36,15 @@ function styleInject(css, ref) {
36
36
  }
37
37
  }
38
38
 
39
- var css_248z$2 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
40
- styleInject(css_248z$2);
39
+ var css_248z$4 = ".popup-overlay {\r\n position: fixed; /* Fixed position to cover the whole screen */\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n display: flex; /* Flexbox to center the popup */\r\n justify-content: center; /* Center horizontally */\r\n align-items: center; /* Center vertically */\r\n z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n";
40
+ styleInject(css_248z$4);
41
41
 
42
42
  var Popup = function (_a) {
43
43
  var onCloseClick = _a.onCloseClick, children = _a.children;
44
44
  return (React.createElement("div", { className: "popup-overlay" },
45
45
  React.createElement("div", { className: "shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
46
46
  React.createElement("div", { className: "end-0 top-0 position-absolute " },
47
- React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
47
+ React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
48
48
  children)));
49
49
  };
50
50
 
@@ -52,8 +52,8 @@ var ShareIcon = "icon_share_1.svg";
52
52
 
53
53
  var locationIcon = "locationIconBlack.svg";
54
54
 
55
- var css_248z$1 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
56
- styleInject(css_248z$1);
55
+ var css_248z$3 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
56
+ styleInject(css_248z$3);
57
57
 
58
58
  function PropertyDetailsHeader(props) {
59
59
  var _a = React.useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -105,8 +105,90 @@ var iconMap = "icon_map.svg";
105
105
 
106
106
  var iconLayers = "layer_icon.svg";
107
107
 
108
- var css_248z = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
109
- styleInject(css_248z);
108
+ var css_248z$2 = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
109
+ styleInject(css_248z$2);
110
+
111
+ var css_248z$1 = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: transparent;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.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";
112
+ styleInject(css_248z$1);
113
+
114
+ function ImageListPopup(props) {
115
+ var _a = React.useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
116
+ // const { id } = useParams();
117
+ var _b = React.useState(null); _b[0]; var setMainImage = _b[1];
118
+ var _c = React.useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
119
+ // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
120
+ React.useRef(null);
121
+ // const baseUrl = "https://api-dev.nestiq.de";
122
+ // const pictureUrls = props.property.pictures.map(
123
+ // (picture) => `${baseUrl}${picture.contentUrl}`
124
+ // );
125
+ props.pictureUrls.map(function (pic) {
126
+ return {
127
+ src: pic,
128
+ title: "Not Specified",
129
+ };
130
+ });
131
+ React.useEffect(function () {
132
+ if (props.pictureUrls.length > 0) {
133
+ setMainImage(props.pictureUrls[0]);
134
+ }
135
+ }, [props.pictureUrls]);
136
+ var handleArrowClickInMainImage = function (direction) {
137
+ if (!props.property || props.pictureUrls.length === 0)
138
+ return;
139
+ var newIndex = currentImageIndex;
140
+ if (direction === "left") {
141
+ newIndex =
142
+ (currentImageIndex - 1 + props.pictureUrls.length) %
143
+ props.pictureUrls.length;
144
+ }
145
+ else if (direction === "right") {
146
+ newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
147
+ }
148
+ setCurrentImageIndex(newIndex);
149
+ setMainImage(props.pictureUrls[newIndex]);
150
+ props.imageListRef.current.scrollTo({
151
+ left: newIndex * 150,
152
+ behavior: "smooth",
153
+ });
154
+ };
155
+ var handleClose = function () {
156
+ setShowPopUp(false);
157
+ };
158
+ return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
159
+ React.createElement("div", { className: " d-flex flex-column col-6 " },
160
+ React.createElement("div", { className: "d-flex align-self-end me-0 ms-5" },
161
+ React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon ", onClick: handleClose })),
162
+ React.createElement("div", { className: "d-flex justify-content-center" },
163
+ React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
164
+ React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
165
+ React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
166
+ React.createElement("div", { className: "p-2 bd-highlight" },
167
+ React.createElement("div", { className: " rounded-5 mainImage ", style: {
168
+ backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex], ")"),
169
+ height: "350px",
170
+ width: "600px",
171
+ backgroundSize: "cover",
172
+ backgroundPosition: "center",
173
+ } })),
174
+ React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
175
+ " ",
176
+ React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
177
+ React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
178
+ React.createElement("div", { className: "d-flex flex-row" }),
179
+ React.createElement("div", { className: "d-flex flex-row gap-4 w-100 secondList " },
180
+ React.createElement("div", { className: "col-lg-12 d-flex flex-row p-1 align-self-center mt-5" },
181
+ React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
182
+ React.createElement("div", { className: "col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto ", ref: props.imageListRef }, props.property && (React.createElement("div", { className: "col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
183
+ setMainImage(imageUrl);
184
+ setCurrentImageIndex(index);
185
+ props.imageListRef.current.scrollTo({
186
+ left: index * 150,
187
+ behavior: "smooth",
188
+ });
189
+ }, role: "button" },
190
+ React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
191
+ }
110
192
 
111
193
  function PropertyImageList(prop) {
112
194
  var _a = React.useState(null); _a[0]; var setMainImage = _a[1];
@@ -190,11 +272,63 @@ function PropertyImageList(prop) {
190
272
  } },
191
273
  React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
192
274
  React.createElement("img", { src: iconMap, alt: "Map Icon" }),
193
- React.createElement("span", { className: "listImgText" }, "Karte")))))));
275
+ React.createElement("span", { className: "listImgText" }, "Karte"))))),
276
+ isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
277
+ }
278
+
279
+ var css_248z = ".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\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: #ffb525;\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}\r\n\r\n.thirdLabel {\r\n width: 90px;\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.fourthLabel {\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: #ffb525;\r\n background-color: #ffb525;\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.locationText {\r\n font-size: 14px;\r\n color: white;\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: #fff;\r\n}\r\n\r\n.detail {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\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.cardStyle {\r\n width: 405px;\r\n max-width: 2405px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 350px;\r\n border-radius: 30px !important;\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";
280
+ styleInject(css_248z);
281
+
282
+ function PropertyCard(props) {
283
+ var _a = React.useState(false); _a[0]; _a[1];
284
+ return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
285
+ backgroundImage: "url(".concat(props.pictureUrl, ")"),
286
+ backgroundSize: "cover",
287
+ backgroundPosition: "center",
288
+ }, onClick: props.onClick, role: "button" },
289
+ React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
290
+ React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
291
+ React.createElement("label", { className: "firstLabel d-flex flex-row justify-content-center align-items-center" },
292
+ React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "layersVector" }),
293
+ React.createElement("span", { className: "layersText" }, "Grundriss")),
294
+ props.property.historicalProtection && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center" },
295
+ React.createElement("span", { className: "layersText" }, "Denkmalschutz"))),
296
+ props.property.basement && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
297
+ React.createElement("span", { className: "layersText " }, "Keller"))),
298
+ props.property.balcony && (React.createElement("label", { className: "secondLabel d-flex flex-row justify-content-center align-items-center" },
299
+ React.createElement("span", { className: "layersText " }, "Balkon")))),
300
+ React.createElement("div", { className: "d-flex align-items-center ms-2 start-0 gap-2" },
301
+ props.property.terrace && (React.createElement("label", { className: "thirdLabel d-flex flex-row justify-content-center align-items-center " },
302
+ React.createElement("span", { className: "layersText" }, "Terrace"))),
303
+ props.property.guestBathroom && (React.createElement("label", { className: "fourthLabel d-flex flex-row justify-content-center align-items-center " },
304
+ React.createElement("span", { className: "layersText" }, "Gäste-WC"))))),
305
+ React.createElement("div", { className: "d-flex align-items-center position-absolute top-0 end-0 p-3" }),
306
+ React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0 p-2" },
307
+ React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate" })),
308
+ React.createElement("div", { className: "d-flex align-items-center position-absolute bottom-0 start-0 p-2" },
309
+ React.createElement("img", { src: blcIconArrowRight, alt: "Location Icon", className: "Vector" }),
310
+ React.createElement("span", { className: "locationText " }, props.property.city || "N/A")),
311
+ React.createElement("div", { className: "d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0" },
312
+ React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
313
+ +props.property.rooms,
314
+ React.createElement("br", null),
315
+ React.createElement("span", null, "Zimmer")),
316
+ React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
317
+ +props.property.bathrooms,
318
+ React.createElement("br", null),
319
+ +props.property.bathrooms,
320
+ React.createElement("br", null),
321
+ React.createElement("span", null, "Bad")),
322
+ React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
323
+ props.property.usableArea,
324
+ " m\u00B2",
325
+ React.createElement("br", null),
326
+ React.createElement("span", null, "Wohnfl\u00E4che")))));
194
327
  }
195
328
 
196
329
  exports.Button = Button;
197
330
  exports.Popup = Popup;
331
+ exports.PropertyCard = PropertyCard;
198
332
  exports.PropertyDetailsHeader = PropertyDetailsHeader;
199
333
  exports.PropertyImageList = PropertyImageList;
200
334
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\""],"names":[],"mappings":";;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\""],"names":[],"mappings":";;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.16",
3
+ "version": "1.0.19",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/components/ImageListPopup/ImageListPopup.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import "./ImageListPopup.css";
2
2
  import React, { useEffect, useRef, useState } from "react";
3
3
  // import icon_checkmark from "../../../assets/Images/icon_checkmark.svg";
4
- import blcIconArrowRight from "../../../../../assets/Images/blackarrow-Right.svg";
5
- import blcIconArrowLeft from "../../../../../assets/Images/blckarrow-Left.svg";
4
+ import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
5
+ import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
6
6
  import iconClose from "../../assets/images/icon_close_2.png";
7
7
 
8
8
  interface PopupProps {