nestiq-component-library 1.1.141 → 1.1.143

package/src/components/Popup/Popup.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import closeIcon from "../../assets/images/icon_close_2.png";
-import "./Popup.css";
-import "../../styles/common.css";
-
-interface PopupProps {
-  children: React.ReactNode;
-  onCloseClick: () => void;
-}
-
-const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
-  return (
-    <div className="popup-overlay">
-      <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">
-        <div className="end-0 top-0 position-absolute ">
-          <img
-            src={closeIcon}
-            alt="close"
-            className="closeIcon me-2"
-            onClick={onCloseClick}
-          />
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default Popup;
+import React from "react";
+import closeIcon from "../../assets/images/icon_close_2.png";
+import "./Popup.css";
+import "../../styles/common.css";
+
+interface PopupProps {
+  children: React.ReactNode;
+  onCloseClick: () => void;
+}
+
+const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
+  return (
+    <div className="popup-overlay">
+      <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">
+        <div className="end-0 top-0 position-absolute ">
+          <img
+            src={closeIcon}
+            alt="close"
+            className="closeIcon me-2"
+            onClick={onCloseClick}
+          />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

package/src/components/PropertyImageList/PropertyImageList.css

@@ -40,7 +40,7 @@
 
 
 .imagesArray {
-  background-size: "cover" !important;
+  background-size: cover !important;
 }
 @media (max-width: 450px) {
   .Pimagelist {
@@ -67,7 +67,7 @@
     width: 58vw;
   }
 }
-@media (min-width: 820px) and (max-width: 850) {
+@media (min-width: 820px) and (max-width: 850px) {
   .Pimagelist {
   }
   .mainImage {
@@ -75,9 +75,27 @@
     width: 58vw;
   }
 }
-*{
-    -ms-overflow-style: none;
+
+.image-thumbnail {
+  position: relative;
+  transition: opacity 0.3s ease-in-out;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-thumbnail img {
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
 }
-::-webkit-scrollbar {
-    display: none;
+
+.image-thumbnail.greyed-out img {
+  filter: grayscale(100%) brightness(50%);
+}
+
+.image-thumbnail.selected img {
+  filter: none;
+  border: 2px solid #007bff; /* Highlight border for selected image */
 }

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -1,206 +1,213 @@
-import React, { useRef, useState } from "react";
-import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
-import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
-import iconArrowLeft from "../../assets/images/chevron-left.svg";
-import iconGallery from "../../assets/images/icon_gallery.svg";
-import iconMap from "../../assets/images/icon_map.svg";
-import iconLayers from "../../assets/images/layer_icon.svg";
-import "./PropertyImageList.css";
-import ImageListPopup from "../ImageListPopup/ImageListPopup";
-import PopupProps from "../ImageListPopup/ImageListPopup";
-import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
-
-interface PopupProps {
-  pictureUrls: { title: string; url: string }[];
-  floorPlanUrl: string;
-}
-export default function PropertyImageList(prop: PopupProps) {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
-  const imageListRef = useRef<HTMLDivElement | null>(null);
-
-  const handleArrowClickInMainImage = (direction: any) => {
-    if (prop.pictureUrls.length === 0) return;
-
-    let newIndex = currentImageIndex;
-    if (direction === "left") {
-      newIndex =
-        (currentImageIndex - 1 + prop.pictureUrls.length) %
-        prop.pictureUrls.length;
-    } else if (direction === "right") {
-      newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
-    }
-
-    setCurrentImageIndex(newIndex);
-
-    imageListRef.current!.scrollTo({
-      left: newIndex * 150,
-      behavior: "smooth",
-    });
-  };
-
-  const toggleAllPhotos = () => {
-    setIsImagePopupOpen(!isImagePopupOpen);
-  };
-
-  const floorPlanClickHandler = () => {
-    if (prop.floorPlanUrl) {
-      setIsFloorPlanPopupOpen(true);
-    }
-  };
-
-  const floorPlanPopupCloseHandler = () => {
-    setIsFloorPlanPopupOpen(false);
-  };
-
-  return (
-    <div className="col-8 Pimagelist ">
-      <div
-        className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
-        style={{
-          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        {/* Arrows on the main image */}
-        <div
-          className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
-          role="button"
-          onClick={() => handleArrowClickInMainImage("left")}
-        >
-          <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
-        </div>
-        <div
-          role="button"
-          className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
-          onClick={() => handleArrowClickInMainImage("right")}
-        >
-          <img
-            src={blcIconArrowRight}
-            className="blackArrow"
-            alt="Right Arrow"
-          />
-        </div>
-      </div>
-
-      {/* Image Thumbnails */}
-      <div className="d-none d-md-block">
-        <div className="mt-1 d-flex flex-row gap-1 col-12  secondList">
-          <div className="	col-lg-6  col-6 d-flex flex-row p-1">
-            <div className="	 col-12 position-relative d-flex justify-content-center">
-              <div
-                className="col-1 h-100 d-flex position-absolute start-0"
-                onClick={() => handleArrowClickInMainImage("left")}
-                role="button"
-              >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                  <img
-                    src={iconArrowLeft}
-                    className="arroIconColour"
-                    alt="Left Arrow"
-                  />
-                </div>
-              </div>
-              <div
-                className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
-                ref={imageListRef}
-              >
-                {prop.pictureUrls.length > 0 && (
-                  <div
-                    className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3"
-                    style={{ overflow: "hidden" }}
-                  >
-                    {prop.pictureUrls.map((picture, index) => (
-                      <div
-                        key={index}
-                        className="col-lg-12 h-100 d-flex"
-                        onClick={() => {
-                          setCurrentImageIndex(index);
-                          imageListRef.current!.scrollTo({
-                            left: index * 150,
-                            behavior: "smooth",
-                          });
-                        }}
-                        role="button"
-                      >
-                        <img
-                          src={picture.url}
-                          alt={`Image ${index + 1}`}
-                          className="col-12 h-100 rounded-3 object-fit-cover"
-                        />
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <div
-                className="col-1 h-100 d-flex position-absolute end-0 top-0"
-                onClick={() => handleArrowClickInMainImage("right")}
-                role="button"
-              >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
-                  <img
-                    src={iconArrowRight}
-                    className="arroIconColour "
-                    alt="Right Arrow"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
-          <div className="col-7 col-lg-6 d-flex flex-row">
-            <div
-              className="col-lg-4 col-4 p-1"
-              role="button"
-              onClick={toggleAllPhotos}
-            >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconGallery} alt="Gallery Icon" />
-                <span className="listImgText">Alle Fotos</span>
-              </div>
-            </div>
-            <div
-              className="col-lg-4 col-3 p-1"
-              role="button"
-              onClick={floorPlanClickHandler}
-            >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconLayers} alt="Layers Icon" />
-                <span className="listImgText">Grundriss</span>
-              </div>
-            </div>
-            <div
-              className="col-lg-4 col-3 p-1"
-              role="button"
-              onClick={() =>
-                window.scrollTo({
-                  top: document.documentElement.scrollHeight,
-                })
-              }
-            >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconMap} alt="Map Icon" />
-                <span className="listImgText">Karte</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {/* Popup for all photos */}
-      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
-
-      {/* Popup for floor plan */}
-      {isFloorPlanPopupOpen && (
-        <FloorPlanPopup
-          contentUrl={prop.floorPlanUrl}
-          onCloseClick={floorPlanPopupCloseHandler}
-        />
-      )}
-    </div>
-  );
-}
+import React, { useRef, useState } from "react";
+import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
+import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
+import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
+import iconArrowLeft from "../../assets/images/chevron-left.svg";
+import iconGallery from "../../assets/images/icon_gallery.svg";
+import iconMap from "../../assets/images/icon_map.svg";
+import iconLayers from "../../assets/images/layer_icon.svg";
+import "./PropertyImageList.css";
+import ImageListPopup from "../ImageListPopup/ImageListPopup";
+import PopupProps from "../ImageListPopup/ImageListPopup";
+import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
+
+interface PopupProps {
+  pictureUrls: { title: string; url: string }[];
+  floorPlanUrl: string;
+}
+export default function PropertyImageList(prop: PopupProps) {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
+  const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
+  const imageListRef = useRef<HTMLDivElement | null>(null);
+
+  const handleArrowClickInMainImage = (direction: "left" | "right") => {
+    if (!prop.pictureUrls.length) return;
+
+    setCurrentImageIndex((prevIndex) => {
+      let newIndex;
+      if (direction === "left") {
+        newIndex =
+          (prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
+      } else if (direction === "right") {
+        newIndex = (prevIndex + 1) % prop.pictureUrls.length;
+      }
+      return newIndex || 0;
+    });
+
+    imageListRef.current!.scrollTo({
+      left: currentImageIndex * (direction === "left" ? -150 : 150),
+      behavior: "smooth",
+    });
+  };
+
+  const toggleAllPhotos = () => {
+    setIsImagePopupOpen(!isImagePopupOpen);
+  };
+
+  const floorPlanClickHandler = () => {
+    if (prop.floorPlanUrl) {
+      setIsFloorPlanPopupOpen(true);
+    }
+  };
+
+  const floorPlanPopupCloseHandler = () => {
+    setIsFloorPlanPopupOpen(false);
+  };
+
+  return (
+    <div className="col-8 Pimagelist ">
+      <div
+        className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
+        style={{
+          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        {/* Arrows on the main image */}
+        <div
+          className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
+          role="button"
+          onClick={() => handleArrowClickInMainImage("left")}
+        >
+          <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
+        </div>
+        <div
+          role="button"
+          className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
+          onClick={() => handleArrowClickInMainImage("right")}
+        >
+          <img
+            src={blcIconArrowRight}
+            className="blackArrow"
+            alt="Right Arrow"
+          />
+        </div>
+      </div>
+
+      {/* Image Thumbnails */}
+      <div className="d-none d-md-block">
+        <div className="mt-1 d-flex flex-row gap-1 col-12 secondList">
+          <div className="	col-lg-6  col-6 d-flex flex-row py-0 px-1">
+            <div className="	 col-12 position-relative d-flex justify-content-center">
+              <div
+                className="col-1 h-100 d-flex position-absolute start-0"
+                onClick={() => handleArrowClickInMainImage("left")}
+                role="button"
+              >
+                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                  <img
+                    src={iconArrowLeft}
+                    className="arroIconColour"
+                    alt="Left Arrow"
+                  />
+                </div>
+              </div>
+              <div
+                className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden"
+                ref={imageListRef}
+              >
+                {prop.pictureUrls.length > 0 && (
+                  <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
+                    {prop.pictureUrls.map((picture, index) => (
+                      <div
+                        key={index}
+                        className={`col-lg-12 h-100 d-flex image-thumbnail ${
+                          index === currentImageIndex
+                            ? "selected"
+                            : "greyed-out"
+                        } ${
+                          index === 0
+                            ? "ms-1"
+                            : index === prop.pictureUrls.length - 1
+                              ? "me-1"
+                              : ""
+                        }`}
+                        onClick={() => {
+                          setCurrentImageIndex(index);
+                          imageListRef.current!.scrollTo({
+                            left: index * 150,
+                            behavior: "smooth",
+                          });
+                        }}
+                        role="button"
+                      >
+                        <img
+                          src={picture.url}
+                          alt={`Image ${index + 1}`}
+                          className="col-12 h-100 rounded-3 object-fit-cover"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div
+                className="col-1 h-100 d-flex position-absolute end-0 top-0"
+                onClick={() => handleArrowClickInMainImage("right")}
+                role="button"
+              >
+                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                  <img
+                    src={iconArrowRight}
+                    className="arroIconColour "
+                    alt="Right Arrow"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
+          <div className="col-7 col-lg-6 d-flex flex-row">
+            <div
+              className="col-lg-4 col-4 py-0 px-1"
+              role="button"
+              onClick={toggleAllPhotos}
+            >
+              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                <img src={iconGallery} alt="Gallery Icon" />
+                <span className="listImgText">Alle Fotos</span>
+              </div>
+            </div>
+            <div
+              className="col-lg-4 col-3 py-0 px-1"
+              role="button"
+              onClick={floorPlanClickHandler}
+            >
+              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                <img src={iconLayers} alt="Layers Icon" />
+                <span className="listImgText">Grundriss</span>
+              </div>
+            </div>
+            <div
+              className="col-lg-4 col-3 py-0 px-1"
+              role="button"
+              onClick={() =>
+                window.scrollTo({
+                  top: document.documentElement.scrollHeight,
+                })
+              }
+            >
+              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                <img src={iconMap} alt="Map Icon" />
+                <span className="listImgText">Karte</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Popup for all photos */}
+      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
+
+      {/* Popup for floor plan */}
+      {isFloorPlanPopupOpen && (
+        <FloorPlanPopup
+          contentUrl={prop.floorPlanUrl}
+          onCloseClick={floorPlanPopupCloseHandler}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ToastWrapper/ToastWrapper.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import { ToastContainer, toast } from "react-toastify";
-
-// Utility function to show a toast
-export const showToast = (
-  message: string,
-  type: "info" | "success" | "warning" | "error" = "info",
-) => {
-  toast(message, { type });
-};
-
-const ToastWrapper: React.FC = () => (
-  <ToastContainer
-    position="top-right"
-    autoClose={5000}
-    hideProgressBar={false}
-    closeOnClick
-    rtl={false}
-    pauseOnFocusLoss
-    draggable
-    pauseOnHover
-  />
-);
-
-export default ToastWrapper;
+import React from "react";
+import { ToastContainer, toast } from "react-toastify";
+
+// Utility function to show a toast
+export const showToast = (
+  message: string,
+  type: "info" | "success" | "warning" | "error" = "info",
+) => {
+  toast(message, { type });
+};
+
+const ToastWrapper: React.FC = () => (
+  <ToastContainer
+    position="top-right"
+    autoClose={5000}
+    hideProgressBar={false}
+    closeOnClick
+    rtl={false}
+    pauseOnFocusLoss
+    draggable
+    pauseOnHover
+  />
+);
+
+export default ToastWrapper;

package/src/models/message.model.ts

@@ -1,7 +1,7 @@
-export interface MessageModel {
-  themeId: string;
-  subject: string;
-  messageText: string;
-  firstName: string;
-  lastName: string;
-}
+export interface MessageModel {
+  themeId: string;
+  subject: string;
+  messageText: string;
+  firstName: string;
+  lastName: string;
+}

package/dist/assets/images/Icon_rightArrow.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
-  <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"/>
-</svg>

package/dist/assets/images/LayersIcon.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <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"/>
-    <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"/>
-    <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"/>
-</svg>

package/dist/assets/images/blackarrow-Right.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-  <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"/>
-</svg>

package/dist/assets/images/blckarrow-Left.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-  <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"/>
-</svg>

package/dist/assets/images/chevron-left.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
-  <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"/>
-</svg>

package/dist/assets/images/heartIcon.svg

@@ -1,3 +0,0 @@
-<svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M27.24 2.467a7.97 7.97 0 0 0-11.275.004l-.966.978-.958-.976-.006-.006a7.97 7.97 0 0 0-11.27 0l-.43.43a7.97 7.97 0 0 0 0 11.27l11.354 11.356 1.282 1.343.03-.03.034.033 1.201-1.268L27.67 14.168a7.979 7.979 0 0 0 0-11.27l-.43-.431zm-.98 10.292L15.003 24.018l-11.26-11.26a5.977 5.977 0 0 1 0-8.452l.431-.43a5.977 5.977 0 0 1 8.45-.003l2.372 2.415 2.383-2.412a5.977 5.977 0 0 1 8.453 0l.43.43a5.984 5.984 0 0 1 0 8.453z" fill="#fff"/>
-</svg>