nestiq-component-library 1.1.172 → 1.2.0

package/src/components/ErrorPopup/ErrorPopup.tsx

@@ -1,63 +0,0 @@
-import x from "../../assets/Images/icon_close_2.png";
-import icon_checkmark from "../../assets/Images/icon_checkmark.svg";
-import warning from "../../assets/Images/warning.svg";
-import React from "react";
-import "../ErrorPopup/PopUp.css";
-interface PopupProps {
-    onClick: any;
-}
-
-export default function ErrorPopup(props: PopupProps) {
-    const handleClose = () => {
-        props.onClick();
-    };
-
-    return (
-        <div className="popup-overlay">
-
-            <div className="shareSection-Error  d-flex  flex-column col-6 ">
-                <img
-                    src={x}
-                    alt="close"
-                    className="closeIcon d-flex flex-column align-self-end ms-5 "
-                    onClick={handleClose}
-                />
-                <div className=" d-flex flex-column align-self-center ms-5 ">
-                    <img src={warning} alt="facebook" className=" mb-4" />
-                </div>
-                <div className="popUpHeader d-flex flex-column col- text-center text-wrap mb-1 align-self-center">
-                <span >   Oops! Etwas ist schiefgelaufen.</span>
-                
-                  
-                </div>
-                
-                <div className="d-flex flex-column mt-4 mb-4">
-                    <span className="text-center ms-5 text-wrap">
-                    Beim Senden deiner Nachricht ist ein Fehler aufgetreten. Wenn das Problem weiterhin besteht, kontaktiere uns unter support@nestiq.de
-                    </span>
-                </div>
-
-
-                
-                    <div className=" d-flex flex-row align-self-center ">
-
-                        <button
-                            className="d-flex button_success-left col-sm-5  border-0  rounded-4"
-                            type="button"
-                            id="button">
-
-                            <strong>  Erneut versuchen</strong>
-                        </button>
-
-                        <button
-                            className="button_success-right w-50 border-1 ms-3 rounded-4"
-                            type="button"
-                            id="button"  >
-                            <strong>  Support kontaktieren</strong>
-                        </button>
-                    </div>
-                
-            </div>
-        </div>
-    );
-}

package/src/components/ErrorPopup/PopUp.css

@@ -1,409 +0,0 @@
-.popup-overlay {
-  position: fixed; /* Fixed position to cover the whole screen */
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-  display: flex; /* Flexbox to center the popup */
-  justify-content: center; /* Center horizontally */
-  align-items: center; /* Center vertically */
-  z-index: 2000; /* Ensure it's above other content */
-}
-
-.shareSection {
-  height: 340px;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-  max-width: 1280px;
-}
-.popUpHeader {
-  height: 48px;
-  font-size: 32px;
-  font-weight: 600;
-  color: #1b1b1b;
-}
-
-.closeIcon {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.socialMediaIconsSection {
-  gap: 60px !important;
-}
-
-.socialMediaIcons {
-  width: 28px !important;
-  height: 28px !important;
-  cursor: pointer;
-}
-
-.socialMediaIconText {
-  height: 36px;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 3;
-  color: #344041;
-  cursor: pointer;
-}
-
-.popup_search-input {
-  height: 60px;
-  padding-inline-end: 190px;
-  font-size: 20px;
-  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.popup_search-input::placeholder {
-  font-size: 20px;
-  color: rgba(140, 140, 140, 0.5);
-}
-
-.popup_search-input:focus {
-  outline: none;
-}
-
-.popupcustom-button {
-  height: 35px;
-  color: #000;
-  cursor: pointer;
-  border-color: var(--main-yellow);
-  right: 0;
-  z-index: 1;
-  background-image: var(--gradient);
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-}
-.button-text {
-  width: 115px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-}
-.button_success-right {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border-color: #000;
-  background-color: transparent;
-}
-.button_success-left {
-  width: 200px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: var(--main-yellow);
-}
-.shareSection-Success {
-  height: 510px;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-.shareSection-Error {
-  height: 400px;
-  padding: 10px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-.MessageShareSection {
-  height: 513px;
-  padding: 14px 14px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-
-.popup-tags {
-  font-size: large;
-  font-weight: bold;
-}
-.button_icon-left {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-}
-.main_button {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-image: var(--gradient);
-}
-.button-text {
-  width: 85px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-}
-.button_icon-right {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border-color: #000;
-  background-color: transparent;
-}
-.circle {
-  height: 55px;
-  width: 55px;
-  background-color: transparent;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: #000;
-  border-width: 2px;
-}
-.Line-9,
-.Line-10 {
-  height: 1px;
-  flex-grow: 1;
-  background-color: rgba(140, 140, 140, 0.5);
-  max-width: 18rem;
-  align-self: center;
-  align-content: center;
-}
-
-.middle-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.middle-text {
-  margin: 25px 25px;
-}
-.google-button {
-  width: 260px;
-  height: 45px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 4px;
-  background-color: #000000;
-  background: linear-gradient(to top, #000, #666);
-}
-.Account-popup {
-  height: 713px;
-  padding: 10px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-  max-width: 1000px;
-}
-.lightertxt {
-  color: #797979;
-}
-
-.filter {
-  height: 343px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 32px;
-  border-radius: 32px;
-  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-  background-color: #f2f2f2;
-}
-.loginFilter {
-  height: 280px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 32px;
-  border-radius: 32px;
-  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-  background-color: #f2f2f2;
-}
-.radioLabel {
-  width: 176px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: left;
-  color: #1b1b1b;
-}
-.goButton-text {
-  width: 78px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #1b1b1b;
-}
-.placeholders {
-  width: 232px;
-  height: 45px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 4px;
-  background-image: linear-gradient(to top, #000 100%, #666 0%);
-}
-.TagW.active {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-image: linear-gradient(to top, #000, #666);
-  color: white;
-}
-.Tag {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-image: linear-gradient(
-    to top,
-    rgba(255, 0, 0, 0),
-    rgba(255, 0, 0, 1)
-  );
-}
-.TagW {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  border: solid 1px #000;
-  background-color: #fff;
-  color: #000;
-}
-/* */
-@media (min-width: 375px) and (max-width: 667px) {
-  .Account-popup {
-    height: 650px !important;
-    padding: 10px;
-    border-radius: 16px;
-    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-    border: solid 1px #d7d9e3;
-    background-color: #fff;
-    width: 90vw;
-  }
-  .filter {
-    height: 260px;
-    align-self: stretch;
-    flex-grow: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 32px;
-    border-radius: 32px;
-    box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-    background-color: #f2f2f2;
-  }
-  .middle-text {
-    margin: 5px 25px;
-  }
-  .loginFilter {
-    height: 180px;
-    align-self: stretch;
-    flex-grow: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 32px;
-    border-radius: 32px;
-    box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-    background-color: #f2f2f2;
-  }
-}

package/src/components/FloorPlanPopup/FloorPlanPopup.css

@@ -1,3 +0,0 @@
-.mainImage {
-  height: 80%;
-}

package/src/components/FloorPlanPopup/FloorPlanPopup.tsx

@@ -1,83 +0,0 @@
-import React, { useEffect, useState } from "react";
-import iconClose from "../../assets/images/close.png";
-
-interface PopupProps {
-  contentUrl: string;
-  onCloseClick: () => void;
-}
-
-const FloorPlanPopup: React.FC<PopupProps> = ({ contentUrl, onCloseClick }) => {
-  const [isContentImage, setIsContentImage] = useState(false);
-
-  useEffect(() => {
-    if (contentUrl) {
-      const fileFormat = contentUrl.split(".").pop()?.toLowerCase();
-      if (
-        fileFormat === "png" ||
-        fileFormat === "jpg" ||
-        fileFormat === "jpeg" ||
-        fileFormat === "svg"
-      ) {
-        setIsContentImage(true);
-      }
-    }
-  }, [contentUrl]);
-
-  const downloadButtonClickHandler = (): void => {
-    // Create a temporary anchor element
-    const link = document.createElement("a");
-    link.href = contentUrl;
-    link.setAttribute("download", ""); // This attribute hints the browser to download the file
-
-    // Append the anchor to the body and click it to trigger the download
-    document.body.appendChild(link);
-    link.click();
-
-    // Clean up: remove the anchor element
-    document.body.removeChild(link);
-  };
-  return (
-    <div className="popup-overlay">
-      <div className=" d-flex w-50 flex-column  col-6 ">
-        <div className="d-flex  align-self-end me-5 mt-5">
-          <img
-            src={iconClose}
-            alt="close"
-            className="closeIcon mt-5"
-            onClick={onCloseClick}
-          />
-        </div>
-        <div className="d-flex justify-content-center">
-          <div className="p-2 bd-highlight">
-            {isContentImage && (
-              <div
-                className="rounded-5 mainImage"
-                style={{
-                  backgroundImage: `url(${contentUrl})`,
-                  height: "350px",
-                  width: "600px",
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
-                }}
-              ></div>
-            )}
-            {!isContentImage && (
-              <div className="text-white text-center">
-                No Preview Available
-                <button
-                  className="btn btn-info"
-                  onClick={downloadButtonClickHandler}
-                >
-                  {" "}
-                  Download{" "}
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FloorPlanPopup;

package/src/components/ImageListPopup/ImageListPopup.css

@@ -1,113 +0,0 @@
-.popup-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 1rem;
-  position: absolute;
-  top: 0;
-}
-
-.closeIconNestiq {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.popup-title {
-  color: white;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.btn-close {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  background: none;
-  border: none;
-  color: white;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-.popup-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  position: relative;
-  flex: 1;
-}
-
-.main-image {
-  max-width: 100%;
-  max-height: 80vh;
-  border-radius: 8px;
-}
-
-.btn-prev,
-.btn-next {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 48px;
-  cursor: pointer;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.btn-prev {
-  left: 10px;
-}
-
-.btn-next {
-  right: 10px;
-}
-
-.popup-thumbnails {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  padding: 1rem;
-}
-
-.thumbnail {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 8px;
-  cursor: pointer;
-  opacity: 0.6;
-}
-
-.thumbnail.active {
-  border: 2px solid white;
-  opacity: 1;
-}
-
-.activeStyle {
-  border: 3px solid transparent;
-  border-radius: 4px;
-  transition: transform 0.2s ease, border-color 0.2s ease;
-  cursor: pointer;
-}
-
-.activeStyle:hover {
-  transform: scale(1.05);
-}
-
-.activeStyle:focus {
-  outline: none;
-  transform: scale(1.05);
-}
-
-.activeStyle.active {
-  transform: scale(1.05);
-}