nestiq-component-library 1.0.21 → 1.0.23

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 (28) hide show
  1. package/dist/components/Button/Button.js +6 -0
  2. package/dist/components/ImageListPopup/ImageListPopup.js +26 -0
  3. package/dist/components/Popup/Popup.js +12 -0
  4. package/dist/components/PropertyImageList/PropertyImageList.d.ts +1 -5
  5. package/dist/index.es.js +11 -172
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.js +11 -172
  8. package/dist/index.js.map +1 -1
  9. package/nestiq-component-library-1.0.22.tgz +0 -0
  10. package/package.json +7 -3
  11. package/rollup.config.mjs +40 -40
  12. package/src/components/ImageListPopup/ImageListPopup.css +107 -107
  13. package/src/components/Popup/Popup.tsx +28 -28
  14. package/src/components/PropertyCard/PropertyCard.tsx +1 -1
  15. package/src/components/PropertyImageList/PropertyImageList.tsx +139 -130
  16. package/dist/assets/images/Icon_rightArrow.bced4a705c07148d.svg +0 -3
  17. package/dist/assets/images/LayersIcon.34c085c352a2c9c8.svg +0 -5
  18. package/dist/assets/images/blackarrow-Right.e585ae62dd55abae.svg +0 -3
  19. package/dist/assets/images/blckarrow-Left.e2134741aa368d30.svg +0 -3
  20. package/dist/assets/images/chevron-left.04f0a7f16b745c1a.svg +0 -3
  21. package/dist/assets/images/default-property.9987f19670be82b6.jpg +0 -0
  22. package/dist/assets/images/icon_close_2.e41bb9a4db48e048.png +0 -0
  23. package/dist/assets/images/icon_gallery.269b721daf2ca907.svg +0 -4
  24. package/dist/assets/images/icon_map.2318ec664c3e615e.svg +0 -10
  25. package/dist/assets/images/icon_share_1.b9ec05630dc1087e.svg +0 -3
  26. package/dist/assets/images/layer_icon.9b56c187199c44b5.svg +0 -5
  27. package/dist/assets/images/locationIcon.0af399c78e0cdc20.svg +0 -4
  28. package/dist/assets/images/locationIconBlack.eb8e9e9226b43573.svg +0 -4
@@ -18,19 +18,16 @@ interface PopupProps {
18
18
  rooms: string;
19
19
  propertyArea: string;
20
20
  askingPrice: string;
21
- pictures: any[];
22
21
  };
23
- handleArrowClickInMainImage: any;
24
22
  pictureUrls: any[];
25
23
  currentImageIndex: number;
26
- imageListRef: any;
27
24
  isImagePopupOpen: boolean;
28
25
  }
29
26
  export default function PropertyImageList(prop: PopupProps) {
30
27
  const [mainImage, setMainImage] = useState(null);
31
28
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
32
29
  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
33
- const imageListRef = useRef(null);
30
+ const imageListRef = useRef<HTMLDivElement | null>(null);
34
31
  const [open, setopen] = useState<boolean>(false);
35
32
  // const [pictureUrls, setPictureUrls] = useState([]);
36
33
 
@@ -59,151 +56,163 @@ export default function PropertyImageList(prop: PopupProps) {
59
56
  setCurrentImageIndex(newIndex);
60
57
  setMainImage(prop.pictureUrls[newIndex]);
61
58
 
62
- prop.imageListRef.current.scrollTo({
63
- left: newIndex * 150,
64
- behavior: "smooth",
65
- });
66
- };
59
+ if (imageListRef.current) {
60
+ imageListRef.current.scrollTo({
61
+ left: newIndex * 150,
62
+ behavior: "smooth",
63
+ });
64
+ }
67
65
 
68
- const toggleAllPhotos = () => {
69
- setIsImagePopupOpen(!isImagePopupOpen);
70
- };
66
+ const toggleAllPhotos = () => {
67
+ setIsImagePopupOpen(!isImagePopupOpen);
68
+ };
71
69
 
72
- return (
73
- <div className="col-8 me-2 Pimagelist">
74
- <div
75
- className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
76
- style={{
77
- backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
78
- backgroundSize: "cover",
79
- backgroundPosition: "center",
80
- }}
81
- >
82
- {/* Arrows on the main image */}
83
- <div
84
- className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
85
- role="button"
86
- onClick={() => handleArrowClickInMainImage("left")}
87
- >
88
- <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
89
- </div>
70
+ return (
71
+ <div className="col-8 me-2 Pimagelist">
90
72
  <div
91
- role="button"
92
- className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
93
- onClick={() => handleArrowClickInMainImage("right")}
73
+ className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
74
+ style={{
75
+ backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
76
+ backgroundSize: "cover",
77
+ backgroundPosition: "center",
78
+ }}
94
79
  >
95
- <img
96
- src={blcIconArrowRight}
97
- className="blackArrow"
98
- alt="Right Arrow"
99
- />
80
+ {/* Arrows on the main image */}
81
+ <div
82
+ className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
83
+ role="button"
84
+ onClick={() => handleArrowClickInMainImage("left")}
85
+ >
86
+ <img
87
+ src={blcIconArrowLeft}
88
+ className="blackArrow"
89
+ alt="Left Arrow"
90
+ />
91
+ </div>
92
+ <div
93
+ role="button"
94
+ className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
95
+ onClick={() => handleArrowClickInMainImage("right")}
96
+ >
97
+ <img
98
+ src={blcIconArrowRight}
99
+ className="blackArrow"
100
+ alt="Right Arrow"
101
+ />
102
+ </div>
100
103
  </div>
101
- </div>
102
104
 
103
- {/* Image Thumbnails */}
104
- <div className="d-flex flex-row gap-1 col-12 secondList">
105
- <div className="col-lg-6 d-flex flex-row p-1">
106
- <div className="col-12 position-relative d-flex justify-content-center">
105
+ {/* Image Thumbnails */}
106
+ <div className="d-flex flex-row gap-1 col-12 secondList">
107
+ <div className="col-lg-6 d-flex flex-row p-1">
108
+ <div className="col-12 position-relative d-flex justify-content-center">
109
+ <div
110
+ className="col-1 h-100 d-flex position-absolute start-0"
111
+ onClick={() => handleArrowClickInMainImage("left")}
112
+ role="button"
113
+ >
114
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
115
+ <img
116
+ src={iconArrowLeft}
117
+ className="arroIconColour"
118
+ alt="Left Arrow"
119
+ />
120
+ </div>
121
+ </div>
122
+ <div
123
+ className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
124
+ ref={imageListRef}
125
+ >
126
+ {prop.property && (
127
+ <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
128
+ {prop.pictureUrls.map((imageUrl, index) => (
129
+ <div
130
+ key={index}
131
+ className="col-lg-12 h-100 d-flex"
132
+ onClick={() => {
133
+ setMainImage(imageUrl);
134
+ setCurrentImageIndex(index);
135
+ if (imageListRef.current) {
136
+ imageListRef.current.scrollTo({
137
+ left: index * 150,
138
+ behavior: "smooth",
139
+ });
140
+ }
141
+ }}
142
+ role="button"
143
+ >
144
+ <img
145
+ src={imageUrl}
146
+ alt={`Image ${index + 1}`}
147
+ className="col-12 h-100 rounded-3 object-fit-cover"
148
+ />
149
+ </div>
150
+ ))}
151
+ </div>
152
+ )}
153
+ </div>
154
+ <div
155
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
156
+ onClick={() => handleArrowClickInMainImage("right")}
157
+ role="button"
158
+ >
159
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
160
+ <img
161
+ src={iconArrowRight}
162
+ className="arroIconColour"
163
+ alt="Right Arrow"
164
+ />
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
171
+ <div className="col-6 d-flex flex-row">
107
172
  <div
108
- className="col-1 h-100 d-flex position-absolute start-0"
109
- onClick={() => handleArrowClickInMainImage("left")}
173
+ className="col-lg-4 p-1"
110
174
  role="button"
175
+ onClick={toggleAllPhotos}
111
176
  >
112
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
113
- <img
114
- src={iconArrowLeft}
115
- className="arroIconColour"
116
- alt="Left Arrow"
117
- />
177
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
178
+ <img src={iconGallery} alt="Gallery Icon" />
179
+ <span className="listImgText">Alle Fotos</span>
118
180
  </div>
119
181
  </div>
120
- <div
121
- className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
122
- ref={imageListRef}
123
- >
124
- {prop.property && (
125
- <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
126
- {prop.pictureUrls.map((imageUrl, index) => (
127
- <div
128
- key={index}
129
- className="col-lg-12 h-100 d-flex"
130
- onClick={() => {
131
- setMainImage(imageUrl);
132
- setCurrentImageIndex(index);
133
- prop.imageListRef.current.scrollTo({
134
- left: index * 150,
135
- behavior: "smooth",
136
- });
137
- }}
138
- role="button"
139
- >
140
- <img
141
- src={imageUrl}
142
- alt={`Image ${index + 1}`}
143
- className="col-12 h-100 rounded-3 object-fit-cover"
144
- />
145
- </div>
146
- ))}
147
- </div>
148
- )}
182
+ <div className="col-lg-4 p-1" role="button">
183
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
184
+ <img src={iconLayers} alt="Layers Icon" />
185
+ <span className="listImgText">Grundriss</span>
186
+ </div>
149
187
  </div>
150
188
  <div
151
- className="col-1 h-100 d-flex position-absolute end-0 top-0"
152
- onClick={() => handleArrowClickInMainImage("right")}
189
+ className="col-lg-4 p-1"
153
190
  role="button"
191
+ onClick={() =>
192
+ window.scrollTo({
193
+ top: document.documentElement.scrollHeight,
194
+ })
195
+ }
154
196
  >
155
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
156
- <img
157
- src={iconArrowRight}
158
- className="arroIconColour"
159
- alt="Right Arrow"
160
- />
197
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
198
+ <img src={iconMap} alt="Map Icon" />
199
+ <span className="listImgText">Karte</span>
161
200
  </div>
162
201
  </div>
163
202
  </div>
164
203
  </div>
165
204
 
166
- {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
167
- <div className="col-6 d-flex flex-row">
168
- <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
169
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
170
- <img src={iconGallery} alt="Gallery Icon" />
171
- <span className="listImgText">Alle Fotos</span>
172
- </div>
173
- </div>
174
- <div className="col-lg-4 p-1" role="button">
175
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
176
- <img src={iconLayers} alt="Layers Icon" />
177
- <span className="listImgText">Grundriss</span>
178
- </div>
179
- </div>
180
- <div
181
- className="col-lg-4 p-1"
182
- role="button"
183
- onClick={() =>
184
- window.scrollTo({
185
- top: document.documentElement.scrollHeight,
186
- })
187
- }
188
- >
189
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
190
- <img src={iconMap} alt="Map Icon" />
191
- <span className="listImgText">Karte</span>
192
- </div>
193
- </div>
194
- </div>
205
+ {/* Popup for all photos */}
206
+ {isImagePopupOpen && (
207
+ <ImageListPopup
208
+ currentImageIndex={currentImageIndex}
209
+ handleArrowClickInMainImage={handleArrowClickInMainImage}
210
+ imageListRef={imageListRef}
211
+ pictureUrls={prop.pictureUrls}
212
+ property={prop.property}
213
+ />
214
+ )}
195
215
  </div>
196
-
197
- {/* Popup for all photos */}
198
- {isImagePopupOpen && (
199
- <ImageListPopup
200
- currentImageIndex={currentImageIndex}
201
- handleArrowClickInMainImage={handleArrowClickInMainImage}
202
- imageListRef={imageListRef}
203
- pictureUrls={prop.pictureUrls}
204
- property={prop.property}
205
- />
206
- )}
207
- </div>
208
- );
216
+ );
217
+ };
209
218
  }
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
3
- </svg>
@@ -1,5 +0,0 @@
1
- <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="m16.855 5.147-8-4.572a.571.571 0 0 0-.567 0l-8 4.572a.571.571 0 0 0 .014 1l8 4.285a.571.571 0 0 0 .54 0l8-4.285a.571.571 0 0 0 .013-1zM8.572 9.28l-6.82-3.653 6.82-3.897 6.82 3.897-6.82 3.653z" fill="#031012"/>
3
- <path d="M8.846 13.43 16.57 9.18V7.877l-8 4.4-8-4.4V9.18l7.725 4.249a.572.572 0 0 0 .55 0z" fill="#031012"/>
4
- <path d="m.57 12.309 7.731 4.123a.572.572 0 0 0 .538 0l7.731-4.123v-1.295l-8 4.266-8-4.266v1.295z" fill="#031012"/>
5
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M18.242 1.29H4.297a1.76 1.76 0 0 0-1.758 1.757v.742h-.781A1.76 1.76 0 0 0 0 5.547v11.406c0 .97.789 1.758 1.758 1.758h13.945a1.76 1.76 0 0 0 1.758-1.758v-.742h.781A1.76 1.76 0 0 0 20 14.453V3.047a1.76 1.76 0 0 0-1.758-1.758zM4.297 2.46h13.945c.323 0 .586.264.586.587v5.508l-3.49-2.47a.586.586 0 0 0-.724.037L10 10.159l-2.114-1.85a.586.586 0 0 0-.748-.02l-3.427 2.693V3.047c0-.323.263-.586.586-.586zm11.992 14.493a.587.587 0 0 1-.586.586H1.758a.587.587 0 0 1-.586-.586V5.547c0-.323.263-.586.586-.586h.781v9.492c0 .97.789 1.758 1.758 1.758h11.992v.742zm1.953-1.914H4.297a.587.587 0 0 1-.586-.586v-1.98L7.48 9.51l2.134 1.868c.221.193.55.193.772 0l4.652-4.071 3.79 2.683v4.462a.587.587 0 0 1-.586.586z" fill="#fff"/>
3
- <path d="M10 7.46a1.838 1.838 0 0 0 1.836-1.835A1.838 1.838 0 0 0 10 3.789a1.838 1.838 0 0 0-1.836 1.836c0 1.012.824 1.836 1.836 1.836zm0-2.5a.665.665 0 1 1-.001 1.33A.665.665 0 0 1 10 4.96z" fill="#fff"/>
4
- </svg>
@@ -1,10 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#bq66l33lna)">
3
- <path d="M19.286 0a.715.715 0 0 0-.32.075l-5.413 2.707-6.12-2.72C7.423.058 7.41.057 7.4.052a.741.741 0 0 0-.17-.044 1.063 1.063 0 0 0-.175 0 .742.742 0 0 0-.171.044c-.01.005-.022.005-.032.01L.424 2.919A.714.714 0 0 0 0 3.572v15.714a.714.714 0 0 0 1.004.653l6.139-2.729 6.138 2.729c.01.004.022 0 .033.006a.63.63 0 0 0 .54-.012c.012-.005.025 0 .036-.008l5.715-2.857a.714.714 0 0 0 .395-.64V.716A.714.714 0 0 0 19.286 0zM6.428 15.964l-5 2.222V4.036l5-2.222v14.15zm6.429 2.222-5-2.222V1.814l5 2.222v14.15zm5.714-2.199-4.286 2.143V4.013l4.286-2.143v14.117z" fill="#fff"/>
4
- </g>
5
- <defs>
6
- <clipPath id="bq66l33lna">
7
- <path fill="#fff" d="M0 0h20v20H0z"/>
8
- </clipPath>
9
- </defs>
10
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M22.046 9.9h-2.56a.937.937 0 1 0 0 1.875h2.56c.517 0 .938.42.938.937v12.26c0 .517-.42.938-.938.938H7.953a.939.939 0 0 1-.937-.938v-12.26c0-.517.42-.937.937-.937h2.56a.937.937 0 1 0 0-1.875h-2.56a2.816 2.816 0 0 0-2.812 2.812v12.26a2.816 2.816 0 0 0 2.812 2.813h14.093a2.816 2.816 0 0 0 2.813-2.813v-12.26A2.816 2.816 0 0 0 22.046 9.9zM11.504 8.007l2.59-2.59V17.76a.937.937 0 1 0 1.874 0V5.418l2.59 2.59a.934.934 0 0 0 1.326 0 .937.937 0 0 0 0-1.327l-4.19-4.19a.938.938 0 0 0-1.326 0l-4.19 4.19a.937.937 0 1 0 1.326 1.326z" fill="#000"/>
3
- </svg>
@@ -1,5 +0,0 @@
1
- <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="m21.354 5.808-10-5.714a.714.714 0 0 0-.709 0l-10 5.714a.714.714 0 0 0 .017 1.25l10 5.357a.714.714 0 0 0 .675 0l10-5.357a.714.714 0 0 0 .017-1.25zM11 10.975 2.475 6.408 11 1.537l8.525 4.871L11 10.975z" fill="#fff"/>
3
- <path d="m11.34 16.162 9.656-5.31V9.22l-10 5.5-10-5.5v1.63l9.656 5.31a.715.715 0 0 0 .688 0z" fill="#fff"/>
4
- <path d="m.996 14.762 9.664 5.154a.714.714 0 0 0 .672 0l9.664-5.154v-1.62l-10 5.334-10-5.333v1.619z" fill="#fff"/>
5
- </svg>
@@ -1,4 +0,0 @@
1
- <svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M6 4.725a2.208 2.208 0 1 0 .001 4.416 2.208 2.208 0 0 0 0-4.416zm0 3.312a1.104 1.104 0 1 1 .001-2.208 1.104 1.104 0 0 1 0 2.208z" fill="#fff"/>
3
- <path d="M10.243 2.687a6 6 0 0 0-9.27 7.518l4.17 6.403a1.022 1.022 0 0 0 1.713 0l4.171-6.404a6 6 0 0 0-.784-7.517zm-.14 6.915L6 15.9 1.897 9.602a4.919 4.919 0 0 1 .64-6.135 4.896 4.896 0 0 1 6.925 0 4.919 4.919 0 0 1 .64 6.135z" fill="#fff"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
2
- <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
3
- <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
4
- </svg>