oa-componentbook 1.0.1-stage.49 → 1.0.1-stage.50

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.
@@ -12,13 +12,14 @@ var _Elevation = _interopRequireDefault(require("./Elevation"));
12
12
  var _GridLayout = _interopRequireDefault(require("./GridLayout"));
13
13
  var _SpacingScales = _interopRequireDefault(require("./SpacingScales"));
14
14
  var _Typographies = _interopRequireDefault(require("./Typographies"));
15
+ var _commonStyles = _interopRequireDefault(require("./commonStyles"));
15
16
  require("antd/dist/reset.css");
16
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
18
  function GlobalCss(_ref) {
18
19
  let {
19
20
  children
20
21
  } = _ref;
21
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BorderRadius.default, null), /*#__PURE__*/_react.default.createElement(_SpacingScales.default, null), /*#__PURE__*/_react.default.createElement(_ColorVariables.default, null), /*#__PURE__*/_react.default.createElement(_Elevation.default, null), /*#__PURE__*/_react.default.createElement(_GridLayout.default, null), /*#__PURE__*/_react.default.createElement(_Typographies.default, null), children);
22
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BorderRadius.default, null), /*#__PURE__*/_react.default.createElement(_SpacingScales.default, null), /*#__PURE__*/_react.default.createElement(_ColorVariables.default, null), /*#__PURE__*/_react.default.createElement(_Elevation.default, null), /*#__PURE__*/_react.default.createElement(_GridLayout.default, null), /*#__PURE__*/_react.default.createElement(_commonStyles.default, null), /*#__PURE__*/_react.default.createElement(_Typographies.default, null), children);
22
23
  }
23
24
  GlobalCss.propTypes = {
24
25
  children: _propTypes.default.node.isRequired
@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
21
21
  // TODO: Figure out a way to make this work with storybook.
22
22
  // Can be used to wrap the entire application, to make these styles available to every component
23
23
 
24
- const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\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@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\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\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\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\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n \n"])));
24
+ const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n} \n \n\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n"])));
25
25
  var _default = exports.default = GridLayout;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _styledComponents = require("styled-components");
8
+ var _templateObject;
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"])));
11
+ var _default = exports.default = CommonStyles;
@@ -82,7 +82,8 @@ function AddSparePartCollapseWidget(_ref) {
82
82
  setActiveKey(Array.from(initialSelectedItems).map(String)); // Set initially selected items as active keys
83
83
  }, [selectedItems]);
84
84
  (0, _react.useEffect)(() => {
85
- const sortedItems = [...selectedItems.map(item => items && items.find(i => i.id === item.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
85
+ var _selectedItems$map$fi, _items$filter;
86
+ const sortedItems = [...((_selectedItems$map$fi = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => items && items.find(i => i.id === item.scopeId)).filter(Boolean)) !== null && _selectedItems$map$fi !== void 0 ? _selectedItems$map$fi : []), ...((_items$filter = items === null || items === void 0 ? void 0 : items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))) !== null && _items$filter !== void 0 ? _items$filter : [])];
86
87
  setFilteredItems(sortedItems);
87
88
  }, [items, selectedItems]);
88
89
 
@@ -141,7 +142,7 @@ function AddSparePartCollapseWidget(_ref) {
141
142
  }
142
143
  }, 0);
143
144
  };
144
- const isNumeric = value => /^\d*$/.test(value); // Regular expression to check if the value is numeric
145
+ const isNumeric = value => /^\d+(\.\d{0,2})?$/.test(value); // Regular expression to check if the value is numeric
145
146
 
146
147
  /**
147
148
  * Handles changes in the fields of the items.
@@ -163,11 +164,11 @@ function AddSparePartCollapseWidget(_ref) {
163
164
  });
164
165
  setFormValues(updatedFormValues);
165
166
  } else {
166
- openNotification({
167
- title: 'Error',
168
- description: 'Please enter only numeric values.',
169
- type: 'failure'
170
- });
167
+ // openNotification({
168
+ // title: 'Error',
169
+ // description: 'Please enter only numeric values 146.',
170
+ // type: 'failure',
171
+ // });
171
172
  }
172
173
  };
173
174
 
@@ -179,7 +180,7 @@ function AddSparePartCollapseWidget(_ref) {
179
180
  * @param {React.KeyboardEvent} event - The event triggered by the key press.
180
181
  */
181
182
  const handleKeyPress = event => {
182
- if (!/[0-9]/.test(event.key)) {
183
+ if (!/[\d.]/.test(event.key) || event.key === '.' && event.target.value.includes('.')) {
183
184
  event.preventDefault();
184
185
  openNotification({
185
186
  title: 'Error',
@@ -314,7 +315,7 @@ function AddSparePartCollapseWidget(_ref) {
314
315
  onChange: e => onFieldChange(item.id, 'cost', e.target.value),
315
316
  onKeyPress: handleKeyPress,
316
317
  inputMode: "numeric",
317
- pattern: "[0-9]*",
318
+ pattern: "[0-9]+(\\.[0-9]{0,2})?",
318
319
  value: ((_formValues$item$id = formValues[item.id]) === null || _formValues$item$id === void 0 ? void 0 : _formValues$item$id.cost) !== null && ((_formValues$item$id2 = formValues[item.id]) === null || _formValues$item$id2 === void 0 ? void 0 : _formValues$item$id2.cost) !== undefined ? (_formValues$item$id3 = formValues[item.id]) === null || _formValues$item$id3 === void 0 ? void 0 : _formValues$item$id3.cost : '',
319
320
  disabled: isItemDisabled
320
321
  })), !disableDiscount && /*#__PURE__*/_react.default.createElement("div", {
@@ -44,9 +44,9 @@ const getBase64 = file => new Promise((resolve, reject) => {
44
44
  * @returns {undefined}
45
45
  */
46
46
  const downloadFile = (base64String, fileName) => {
47
- const link = document.createElement('a');
47
+ const link = document.createElement("a");
48
48
  link.href = base64String;
49
- link.download = fileName || 'download';
49
+ link.download = fileName || "download";
50
50
  link.click();
51
51
  };
52
52
 
@@ -80,21 +80,21 @@ function DocumentUpload(props) {
80
80
  } = props;
81
81
  const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
82
82
  const [previewImage, setPreviewImage] = (0, _react.useState)(null);
83
- const [previewTitle, setPreviewTitle] = (0, _react.useState)('');
83
+ const [previewTitle, setPreviewTitle] = (0, _react.useState)("");
84
84
  const [loading, setLoading] = (0, _react.useState)(false);
85
85
  const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
86
86
  const handleCancel = () => setPreviewOpen(false);
87
87
 
88
88
  /**
89
- * Determines if the given file is an image file based on its file extension.
90
- */
89
+ * Determines if the given file is an image file based on its file extension.
90
+ */
91
91
  function isImageFile(fileName) {
92
92
  var _fileName$split;
93
93
  // Extract the file extension from the file name
94
- const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split('.')) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
94
+ const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split(".")) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
95
95
 
96
96
  // Define an array of image file extensions
97
- const imageFileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
97
+ const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg"];
98
98
 
99
99
  // Check if the file extension is in the array of image file extensions
100
100
  if (imageFileExtensions.indexOf(fileExtension) !== -1) {
@@ -143,15 +143,15 @@ function DocumentUpload(props) {
143
143
  fileList: newFileList,
144
144
  file
145
145
  } = _ref;
146
- if (file.status === 'removed') {
147
- onChange(null, 'removed');
146
+ if (file.status === "removed") {
147
+ onChange(null, "removed");
148
148
  }
149
149
  const modifiedList = await Promise.all(newFileList.map(async files => {
150
150
  let modifiedFile = files;
151
151
  setLoading(true);
152
152
  try {
153
153
  await onChange(files);
154
- modifiedFile.status = 'done';
154
+ modifiedFile.status = "done";
155
155
  if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
156
156
  var _modifiedFile, _modifiedFile2;
157
157
  modifiedFile.url = _PdfSampleImage.default;
@@ -170,7 +170,7 @@ function DocumentUpload(props) {
170
170
  const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
171
171
  style: {
172
172
  border: 0,
173
- background: 'none'
173
+ background: "none"
174
174
  },
175
175
  type: "button"
176
176
  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
@@ -187,25 +187,25 @@ function DocumentUpload(props) {
187
187
  color: "negative"
188
188
  }, " *"))), subText && /*#__PURE__*/_react.default.createElement("div", {
189
189
  style: {
190
- whiteSpace: 'pre-line'
190
+ whiteSpace: "pre-line"
191
191
  }
192
192
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
193
193
  color: "secondary-content",
194
194
  className: "type-b2-400"
195
- }, subText)), infoText && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
196
- color: "background-warning",
197
- description: infoText
198
- })), /*#__PURE__*/_react.default.createElement("div", {
195
+ }, subText)), infoText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
196
+ color: "negative",
197
+ className: "type-b2-400"
198
+ }, infoText)), /*#__PURE__*/_react.default.createElement("div", {
199
199
  className: "uploadDiv"
200
200
  }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
201
201
  theme: {
202
202
  token: {
203
- colorBorder: _ColorVariablesMap.default['--color-primary'],
203
+ colorBorder: _ColorVariablesMap.default["--color-primary"],
204
204
  borderRadiusLG: 4,
205
- colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
206
- colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
207
- colorError: _ColorVariablesMap.default['--color-negative'],
208
- colorText: _ColorVariablesMap.default['--color-primary']
205
+ colorPrimaryBorder: _ColorVariablesMap.default["--color-divider"],
206
+ colorFillAlter: _ColorVariablesMap.default["--color-secondary-background"],
207
+ colorError: _ColorVariablesMap.default["--color-negative"],
208
+ colorText: _ColorVariablesMap.default["--color-primary"]
209
209
  }
210
210
  }
211
211
  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
@@ -229,12 +229,12 @@ function DocumentUpload(props) {
229
229
  onCancel: handleCancel
230
230
  }, /*#__PURE__*/_react.default.createElement("div", {
231
231
  style: {
232
- textAlign: 'center'
232
+ textAlign: "center"
233
233
  }
234
- }, ' ', previewImage ? /*#__PURE__*/_react.default.createElement("img", {
234
+ }, " ", previewImage ? /*#__PURE__*/_react.default.createElement("img", {
235
235
  alt: "example",
236
236
  style: {
237
- width: '100%'
237
+ width: "100%"
238
238
  },
239
239
  src: previewImage
240
240
  }) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
@@ -255,10 +255,10 @@ DocumentUpload.propTypes = {
255
255
  DocumentUpload.defaultProps = {
256
256
  uploadedDocuments: [],
257
257
  onChange: () => {},
258
- subText: '',
259
- heading: '',
260
- formName: '',
261
- infoText: '',
258
+ subText: "",
259
+ heading: "",
260
+ formName: "",
261
+ infoText: "",
262
262
  multipleDoc: 0,
263
263
  showDelete: true,
264
264
  getPreview: () => {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.49",
3
+ "version": "1.0.1-stage.50",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",