oa-componentbook 0.18.232 → 0.18.234

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 (5) hide show
  1. package/build/components/oa-component-table/CustomTable.js +112 -15
  2. package/build/components/oa-component-table/styles.js +14 -0
  3. package/build/global-css/GridLayout.js +1 -1
  4. package/build/widgets/oa-widget-spare-part/SparePartsCollapseWidget.js +7 -2
  5. package/package.json +1 -1
package/build/components/oa-component-table/CustomTable.js CHANGED
@@ -2,23 +2,34 @@
2
2
 
3
3
  require("core-js/modules/es.symbol.description.js");
4
4
  require("core-js/modules/es.object.assign.js");
5
+ require("core-js/modules/es.weak-map.js");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.default = void 0;
9
- var _react = _interopRequireDefault(require("react"));
10
+ require("core-js/modules/web.dom-collections.iterator.js");
11
+ require("core-js/modules/es.json.stringify.js");
12
+ require("core-js/modules/es.array.includes.js");
13
+ require("core-js/modules/es.string.includes.js");
14
+ var _react = _interopRequireWildcard(require("react"));
10
15
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
16
  var _antd = require("antd");
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
17
+ var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
18
+ var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));
13
19
  var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
14
20
  require("antd/dist/reset.css");
15
21
  var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
16
22
  var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
23
+ var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
24
+ var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
25
+ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
17
26
  var _utils = require("../../utils");
18
- const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText"],
19
- _excluded2 = ["title"];
20
- var _templateObject;
27
+ var _styles = require("./styles");
28
+ const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "noOfColumnToShow", "defaultCardShow"],
29
+ _excluded2 = ["title", "render"];
21
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
+ 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); }
32
+ 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; }
22
33
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
23
34
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
24
35
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27,8 +38,6 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
27
38
  function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
28
39
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
29
40
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
30
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
31
- const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td{\n border: none;\n }\n"])));
32
41
  function CustomTable(_ref) {
33
42
  let {
34
43
  columns,
@@ -38,12 +47,28 @@ function CustomTable(_ref) {
38
47
  size,
39
48
  style,
40
49
  tableBorder,
41
- emptyText
50
+ emptyText,
51
+ noOfColumnToShow,
52
+ defaultCardShow
42
53
  } = _ref,
43
54
  antDesignProps = _objectWithoutProperties(_ref, _excluded);
55
+ const [viewMore, setViewMore] = (0, _react.useState)([]);
56
+ const [cardShow, setCardShow] = (0, _react.useState)(false);
57
+ (0, _react.useEffect)(() => {
58
+ if (window.innerWidth <= 600) {
59
+ if (defaultCardShow) {
60
+ setCardShow(defaultCardShow);
61
+ } else if ((columns === null || columns === void 0 ? void 0 : columns.length) <= 3) {
62
+ setCardShow(false);
63
+ } else {
64
+ setCardShow(true);
65
+ }
66
+ }
67
+ }, [defaultCardShow, columns === null || columns === void 0 ? void 0 : columns.length, dataSource === null || dataSource === void 0 ? void 0 : dataSource.length]);
44
68
  const uppercaseColumns = columns.map(column => {
45
69
  const {
46
- title
70
+ title,
71
+ render: _render
47
72
  } = column,
48
73
  otherColumnProperties = _objectWithoutProperties(column, _excluded2);
49
74
  const titleComponent = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -51,12 +76,15 @@ function CustomTable(_ref) {
51
76
  }, title) : title;
52
77
  return _objectSpread({
53
78
  title: titleComponent,
54
- render: text => {
79
+ render: (text, record, index) => {
55
80
  if ((0, _utils.isString)(text) || (0, _utils.isNumber)(text)) {
56
81
  return /*#__PURE__*/_react.default.createElement(_Typography.default, {
57
82
  typography: "type-b2-400"
58
83
  }, text);
59
84
  }
85
+ if (_render) {
86
+ return _render ? _render(text, record, index) : text;
87
+ }
60
88
  return text;
61
89
  }
62
90
  }, otherColumnProperties);
@@ -69,7 +97,36 @@ function CustomTable(_ref) {
69
97
  borderLeft: tableBorder ? '1px solid var(--color-divider)' : '0',
70
98
  borderRadius: tableBorder ? '4px' : '0'
71
99
  };
72
- return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
100
+ function checkAndUpdateArray(arr, num) {
101
+ const index = arr.indexOf(num);
102
+ if (index !== -1) {
103
+ arr.splice(index, 1);
104
+ } else {
105
+ arr.push(num);
106
+ }
107
+ return arr;
108
+ }
109
+ const handleViewMore = (index, row) => {
110
+ const tempViewMore = JSON.parse(JSON.stringify(viewMore));
111
+ setViewMore(checkAndUpdateArray(tempViewMore, index));
112
+ };
113
+ const checkLastElementIsAction = colIndex => {
114
+ var _uppercaseColumns;
115
+ if ((uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns === void 0 ? void 0 : _uppercaseColumns.key) === 'action' && colIndex === uppercaseColumns.length - 1) {
116
+ return true;
117
+ }
118
+ return false;
119
+ };
120
+ const getContentToBeRender = (columnsData, row) => {
121
+ if (columnsData !== null && columnsData !== void 0 && columnsData.dataIndex) {
122
+ return row[columnsData === null || columnsData === void 0 ? void 0 : columnsData.dataIndex];
123
+ }
124
+ if ( /*#__PURE__*/(0, _react.isValidElement)(columnsData === null || columnsData === void 0 ? void 0 : columnsData.render(row))) {
125
+ return columnsData === null || columnsData === void 0 ? void 0 : columnsData.render(row);
126
+ }
127
+ return '';
128
+ };
129
+ return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, null, !cardShow && /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
73
130
  theme: {
74
131
  components: {
75
132
  Table: {
@@ -98,7 +155,7 @@ function CustomTable(_ref) {
98
155
  controlItemBgActive: _ColorVariablesMap.default['--color-secondary-background']
99
156
  }
100
157
  }
101
- }, /*#__PURE__*/_react.default.createElement(StyledTable, _extends({
158
+ }, /*#__PURE__*/_react.default.createElement(_styles.StyledTable, _extends({
102
159
  style: _objectSpread(_objectSpread({}, tableStyle), style),
103
160
  columns: uppercaseColumns,
104
161
  dataSource: dataSource,
@@ -108,7 +165,43 @@ function CustomTable(_ref) {
108
165
  emptyText
109
166
  },
110
167
  size: size
111
- }, antDesignProps)));
168
+ }, antDesignProps))), cardShow && dataSource && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((row, rowIndex) => {
169
+ var _uppercaseColumns$, _uppercaseColumns2;
170
+ return /*#__PURE__*/_react.default.createElement("div", {
171
+ key: (0, _utils.getUUID)(),
172
+ className: "cardStyles"
173
+ }, /*#__PURE__*/_react.default.createElement("div", {
174
+ className: "srDetails"
175
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
176
+ className: "type-t2-700",
177
+ color: "primary-content"
178
+ }, /*#__PURE__*/_react.default.createElement("div", null, uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns$ = uppercaseColumns[0]) === null || _uppercaseColumns$ === void 0 ? void 0 : _uppercaseColumns$.title, ":", ' '), getContentToBeRender(uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns[0], row))), uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns.map((column, colIndex) => {
179
+ if (colIndex === 0 || !viewMore.includes(rowIndex) && colIndex > noOfColumnToShow || checkLastElementIsAction(colIndex, uppercaseColumns)) return null;
180
+ return /*#__PURE__*/_react.default.createElement("div", {
181
+ key: (0, _utils.getUUID)(),
182
+ className: "keyValue"
183
+ }, /*#__PURE__*/_react.default.createElement("span", null, column.title), /*#__PURE__*/_react.default.createElement("strong", null, getContentToBeRender(column, row)));
184
+ }), uppercaseColumns.length > noOfColumnToShow && /*#__PURE__*/_react.default.createElement("div", {
185
+ className: "showHideBtn"
186
+ }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
187
+ size: "medium",
188
+ type: "text-only",
189
+ label: viewMore.includes(rowIndex) ? 'View Less' : 'View More',
190
+ iconConfig: {
191
+ icon: viewMore.includes(rowIndex) ? /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
192
+ icon: _KeyboardArrowUp.default,
193
+ size: 16
194
+ }) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
195
+ icon: _KeyboardArrowDown.default,
196
+ size: 16
197
+ }),
198
+ position: 'right'
199
+ },
200
+ onClick: () => handleViewMore(rowIndex)
201
+ })), (uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns2 = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns2 === void 0 ? void 0 : _uppercaseColumns2.key) === 'action' && /*#__PURE__*/_react.default.createElement("div", {
202
+ className: "footerCta"
203
+ }, getContentToBeRender(uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns[uppercaseColumns.length - 1], row)));
204
+ })));
112
205
  }
113
206
  CustomTable.propTypes = {
114
207
  columns: _propTypes.default.array,
@@ -118,7 +211,9 @@ CustomTable.propTypes = {
118
211
  size: _propTypes.default.oneOf(['small', 'middle', 'large']),
119
212
  style: _propTypes.default.object,
120
213
  tableBorder: _propTypes.default.bool,
121
- emptyText: _propTypes.default.string
214
+ emptyText: _propTypes.default.string,
215
+ noOfColumnToShow: _propTypes.default.number,
216
+ defaultCardShow: _propTypes.default.bool
122
217
  };
123
218
  CustomTable.defaultProps = {
124
219
  dataSource: [],
@@ -128,6 +223,8 @@ CustomTable.defaultProps = {
128
223
  size: 'middle',
129
224
  style: {},
130
225
  tableBorder: true,
131
- emptyText: 'No Data'
226
+ emptyText: 'No Data',
227
+ noOfColumnToShow: 5,
228
+ defaultCardShow: false
132
229
  };
133
230
  var _default = exports.default = CustomTable;
package/build/components/oa-component-table/styles.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.StyledTable = exports.MainContainer = 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
+ var _default = exports.default = {};
13
+ const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td {\n border: none;\n }\n"])));
14
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.cardStyles {\n padding: 16px;\n border-radius: 12px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n margin: 0 0 24px;\n }\n .cardStyles:last-child {\n margin: 0;\n }\n .showHideBtn {\n padding: 8px 0 0;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong, .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 16px 0;\n border-top: 1px solid var(--color-divider);\n width: calc(100% + 32px);\n margin: 0 0 0 -16px;\n }\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\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\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.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: scroll;\n margin: 20px 0px 0px;\n padding: 12px 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.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.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@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\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: 24px !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"])));
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\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.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: scroll;\n margin: 20px 0px 0px;\n padding: 12px 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.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@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\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: 24px !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"])));
25
25
  var _default = exports.default = GridLayout;
package/build/widgets/oa-widget-spare-part/SparePartsCollapseWidget.js CHANGED
@@ -63,7 +63,12 @@ function SparePartsCollapseWidget(_ref) {
63
63
  }, panel.subTitle))),
64
64
  key: panel.scopeEstimationId,
65
65
  className: "ascCollapse",
66
- extra: panel.onDelete && /*#__PURE__*/_react.default.createElement("div", {
66
+ extra: /*#__PURE__*/_react.default.createElement("div", {
67
+ className: "totalVal"
68
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
69
+ className: "type-t2-700",
70
+ color: "primary-content"
71
+ }, panel === null || panel === void 0 ? void 0 : panel.total), panel.onDelete && /*#__PURE__*/_react.default.createElement("div", {
67
72
  onClick: e => e.stopPropagation(),
68
73
  onKeyDown: e => handleKeyDown(e, panel.onDelete, panel),
69
74
  role: "button",
@@ -74,7 +79,7 @@ function SparePartsCollapseWidget(_ref) {
74
79
  size: 24,
75
80
  onClick: () => panel.onDelete(panel),
76
81
  type: "text"
77
- })))
82
+ }))))
78
83
  }, /*#__PURE__*/_react.default.createElement(StyledContainer, null, generateItemRows(panel.items, index)))));
79
84
  }
80
85
  SparePartsCollapseWidget.propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.232",
3
+ "version": "0.18.234",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",