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.es.js CHANGED
@@ -181,7 +181,7 @@ var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
181
181
  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}";
182
182
  styleInject(css_248z$6);
183
183
 
184
- 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";
184
+ 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";
185
185
  styleInject(css_248z$5);
186
186
 
187
187
  var iconClose = "/static/media/close.b5ce9141e80c688b.png";
@@ -220,7 +220,7 @@ function ImageListPopup(props) {
220
220
  React.createElement("span", { className: "text-white align-self-center" }, props.pictureUrls[currentImageIndex].title),
221
221
  React.createElement("div", { className: "d-flex justify-content-center" },
222
222
  React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
223
- React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
223
+ React.createElement("div", { className: "rounded-circle border onImageArrow d-flex justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
224
224
  React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
225
225
  React.createElement("div", { className: "p-2 bd-highlight" },
226
226
  React.createElement("div", { className: " rounded-5", style: {
@@ -232,16 +232,14 @@ function ImageListPopup(props) {
232
232
  } })),
233
233
  React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
234
234
  " ",
235
- React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
235
+ React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
236
236
  React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
237
237
  React.createElement("div", { className: "d-flex flex-row" }),
238
238
  React.createElement("div", { className: "d-flex flex-row justify-content-center w-100 mt-5" },
239
239
  React.createElement("div", { className: "d-flex flex-row gap-4 overflow-auto px-3", ref: imageListRef, style: {
240
240
  maxWidth: "100%",
241
241
  scrollbarWidth: "thin",
242
- } }, 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
243
- ? "border border-3 border-primary"
244
- : ""), onClick: function () {
242
+ } }, 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 () {
245
243
  setCurrentImageIndex(index);
246
244
  imageListRef.current.scrollTo({
247
245
  left: index * 170, // 150px width + gap