@crystaldesign/diva-web-planner-react 24.15.0-beta.30 → 24.15.0-beta.31

package/build/esm/index-1fe77d2d.js

@@ -0,0 +1,110 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-4238b6c1.js';
+import { useRef, useEffect } from 'react';
+import ProductHeader from './index-d1811da8.js';
+import ContentItemWrapper from './index-99f7559c.js';
+import ProductSettings from './index-36ca9617.js';
+import ProductCenter from './index-0f8d183c.js';
+import ProductFooter from './index-7276e693.js';
+import ProductInfo from './index-8c861c8b.js';
+import { observer } from 'mobx-react-lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+import 'classnames';
+import './index-0a62ea63.js';
+import 'sift';
+import './index-0e4c18f2.js';
+import './index-28e57850.js';
+import './index-7c3fd2ea.js';
+import './index-a39ff64d.js';
+import './index-43c635c5.js';
+import './index.module-fc5a5fa4.js';
+import './index-c9d64e0f.js';
+import 'react-switch';
+import './index-efc5dd21.js';
+import './index-0f663f3c.js';
+import './index-76e80cda.js';
+import 'react-dropdown';
+import './index-f4bbad50.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-17162832.js';
+import './index-ebbb0e7e.js';
+import './index-edd299b4.js';
+import '@crystaldesign/content-box';
+import './index-0b321731.js';
+import './index-25a1df5d.js';
+import './index-e695c275.js';
+import './index-2e36cbea.js';
+import './index-956e77fb.js';
+import '@crystaldesign/product-detail-page';
+import '@crystaldesign/products-component';
+import './index-c4b4a961.js';
+import './index-27d132cf.js';
+import './index-d1584d77.js';
+import 'react-laag';
+import './index-796275b1.js';
+import './index-197e79bf.js';
+import './index-731c8660.js';
+import './index-423da763.js';
+import './index-91d5eb8a.js';
+import './index-42df1486.js';
+import './index-c7960446.js';
+import './index-9e3366bc.js';
+import './index-c15bd722.js';
+import './index-56e5cc54.js';
+import './index.module-88189b53.js';
+import './index-7fe327dd.js';
+import './index-3c138b4d.js';
+import './index-e701f826.js';
+import './index-710590c2.js';
+import './index-0489077a.js';
+import './index-ef460f33.js';
+import './index-ee3c80e7.js';
+import './index.module-992ce231.js';
+import './index-32f7ee15.js';
+import './index-ec77ca4a.js';
+import './index-5954f30f.js';
+import './index-431d7221.js';
+import './index-dd175f63.js';
+import './index.module-c552273c.js';
+import './index-123d0f65.js';
+import './index-ed55c94f.js';
+import './index-6c3d9700.js';
+import './index-12ef464b.js';
+import './index-b1b70073.js';
+import './index-268632aa.js';
+import './index-5bc07dea.js';
+
+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; }
+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; }
+var Product = function Product(props) {
+  var viewHandler = useViewHandler();
+  var productElement = useRef(null);
+  useEffect(function () {
+    if (!productElement) return;
+    viewHandler.productState.setProductElement(productElement.current);
+  }, [productElement]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: productElement,
+    children: [/*#__PURE__*/jsx(ProductHeader, {}), /*#__PURE__*/jsx(ProductCenter, {}), viewHandler.productState.footerVisible.length > 1 && /*#__PURE__*/jsx(ProductFooter, {}), /*#__PURE__*/jsx(ProductInfo, {}), /*#__PURE__*/jsx(ProductSettings, {}), viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId && /*#__PURE__*/jsx(ContentItemWrapper, {
+      id: viewHandler.settingsState.contentItemId,
+      startPos: "right"
+    })]
+  }));
+};
+var Product$1 = observer(Product);
+
+export { Product$1 as default };

package/build/esm/index-20d6cb35.js

@@ -0,0 +1,157 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wrapper = "wrapper-J9tZI";
+var scrollable = "scrollable-8uAoc";
+var header = "header-kOQCg";
+var ekTextClass = "ekTextClass-w-J0r";
+var table = "table-4dpdq";
+var column = "column-25QWm";
+var css_248z = ".wrapper-J9tZI {\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 5px);\n\n  -webkit-user-select: text;\n\n     -moz-user-select: text;\n\n          user-select: text;\n  background-color: #fff;\n}\n.scrollable-8uAoc {\n  overflow: auto;\n  left: 50px;\n}\n.header-kOQCg {\n  height: 8%;\n  width: 100%;\n  padding-top: 0.7%;\n  text-align: center;\n  background-color: var(--primaryColor);\n  font-size: 30px;\n  color: white;\n  font-weight: 600;\n}\n\n.ekTextClass-w-J0r {\n  margin-left: 200px;\n  background-color: #fff;\n  font-weight: 600;\n  max-height: 92%;\n  height: auto;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.table-4dpdq {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-color: #ffffff;\n  border-collapse: collapse;\n  border-color: #e7eaf8;\n  border-style: solid;\n  border-width: 0px;\n  color: #000000;\n  font-weight: normal;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  overflow-y: auto;\n}\n.table-4dpdq thead {\n  font-weight: bold !important;\n}\n.table-4dpdq thead {\n  border-bottom: 1px solid;\n  /* min-width: 20px; */\n  background-color: var(--thirdColor);\n  font-size: 16px;\n  padding-top: 1%;\n}\n.column-25QWm {\n  text-align: left;\n}\n.column-25QWm:first-child {\n  height: 20px;\n}\n.column-25QWm th:nth-child(1) {\n  width: 40%;\n  border-bottom: 1px solid;\n}\n.column-25QWm th {\n  border-bottom: 1px solid;\n  padding-right: 10px;\n  margin-bottom: 1%;\n  font-weight: normal;\n}\n.column-25QWm th:last-child {\n  font-size: 12px;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["onMouseDown"];
+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; }
+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; }
+var EkTextViewer = function EkTextViewer(_ref) {
+  var onMouseDown = _ref.onMouseDown,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    ekText = _useState2[0],
+    setEkText = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sapOrderLines = _useState4[0],
+    setSapOrderLines = _useState4[1];
+  var getEkText = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _basket$getEKText, _basket$SAPOrderLines;
+      var basket;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return viewHandler.divaWebPlanner.getBasketDataWithEkText();
+          case 2:
+            basket = _context.sent;
+            if (basket) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            setEkText((_basket$getEKText = basket.getEKText()) !== null && _basket$getEKText !== void 0 ? _basket$getEKText : '');
+            setSapOrderLines((_basket$SAPOrderLines = basket.SAPOrderLines) !== null && _basket$SAPOrderLines !== void 0 ? _basket$SAPOrderLines : []);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getEkText() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    getEkText();
+  }, [viewHandler.settingsState.configChanged]);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        onMouseDown: onMouseDown,
+        children: "EkText \xDCbersicht"
+      }), !!sapOrderLines.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("h3", {
+          children: "SapOrderLines"
+        }), /*#__PURE__*/jsxs("table", {
+          className: table,
+          children: [/*#__PURE__*/jsx("thead", {
+            children: /*#__PURE__*/jsxs("tr", {
+              className: column,
+              children: [/*#__PURE__*/jsx("th", {
+                children: "Name"
+              }), /*#__PURE__*/jsx("th", {
+                children: "EkText"
+              }), /*#__PURE__*/jsx("th", {
+                children: "Preis"
+              }), /*#__PURE__*/jsx("th", {
+                children: "Artikle Nr."
+              }), /*#__PURE__*/jsx("th", {
+                children: "Retail Artikle Nr."
+              }), /*#__PURE__*/jsx("th", {
+                children: "Prefix"
+              }), /*#__PURE__*/jsx("th", {
+                children: "Menge"
+              }), /*#__PURE__*/jsx("th", {
+                children: "PosNr"
+              })]
+            })
+          }), /*#__PURE__*/jsx("tbody", {
+            children: sapOrderLines.map(function (sol, index) {
+              var _sol$Price;
+              return /*#__PURE__*/jsxs("tr", {
+                className: column,
+                children: [/*#__PURE__*/jsxs("th", {
+                  children: [" ", sol.Name]
+                }), sol.OrderText ? /*#__PURE__*/jsx("th", {
+                  dangerouslySetInnerHTML: {
+                    __html: sol.OrderText.replace(/\r\n/g, '<br>')
+                  }
+                }) : /*#__PURE__*/jsx("th", {}), /*#__PURE__*/jsxs("th", {
+                  children: [" ", (_sol$Price = sol.Price) !== null && _sol$Price !== void 0 ? _sol$Price : 0, " "]
+                }), /*#__PURE__*/jsxs("th", {
+                  children: [" ", sol.ArticleNr, " "]
+                }), /*#__PURE__*/jsxs("th", {
+                  children: [" ", sol.RetailArticleName, " "]
+                }), /*#__PURE__*/jsxs("th", {
+                  children: [sol.ArticleNrPrefix, " "]
+                }), /*#__PURE__*/jsxs("th", {
+                  children: [sol.Quantity, " "]
+                }), /*#__PURE__*/jsx("th", {
+                  children: sol.PosNr
+                })]
+              }, index);
+            })
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("button", {
+          onClick: function onClick() {
+            var _navigator$clipboard;
+            return (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(ekText);
+          },
+          children: "kopieren"
+        }), /*#__PURE__*/jsx("div", {
+          className: ekTextClass,
+          dangerouslySetInnerHTML: {
+            __html: ekText.replace(/\r\n/g, '<br>')
+          }
+        })]
+      })]
+    })
+  }));
+};
+var EkTextViewer$1 = observer(EkTextViewer);
+
+export { EkTextViewer$1 as default };

package/build/esm/index-212206c0.js

@@ -0,0 +1,46 @@
+import { a as usePlannerUIHandler } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var DPACC = function DPACC(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, item.dockToElementId);
+    },
+    style: {
+      left: item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, item.plannerMode == '2D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDocking : undefined, item.plannerMode == '2D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDockingSel : undefined : undefined, item.plannerMode == '3D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDocking : undefined, item.plannerMode == '3D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDockingSel : undefined : undefined),
+    children: item.posNr
+  });
+};
+var DPACC$1 = observer(DPACC);
+
+export { DPACC$1 as default };

package/build/esm/index-231bbb27.js

@@ -0,0 +1,163 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { useRef, useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import JSONEditor from 'jsoneditor';
+import DivaUtils from '@crystaldesign/diva-utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wrapper = "wrapper-6V6Wr";
+var button = "button-VZm94";
+var infoWrapper = "infoWrapper-2WauG";
+var modifiedArticleList = "modifiedArticleList-jWfXL";
+var css_248z = ".wrapper-6V6Wr {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  /* width: 80%; */\n  height: 750px;\n  margin-left: 51px;\n  margin-right: 10px;\n  gap: 10px;\n}\n\n.button-VZm94 {\n  min-height: 45px;\n  min-width: 45px;\n  max-width: 60px;\n  width: auto;\n  margin-bottom: 20px;\n}\n.infoWrapper-2WauG {\n  display: flex;\n  flex-direction: column;\n}\n\n.modifiedArticleList-jWfXL {\n  font-size: 10px;\n}\n";
+styleInject(css_248z);
+
+var JsonEditor = function JsonEditor(_ref) {
+  var json = _ref.json;
+    _ref.plannerArticles;
+    var curBox = _ref.curBox,
+    divaArticles = _ref.divaArticles;
+  var viewHandler = useViewHandler();
+  var container = useRef(null);
+  var jsonEditor = useRef(null);
+  var _useState = useState(json !== null && json !== void 0 ? json : {}),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    validJson = _useState4[0],
+    setValidJson = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    modifiedArticles = _useState6[0],
+    setModifiedArticles = _useState6[1];
+  var actDivaArticle = divaArticles[curBox];
+  var options = {
+    mode: 'code',
+    onChange: function onChange() {
+      try {
+        var current = jsonEditor.current;
+        var e = current.get();
+        var valid = current.validate();
+        setValidJson(valid);
+      } catch (_unused) {
+        setValidJson(false);
+        return;
+      }
+    }
+  };
+  useEffect(function () {
+    setValue(json);
+  });
+  useEffect(function () {
+    if (container.current) {
+      if (!jsonEditor.current) jsonEditor.current = new JSONEditor(container.current, options);
+      if (jsonEditor.current) jsonEditor.current.set(value);
+    }
+  }, [value]);
+  var onClickSave = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var current;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            current = jsonEditor.current;
+            if (!(!current.get() || Object.keys(current.get()).length === 0)) {
+              _context.next = 4;
+              break;
+            }
+            alert('Cannot save empty value');
+            return _context.abrupt("return");
+          case 4:
+            actDivaArticle.catalogArticle.modifiedJ3D = current.get();
+            actDivaArticle.resetShelfPlanner();
+            _context.next = 8;
+            return actDivaArticle.updateShelfPlannerState();
+          case 8:
+            viewHandler.paletteViewHandler.updateCurPaletteData(false);
+            setModifiedInfo();
+            alert('Saved');
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onClickSave() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onClickExport = function onClickExport() {
+    if (!modifiedArticles || modifiedArticles.length === 0) {
+      alert('No modified Article found');
+      return;
+    }
+    for (var i = 0; i < modifiedArticles.length; i++) {
+      DivaUtils.downloadStringAsTxtFile(modifiedArticles[i].j3d, 'text/plain', modifiedArticles[i].articleCodex + '.txt');
+    }
+  };
+  function setModifiedInfo() {
+    var _viewHandler$divaWebP;
+    var articles = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getCatalogData()) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.allCatalogArticles;
+    var arr = [];
+    for (var key in articles) {
+      if (articles[key]['catalogArticle'].modifiedJ3D) arr.push({
+        articleCodex: key,
+        j3d: JSON.stringify(articles[key]['catalogArticle'].modifiedJ3D)
+      });
+    }
+    setModifiedArticles(arr);
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      ref: container,
+      id: "jsoneditor",
+      style: {
+        width: '90%',
+        height: '100%'
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: infoWrapper,
+      children: [/*#__PURE__*/jsx("button", {
+        className: button,
+        disabled: !validJson,
+        onClick: function onClick() {
+          return onClickSave();
+        },
+        children: "Save"
+      }), /*#__PURE__*/jsx("button", {
+        className: button,
+        onClick: function onClick() {
+          return onClickExport();
+        },
+        children: "Export modified J3D"
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("h5", {
+          children: "Modified Articles"
+        }), modifiedArticles.map(function (item, index) {
+          return /*#__PURE__*/jsx("p", {
+            className: modifiedArticleList,
+            children: item.articleCodex
+          }, index);
+        })]
+      })]
+    })]
+  });
+};
+var JsonEditor$1 = observer(JsonEditor);
+
+export { JsonEditor$1 as default };

package/build/esm/index-257cf8c1.js

@@ -0,0 +1,177 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { u as useViewHandler } from './index-4238b6c1.js';
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { s as svgWrapper, t as table, c as column, a as selected } from './index.module-1bcb88ad.js';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var _excluded = ["plannerArticles", "curBox", "isExpanded"];
+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; }
+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; }
+var SVGOverview = function SVGOverview(_ref) {
+  var plannerArticles = _ref.plannerArticles,
+    curBox = _ref.curBox;
+    _ref.isExpanded;
+    var props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useState = useState('None'),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var articlesLoaded = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articlesLoaded) return /*#__PURE__*/jsx(Fragment, {});
+  var articles = Object.values(articlesLoaded);
+  var filteredArticles = articles.filter(function (article) {
+    return article.hasCatalogPlannerArticle;
+  });
+  // _> Matche curSVG mit topSVG wenn gleich im Array dann grünes dropdown
+  // _> Pro Artikel Dropdown pro SVG mit aktuell noch allen Informationen
+
+  var curElement = plannerArticles[curBox];
+  var article = filteredArticles[curBox];
+  var svgCur = '';
+  var svgURL = '';
+  var svgObjs = [];
+  if (curElement === undefined) return /*#__PURE__*/jsx(Fragment, {});
+  if (curElement.topSvgsWithFormula) {
+    var _article$plannerData;
+    (_article$plannerData = article.plannerData) === null || _article$plannerData === void 0 || _article$plannerData.curSVG;
+    var curSVG = curElement.topSvgsWithFormula.find(function (item) {
+      var _article$plannerData2;
+      return item.SVG === ((_article$plannerData2 = article.plannerData) === null || _article$plannerData2 === void 0 ? void 0 : _article$plannerData2.curSVG);
+    });
+    if (curSVG) {
+      for (var i = 0; i < curElement.topSvgsWithFormula.length; i++) {
+        svgObjs.push(curElement.topSvgsWithFormula[i]);
+      }
+      svgURL = article.CatalogData.getCatImageURL(curSVG === null || curSVG === void 0 ? void 0 : curSVG.SVG, '');
+      svgCur = curSVG.SVG;
+      curSVG === null || curSVG === void 0 || curSVG.JsFormula;
+    }
+  }
+  if (!svgURL) {
+    svgURL = article.CatalogData.getCatImageURL(curElement.topSvg, '');
+    svgObjs.push({
+      SVG: svgURL,
+      Layer: curElement.topLayer,
+      AVC: curElement.topAVC,
+      AVO: curElement.topAVO,
+      AVU: curElement.topAVU,
+      AVN: curElement.topAVN,
+      AVS: curElement.topAVS,
+      HasAVL: curElement.topHasAVL,
+      HasAVR: curElement.topHasAVR,
+      JsFormula: ''
+    });
+  }
+  if (svgURL !== '') {
+    var getSVG = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(topSVGUrl) {
+        var response;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetch(topSVGUrl);
+            case 2:
+              response = _context.sent;
+              _context.t0 = setText;
+              _context.next = 6;
+              return response.text();
+            case 6:
+              _context.t1 = _context.sent;
+              (0, _context.t0)(_context.t1);
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getSVG(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    getSVG(svgURL);
+  } else if (text != 'None') setText('None');
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(svgWrapper),
+    children: /*#__PURE__*/jsxs("table", {
+      className: table,
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsxs("tr", {
+          className: column,
+          children: [/*#__PURE__*/jsx("th", {
+            children: "Nr"
+          }), /*#__PURE__*/jsx("th", {
+            children: "SVG"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Layer"
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVC"
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVO"
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVU "
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVN "
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVS "
+          }), /*#__PURE__*/jsx("th", {
+            children: "HasAVL "
+          }), /*#__PURE__*/jsx("th", {
+            children: "HasAVR "
+          }), /*#__PURE__*/jsx("th", {
+            children: "JSFormula "
+          })]
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        children: Object.values(svgObjs).map(function (svgObj, index) {
+          return /*#__PURE__*/jsxs("tr", {
+            className: svgObj.SVG === svgCur ? selected : undefined,
+            children: [/*#__PURE__*/jsx("th", {
+              children: index + 1
+            }), /*#__PURE__*/jsx("th", {
+              children: /*#__PURE__*/jsx("img", {
+                src: article.CatalogData.getCatImageURL(svgObj.SVG, '')
+              })
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.Layer
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVC
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVO
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVU
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVN
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVS
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.HasAVL
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.HasAVR
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.JsFormula
+            })]
+          }, svgObj.JsFormula);
+        })
+      })]
+    })
+  }));
+};
+var SVGOverview$1 = observer(SVGOverview);
+
+export { SVGOverview$1 as default };