nestiq-component-library 1.0.4 → 1.0.6

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 (12) hide show
  1. package/dist/assets/images/blackarrow-Right.svg +3 -0
  2. package/dist/assets/images/blckarrow-Left.svg +3 -0
  3. package/dist/index.es.js +17 -7
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +17 -7
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/assets/images/blackarrow-Right.svg +3 -0
  9. package/src/assets/images/blckarrow-Left.svg +3 -0
  10. package/src/components/ImageListPopup/ImageListPopup.css +107 -49
  11. package/src/components/ImageListPopup/ImageListPopup.tsx +54 -16
  12. package/src/components/Popup/Popup.tsx +1 -1
package/dist/assets/images/blackarrow-Right.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
+ <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"/>
3
+ </svg>
package/dist/assets/images/blckarrow-Left.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
+ <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"/>
3
+ </svg>
package/dist/index.es.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { useState } from 'react';
2
- import closeIcon from 'src/assets/images/icon_close 2.png';
3
2
  import 'bootstrap/dist/css/bootstrap.min.css';
4
3
 
5
4
  var Button = function (_a) {
@@ -7,6 +6,8 @@ var Button = function (_a) {
7
6
  return React.createElement("button", null, label);
8
7
  };
9
8
 
9
+ var closeIcon = "icon_close 2.png";
10
+
10
11
  function styleInject(css, ref) {
11
12
  if ( ref === void 0 ) ref = {};
12
13
  var insertAt = ref.insertAt;
@@ -46,9 +47,13 @@ var Popup = function (_a) {
46
47
  children)));
47
48
  };
48
49
 
49
- var css_248z = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: #fff;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n padding: 1rem;\r\n text-align: center;\r\n border-top: 1px solid #ddd;\r\n}\r\n";
50
+ var css_248z = ".popup-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n}\n\n.popup-container {\n background-color: transparent;\n border-radius: 8px;\n max-width: 90%;\n max-height: 90%;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\n";
50
51
  styleInject(css_248z);
51
52
 
53
+ var blcIconArrowRight = "blackarrow-Right.svg";
54
+
55
+ var blcIconArrowLeft = "blckarrow-Left.svg";
56
+
52
57
  var ImageListPopup = function (_a) {
53
58
  var images = _a.images, onClose = _a.onClose;
54
59
  var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -60,16 +65,21 @@ var ImageListPopup = function (_a) {
60
65
  return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
61
66
  });
62
67
  };
68
+ var handleThumbnailClick = function (index) {
69
+ setCurrentIndex(index);
70
+ };
63
71
  return (React.createElement("div", { className: "popup-overlay" },
64
72
  React.createElement("div", { className: "popup-container" },
65
73
  React.createElement("div", { className: "popup-header" },
66
- React.createElement("span", null, images[currentIndex].title),
74
+ React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
67
75
  React.createElement("button", { className: "btn-close", onClick: onClose })),
68
76
  React.createElement("div", { className: "popup-body" },
69
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
70
- React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
71
- React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
72
- React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
77
+ React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
78
+ React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
79
+ React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
80
+ React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
81
+ React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
82
+ React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
73
83
  };
74
84
 
75
85
  export { Button, ImageListPopup, Popup };
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close 2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg"],"sourcesContent":["export default \"icon_close 2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\""],"names":[],"mappings":";;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/dist/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var closeIcon = require('src/assets/images/icon_close 2.png');
5
4
  require('bootstrap/dist/css/bootstrap.min.css');
6
5
 
7
6
  var Button = function (_a) {
@@ -9,6 +8,8 @@ var Button = function (_a) {
9
8
  return React.createElement("button", null, label);
10
9
  };
11
10
 
11
+ var closeIcon = "icon_close 2.png";
12
+
12
13
  function styleInject(css, ref) {
13
14
  if ( ref === void 0 ) ref = {};
14
15
  var insertAt = ref.insertAt;
@@ -48,9 +49,13 @@ var Popup = function (_a) {
48
49
  children)));
49
50
  };
50
51
 
51
- var css_248z = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: #fff;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n padding: 1rem;\r\n text-align: center;\r\n border-top: 1px solid #ddd;\r\n}\r\n";
52
+ var css_248z = ".popup-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n}\n\n.popup-container {\n background-color: transparent;\n border-radius: 8px;\n max-width: 90%;\n max-height: 90%;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\n";
52
53
  styleInject(css_248z);
53
54
 
55
+ var blcIconArrowRight = "blackarrow-Right.svg";
56
+
57
+ var blcIconArrowLeft = "blckarrow-Left.svg";
58
+
54
59
  var ImageListPopup = function (_a) {
55
60
  var images = _a.images, onClose = _a.onClose;
56
61
  var _b = React.useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -62,16 +67,21 @@ var ImageListPopup = function (_a) {
62
67
  return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
63
68
  });
64
69
  };
70
+ var handleThumbnailClick = function (index) {
71
+ setCurrentIndex(index);
72
+ };
65
73
  return (React.createElement("div", { className: "popup-overlay" },
66
74
  React.createElement("div", { className: "popup-container" },
67
75
  React.createElement("div", { className: "popup-header" },
68
- React.createElement("span", null, images[currentIndex].title),
76
+ React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
69
77
  React.createElement("button", { className: "btn-close", onClick: onClose })),
70
78
  React.createElement("div", { className: "popup-body" },
71
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
72
- React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
73
- React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
74
- React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
79
+ React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
80
+ React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
81
+ React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
82
+ React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
83
+ React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
84
+ React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
75
85
  };
76
86
 
77
87
  exports.Button = Button;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close 2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg"],"sourcesContent":["export default \"icon_close 2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\""],"names":[],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/assets/images/blackarrow-Right.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
+ <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"/>
3
+ </svg>
package/src/assets/images/blckarrow-Left.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
+ <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"/>
3
+ </svg>
package/src/components/ImageListPopup/ImageListPopup.css CHANGED
@@ -1,49 +1,107 @@
1
- .popup-overlay {
2
- position: fixed;
3
- top: 0;
4
- left: 0;
5
- right: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.5);
8
- display: flex;
9
- justify-content: center;
10
- align-items: center;
11
- z-index: 10000;
12
- }
13
-
14
- .popup-container {
15
- background-color: #fff;
16
- border-radius: 8px;
17
- max-width: 90%;
18
- max-height: 90%;
19
- overflow: hidden;
20
- display: flex;
21
- flex-direction: column;
22
- }
23
-
24
- .popup-header {
25
- display: flex;
26
- justify-content: space-between;
27
- align-items: center;
28
- padding: 1rem;
29
- border-bottom: 1px solid #ddd;
30
- }
31
-
32
- .popup-body {
33
- flex: 1;
34
- display: flex;
35
- justify-content: center;
36
- align-items: center;
37
- padding: 1rem;
38
- }
39
-
40
- .popup-body img {
41
- max-width: 100%;
42
- max-height: 100%;
43
- }
44
-
45
- .popup-footer {
46
- padding: 1rem;
47
- text-align: center;
48
- border-top: 1px solid #ddd;
49
- }
1
+ .popup-overlay {
2
+ position: fixed;
3
+ top: 0;
4
+ left: 0;
5
+ right: 0;
6
+ bottom: 0;
7
+ background-color: rgba(0, 0, 0, 0.7);
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ z-index: 10000;
12
+ }
13
+
14
+ .popup-container {
15
+ background-color: transparent;
16
+ border-radius: 8px;
17
+ max-width: 90%;
18
+ max-height: 90%;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ position: relative;
23
+ }
24
+
25
+ .popup-header {
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ width: 100%;
30
+ padding: 1rem;
31
+ position: absolute;
32
+ top: 0;
33
+ }
34
+
35
+ .popup-title {
36
+ color: white;
37
+ font-size: 24px;
38
+ font-weight: bold;
39
+ }
40
+
41
+ .btn-close {
42
+ position: absolute;
43
+ right: 1rem;
44
+ top: 1rem;
45
+ background: none;
46
+ border: none;
47
+ color: white;
48
+ font-size: 24px;
49
+ cursor: pointer;
50
+ }
51
+
52
+ .popup-body {
53
+ display: flex;
54
+ justify-content: center;
55
+ align-items: center;
56
+ padding: 1rem;
57
+ position: relative;
58
+ flex: 1;
59
+ }
60
+
61
+ .main-image {
62
+ max-width: 100%;
63
+ max-height: 80vh;
64
+ border-radius: 8px;
65
+ }
66
+
67
+ .btn-prev,
68
+ .btn-next {
69
+ background: none;
70
+ border: none;
71
+ color: white;
72
+ font-size: 48px;
73
+ cursor: pointer;
74
+ position: absolute;
75
+ top: 50%;
76
+ transform: translateY(-50%);
77
+ }
78
+
79
+ .btn-prev {
80
+ left: 10px;
81
+ }
82
+
83
+ .btn-next {
84
+ right: 10px;
85
+ }
86
+
87
+ .popup-thumbnails {
88
+ display: flex;
89
+ justify-content: center;
90
+ align-items: center;
91
+ gap: 10px;
92
+ padding: 1rem;
93
+ }
94
+
95
+ .thumbnail {
96
+ width: 60px;
97
+ height: 60px;
98
+ object-fit: cover;
99
+ border-radius: 8px;
100
+ cursor: pointer;
101
+ opacity: 0.6;
102
+ }
103
+
104
+ .thumbnail.active {
105
+ border: 2px solid white;
106
+ opacity: 1;
107
+ }
package/src/components/ImageListPopup/ImageListPopup.tsx CHANGED
@@ -1,6 +1,8 @@
1
1
  import React, { useState } from "react";
2
2
  import "bootstrap/dist/css/bootstrap.min.css";
3
3
  import "./ImageListPopup.css";
4
+ import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
5
+ import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
4
6
 
5
7
  interface Image {
6
8
  src: string;
@@ -25,34 +27,70 @@ const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
25
27
  );
26
28
  };
27
29
 
30
+ const handleThumbnailClick = (index: number) => {
31
+ setCurrentIndex(index);
32
+ };
33
+
28
34
  return (
29
35
  <div className="popup-overlay">
30
36
  <div className="popup-container">
31
37
  <div className="popup-header">
32
- <span>{images[currentIndex].title}</span>
38
+ <span className="popup-title">{images[currentIndex].title}</span>
33
39
  <button className="btn-close" onClick={onClose}></button>
34
40
  </div>
35
41
  <div className="popup-body">
42
+ <div
43
+ className="rounded-circle border btn-prev"
44
+ role="button"
45
+ onClick={handlePrevious}
46
+ >
47
+ <img
48
+ src={blcIconArrowLeft}
49
+ className="blackArrow"
50
+ alt="Left Arrow"
51
+ ></img>
52
+ </div>
53
+ {/*<button*/}
54
+ {/* className="btn-prev"*/}
55
+ {/* onClick={handlePrevious}*/}
56
+ {/* disabled={currentIndex === 0}*/}
57
+ {/*>*/}
58
+ {/* &lt;*/}
59
+ {/*</button>*/}
36
60
  <img
37
61
  src={images[currentIndex].src}
38
62
  alt={images[currentIndex].title}
39
- className="img-fluid"
63
+ className="main-image"
40
64
  />
65
+ <div
66
+ className="rounded-circle border btn-next"
67
+ role="button"
68
+ onClick={handleNext}
69
+ >
70
+ <img
71
+ src={blcIconArrowRight}
72
+ className="blackArrow"
73
+ alt="Right Arrow"
74
+ ></img>
75
+ </div>
76
+ {/*<button*/}
77
+ {/* className="btn-next"*/}
78
+ {/* onClick={handleNext}*/}
79
+ {/* disabled={currentIndex === images.length - 1}*/}
80
+ {/*>*/}
81
+ {/* &gt;*/}
82
+ {/*</button>*/}
41
83
  </div>
42
- <div className="popup-footer">
43
- {images.length > 1 && (
44
- <>
45
- <button
46
- className="btn btn-secondary me-2"
47
- onClick={handlePrevious}
48
- >
49
- Previous
50
- </button>
51
- <button className="btn btn-secondary" onClick={handleNext}>
52
- Next
53
- </button>
54
- </>
55
- )}
84
+ <div className="popup-thumbnails">
85
+ {images.map((image, index) => (
86
+ <img
87
+ key={index}
88
+ src={image.src}
89
+ alt={image.title}
90
+ className={`thumbnail ${index === currentIndex ? "active" : ""}`}
91
+ onClick={() => handleThumbnailClick(index)}
92
+ />
93
+ ))}
56
94
  </div>
57
95
  </div>
58
96
  </div>
package/src/components/Popup/Popup.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import closeIcon from "src/assets/images/icon_close 2.png";
2
+ import closeIcon from "../../assets/images/icon_close 2.png";
3
3
  import "./Popup.css";
4
4
 
5
5
  interface PopupProps {