oa-componentbook 1.0.1-stage.52 → 1.0.1-stage.53

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.
@@ -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.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 @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 .multipleDocumentTooltip ul{\n margin: 0;\n padding: 0;\n list-style: none\n }\n .multipleDocumentTooltip ul li{\n display: flex;\n gap: 8px;\n align-items: center;\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px; \n width: 47%;\n padding: 8px 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"])));
10
+ const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.tooltip-grid {\n display: flex;\n gap: 32px; /* Space between columns */\n}\n\n.tooltip-column {\n display: flex;\n flex-direction: column;\n width: 100%;\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\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 }\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 @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;
@@ -70,7 +70,7 @@ function ApprovalWidget(_ref) {
70
70
  systemStatus,
71
71
  documentTitle,
72
72
  descriptionTitle,
73
- 'data-test': dataTest
73
+ "data-test": dataTest
74
74
  } = _ref,
75
75
  props = _objectWithoutProperties(_ref, _excluded);
76
76
  const getInitialValue = isApproved => {
@@ -88,11 +88,11 @@ function ApprovalWidget(_ref) {
88
88
  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
89
89
  className: "row"
90
90
  }, /*#__PURE__*/_react.default.createElement("div", {
91
- className: approvalForm.hidden ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-7 col-lg-7 gutter'
91
+ className: approvalForm.hidden ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-7 col-lg-7 gutter"
92
92
  }, /*#__PURE__*/_react.default.createElement("div", {
93
93
  className: "row"
94
94
  }, /*#__PURE__*/_react.default.createElement("div", {
95
- className: isQuestionStyleWidget ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-9 col-lg-9 gutter flexCol12'
95
+ className: isQuestionStyleWidget ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-9 col-lg-9 gutter flexCol12"
96
96
  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
97
97
  className: "type-b2-400"
98
98
  }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement(_styles.Styledescription, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -106,7 +106,7 @@ function ApprovalWidget(_ref) {
106
106
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
107
107
  typography: "type-b2-400",
108
108
  color: "secondary-content"
109
- }, documentTitle, ' ', "\xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
109
+ }, documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
110
110
  disabled: (_approvalForm$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
111
111
  "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
112
112
  }, docDetails, {
@@ -116,38 +116,51 @@ function ApprovalWidget(_ref) {
116
116
  "data-test": dataTest ? "".concat(dataTest, "--view-button") : undefined,
117
117
  onClick: () => viewOnClick(questionId),
118
118
  type: "text-only",
119
- label: isQuestionStyleWidget ? 'View Previous Description' : 'View History'
119
+ label: isQuestionStyleWidget ? "View Previous Description" : "View History"
120
120
  }), children)), !isQuestionStyleWidget && /*#__PURE__*/_react.default.createElement("div", {
121
121
  className: "col-sm-12 col-md-3 col-lg-3 flexCol8"
122
- }, systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.map(status => /*#__PURE__*/_react.default.createElement("div", null, status.renderType === 'text' && /*#__PURE__*/_react.default.createElement(_Typography.default, {
122
+ }, systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.map(status => /*#__PURE__*/_react.default.createElement("div", null, status.renderType === "text" && /*#__PURE__*/_react.default.createElement(_Typography.default, {
123
123
  typography: "type-b2-400",
124
124
  color: "secondary-content"
125
- }, status.label), status.renderType === 'tag' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, status)), status.renderType === 'toolTip' && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
125
+ }, status.label), status.renderType === "tag" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, status)), status.renderType === "toolTip" && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
126
126
  overlayClassName: "multipleDocumentTooltip",
127
127
  isDisplayed: true,
128
- title: /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("div", {
129
- className: "headingName"
130
- }, "Model response"), /*#__PURE__*/_react.default.createElement("div", {
131
- className: "flexWrap"
132
- }, [...Array(5)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
133
- key: "".concat(index + 5, "_close")
128
+ title: /*#__PURE__*/_react.default.createElement("div", {
129
+ className: "tooltip-grid"
130
+ }, /*#__PURE__*/_react.default.createElement("div", {
131
+ className: "tooltip-column"
132
+ }, [...Array(6)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
133
+ key: "col-1-".concat(index),
134
+ className: "tooltip-item"
134
135
  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
135
136
  size: 20,
136
137
  icon: _Close.default,
137
138
  color: "negative"
138
- }), ' ', status.title)), [...Array(2)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
139
- key: "".concat(index + 5, "_positive")
139
+ }), " ", status.title, " - Col 1"))), /*#__PURE__*/_react.default.createElement("div", {
140
+ className: "tooltip-column"
141
+ }, [...Array(6)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
142
+ key: "col-2-".concat(index),
143
+ className: "tooltip-item"
140
144
  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
141
145
  size: 20,
142
146
  icon: _Check.default,
143
147
  color: "positive"
144
- }), ' ', status.title))))
148
+ }), " ", status.title, " - Col 2"))), /*#__PURE__*/_react.default.createElement("div", {
149
+ className: "tooltip-column"
150
+ }, [...Array(6)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
151
+ key: "col-3-".concat(index),
152
+ className: "tooltip-item"
153
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
154
+ size: 20,
155
+ icon: _Close.default,
156
+ color: "negative"
157
+ }), " ", status.title, " - Col 3"))))
145
158
  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
146
159
  type: "text-only",
147
160
  label: status.label
148
161
  }))))))), approvalForm.invisible && /*#__PURE__*/_react.default.createElement("div", {
149
162
  className: "col-sm-12 col-md-5 col-lg-5"
150
- }) || !approvalForm.hidden && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actionRenderType === 'text' && /*#__PURE__*/_react.default.createElement("div", {
163
+ }) || !approvalForm.hidden && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actionRenderType === "text" && /*#__PURE__*/_react.default.createElement("div", {
151
164
  className: "oaActionText"
152
165
  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
153
166
  icon: _CheckCircle.default,
@@ -155,7 +168,7 @@ function ApprovalWidget(_ref) {
155
168
  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
156
169
  typography: "type-b2-400",
157
170
  color: "secondary-content"
158
- }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : '-')), actionRenderType === 'button' && /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent), actionRenderType === 'radio' && /*#__PURE__*/_react.default.createElement("div", {
171
+ }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : "-")), actionRenderType === "button" && /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent), actionRenderType === "radio" && /*#__PURE__*/_react.default.createElement("div", {
159
172
  className: "col-sm-12 col-md-5 col-lg-5"
160
173
  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
161
174
  name: "isApproved-".concat(questionId),
@@ -165,7 +178,7 @@ function ApprovalWidget(_ref) {
165
178
  required: true,
166
179
  message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
167
180
  "data-test": "".concat(dataTest, "--is-approved-validation-message")
168
- }, "Approval status needs to be selected.") : 'Approval status needs to be selected.'
181
+ }, "Approval status needs to be selected.") : "Approval status needs to be selected."
169
182
  }]
170
183
  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
171
184
  "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
@@ -185,12 +198,12 @@ function ApprovalWidget(_ref) {
185
198
  className: "type-b2-400"
186
199
  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
187
200
  name: "remarks-".concat(questionId),
188
- initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : '',
201
+ initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
189
202
  rules: [{
190
203
  required: true,
191
204
  message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
192
205
  "data-test": "".concat(dataTest, "--remarks-validation-message")
193
- }, "Remarks cannot be empty.") : 'Remarks cannot be empty.'
206
+ }, "Remarks cannot be empty.") : "Remarks cannot be empty."
194
207
  }]
195
208
  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
196
209
  "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
@@ -199,7 +212,7 @@ function ApprovalWidget(_ref) {
199
212
  }
200
213
  ApprovalWidget.propTypes = {
201
214
  children: _propTypes.default.node,
202
- 'data-test': _propTypes.default.string,
215
+ "data-test": _propTypes.default.string,
203
216
  description: _propTypes.default.string,
204
217
  // Leave description optional
205
218
  docDetails: _propTypes.default.shape({
@@ -240,8 +253,8 @@ ApprovalWidget.propTypes = {
240
253
  };
241
254
  ApprovalWidget.defaultProps = {
242
255
  children: null,
243
- 'data-test': undefined,
244
- description: '',
256
+ "data-test": undefined,
257
+ description: "",
245
258
  docDetails: {},
246
259
  approvalForm: {},
247
260
  isMandatory: false,
@@ -251,7 +264,7 @@ ApprovalWidget.defaultProps = {
251
264
  actionRenderType: undefined,
252
265
  actionContent: {},
253
266
  systemStatus: [],
254
- documentTitle: '',
255
- descriptionTitle: ''
267
+ documentTitle: "",
268
+ descriptionTitle: ""
256
269
  };
257
270
  var _default = exports.default = ApprovalWidget;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.52",
3
+ "version": "1.0.1-stage.53",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",