@crystaldesign/diva-web-planner-react 24.14.0-beta.3 → 24.14.0-beta.31

package/build/esm/index-375ee9c4.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-71b24da6.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-10cded2f.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 };

package/build/esm/index-38c53813.js

@@ -0,0 +1,76 @@
+import { s as styleInject, u as useViewHandler, a as usePlannerUIHandler } from './index-71b24da6.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+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/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 wcConfiguratorGrid = "wcConfigurator-grid-DANlC";
+var wcConfiguratorGrid2DCanvas = "wcConfigurator-grid-2D-canvas-kC0d5";
+var grid2DBg = "Grid2D_BG-qKtq3";
+var css_248z = ".wcConfigurator-grid-DANlC {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  width: 100% !important;\n  height: 100% !important;\n  position: absolute !important;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  z-index: 5;\n}\n\n.Grid2D_BG-qKtq3 {\n  background-repeat: repeat;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  position: absolute;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfdDAUQEiovM6IXAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMUfzQjcAAAP7SURBVHhe7ZzZbtsKEEP7/38Yf0JWZEGWJxc0MMVAGFMUwN6rynw4DeA5kSkRUTBO7V8/Pz/nNZ6ensbHlzi97+9vyfv6+rp4W9xp1nF65eB8pnnndDqdU8hAChlIIQQlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQq5QFwZf11BOwu19fn5evC3uNOs4vXJwPtO8cykE8hG4v78fH98Lr6+vq9zd3eWWNbHrWxZQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXwAFxYIa63dbxpllH9ep5t7jTrOP0ysH5TPPOpRDIR2Dvm/rb29u4nXeyqV/B6ZUj/4RMgyVKOOD0UghBCQecXgohKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vZstBN/AqE1zmnXU7Va90KpXz/v4+DjOO2pGp1eOXAjkI/Dw8DA+vhewqa+RTf0KTq8c+SdkGixRwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXqAOuoZyE26tNGIvhNO9kU/8P2fum/v7+fv74+KDklnWF//WWNQ2WKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vRRCUMIBp5dCCEo44PRuthB8A6M2zWnWUbdb9UKrXj3vFneadZxeOXIhkMPf5+XlZZVLIdOg8/z8fHlZYpp1VA/hVA//k2SagT5XTxq+4tXLMNOss8XD9ZlmnUP9DsH7Q6Z5p9xp1nF65ci3rGmwRAkHnN7WQra406yTQgZSCEEJB5xeCiEo4YDTSyEEJRxweimEoIQDTi+FEJRwwOmlkCvUhcHXNZSTcHt56WSn1Ba+V6YPClhyqFsWXp6Y5p1D3LKAEg44va2FbHGnWSeFDKQQghIOOL0UQlDCAaeXQghKOOD0UghBCQecXgohKOGA07vZQiCugQPiwAx1u63jTbOO6tXzbnGnWcfplYPzmeady/vUIR+B+vv2XsEHA0zbeedQt6xs6gNOb2shW9xp1kkhAymEoIQDTi+FEJRwwOmlEIISDji9FEJQwgGnl0IISjjg9G62EHwDozbNadZRt1v1QqtePa+yh6gZnV45SiGH2tT3/jf15cf5TeSWdQWnV458y5oGS5RwwOmlEIISDji9FEJQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6N1sIxDXqgGsoJ+H2ahNW3oWbTT38IR/xN/BP3LKmwRIlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQghKOOD0UghBCQec3s0Wgn/CXjidfwOJNZK+WhRfKgAAAABJRU5ErkJggg==');\n  /*background-image: url(\"images/Standard/grid_standard.png\");*/\n  background-size: 100px 100px;\n  z-index: 0;\n  /* zoom: 200%;*/\n}\n";
+styleInject(css_248z);
+
+var touchMoveDetected = false;
+var Planner2DGrid = function Planner2DGrid(props) {
+  var viewHandler = useViewHandler();
+  var uiHandler = usePlannerUIHandler();
+  var gridRef = useRef(null);
+  useEffect(function () {
+    if (!gridRef) return;
+    viewHandler.productState.setPlanner2DGridElement(gridRef.current);
+    if (gridRef.current) uiHandler.setGrid2DUIElement(gridRef.current);
+  }, [gridRef]);
+  var on2DPlannerBGClick = function on2DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: gridRef,
+    className: wcConfiguratorGrid,
+    id: "wcConfigurator-grid-container",
+    style: {
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      visibility: viewHandler.productState.doShowGrid ? 'visible' : 'hidden'
+    },
+    onClick: on2DPlannerBGClick,
+    onTouchStart: function onTouchStart() {
+      touchMoveDetected = false;
+    },
+    onTouchMove: function onTouchMove() {
+      touchMoveDetected = true;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!touchMoveDetected) {
+        on2DPlannerBGClick(e);
+      }
+      touchMoveDetected = false;
+    },
+    children: [/*#__PURE__*/jsx("canvas", {
+      className: wcConfiguratorGrid2DCanvas,
+      id: "wcConfigurator-grid-2D-canvas"
+    }), /*#__PURE__*/jsx("div", {
+      className: grid2DBg,
+      style: {
+        zoom: uiHandler.get2DGridBackgroundState().zoom,
+        backgroundPosition: uiHandler.get2DGridBackgroundState().position.x + 'px ' + uiHandler.get2DGridBackgroundState().position.y + 'px'
+      }
+    })]
+  });
+};
+var Planner2DGrid$1 = observer(Planner2DGrid);
+
+export { Planner2DGrid$1 as default };

package/build/esm/index-39459748.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-71b24da6.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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 'mobx-react-lite';
+
+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 SettingsItemRoomTemplate = function SettingsItemRoomTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Room/RoomItem"
+  }));
+};
+
+export { SettingsItemRoomTemplate as default };

package/build/esm/index-3c6c4989.js

@@ -0,0 +1,43 @@
+import './index-71b24da6.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 RotationCounterClockwise = function RotationCounterClockwise(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.rotation.rotCounterClock, plannerUIProps.classes.buttonGeneral),
+    children: item.posNr
+  });
+};
+var RotationCounterClockwise$1 = observer(RotationCounterClockwise);
+
+export { RotationCounterClockwise$1 as default };

package/build/esm/index-3d2d27c0.js

@@ -0,0 +1,121 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import './index-71b24da6.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+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/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';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Outline = function Outline(_ref) {
+  var _item$size, _item$size2;
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState(item.position.x),
+    _useState4 = _slicedToArray(_useState3, 2),
+    posX = _useState4[0],
+    setPosX = _useState4[1];
+  var _useState5 = useState(item.position.y),
+    _useState6 = _slicedToArray(_useState5, 2),
+    posY = _useState6[0],
+    setPosY = _useState6[1];
+  var mouseDownDetected = false;
+
+  //LOG.log("Set outline UI x: " + posX + ", y: " + posY);
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    },
+    onTouchStart: function onTouchStart(e) {
+      if (e.touches.length != 1) return;
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc;
+        setIsDragging(true);
+        (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - mousePosOnScreenLastFrame.x, e.clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onTouchMove: function onTouchMove(e) {
+      if (e.touches.length != 1) return;
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc2;
+        setIsDragging(true);
+        (_item$onDragStartFunc2 = item.onDragStartFunction) === null || _item$onDragStartFunc2 === void 0 || _item$onDragStartFunc2.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct2;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - mousePosOnScreenLastFrame.x, e.touches[0].clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.touches[0].clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.touches[0].clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onMouseUp: function onMouseUp() {
+      if (isDragging) {
+        var _item$onDragEndFuncti;
+        setIsDragging(false);
+        (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd() {
+      if (isDragging) {
+        var _item$onDragEndFuncti2;
+        setIsDragging(false);
+        (_item$onDragEndFuncti2 = item.onDragEndFunction) === null || _item$onDragEndFuncti2 === void 0 || _item$onDragEndFuncti2.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    style: {
+      left: posX + 'px',
+      top: posY + 'px',
+      width: (item === null || item === void 0 || (_item$size = item.size) === null || _item$size === void 0 ? void 0 : _item$size.x) + 'px',
+      height: (item === null || item === void 0 || (_item$size2 = item.size) === null || _item$size2 === void 0 ? void 0 : _item$size2.y) + 'px',
+      transform: 'rotate(' + (item === null || item === void 0 ? void 0 : item.rotOfElement) + 'deg)'
+    },
+    className: classnames(isDragging ? plannerUIProps.classes.outline.outline2D.draggableActive : undefined, item.elemState == 'selected' ? plannerUIProps.classes.outline.outline2D.draggable : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.outline.outline2D.selectable : undefined)
+  });
+};
+var Outline$1 = observer(Outline);
+
+export { Outline$1 as default };

package/build/esm/index-4119929b.js

@@ -0,0 +1,59 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-71b24da6.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } 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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcPosNrTooltip = "wcPosNrTooltip-8hudU";
+var wcPosNrTooltipText = "wcPosNrTooltipText-1gUN3";
+var css_248z = ".wcPosNrTooltip-8hudU {\n  display: block;\n  background-color: rgba(242, 242, 242, 0.9);\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n  border-radius: var(--globalBorderRadius);\n  height: -moz-fit-content;\n  height: fit-content;\n  width: 320px;\n  height: fit-content;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  z-index: 2147483650;\n}\n.wcPosNrTooltip-8hudU img {\n  width: 90%;\n  max-height: 77%;\n  margin: 5%;\n}\n\n.wcPosNrTooltipText-1gUN3 {\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+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 SettingsPosNrToolTip = function SettingsPosNrToolTip(_ref) {
+  var _theme$typography, _article$image;
+  var layerProps = _ref.layerProps,
+    article = _ref.article;
+  var _useDivaCore = useDivaCore(),
+    theme = _useDivaCore.state.theme;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: wcPosNrTooltip
+  }, layerProps), {}, {
+    style: _objectSpread(_objectSpread({}, {
+      fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
+    }), layerProps.style),
+    children: [/*#__PURE__*/jsx("img", {
+      src: (_article$image = article.image) === null || _article$image === void 0 ? void 0 : _article$image.replace('_gal', ''),
+      alt: article.name
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        padding: '0 20px'
+      },
+      className: wcPosNrTooltipText,
+      children: [article.name, /*#__PURE__*/jsx("br", {}), article.formattedSize && /*#__PURE__*/jsxs(Fragment, {
+        children: [article.formattedSize, " ", /*#__PURE__*/jsx("br", {})]
+      }), article.formattedPrice && /*#__PURE__*/jsxs("div", {
+        style: {
+          marginTop: '5px'
+        },
+        children: [article.formattedPrice, " ", /*#__PURE__*/jsx("br", {})]
+      })]
+    })]
+  }));
+};
+var SettingsPosNrToolTip$1 = observer(SettingsPosNrToolTip);
+
+export { SettingsPosNrToolTip$1 as default };

package/build/esm/index-411b0560.js

@@ -0,0 +1,113 @@
+import { u as useViewHandler } from './index-71b24da6.js';
+import 'react';
+import classnames from 'classnames';
+import { r as row, b as columToggleName, t as title, n as name, s as sel, a as toggleWrapper } from './index.module-653d8df3.js';
+import Toggle from './index-db753ccc.js';
+import { getLogger } from '@crystaldesign/diva-core';
+import InfoIcon from './index-443f9613.js';
+import { jsx, Fragment, jsxs } 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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import 'react-switch';
+
+var LOG = getLogger('Planner', 'ToggleName');
+var ToggleName = function ToggleName(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var items = item.groups[0].items;
+  var yesItem;
+  var noItem;
+  if (!items) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  for (var i = 0; i < items.length; i++) {
+    var _items$i$codex, _items$i$codex2;
+    if ((_items$i$codex = items[i].codex) !== null && _items$i$codex !== void 0 && _items$i$codex.startsWith('OPVNEIN')) {
+      noItem = items[i];
+    }
+    if ((_items$i$codex2 = items[i].codex) !== null && _items$i$codex2 !== void 0 && _items$i$codex2.startsWith('OPVJA')) {
+      yesItem = items[i];
+    }
+  }
+  if (!noItem || !yesItem) {
+    if (items.length == 2) {
+      noItem = items[0];
+      yesItem = items[1];
+    }
+    if (!noItem || !yesItem) {
+      LOG.warn('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', 'WC_0011');
+      item.isVisited = true;
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  }
+  var checked = noItem.sel == false;
+  var contentItem = (_item$selectedElement = item.selectedElements) !== null && _item$selectedElement !== void 0 && _item$selectedElement[0].contentItemId ? item.selectedElements[0] : item.optionContentItemId ? {
+    contentItemId: item.optionContentItemId,
+    codex: item.configStepKey
+  } : undefined;
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(columToggleName, title, name, !checked ? sel : undefined),
+      onClick: function onClick() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem, undefined, paletteId);
+      },
+      children: /*#__PURE__*/jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: noItem.text
+        }
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(columToggleName),
+      children: /*#__PURE__*/jsx("div", {
+        className: toggleWrapper,
+        children: /*#__PURE__*/jsx(Toggle, {
+          onChange: function onChange() {
+            viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, paletteId);
+          },
+          val: item,
+          alwaysActiveColor: true,
+          state: checked
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(columToggleName, title, name, checked ? sel : undefined),
+      onClick: function onClick() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(yesItem, undefined, paletteId);
+      },
+      children: /*#__PURE__*/jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: yesItem.text
+        }
+      })
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        top: 'unset',
+        bottom: 'unset',
+        right: 'unset',
+        position: 'relative'
+      }
+    })]
+  });
+};
+
+export { ToggleName as default };

package/build/esm/index-416f11fc.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-71b24da6.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+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 imageItem = "image-item-NA3C7";
+var sel = "sel-gUlno";
+var css_248z = ".image-item-NA3C7 {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f0f0f0 var(--galleryItemBorder);\n  margin: 10px 0;\n}\n\n.sel-gUlno {\n  margin: 8px 0;\n\n  border: solid var(--secondaryColor) 4px;\n}\n";
+styleInject(css_248z);
+
+var FilterItem = function FilterItem(_ref) {
+  var _viewHandler$settings;
+  var item = _ref.item,
+    id = _ref.id;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  return /*#__PURE__*/jsx("span", {
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.onSelectFilter(id, item.text, 'RAL');
+    },
+    style: {
+      backgroundColor: item.rgb
+    },
+    className: classnames(imageItem, actValue === item.text ? sel : undefined)
+  });
+};
+var FilterItem$1 = observer(FilterItem);
+
+export { FilterItem$1 as default };