nestiq-component-library 1.1.142 → 1.1.144

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

@@ -21,22 +21,22 @@ export default function PropertyImageList(prop: PopupProps) {
   const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
   const imageListRef = useRef<HTMLDivElement | null>(null);
 
-  const handleArrowClickInMainImage = (direction: any) => {
-    if (prop.pictureUrls.length === 0) return;
+  const handleArrowClickInMainImage = (direction: "left" | "right") => {
+    if (!prop.pictureUrls.length) 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);
+    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: newIndex * 150,
+      left: currentImageIndex * (direction === "left" ? -150 : 150),
       behavior: "smooth",
     });
   };
@@ -88,8 +88,8 @@ export default function PropertyImageList(prop: PopupProps) {
 
       {/* 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="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"
@@ -105,18 +105,25 @@ export default function PropertyImageList(prop: PopupProps) {
                 </div>
               </div>
               <div
-                className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
+                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"
-                    style={{ overflow: "hidden" }}
-                  >
+                  <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"
+                        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({
@@ -141,7 +148,7 @@ export default function PropertyImageList(prop: PopupProps) {
                 onClick={() => handleArrowClickInMainImage("right")}
                 role="button"
               >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
+                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
                   <img
                     src={iconArrowRight}
                     className="arroIconColour "
@@ -155,7 +162,7 @@ export default function PropertyImageList(prop: PopupProps) {
           {/* 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"
+              className="col-lg-4 col-4 py-0 px-1"
               role="button"
               onClick={toggleAllPhotos}
             >
@@ -165,7 +172,7 @@ export default function PropertyImageList(prop: PopupProps) {
               </div>
             </div>
             <div
-              className="col-lg-4 col-3 p-1"
+              className="col-lg-4 col-3 py-0 px-1"
               role="button"
               onClick={floorPlanClickHandler}
             >
@@ -175,7 +182,7 @@ export default function PropertyImageList(prop: PopupProps) {
               </div>
             </div>
             <div
-              className="col-lg-4 col-3 p-1"
+              className="col-lg-4 col-3 py-0 px-1"
               role="button"
               onClick={() =>
                 window.scrollTo({

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;
+}