oa-componentbook 0.18.288 → 0.18.290

package/build/components/oa-component-upload/CustomUpload.js

@@ -150,12 +150,13 @@ function DocumentUpload(_ref) {
   }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBorder: _ColorVariablesMap.default['--color-primary'],
+        colorBorder: _ColorVariablesMap.default['--color-divider'],
         borderRadiusLG: 4,
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
         colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
         colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
         colorError: _ColorVariablesMap.default['--color-negative'],
-        colorText: _ColorVariablesMap.default['--color-primary']
+        colorText: _ColorVariablesMap.default['--color-secondary-content']
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {

package/build/images/close.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00391 0.753906L10.8496 7.82227L14.8027 0.753906H21.3984L14.8242 12.1191L21.6992 24H15.082L10.8926 16.5234L6.70312 24H0.0859375L6.96094 12.1191L0.386719 0.753906H7.00391Z" fill="white"/>
+</svg>

package/build/images/left-icon.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>AFDC6994-F385-471F-91AC-0B9DF16071C4@1.5x</title>
+    <defs>
+        <circle id="path-1" cx="24" cy="24" r="24"></circle>
+        <filter x="-27.1%" y="-22.9%" width="154.2%" height="154.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Buyback-visual-screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Detail-page-7" transform="translate(-518.000000, -363.000000)">
+            <g id="Group-21" transform="translate(502.000000, 0.000000)">
+                <g id="Group-11" transform="translate(24.000000, 369.000000)">
+                    <g id="Oval">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#F6F6F6" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="Group-11-Copy-8" transform="translate(24.000000, 24.000000) scale(-1, 1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)">
+                        <polygon id="Rectangle-2" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " points="-3.33066907e-15 1.46957616e-15 24 1.46957616e-15 24 24 -3.33066907e-15 24"></polygon>
+                        <polygon id="Shape" fill="#454545" transform="translate(12.840000, 12.000000) rotate(-90.000000) translate(-12.840000, -12.000000) " points="18.36 7.56 12.84 13.08 7.32 7.56 5.64 9.24 12.84 16.44 20.04 9.24"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/build/images/right-icon.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>D8045609-6485-456D-951C-45E880B0BE5B@1.5x</title>
+    <defs>
+        <circle id="path-1" cx="24" cy="24" r="24"></circle>
+        <filter x="-27.1%" y="-22.9%" width="154.2%" height="154.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Buyback-visual-screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Detail-page-7" transform="translate(-1286.000000, -363.000000)">
+            <g id="Group-21" transform="translate(502.000000, 0.000000)">
+                <g id="Group-11-Copy" transform="translate(816.000000, 393.000000) scale(-1, 1) translate(-816.000000, -393.000000) translate(792.000000, 369.000000)">
+                    <g id="Oval">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#F6F6F6" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="Group-11-Copy-12" transform="translate(24.000000, 24.000000) scale(-1, 1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)">
+                        <polygon id="Rectangle-2" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " points="-3.33066907e-15 1.46957616e-15 24 1.46957616e-15 24 24 -3.33066907e-15 24"></polygon>
+                        <polygon id="Shape" fill="#454545" transform="translate(12.840000, 12.000000) rotate(-90.000000) translate(-12.840000, -12.000000) " points="18.36 7.56 12.84 13.08 7.32 7.56 5.64 9.24 12.84 16.44 20.04 9.24"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/build/images/zoom.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="15" width="33" height="32" rx="8" fill="white"/>
+<path d="M15.7356 23C12.0196 23 9 26.1244 9 29.9694C9 33.8144 12.0196 36.9388 15.7356 36.9388C17.2059 36.9388 18.5648 36.4488 19.673 35.6192L24.8857 41L26 39.847L20.8492 34.5046C21.8614 33.2843 22.4712 31.7005 22.4712 29.9694C22.4712 26.1244 19.4517 23 15.7356 23ZM15.7356 23.8199C19.0229 23.8199 21.6788 26.568 21.6788 29.9694C21.6788 33.3708 19.0229 36.1189 15.7356 36.1189C12.4483 36.1189 9.79243 33.3708 9.79243 29.9694C9.79243 26.568 12.4483 23.8199 15.7356 23.8199ZM15.3394 26.6897V29.5594H12.5659V30.3794H15.3394V33.2491H16.1318V30.3794H18.9053V29.5594H16.1318V26.6897H15.3394Z" fill="black"/>
+</svg>

package/build/index.js

@@ -377,6 +377,12 @@ Object.defineProperty(exports, "PlanCard", {
     return _PlanCard.default;
   }
 });
+Object.defineProperty(exports, "Preview", {
+  enumerable: true,
+  get: function get() {
+    return _Preview.default;
+  }
+});
 Object.defineProperty(exports, "ReimbursementBreakupWidget", {
   enumerable: true,
   get: function get() {
@@ -588,6 +594,7 @@ var _CustomRating = _interopRequireDefault(require("./components/oa-component-ra
 var _MultipleCollapseWithSlots = _interopRequireDefault(require("./widgets/oa-widget-multiple-collapse-with-slots/MultipleCollapseWithSlots"));
 var _CustomPopover = _interopRequireDefault(require("./components/oa-component-popover/CustomPopover"));
 var _DropdownSearchInput = _interopRequireDefault(require("./widgets/oa-widget-dropdown-search-input/DropdownSearchInput"));
+var _Preview = _interopRequireDefault(require("./widgets/oa-widget-preview/Preview"));
 var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
 var _TrackShipmentWidget2 = _interopRequireDefault(require("./dev/oa-widget-track-shipment/TrackShipmentWidget"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

package/build/widgets/oa-widget-document-upload-card/DocUploadCardWidget.js

@@ -103,12 +103,13 @@ function DocumentUploadCard(props) {
   }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBorder: _ColorVariablesMap.default['--color-primary'],
+        colorBorder: _ColorVariablesMap.default['--color-divider'],
         borderRadiusLG: 4,
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
         colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
         colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
         colorError: _ColorVariablesMap.default['--color-negative'],
-        colorText: _ColorVariablesMap.default['--color-primary']
+        colorText: _ColorVariablesMap.default['--color-secondary-content']
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_CustomUpload.default, props)))));

package/build/widgets/oa-widget-preview/Preview.js

@@ -0,0 +1,142 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Preview;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ZoomImageComponent = _interopRequireDefault(require("./ZoomImageComponent"));
+var _leftIcon = _interopRequireDefault(require("../../images/left-icon.svg"));
+var _rightIcon = _interopRequireDefault(require("../../images/right-icon.svg"));
+var _zoom = _interopRequireDefault(require("../../images/zoom.svg"));
+var _close = _interopRequireDefault(require("../../images/close.svg"));
+var _utils = require("../../utils");
+require("./preview.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
+function Preview(_ref) {
+  var _srcArray$initialImag, _srcArray$currentImag;
+  let {
+    srcArray = [],
+    // Array of media (images/videos)
+    initialImageIndex = 0 // The starting index of the image/video
+  } = _ref;
+  const [currentImageIndex, setCurrentImageIndex] = (0, _react.useState)(initialImageIndex);
+  const [selectedMedia, setSelectedMedia] = (0, _react.useState)(((_srcArray$initialImag = srcArray[initialImageIndex]) === null || _srcArray$initialImag === void 0 ? void 0 : _srcArray$initialImag.src) || '');
+  const [isModalOpen, setModalOpen] = (0, _react.useState)(false);
+  const isSingleMedia = srcArray.length <= 1;
+  const isVideo = ((_srcArray$currentImag = srcArray[currentImageIndex]) === null || _srcArray$currentImag === void 0 ? void 0 : _srcArray$currentImag.type) === 'video';
+  (0, _react.useEffect)(() => {
+    var _srcArray$currentImag2;
+    setSelectedMedia((_srcArray$currentImag2 = srcArray[currentImageIndex]) === null || _srcArray$currentImag2 === void 0 ? void 0 : _srcArray$currentImag2.src);
+  }, [currentImageIndex, srcArray]);
+  const handlePrevious = () => {
+    const newIndex = (currentImageIndex - 1 + srcArray.length) % srcArray.length;
+    setCurrentImageIndex(newIndex);
+  };
+  const handleNext = () => {
+    const newIndex = (currentImageIndex + 1) % srcArray.length;
+    setCurrentImageIndex(newIndex);
+  };
+  const handleZoom = () => setModalOpen(true);
+  const handleCancel = () => setModalOpen(false);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "left-icon",
+    onClick: handlePrevious,
+    src: _leftIcon.default,
+    alt: "Previous",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handlePrevious();
+      }
+    }
+  }), selectedMedia && /*#__PURE__*/_react.default.createElement("div", {
+    className: "selected"
+  }, isVideo ? /*#__PURE__*/_react.default.createElement("video", {
+    src: selectedMedia,
+    controls: true,
+    autoPlay: true,
+    muted: false
+  }, /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })) : /*#__PURE__*/_react.default.createElement("img", {
+    src: selectedMedia,
+    alt: "Selected Media"
+  }), !isVideo && /*#__PURE__*/_react.default.createElement("img", {
+    onClick: handleZoom,
+    src: _zoom.default,
+    className: "zoomIn",
+    alt: "Zoom Icon",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleZoom();
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement("img", {
+    className: "right-icon",
+    onClick: handleNext,
+    src: _rightIcon.default,
+    alt: "Next",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleNext();
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "imgContainer"
+  }, srcArray.map((media, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: "media-".concat((0, _utils.getUUID)()),
+    className: "imgArea"
+  }, media.type === 'video' ? /*#__PURE__*/_react.default.createElement("video", {
+    className: currentImageIndex === index ? 'selected-thumbnail' : '',
+    src: media.src,
+    onClick: () => setCurrentImageIndex(index)
+  }, ' ', /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })) : /*#__PURE__*/_react.default.createElement("img", {
+    className: currentImageIndex === index ? 'selected-thumbnail' : '',
+    src: media.src,
+    alt: "Thumbnail ".concat(index),
+    onClick: () => setCurrentImageIndex(index),
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        // Add keyboard support
+        setCurrentImageIndex(index);
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: currentImageIndex === index ? 'selected-thumb' : ''
+  }, media.text)))), selectedMedia && /*#__PURE__*/_react.default.createElement(_ZoomImageComponent.default, {
+    isModalOpen: isModalOpen,
+    handleCancel: handleCancel,
+    selectedMedia: selectedMedia,
+    closeIcon: _close.default,
+    isVideo: isVideo
+  }));
+}
+Preview.propTypes = {
+  srcArray: _propTypes.default.arrayOf(_propTypes.default.shape({
+    src: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['image', 'video'])
+  })).isRequired,
+  initialImageIndex: _propTypes.default.number
+};
+Preview.defaultProps = {
+  initialImageIndex: 0
+};

package/build/widgets/oa-widget-preview/ZoomImageComponent.js

@@ -0,0 +1,71 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./preview.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
+function ZoomMediaComponent(_ref) {
+  let {
+    isModalOpen,
+    handleCancel,
+    selectedMedia,
+    closeIcon,
+    isVideo
+  } = _ref;
+  const [zoomView, setZoomView] = (0, _react.useState)(false);
+  const isMobileDevice = window.innerWidth <= 600;
+  const handleZoomModal = () => {
+    setZoomView(prev => !prev);
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    className: "zoomModal",
+    visible: isModalOpen,
+    onCancel: handleCancel,
+    width: 1024,
+    footer: null // Assuming you don't need a footer
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: closeIcon,
+    onClick: handleCancel,
+    className: "closedIcon",
+    alt: "Close Icon",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleCancel();
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, isVideo ? /*#__PURE__*/_react.default.createElement("video", {
+    className: zoomView ? 'zoomActive' : '',
+    onDoubleClick: isMobileDevice ? handleZoomModal : null,
+    controls: true,
+    src: selectedMedia
+  }, /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })) : /*#__PURE__*/_react.default.createElement("img", {
+    className: zoomView ? 'zoomActive' : 'modalImg',
+    onDoubleClick: isMobileDevice ? handleZoomModal : null,
+    src: selectedMedia,
+    alt: "Selected",
+    role: "presentation"
+  })));
+}
+ZoomMediaComponent.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  handleCancel: _propTypes.default.func.isRequired,
+  selectedMedia: _propTypes.default.string.isRequired,
+  closeIcon: _propTypes.default.string.isRequired,
+  isVideo: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = ZoomMediaComponent;

package/build/widgets/oa-widget-preview/preview.css

@@ -0,0 +1,93 @@
+.selected {
+  width: 302px;
+  margin: 0 auto;
+  height: 50vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.imgContainer {
+  display: flex;
+  overflow-x: auto;
+  background-color: #fafafa;
+  box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 12%);
+  padding: 16px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.imgArea {
+  margin-right: 20px;
+  list-style: none;
+}
+.imgArea img,
+.imgArea video {
+  width: 116px !important;
+  height: 116px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.imgArea video {
+  border: 1px solid var(--color-divider);
+}
+.imgArea span {
+  display: block;
+  text-align: center;
+  color: var(--color-primary-content);
+}
+.selected img {
+  width: 232px;
+}
+.selected img.zoomIn,
+.mismatchDrawer .ovrScroll .deicePic .zoomIn {
+  width: auto;
+  position: absolute;
+  cursor: pointer;
+  opacity: 0.8;
+}
+.left-icon {
+  position: absolute;
+  top: 35%;
+  font-size: 30px;
+  cursor: pointer;
+  left: 40px;
+}
+.right-icon {
+  position: absolute;
+  top: 35%;
+  right: 40px;
+  font-size: 30px;
+  cursor: pointer;
+}
+.zoomModal .ant-modal-body {
+  height: 420px;
+  overflow-x: auto;
+  margin: 16px 0 0;
+}
+.zoomModal .closedIcon {
+  display: none;
+}
+.modalImg {
+  width: 100%;
+}
+.imgContainer .selected-thumbnail {
+  border: 2px solid var(--color-primary);
+}
+.imgContainer .selected-thumb {
+  color: var(--color-primary);
+}
+.imgContainer span {
+  width: 138px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.selected video {
+  height: 320px;
+}
+@media screen and (max-width: 600px) {
+  .zoomModal .ant-modal-content {
+    position: fixed !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.288",
+  "version": "0.18.290",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",