nestiq-component-library 1.0.16 → 1.0.17

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 (11) hide show
  1. package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +1 -2
  2. package/dist/components/PropertyImageList/PropertyImageList.d.ts +1 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.es.js +91 -8
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.js +91 -8
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/ImageListPopup/ImageListPopup.tsx +2 -2
  10. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +6 -2
  11. package/src/components/PropertyImageList/PropertyImageList.tsx +8 -2
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,4 @@
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";
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$3 = ".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$3);
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$2 = ".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$2);
55
55
 
56
56
  function PropertyDetailsHeader(props) {
57
57
  var _a = useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -103,9 +103,91 @@ 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";
106
+ var css_248z$1 = ".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$1);
108
+
109
+ var css_248z = ".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";
107
110
  styleInject(css_248z);
108
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
+ }
190
+
109
191
  function PropertyImageList(prop) {
110
192
  var _a = useState(null); _a[0]; var setMainImage = _a[1];
111
193
  var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
@@ -188,7 +270,8 @@ 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 }))));
192
275
  }
193
276
 
194
277
  export { Button, Popup, PropertyDetailsHeader, PropertyImageList };
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$3 = ".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$3);
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$2 = ".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$2);
57
57
 
58
58
  function PropertyDetailsHeader(props) {
59
59
  var _a = React.useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -105,9 +105,91 @@ 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";
108
+ var css_248z$1 = ".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$1);
110
+
111
+ var css_248z = ".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";
109
112
  styleInject(css_248z);
110
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
+ }
192
+
111
193
  function PropertyImageList(prop) {
112
194
  var _a = React.useState(null); _a[0]; var setMainImage = _a[1];
113
195
  var _b = React.useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
@@ -190,7 +272,8 @@ 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 }))));
194
277
  }
195
278
 
196
279
  exports.Button = Button;
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.17",
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 {
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx CHANGED
@@ -5,7 +5,7 @@ import locationIcon from "../../assets/images/locationIconBlack.svg";
5
5
  import PopUp from "../ImageListPopup/ImageListPopup";
6
6
  import "./PropertyDetailsHeader.css";
7
7
 
8
- interface PopupProps {
8
+ export interface PopupProps {
9
9
  property: {
10
10
  city: string;
11
11
  constructedArea: string;
@@ -72,7 +72,11 @@ export default function PropertyDetailsHeader(props: PopupProps) {
72
72
  </div>
73
73
  )}
74
74
  </div>
75
- {/* {showPopUp && <PopUp />} */}
75
+ {/* {showPopUp && (
76
+ <PopUp
77
+
78
+ />
79
+ )} */}
76
80
  </div>
77
81
  );
78
82
  }
package/src/components/PropertyImageList/PropertyImageList.tsx CHANGED
@@ -9,6 +9,7 @@ import iconMap from "../../assets/Images/icon_map.svg";
9
9
  import iconLayers from "../../assets/Images/layer_icon.svg";
10
10
  import "./PropertyImageList.css";
11
11
  import ImageListPopup from "../ImageListPopup/ImageListPopup";
12
+ import PopupProps from "../ImageListPopup/ImageListPopup";
12
13
 
13
14
  interface PopupProps {
14
15
  property: {
@@ -194,10 +195,15 @@ export default function PropertyImageList(prop: PopupProps) {
194
195
  </div>
195
196
 
196
197
  {/* Popup for all photos */}
197
- {/* {isImagePopupOpen && (
198
+ {isImagePopupOpen && (
198
199
  <ImageListPopup
200
+ currentImageIndex={currentImageIndex}
201
+ handleArrowClickInMainImage={handleArrowClickInMainImage}
202
+ imageListRef={imageListRef}
203
+ pictureUrls={prop.pictureUrls}
204
+ property={prop.property}
199
205
  />
200
- )} */}
206
+ )}
201
207
  </div>
202
208
  );
203
209
  }