@crystaldesign/diva-web-planner-react 25.4.0-beta.21 → 25.4.0-beta.23

package/build/esm/index-dc299b59.js

@@ -0,0 +1,180 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-727cbdc5.js';
+import 'react';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import ShelfDeleteButton from './index-e311f563.js';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } 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/widget-contact-form';
+
+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 GridList = function GridList(_ref) {
+  var _item$shelfPlannerGri;
+  var item = _ref.item,
+    height = _ref.height;
+    _ref.width;
+    var direction = _ref.direction;
+  var grid = (_item$shelfPlannerGri = item.shelfPlannerGrids) === null || _item$shelfPlannerGri === void 0 ? void 0 : _item$shelfPlannerGri[0];
+  var viewHandler = useViewHandler();
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var itemHeight = height / grid.Cells.length;
+  var cells = [];
+  var lastInUse = -1;
+  var onBoardNameAdded = false;
+  for (var i = 0; i < grid.Cells.length; i++) {
+    var cell = grid.Cells[i];
+    if (cell.InUse == -1) {
+      cells.splice(0, 0, {
+        heightCount: 1,
+        inUse: cell.InUse,
+        index: cell.Index,
+        type: undefined,
+        isDisabled: cell.IsDisabled,
+        isRequired: cell.IsRequired,
+        onlyPlaceHolder: cell.OnlyPlaceHolder,
+        noMove: cell.NoMove,
+        noDelete: cell.NoDelete
+      });
+    } else if (lastInUse != cell.InUse && lastInUse != cell.OnBoard) {
+      var _cell$Article, _cell$Article2;
+      lastInUse = cell.InUse;
+      onBoardNameAdded = false;
+      cells.splice(0, 0, {
+        heightCount: 1,
+        inUse: cell.InUse,
+        index: cell.Index,
+        type: cell.Type,
+        isDisabled: cell.IsDisabled,
+        isRequired: cell.IsRequired,
+        articleText: (_cell$Article = cell.Article) === null || _cell$Article === void 0 ? void 0 : _cell$Article.name,
+        onlyPlaceHolder: cell.OnlyPlaceHolder,
+        noMove: cell.NoMove,
+        noDelete: cell.NoDelete,
+        basketId: (_cell$Article2 = cell.Article) === null || _cell$Article2 === void 0 ? void 0 : _cell$Article2.basketId
+      });
+    } else {
+      var foundCell = cells.find(function (cell) {
+        return cell.inUse == lastInUse;
+      });
+      if (foundCell) {
+        if (lastInUse === cell.OnBoard && !onBoardNameAdded) {
+          var _cell$Article3;
+          onBoardNameAdded = true;
+          foundCell.articleText = ((_cell$Article3 = cell.Article) === null || _cell$Article3 === void 0 ? void 0 : _cell$Article3.name) + '<br/>&<br/>' + foundCell.articleText;
+          foundCell.onBoard = true;
+        }
+        foundCell.heightCount++;
+      }
+    }
+  }
+  var onDragEnd = function onDragEnd(result) {
+    if (!result.destination) return;
+    var sourceIndex = cells[result.source.index].index;
+    var destinationIndex = cells[result.destination.index].index;
+    if (sourceIndex != destinationIndex) viewHandler.paletteViewHandler.shelfItemMoved(grid, sourceIndex, destinationIndex);
+  };
+  var getItemStyle = function getItemStyle(isDragging, draggableStyle, item, showNumber) {
+    if (direction == 'horizontal') {
+      return getItemStyleHorizontal(isDragging, draggableStyle, item, showNumber);
+    } else {
+      return getItemStyleVertical(isDragging, draggableStyle, item);
+    }
+  };
+  var getItemStyleVertical = function getItemStyleVertical(isDragging, draggableStyle, item) {
+    return _objectSpread({
+      userSelect: 'none',
+      width: 'calc(' + 100 * (item.heightCount / grid.Cells.length) + '% - 1px)',
+      wordBreak: 'break-word',
+      height: '100%',
+      marginRight: '1px',
+      background: item.isRequired ? '#FFEBEB' : item.inUse == -1 ? 'none' : isDragging ? 'grey' : 'lightgrey',
+      backgroundImage: item.isDisabled && 'linear-gradient(45deg, #ffffff  25%, #c7c7c7 25%, #c7c7c7 50%, #ffffff  50%, #ffffff  75%, #c7c7c7 75%, #c7c7c7 100%)',
+      backgroundSize: item.isDisabled && '28.28px 28.28px',
+      "float": 'left',
+      borderRight: item.inUse == -1 ? '1px solid lightgrey' : 'none',
+      boxSizing: 'border-box'
+    }, draggableStyle);
+  };
+  var getItemStyleHorizontal = function getItemStyleHorizontal(isDragging, draggableStyle, item, showNumber) {
+    return _objectSpread({
+      userSelect: 'none',
+      height: itemHeight * item.heightCount - 1,
+      marginBottom: '1px',
+      fontSize: item.inUse === -1 ? '12px' : undefined,
+      lineHeight: item.inUse === -1 ? '2px' : undefined,
+      background: item.isRequired ? '#FFEBEB' : item.inUse === -1 ? 'none' : isDragging ? 'grey' : 'lightgrey',
+      backgroundImage: item.isDisabled && 'linear-gradient(45deg, #ffffff  25%, #c7c7c7 25%, #c7c7c7 50%, #ffffff  50%, #ffffff  75%, #c7c7c7 75%, #c7c7c7 100%)',
+      backgroundSize: item.isDisabled && '28.28px 28.28px',
+      borderBottom: item.inUse == -1 ? showNumber ? '1px solid #B5B5B5' : '1px solid lightgrey' : 'none',
+      boxSizing: 'border-box'
+    }, draggableStyle);
+  };
+  var getTextStyle = function getTextStyle() {
+    if (direction == 'vertikal') {
+      return {
+        maxHeight: 'calc(100% - 22px)',
+        overflow: 'auto'
+      };
+    }
+    return {};
+  };
+  return /*#__PURE__*/jsx(DragDropContext, {
+    onDragEnd: onDragEnd,
+    children: /*#__PURE__*/jsx(Droppable, {
+      droppableId: "droppable",
+      direction: direction == 'vertikal' ? 'horizontal' : 'vertical',
+      children: function children(provided, snapshot) {
+        return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, provided.droppableProps), {}, {
+          ref: provided.innerRef,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          children: [cells.map(function (item, index) {
+            return /*#__PURE__*/jsx(Draggable, {
+              index: index,
+              isDragDisabled: item.inUse == -1 || item.isDisabled || item.noMove,
+              draggableId: index.toString(),
+              children: function children(provided, snapshot) {
+                return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+                  onClick: function onClick() {
+                    viewHandler.paletteViewHandler.setSelectedShelfAccessoire(item.basketId);
+                    viewHandler.paletteViewHandler.clickAddAccessorieOnShelfPlanner(grid, item.index);
+                  },
+                  ref: provided.innerRef
+                }, provided.draggableProps), provided.dragHandleProps), {}, {
+                  style: getItemStyle(snapshot.isDragging, provided.draggableProps.style, item, item.index % 5 === 0 && !!index),
+                  children: [!!item.articleText && /*#__PURE__*/jsx("div", {
+                    style: getTextStyle(),
+                    dangerouslySetInnerHTML: {
+                      __html: item.articleText
+                    }
+                  }), item.inUse == -1 && item.index % 5 === 0 && !!index && direction == 'horizontal' && item.index, (item.inUse > -1 && !item.noDelete && !item.isDisabled || item.onBoard) && /*#__PURE__*/jsx(ShelfDeleteButton, {
+                    grid: grid,
+                    index: item.inUse
+                  })]
+                }));
+              }
+            }, index);
+          }), provided.placeholder]
+        }));
+      }
+    })
+  });
+};
+var GridList$1 = observer(GridList);
+
+export { GridList$1 as default };

package/build/esm/index-de3585ab.js

@@ -0,0 +1,92 @@
+import { u as useViewHandler } from './index-727cbdc5.js';
+import 'react';
+import DivaUtils from '@crystaldesign/diva-utils';
+import Toggle from './index-b87bbe98.js';
+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 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+import 'classnames';
+import 'react-switch';
+
+var Varaint = function Varaint(_ref) {
+  var _item$variantValues;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      userSelect: 'unset',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 20,
+      alignItems: 'center',
+      borderBottom: '1px solid grey',
+      justifyContent: 'space-between',
+      padding: 10
+    },
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: item.onClick,
+      children: "konfigurieren"
+    }), /*#__PURE__*/jsx("div", {
+      children: item.index
+    }), (_item$variantValues = item.variantValues) === null || _item$variantValues === void 0 ? void 0 : _item$variantValues.map(function (item) {
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10
+        },
+        children: [item.optionValueImage && /*#__PURE__*/jsx("img", {
+          src: item.optionValueImage,
+          style: {
+            height: 40
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 5,
+            width: '150px'
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            children: item.optionName
+          }), /*#__PURE__*/jsx("div", {
+            children: item.optionValueName
+          })]
+        })]
+      }, item.opt);
+    }), /*#__PURE__*/jsx("div", {
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      children: DivaUtils.formatPrice(item.price)
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        alignSelf: 'flex-end'
+      },
+      children: /*#__PURE__*/jsx(Toggle, {
+        height: 32,
+        handleDiameter: 22,
+        width: 60,
+        onChange: function onChange() {
+          item.onToggle();
+          viewHandler.paletteViewHandler.updateCurPaletteData(true);
+        },
+        state: !item.disabled
+      })
+    })]
+  }, item.hash);
+};
+
+export { Varaint as default };

package/build/esm/index-de4c1f43.js

@@ -0,0 +1,66 @@
+import { s as styleInject, u as useViewHandler } from './index-727cbdc5.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-GKYw3";
+var wcTabGroupItem = "wcTabGroupItem-xfakc";
+var portrait = "portrait-R75Hr";
+var landscape = "landscape-GMTKj";
+var wcActiveStep = "wcActiveStep-E81Bg";
+var wcStepNum = "wcStepNum-fDZJn";
+var horizontalLine = "horizontal-line-RQbQm";
+var css_248z = ".wrapper-GKYw3 {\n  display: flex;\n  align-items: center;\n  float: left;\n}\n\n.wcTabGroupItem-xfakc {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  border: none;\n  transition: background-color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  color: #b5b5b5;\n}\n.portrait-R75Hr.wcTabGroupItem-xfakc,\n.landscape-GMTKj.wcTabGroupItem-xfakc {\n  line-height: 50px;\n}\n\n.wcTabGroupItem-xfakc:hover {\n  color: #262626;\n}\n\n.wcTabGroupItem-xfakc.wcActiveStep-E81Bg {\n  color: #262626;\n}\n\n.wcStepNum-fDZJn {\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  margin-right: 11px;\n  margin-top: 3px;\n  border: 1px solid #b5b5b5;\n  border-radius: 12px;\n  text-align: center;\n  line-height: 25px;\n  font-size: 16px;\n  color: #b5b5b5;\n}\n\n.wcActiveStep-E81Bg .wcStepNum-fDZJn,\n.wcTabGroupItem-xfakc:hover .wcStepNum-fDZJn {\n  color: #4f555b;\n  border: 1px solid #4f555b;\n}\n\n.horizontal-line-RQbQm {\n  width: 26px;\n  height: 0px;\n  border: 1px solid #bfbfbf;\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontaRalph = function TabGroupItemHorizontaRalph(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var keys = Object.keys(viewHandler.tabGroupState.allTabGroups);
+  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var isLastItem = keys[keys.length - 1] == tabGroup.key;
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: tabGroupItemRef,
+      onClick: function onClick() {
+        return onTabGroupClick(tabGroup);
+      },
+      className: classnames(wcTabGroupItem, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(wcStepNum),
+        children: tabGroup.posNr
+      }), t('configurator.' + tabGroup.title, tabGroup.title)]
+    }), !isLastItem && /*#__PURE__*/jsx("div", {
+      className: horizontalLine
+    })]
+  });
+};
+var index = observer(TabGroupItemHorizontaRalph);
+
+export { index as default };

package/build/esm/index-e07821f5.js

@@ -0,0 +1,72 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-727cbdc5.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var productDetailWrapper = "product-detail-wrapper-sb1Re";
+var left = "left-qcwue";
+var css_248z = ".product-detail-wrapper-sb1Re {\n  padding-top: 15px;\n  width: 90%;\n  margin-left: 4%;\n  height: 100%;\n  background-color: white;\n  padding-left: 5px;\n  padding-right: 5px;\n  overflow: auto;\n}\n.left-qcwue {\n  float: right;\n}\n";
+styleInject(css_248z);
+
+var ProduktDetails = function ProduktDetails(_ref) {
+  var _articles$viewHandler;
+  Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  return /*#__PURE__*/jsxs("div", {
+    className: productDetailWrapper,
+    children: [/*#__PURE__*/jsx("a", {
+      children: "ArtNr:"
+    }), /*#__PURE__*/jsx("a", {
+      className: left,
+      children: article.configArticleCodex
+    }), /*#__PURE__*/jsx("br", {}), article.configArticleCodex != article.articleCodex && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("a", {
+        children: "ArtCodex:"
+      }), /*#__PURE__*/jsx("a", {
+        className: left,
+        children: article.articleCodex
+      })]
+    }), /*#__PURE__*/jsx("hr", {}), /*#__PURE__*/jsx("a", {
+      children: "Name:"
+    }), /*#__PURE__*/jsx("a", {
+      className: left,
+      children: article.catalogArticleName
+    }), /*#__PURE__*/jsx("hr", {}), /*#__PURE__*/jsx("a", {
+      children: "Ma\xDFe:"
+    }), /*#__PURE__*/jsx("a", {
+      className: left,
+      children: article.actSizeText
+    }), /*#__PURE__*/jsx("hr", {}), /*#__PURE__*/jsx("a", {
+      children: "Bestell-Nr:"
+    }), /*#__PURE__*/jsx("a", {
+      className: left,
+      children: article.retailArticleNr || article.typeNr
+    }), /*#__PURE__*/jsx("hr", {}), /*#__PURE__*/jsx("a", {
+      children: "Modell:"
+    }), /*#__PURE__*/jsx("a", {
+      className: left,
+      children: article.CatalogData.catalogName + ' (' + article.catalogCodex + ')'
+    }), /*#__PURE__*/jsx("hr", {})]
+  });
+};
+var ProduktDetails$1 = observer(ProduktDetails);
+
+export { ProduktDetails$1 as default };

package/build/esm/index-e1592ede.js

@@ -0,0 +1,35 @@
+import { s as styleInject } from './index-727cbdc5.js';
+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';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+var isActive = "is-active-bp70x";
+var listenToVariablesOptionClass = "listen-to-variables-option-class-rPBBX";
+var listenToVariablesGalleryClass = "listen-to-variables-gallery-class-dRVC6";
+var css_248z = ".is-active-bp70x {\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  height: 19.2px;\n  width: 19.2px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2221%22 height%3D%2221%22 viewBox%3D%220 0 21 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2210.3408%22 cy%3D%2210.781%22 r%3D%2210%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath d%3D%22M5.68848 10.7237L9.86816 15.3262L14.9932 8.18604%22 stroke%3D%22white%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  border-radius: 20px;\n  border: 1px solid #d5d5d5;\n  background-position: center;\n  z-index: 100;\n}\n.listen-to-variables-option-class-rPBBX {\n  opacity: 1;\n  opacity: var(--hideOptionSelActive, 1);\n}\n\n.listen-to-variables-gallery-class-dRVC6 {\n  opacity: 1;\n  opacity: var(--hideGallerySelActive, 1);\n}\n";
+styleInject(css_248z);
+
+var IsActive = function IsActive(_ref) {
+  var listenToGalleryVariables = _ref.listenToGalleryVariables,
+    listenToOptionVariables = _ref.listenToOptionVariables;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(isActive, listenToOptionVariables ? listenToVariablesOptionClass : undefined, listenToGalleryVariables ? listenToVariablesGalleryClass : undefined)
+  });
+};
+
+export { IsActive as default };

package/build/esm/index-e183f10b.js

@@ -0,0 +1,100 @@
+import { s as styleInject, u as useViewHandler } from './index-727cbdc5.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+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 '@crystaldesign/widget-contact-form';
+
+var wcToolbarFilter = "wcToolbarFilter-Gz4PK";
+var wcPlToolIcon = "wcPlToolIcon-UBaTH";
+var wcToolbarFilterExpanded = "wcToolbarFilterExpanded-Yi0L8";
+var wcToolbarFilterMaxExpanded = "wcToolbarFilterMaxExpanded-7XK-7";
+var wcToolbarCatalogItem = "wcToolbarCatalogItem-PuT3F";
+var mobile = "mobile-Bp3bL";
+var dockL = "DockL-2XY68";
+var isActive = "is-active-Ta3Um";
+var dockLr = "DockLR-PVa10";
+var dockR = "DockR-uK2j5";
+var dockNone = "DockNone-KdE70";
+var accessoire = "Accessoire-ZN7LO";
+var css_248z = "/*DOCKFilter*/\n.wcToolbarFilter-Gz4PK {\n  margin: 0;\n  padding: 0;\n  padding: initial;\n}\n\n@media all and (max-width: 730px) and (orientation: landscape) {\n  .wcToolbarFilter-Gz4PK {\n    display: none;\n  }\n}\n\n.wcPlToolIcon-UBaTH {\n  height: 25px;\n  width: 25px;\n  background-repeat: no-repeat;\n  background-size: auto 20px;\n  display: inline-block;\n  font-size: 0;\n  text-align: center;\n  z-index: 99;\n  margin-top: 5px;\n  cursor: pointer;\n  transition: 0.35s ease;\n}\n\n.wcToolbarFilterExpanded-Yi0L8 .wcPlToolIcon-UBaTH,\n.wcToolbarFilterMaxExpanded-7XK-7 .wcPlToolIcon-UBaTH {\n  height: 30px;\n  width: 30px;\n  background-size: auto 25px;\n}\n.wcToolbarCatalogItem-PuT3F {\n  display: inline-block;\n  list-style: none outside none;\n  padding: 0 0.3em;\n  cursor: pointer;\n  height: 32px;\n}\n.mobile-Bp3bL .wcPlToolIcon-UBaTH {\n  height: 22px;\n  width: 22px;\n  background-size: auto 18px;\n}\n\n.mobile-Bp3bL .wcToolbarCatalogItem-PuT3F {\n  height: 30px;\n  padding: 0 4px;\n}\n\n.DockL-2XY68 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockL%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(45.5 45.5) rotate(180)%22%2F%3E%3Cpolygon points%3D%2235 6.5 51.13 22.63 35 38.75 35 22.63 35 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockL-2XY68.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockL%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(45.5 45.5) rotate(180)%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2235 6.5 51.13 22.63 35 38.75 35 22.63 35 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.DockLR-PVa10 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 57.25 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockLR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.62%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(57.75 45.5) rotate(180)%22%2F%3E%3Cpolygon points%3D%2216.13 38.75 0 22.63 16.13 6.5 16.13 22.63 16.13 38.75%22%2F%3E%3Cpolygon points%3D%2241.13 6.5 57.25 22.63 41.13 38.75 41.13 22.63 41.13 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockLR-PVa10.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 57.25 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockLR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.62%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(57.75 45.5) rotate(180)%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2216.13 38.75 0 22.63 16.13 6.5 16.13 22.63 16.13 38.75%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2241.13 6.5 57.25 22.63 41.13 38.75 41.13 22.63 41.13 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.DockR-uK2j5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.12%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Cpolygon points%3D%2216.13 39.25 0 23.13 16.13 7 16.13 23.13 16.13 39.25%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockR-uK2j5.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.12%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2216.13 39.25 0 23.13 16.13 7 16.13 23.13 16.13 39.25%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.DockNone-KdE70 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 45.5 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockNone%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Crect x%3D%2211.5%22 y%3D%2211%22 width%3D%2223%22 height%3D%2223%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockNone-KdE70.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 45.5 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockNoneOrange%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Crect class%3D%22cls-2%22 x%3D%2211.5%22 y%3D%2211%22 width%3D%2223%22 height%3D%2223%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.Accessoire-ZN7LO {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 43.05 43.1%22%3E%3Ctitle%3EPlus%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_3%22 data-name%3D%22Ebene 3%22%3E%3Cpath d%3D%22M24.79%2C24.79V43.1H18.18V24.79H0V18.18H18.18V0h6.61V18.18H43.05v6.61Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.Accessoire-ZN7LO.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 43.05 43.1%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EAddAccessoireOrange%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_2-2%22 data-name%3D%22Ebene 2%22%3E%3Cpath class%3D%22cls-1%22 d%3D%22M24.79%2C24.79V43.1H18.18V24.79H0V18.18H18.18V0h6.61V18.18H43.05v6.61Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var DockFilter = function DockFilter() {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var plannerItems = viewHandler.paletteViewHandler.plannerItems;
+  if (!plannerItems.doShowFilterTypes()) return /*#__PURE__*/jsx(Fragment, {});
+  var onSelectConfigFilter = function onSelectConfigFilter(paletteId, codex, filterType) {
+    viewHandler.paletteViewHandler.onSelectFilter(paletteId, codex, filterType);
+  };
+  return /*#__PURE__*/jsxs("ul", {
+    style: {
+      "float": viewHandler.getIsInMobileView() ? 'left' : 'none'
+    },
+    className: classnames(wcToolbarFilter, viewHandler.uiState.configSettingsIsExpanded ? wcToolbarFilterExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? wcToolbarFilterMaxExpanded : undefined, viewHandler.getIsInMobileView() ? mobile : undefined),
+    children: [viewHandler.settingsState.plannerFilter.curFilteredTypes['DockL'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockL', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockL, viewHandler.settingsState.plannerFilter.dockFilter['DockL'] ? isActive : undefined),
+        title: t('configurator.LEFT_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['DockLR'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockLR', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockLr, viewHandler.settingsState.plannerFilter.dockFilter['DockLR'] ? isActive : undefined),
+        title: t('configurator.MIDDLE_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['DockR'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockR', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockR, viewHandler.settingsState.plannerFilter.dockFilter['DockR'] ? isActive : undefined),
+        title: t('configurator.RIGHT_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['DockNone'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockNone', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockNone, viewHandler.settingsState.plannerFilter.dockFilter['DockNone'] ? isActive : undefined),
+        title: t('configurator.SOLO_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['Accessoire'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'Accessoire', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, accessoire, viewHandler.settingsState.plannerFilter.dockFilter['Accessoire'] ? isActive : undefined),
+        title: t('configurator.ACCESSOIRE_ELEMENTS')
+      })
+    })]
+  });
+};
+var DockFilter$1 = observer(DockFilter);
+
+export { DockFilter$1 as default };

package/build/esm/index-e1d18810.js

@@ -0,0 +1,96 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-727cbdc5.js';
+import { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import Draggable from 'react-draggable';
+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';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Rotation3DGrid = function Rotation3DGrid(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+  var mouseDownDetected = false;
+  var onStartDragging = function onStartDragging(e) {
+    mouseDownDetected = true;
+    if (e.type == 'mousedown') {
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    } else if (e.type == 'touchstart') {
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    }
+  };
+  var onDragging = function onDragging(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));
+    } else if (isDragging) {
+      var _viewHandler$productS, _viewHandler$productS2;
+      var boundingLeft = (_viewHandler$productS = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS !== void 0 && _viewHandler$productS.getBoundingClientRect().left ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().left : 0;
+      var boundingTop = (_viewHandler$productS2 = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS2 !== void 0 && _viewHandler$productS2.getBoundingClientRect().top ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().top : 0;
+      if (e.type == 'mousemove') {
+        var _item$onDragMoveFunct;
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - boundingLeft, e.clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      } else if (e.type == 'touchmove') {
+        var _item$onDragMoveFunct2;
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - boundingLeft, e.touches[0].clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+    }
+    mouseDownDetected = false;
+  };
+  var onDragEnd = function onDragEnd(e) {
+    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;
+  };
+  return /*#__PURE__*/jsx(Draggable, {
+    nodeRef: draggable,
+    handle: ".handle3DRotation",
+    onStart: function onStart(e) {
+      onStartDragging(e);
+    },
+    onDrag: function onDrag(e) {
+      onDragging(e);
+    },
+    onStop: function onStop(e) {
+      onDragEnd();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      ref: draggable,
+      style: {
+        visibility: isDragging ? 'hidden' : 'visible',
+        left: item.position.x + 'px',
+        top: item.position.y + 'px'
+      },
+      className: classnames('handle3DRotation', plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.rotation.rot3DGrid)
+    })
+  });
+};
+
+export { Rotation3DGrid as default };