nestiq-component-library 1.1.162 → 1.1.163

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 (7) hide show
  1. package/dist/index.es.js +4 -6
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +4 -6
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/ImageListPopup/ImageListPopup.css +20 -0
  7. package/src/components/ImageListPopup/ImageListPopup.tsx +4 -6
package/dist/index.js CHANGED
@@ -183,7 +183,7 @@ var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
183
183
  var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 88vw;\r\n }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 58vw;\r\n }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n\r\n.image-thumbnail {\r\n position: relative;\r\n transition: opacity 0.3s ease-in-out;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n filter: none;\r\n border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
184
184
  styleInject(css_248z$6);
185
185
 
186
- var css_248z$5 = ".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.closeIconNestiq {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n width: 12px;\r\n height: 12px;\r\n cursor: pointer;\r\n z-index: 1;\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";
186
+ var css_248z$5 = ".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.closeIconNestiq {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n width: 12px;\r\n height: 12px;\r\n cursor: pointer;\r\n z-index: 1;\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\r\n.activeStyle {\r\n border: 3px solid transparent;\r\n border-radius: 4px;\r\n transition: transform 0.2s ease, border-color 0.2s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.activeStyle:hover {\r\n transform: scale(1.05);\r\n}\r\n\r\n.activeStyle:focus {\r\n outline: none;\r\n transform: scale(1.05);\r\n}\r\n\r\n.activeStyle.active {\r\n transform: scale(1.05);\r\n}\r\n";
187
187
  styleInject(css_248z$5);
188
188
 
189
189
  var iconClose = "/static/media/close.b5ce9141e80c688b.png";
@@ -222,7 +222,7 @@ function ImageListPopup(props) {
222
222
  React.createElement("span", { className: "text-white align-self-center" }, props.pictureUrls[currentImageIndex].title),
223
223
  React.createElement("div", { className: "d-flex justify-content-center" },
224
224
  React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
225
- React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
225
+ React.createElement("div", { className: "rounded-circle border onImageArrow d-flex justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
226
226
  React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
227
227
  React.createElement("div", { className: "p-2 bd-highlight" },
228
228
  React.createElement("div", { className: " rounded-5", style: {
@@ -234,16 +234,14 @@ function ImageListPopup(props) {
234
234
  } })),
235
235
  React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
236
236
  " ",
237
- React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
237
+ React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
238
238
  React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
239
239
  React.createElement("div", { className: "d-flex flex-row" }),
240
240
  React.createElement("div", { className: "d-flex flex-row justify-content-center w-100 mt-5" },
241
241
  React.createElement("div", { className: "d-flex flex-row gap-4 overflow-auto px-3", ref: imageListRef, style: {
242
242
  maxWidth: "100%",
243
243
  scrollbarWidth: "thin",
244
- } }, props.pictureUrls.length > 0 && (React.createElement(React.Fragment, null, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "flex-shrink-0 ".concat(index === currentImageIndex
245
- ? "border border-3 border-primary"
246
- : ""), onClick: function () {
244
+ } }, props.pictureUrls.length > 0 && (React.createElement(React.Fragment, null, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "flex-shrink-0 activeStyle ".concat(index === currentImageIndex ? "active" : ""), onClick: function () {
247
245
  setCurrentImageIndex(index);
248
246
  imageListRef.current.scrollTo({
249
247
  left: index * 170, // 150px width + gap