oa-componentbook 0.18.187 → 0.18.189

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/components/oa-component-upload/CustomUpload.js +10 -4
  2. package/build/components/oa-component-viewer/CustomViewer.js +40 -17
  3. package/build/components/oa-component-viewer/styles.js +13 -0
  4. package/build/global-css/GridLayout.js +1 -1
  5. package/build/images/modal-img.svg +8 -0
  6. package/package.json +1 -1
package/build/components/oa-component-upload/CustomUpload.js CHANGED
@@ -22,6 +22,7 @@ var _upload = _interopRequireDefault(require("../../images/upload.svg"));
22
22
  var _CustomIcon = _interopRequireDefault(require("../oa-component-icons/CustomIcon"));
23
23
  var _CustomViewer = _interopRequireDefault(require("../oa-component-viewer/CustomViewer"));
24
24
  var _CustomModal = _interopRequireDefault(require("../oa-component-modal/CustomModal"));
25
+ var _modalImg = _interopRequireDefault(require("../../images/modal-img.svg"));
25
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
27
  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); }
27
28
  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; }
@@ -134,8 +135,9 @@ function DocumentUpload(props) {
134
135
  alt: "phone img",
135
136
  src: _upload.default
136
137
  }), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
137
- const DeleteFile = () => {
138
- deleteHandler(selectedFile);
138
+ const DeleteFile = async () => {
139
+ await deleteHandler(selectedFile);
140
+ setDeleteConfirmation(false);
139
141
  };
140
142
  console.log(previewImage, 'previewImage');
141
143
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -152,7 +154,11 @@ function DocumentUpload(props) {
152
154
  }
153
155
  }
154
156
  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
155
- name: formName
157
+ name: formName,
158
+ rules: [{
159
+ required: isMandatory,
160
+ message: 'Required'
161
+ }]
156
162
  }, /*#__PURE__*/_react.default.createElement(_antd.Upload, {
157
163
  customRequest: () => {},
158
164
  listType: "picture-card",
@@ -176,7 +182,7 @@ function DocumentUpload(props) {
176
182
  label: 'Yes, Delete',
177
183
  type: 'danger-primary'
178
184
  }],
179
- imgSrc: "static/media/modal-img.svg",
185
+ imgSrc: _modalImg.default,
180
186
  open: deleteConfirmation,
181
187
  onCancel: () => setDeleteConfirmation(false),
182
188
  title: "Delete Image?"
package/build/components/oa-component-viewer/CustomViewer.js CHANGED
@@ -10,9 +10,15 @@ require("core-js/modules/web.dom-collections.iterator.js");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _reactZoomPanPinch = require("react-zoom-pan-pinch");
13
+ var _Rotate90DegreesCcw = _interopRequireDefault(require("@material-ui/icons/Rotate90DegreesCcw"));
14
+ var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
15
+ var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
13
16
  var _CustomLoader = _interopRequireDefault(require("../oa-component-loader/CustomLoader"));
14
17
  var _CustomModal = _interopRequireDefault(require("../oa-component-modal/CustomModal"));
15
18
  var _common = _interopRequireDefault(require("../../utils/common"));
19
+ var _styles = require("./styles");
20
+ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
21
+ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
16
22
  const _excluded = ["fileName", "previewImage"],
17
23
  _excluded2 = ["zoomIn", "zoomOut"];
18
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,32 +35,37 @@ function CustomViewer(_ref) {
29
35
  antDesignProps = _objectWithoutProperties(_ref, _excluded);
30
36
  const [rotationDegree, setRotationDegree] = (0, _react.useState)(0);
31
37
  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, _extends({
38
+ width: 860,
32
39
  buttonConfig: [{
33
40
  callback: () => {
34
41
  (0, _common.default)(previewImage, fileName);
35
42
  },
36
43
  label: 'Download'
37
44
  }]
38
- }, antDesignProps), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref2 => {
45
+ }, antDesignProps), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref2 => {
39
46
  let {
40
47
  zoomIn,
41
48
  zoomOut
42
49
  } = _ref2,
43
50
  rest = _objectWithoutProperties(_ref2, _excluded2);
44
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Controls, {
51
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Controls, {
45
52
  setRotationDegree: setRotationDegree
46
53
  }), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react.default.createElement("div", {
47
54
  style: {
48
55
  transform: "rotate(".concat(rotationDegree, "deg)")
49
56
  }
50
- }, previewImage ? /*#__PURE__*/_react.default.createElement("img", {
57
+ }, previewImage ? /*#__PURE__*/_react.default.createElement("div", {
58
+ className: "fadeImg"
59
+ }, /*#__PURE__*/_react.default.createElement("div", {
60
+ className: "overLayImg"
61
+ }, /*#__PURE__*/_react.default.createElement("img", {
51
62
  alt: "example",
52
63
  style: {
53
64
  width: '100%'
54
65
  },
55
66
  src: previewImage
56
- }) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
57
- })));
67
+ }))) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
68
+ }));
58
69
  }
59
70
  CustomViewer.propTypes = {
60
71
  fileName: _propTypes.default.string,
@@ -76,18 +87,30 @@ function Controls(_ref3) {
76
87
  const rotate = () => {
77
88
  setRotationDegree(preRotationDegree => preRotationDegree + 90);
78
89
  };
79
- return /*#__PURE__*/_react.default.createElement("div", {
80
- className: "tools"
81
- }, /*#__PURE__*/_react.default.createElement("button", {
82
- type: "button",
83
- onClick: () => zoomIn()
84
- }, "+"), /*#__PURE__*/_react.default.createElement("button", {
85
- type: "button",
86
- onClick: () => zoomOut()
87
- }, "-"), /*#__PURE__*/_react.default.createElement("button", {
88
- type: "button",
89
- onClick: () => rotate()
90
- }, "Rotate"));
90
+ return /*#__PURE__*/_react.default.createElement(_styles.StyledZoom, null, /*#__PURE__*/_react.default.createElement("div", {
91
+ className: "flextBodyContain"
92
+ }, /*#__PURE__*/_react.default.createElement("div", {
93
+ className: "iconWidthPad"
94
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
95
+ onClick: () => zoomIn(),
96
+ size: 18,
97
+ icon: _Add.default,
98
+ color: "primary"
99
+ })), /*#__PURE__*/_react.default.createElement("div", {
100
+ className: "iconWidthPad"
101
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
102
+ onClick: () => zoomOut(),
103
+ size: 18,
104
+ icon: _Remove.default,
105
+ color: "primary"
106
+ }))), /*#__PURE__*/_react.default.createElement("div", {
107
+ className: "iconWidthPad posroated"
108
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
109
+ onClick: () => rotate(),
110
+ size: 18,
111
+ icon: _Rotate90DegreesCcw.default,
112
+ color: "primary"
113
+ })));
91
114
  }
92
115
  Controls.propTypes = {
93
116
  setRotationDegree: _propTypes.default.func.isRequired
package/build/components/oa-component-viewer/styles.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mainStyle = exports.StyledZoom = void 0;
7
+ var _antd = require("antd");
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ var _templateObject, _templateObject2;
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
+ const mainStyle = exports.mainStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nposition: relative;\nbackground: red;\n"])));
13
+ const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.flextBodyContain{\n position: absolute;\n right: 36px;\n bottom: 116px;\n flex-direction: column;\n z-index: 9999;\n display: flex;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n position: absolute;\n right: 36px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n top: 92px;\n z-index: 999;\n border-radius: 4px;\n}\n.iconWidthPad{\n \n background: var(--color-primary-background); \n padding: 6px;\n height: 32px;\n width: 32px;\n border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n border: none;\n}\n\n"])));
package/build/global-css/GridLayout.js CHANGED
@@ -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 @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.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.label-date-dropdown span + span {height:20px !important;}\n.ant-select-dropdown .ant-select-item:last-child {border-top: 1px solid #E0E0E0;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content div{border-top: none !important;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content .label-date-dropdown span{color: var(--color-primary-content);\n font-size: 14px; margin:0;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; }\n\n\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content span{color: var(--color-secondary-content);\n font-size: 12px; margin:4px 0 0 0;\n font-style: normal;\n font-weight: 400;\n line-height: 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\n\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\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"])));
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 @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.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.label-date-dropdown span + span {height:20px !important;}\n.ant-select-dropdown .ant-select-item:last-child {border-top: 1px solid #E0E0E0;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content div{border-top: none !important;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content .label-date-dropdown span{color: var(--color-primary-content);\n font-size: 14px; margin:0;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; }\n\n\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content span{color: var(--color-secondary-content);\n font-size: 12px; margin:4px 0 0 0;\n font-style: normal;\n font-weight: 400;\n line-height: 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.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\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"])));
25
25
  var _default = exports.default = GridLayout;
package/build/images/modal-img.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="Group 6 Copy">
3
+ <g id="Group 8">
4
+ <circle id="Oval 2" opacity="0.4" cx="18" cy="18" r="18" fill="#E62A10" fill-opacity="0.37"/>
5
+ <path id="Shape" d="M19.5991 11.6691V17.1875C19.5991 17.4823 19.3622 17.7215 19.0703 17.7215C18.7783 17.7215 18.5414 17.4823 18.5414 17.1875V9.17696C18.5414 8.58703 18.0679 8.10889 17.4837 8.10889C16.8995 8.10889 16.426 8.58703 16.426 9.17696V17.1875C16.426 17.4823 16.189 17.7215 15.8971 17.7215C15.6052 17.7215 15.3682 17.4823 15.3682 17.1875V10.7791C15.3682 10.2874 14.9737 9.889 14.4868 9.889C13.9999 9.889 13.6054 10.2874 13.6054 10.7791V17.8995C13.6054 18.1943 13.3684 18.4336 13.0765 18.4336C12.7846 18.4336 12.5476 18.1943 12.5476 17.8995V13.4492C12.5476 12.9576 12.1531 12.5592 11.6662 12.5592H11.6627C11.1758 12.5592 10.7812 12.9576 10.7812 13.4492V23.1074C11.076 27.4082 13.4115 28.4257 16.708 28.4257C19.0586 28.4257 21.0856 27.212 22.0591 25.4526C22.4684 24.7854 24.948 20.8866 25.161 20.4793C25.4092 20.0043 25.7727 19.4326 26.2311 19.0545C26.4754 18.853 26.6379 18.5852 26.7885 18.305C26.8269 18.2331 26.9387 17.363 26.2981 17.3655C25.7424 17.3676 25.1081 17.604 24.648 17.918C24.1322 18.2702 23.4627 18.8779 22.8908 19.8872C22.705 20.2155 22.3721 20.444 21.9981 20.4526C21.6451 20.4608 21.7364 20.286 21.7146 19.5497V18.4859V11.6691C21.7146 11.0792 21.2411 10.6011 20.6569 10.6011C20.0726 10.6011 19.5991 11.0792 19.5991 11.6691Z" fill="#E62A10"/>
6
+ </g>
7
+ </g>
8
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.187",
3
+ "version": "0.18.189",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",