oa-componentbook 1.0.1-stage.81 → 1.0.1-stage.83
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.
- package/build/dev/oa-component-document-viewer/CustomDocumentViewer.js +6 -3
- package/build/dev/oa-component-document-viewer/styles.js +1 -1
- package/build/dev/oa-widget-document-side-drawer/DocumentSideDrawer.js +30 -24
- package/build/global-css/commonStyles.js +1 -1
- package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js +0 -1
- package/package.json +1 -1
|
@@ -116,8 +116,10 @@ function CustomDocumentViewer(_ref) {
|
|
|
116
116
|
const onMouseMove = e => {
|
|
117
117
|
if (!isDragging) return;
|
|
118
118
|
e.preventDefault();
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
const deltaX = e.pageX - startX;
|
|
120
|
+
const deltaY = e.pageY - startY;
|
|
121
|
+
container.scrollLeft = scrollLeft - deltaX;
|
|
122
|
+
container.scrollTop = scrollTop - deltaY;
|
|
121
123
|
};
|
|
122
124
|
const onMouseUp = function onMouseUp() {
|
|
123
125
|
isDragging = false;
|
|
@@ -235,9 +237,10 @@ function CustomDocumentViewer(_ref) {
|
|
|
235
237
|
pageNumber: index + 1,
|
|
236
238
|
scale: 1.0
|
|
237
239
|
}))))), fileType === "image" && /*#__PURE__*/_react.default.createElement("div", {
|
|
240
|
+
className: "oaImgCenter",
|
|
238
241
|
style: {
|
|
239
242
|
transform: "scale(".concat(scale, ") rotate(").concat(rotation, "deg)"),
|
|
240
|
-
transformOrigin: "center center"
|
|
243
|
+
transformOrigin: scale > 1.4 ? "left top" : "center center"
|
|
241
244
|
}
|
|
242
245
|
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
243
246
|
src: fileUrl,
|
|
@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const DocumentViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .customDocumentViewerOverlay {\n background-color: var(--color-primary-content);\n height: ", ";\n display: flex;\n justify-content: flex-start;\n width: 100%;\n padding: 0;\n margin: 0;\n flex-direction: column;\n overflow: auto;\n align-items: center; position: relative;\n }\n\n .documentPdfHeight{height:calc(100vh - 114px);}\n\n .customDocumentViewerOverlayHeader {\n position: fixed;\n padding: 0 16px;\n bottom: 74px;\n left: auto;\n right: auto;\n border-radius: 4px;\n z-index: 99;\n background: rgba(0, 0, 0, 0.7);\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n top:auto;\n }\n .customDocumentViewerOverlayHeaderIcons {\n display: flex;\n padding: 8px 0;\n flex-direction: row;\n gap: 16px;\n }\n\n .downloadIcon {\n border-left: solid 1px #fff;\n padding-left: 16px;\n margin-left: 16px;\n height: 100%;\n align-items: center;\n display: flex;\n }\n .pageNumber {\n border-right: solid 1px #fff;\n padding-right: 16px;\n margin-right: 16px;\n height: 100%;\n align-items: center;\n display: flex;\n }\n .ant-radio-group {\n display: flex;\n white-space: nowrap;\n }\n"])), props => props.documentViewerOverlayHeight);
|
|
11
|
+
const DocumentViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .customDocumentViewerOverlay {\n background-color: var(--color-primary-content);\n height: ", ";\n display: flex;\n justify-content: flex-start;\n width: 100%;\n padding: 0;\n margin: 0;\n flex-direction: column;\n overflow: auto;\n align-items: center; position: relative;\n }\n\n .documentPdfHeight{height:calc(100vh - 114px);}\n\n .customDocumentViewerOverlayHeader {\n position: fixed;\n padding: 0 16px;\n bottom: 74px;\n left: auto;\n right: auto;\n border-radius: 4px;\n z-index: 99;\n background: rgba(0, 0, 0, 0.7);\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n top:auto;\n }\n .customDocumentViewerOverlayHeaderIcons {\n display: flex;\n padding: 8px 0;\n flex-direction: row;\n gap: 16px;\n }\n\n .downloadIcon {\n border-left: solid 1px #fff;\n padding-left: 16px;\n margin-left: 16px;\n height: 100%;\n align-items: center;\n display: flex;\n }\n .pageNumber {\n border-right: solid 1px #fff;\n padding-right: 16px;\n margin-right: 16px;\n height: 100%;\n align-items: center;\n display: flex;\n }\n .ant-radio-group {\n display: flex;\n white-space: nowrap;\n }\n .oaImgCenter{\n height: calc(-114px + 100vh);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n }\n"])), props => props.documentViewerOverlayHeight);
|
|
12
12
|
var _default = exports.default = DocumentViewerContainer;
|
|
@@ -64,31 +64,37 @@ function DocumentSideDrawer(_ref) {
|
|
|
64
64
|
}, drawerTagConfig.tag.label)), ((_drawerTagConfig$view = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view === void 0 || (_drawerTagConfig$view = _drawerTagConfig$view.items) === null || _drawerTagConfig$view === void 0 ? void 0 : _drawerTagConfig$view.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
|
|
65
65
|
overlayClassName: "multipleDocumentTooltip",
|
|
66
66
|
isDisplayed: true,
|
|
67
|
-
title: (() => {
|
|
68
|
-
const
|
|
69
|
-
const
|
|
67
|
+
title: ((_drawerTagConfig$view2, _drawerTagConfig$view3, _drawerTagConfig$view4, _drawerTagConfig$view5) => {
|
|
68
|
+
const totalItems = (_drawerTagConfig$view2 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view2 === void 0 ? void 0 : _drawerTagConfig$view2.items.length;
|
|
69
|
+
const numColumns = totalItems === 1 ? 1 : 2; // 1 column if only 1 item, else 2 columns
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
71
|
+
const col1Size = Math.ceil(totalItems / numColumns); // First column gets extra if odd
|
|
72
|
+
const col2Size = totalItems - col1Size; // Remaining items go to second column
|
|
73
|
+
|
|
74
|
+
const columns = [(_drawerTagConfig$view3 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view3 === void 0 ? void 0 : _drawerTagConfig$view3.items.slice(0, col1Size), // First column
|
|
75
|
+
(_drawerTagConfig$view4 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view4 === void 0 ? void 0 : _drawerTagConfig$view4.items.slice(col1Size) // Second column
|
|
76
|
+
];
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_drawerTagConfig$view5 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view5 === void 0 ? void 0 : _drawerTagConfig$view5.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
78
|
+
typography: "type-sl1-700",
|
|
79
|
+
color: "secondary-content"
|
|
80
|
+
}, drawerTagConfig.viewDetails.title), /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
+
className: "tooltip-grid",
|
|
82
|
+
style: {
|
|
83
|
+
flexDirection: totalItems === 1 ? "column" : "row",
|
|
84
|
+
// Single column if only 1 item
|
|
85
|
+
width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
|
|
86
|
+
}
|
|
87
|
+
}, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
|
|
88
|
+
key: "col-".concat(colIndex),
|
|
89
|
+
className: "tooltip-column"
|
|
90
|
+
}, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
|
|
91
|
+
key: item.title,
|
|
92
|
+
className: "tooltip-item"
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
94
|
+
size: 20,
|
|
95
|
+
icon: item.type === "positive" ? _Check.default : _Close.default,
|
|
96
|
+
color: item.type === "positive" ? "positive" : "negative"
|
|
97
|
+
}), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
|
|
92
98
|
})()
|
|
93
99
|
}, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
94
100
|
type: "text-only",
|
|
@@ -7,5 +7,5 @@ exports.default = void 0;
|
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
8
|
var _templateObject;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
|
-
const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.tooltip-grid {\n display: flex;\n align-items: flex-start;\n padding: 8px 0 0;\n
|
|
10
|
+
const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.tooltip-grid {\n display: flex;\n align-items: flex-start;\n padding: 8px 0 0;\n gap: 0px 32px;\n}\n\n.tooltip-column {\n display: flex;\n flex-direction: column;\n width: 280px;\n}\n\n\n.multipleDocumentTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: max-content;\n border-radius: 12px;\n min-width: 300px;\n\n}\n .multipleDocumentTooltip .ant-tooltip-arrow:before{\n background: #fff;\n }\n .multipleDocumentTooltip li.tooltip-item{\n display: flex;\n gap: 8px;\n align-items: flex-start;\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px; \n padding: 8px 0;\n // width: max-content;\n }\n .tooltip-item p{\n margin: 0;\n }\n .multipleDocumentTooltip ul .headingName{\n color: #717171;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px; \n letter-spacing: 0.24px;\n text-transform: uppercase;\n padding: 0 0 16px;\n }\n .multipleDocumentTooltip .flexWrap{\n display: flex;\n flex-wrap: wrap;\n column-count: 1;\n column-gap: 8px;\n list-style: none;\n justify-content: space-between;\n }\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n }\n .documentDrawer .ant-drawer-body{\n overflow: hidden;\n padding: 0;\n }\n .documentDrawer .rightContSection {\n overflow-y: scroll;\n height: calc(100vh - 114px);\n }\n .documentDrawer .ant-radio-group{\n display: flex;\n white-space: nowrap;\n }\n .documentDrawer .ant-select-selector .ant-select-selection-item > span{\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 269px;\n display: block;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: 348px;\n border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n background: #fff !important;\n}\n.OaFooterBtn{\n display: flex;\n justify-content: end;\n}\n.OaTooltip{\n max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: auto;\n margin: 30px 0px 0px;\n padding: 0px 8px 0 0;;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n .modalImg{\n width: 100%;\n }\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n @media only screen and (max-width: 574px) {\n .ant-steps-item-tail{\n inset-inline-start: 78px !important;\n \n }\n}\n @media only screen and (max-width: 480px) {\n .ant-steps-item-tail{\n inset-inline-start: 60px !important;\n \n }\n}\n@media only screen and (max-width: 600px) {\n \n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .ant-picker-dropdown { width: 100%; left: 0 !important; }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n\n"])));
|
|
11
11
|
var _default = exports.default = CommonStyles;
|
|
@@ -167,7 +167,6 @@ function ApprovalWidget(_ref) {
|
|
|
167
167
|
}, status.title), /*#__PURE__*/_react.default.createElement("div", {
|
|
168
168
|
className: "tooltip-grid",
|
|
169
169
|
style: {
|
|
170
|
-
display: "flex",
|
|
171
170
|
flexDirection: totalItems === 1 ? "column" : "row",
|
|
172
171
|
// Make it single column if only 1 item
|
|
173
172
|
width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
|