@crystaldesign/diva-web-planner-react 25.3.0-beta.24 → 25.3.0-beta.26

package/build/esm/index-98e03c04.js

@@ -0,0 +1,122 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3ed57e1f.js';
+import { observer } from 'mobx-react-lite';
+import { useState, createElement } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-f0183721.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import MetaData from './index-3153cddd.js';
+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/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';
+import './index-62d34101.js';
+
+var wrapper = "wrapper-q2VFw";
+var textWrapper = "text-wrapper-Th9kS";
+var element = "element-e6pDX";
+var elementText = "element-text-Lfswv";
+var image = "image-p37Vz";
+var hexColor = "hexColor-JQ-dp";
+var text = "text-DX9ZX";
+var deleteButton = "delete-button-sXPbV";
+var css_248z = ".wrapper-q2VFw {\n  position: relative;\n}\n\n.text-wrapper-Th9kS {\n  width: 48%;\n}\n.element-e6pDX {\n  position: relative;\n  display: flex;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 2px solid var(--primaryColor);\n  overflow: hidden;\n  cursor: pointer;\n  background-color: #fff;\n}\n\n.element-text-Lfswv {\n  border-radius: 0px;\n  border: 0px solid #fff;\n  width: calc(100% - 26px);\n  margin-top: 5px;\n  height: 64px;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: 26px;\n}\n\n.image-p37Vz {\n  width: 100%;\n  height: auto;\n}\n\n.hexColor-JQ-dp {\n  width: 100%;\n  height: 100%;\n}\n\n.text-DX9ZX {\n  line-height: 20px;\n  width: 100%;\n  font-size: 15px;\n  white-space: nowrap;\n}\n\n.delete-button-sXPbV {\n  position: absolute;\n  top: 0px;\n  right: -8px;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  background-color: red;\n  background-repeat: no-repeat;\n  background-size: 80%;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23fff%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.delete-button-sXPbV:hover {\n  cursor: pointer;\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 Item = function Item(_ref) {
+  var _renderLayer, _selectedElement$meta;
+  var selectedElement = _ref.selectedElement,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var notRelevant = selectedElement.codex.includes('OPV_NICHT_RELEVANT');
+  var isTextElement = !selectedElement.image && !selectedElement.hexColor;
+  if (notRelevant) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, isTextElement ? textWrapper : undefined),
+    children: [/*#__PURE__*/createElement("div", _objectSpread(_objectSpread(_objectSpread({}, triggerProps), hoverProps), {}, {
+      key: selectedElement.codex,
+      className: classnames(element, isTextElement ? elementText : undefined),
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.scrollToOPV(paletteId, selectedElement.codex);
+      },
+      title: t('configurator.scroll_there', 'hier hin scrollen')
+    }), selectedElement.image ? /*#__PURE__*/jsx("img", {
+      className: image,
+      src: selectedElement.image
+    }) : selectedElement.hexColor ? /*#__PURE__*/jsx("div", {
+      className: hexColor,
+      style: {
+        backgroundColor: '#' + selectedElement.hexColor
+      }
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: text,
+        children: selectedElement.text
+      }), /*#__PURE__*/jsx(MetaData, {
+        metaData: selectedElement.metaData,
+        visible: [metaDataVisible, setMetaDataVisible]
+      }, selectedElement.codex)]
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: selectedElement.text,
+      codex: (_selectedElement$meta = selectedElement.metaData) === null || _selectedElement$meta === void 0 || (_selectedElement$meta = _selectedElement$meta.find(function (m) {
+        return m.codex === 'codex';
+      })) === null || _selectedElement$meta === void 0 ? void 0 : _selectedElement$meta.values[0],
+      image: selectedElement.image,
+      hexColor: selectedElement.hexColor,
+      layerProps: layerProps
+    }, selectedElement.codex)))), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedElement, undefined, paletteId);
+      },
+      className: deleteButton,
+      title: t('configurator.remove_selection', 'Auswahl entfernen')
+    })]
+  });
+};
+var Item$1 = observer(Item);
+
+export { Item$1 as default };

package/build/esm/index-99d9e670.js

@@ -0,0 +1,140 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+import { s as styleInject } from './index-3ed57e1f.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import 'react';
+import { jsxs, Fragment, 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';
+import 'mobx-react-lite';
+
+var shareOption = "share-option-tqy8P";
+var shareText = "share-text-grps7";
+var loader = "loader-KG6ip";
+var facebookIcon = "facebook-icon-1-Vop";
+var emailIcon = "email-icon-AWH8x";
+var whatsappIcon = "whatsapp-icon-I2GLz";
+var telegramIcon = "telegram-icon-0jmu8";
+var css_248z = ".share-option-tqy8P {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  border: solid 0.1px;\n  border-radius: 5px;\n  margin-top: 1%;\n}\n\n.share-text-grps7 {\n  align-self: center;\n  margin: auto;\n}\n\n.loader-KG6ip {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 8px solid #b6b6b6;\n  border-radius: 50%;\n  animation: spin-FpWtQ 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #b6b6b6 transparent transparent transparent;\n}\n\n/* Safari */\n\n@keyframes spin-FpWtQ {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.share-option-tqy8P:hover {\n  color: black;\n}\n\n.facebook-icon-1-Vop {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Uploaded to%3A SVG Repo%2C www.svgrepo.com%2C Generator%3A SVG Repo Mixer Tools --%3E%3Csvg fill%3D%22%23000000%22 width%3D%22800px%22 height%3D%22800px%22 viewBox%3D%220 0 512 512%22 id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M480%2C257.35c0-123.7-100.3-224-224-224s-224%2C100.3-224%2C224c0%2C111.8%2C81.9%2C204.47%2C189%2C221.29V322.12H164.11V257.35H221V208c0-56.13%2C33.45-87.16%2C84.61-87.16%2C24.51%2C0%2C50.15%2C4.38%2C50.15%2C4.38v55.13H327.5c-27.81%2C0-36.51%2C17.26-36.51%2C35v42h62.12l-9.92%2C64.77H291V478.66C398.1%2C461.85%2C480%2C369.18%2C480%2C257.35Z%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.email-icon-AWH8x {\n  margin-left: 1%;\n  background-position-y: -1px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M174.461-180q-31.417 0-53.606-22.189-22.188-22.188-22.188-53.606v-448.41q0-31.418 22.188-53.606Q143.044-780 174.461-780h611.078q31.417 0 53.606 22.189 22.188 22.188 22.188 53.606v448.41q0 31.418-22.188 53.606Q816.956-180 785.539-180H174.461ZM480-467.359l330.154-215.359-12.308-46.103-317.846 208-317.846-208-12.308 46.103L480-467.359Z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.whatsapp-icon-I2GLz {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox%3D%220 0 20 20%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22m0 0h20v20h-20z%22 fill%3D%22none%22%2F%3E%3Cpath d%3D%22m16.8 5.7c-2.4-3.7-7.3-4.8-11.1-2.5-3.7 2.3-4.9 7.3-2.5 11l.2.3-.8 3 3-.8.3.2c1.3.7 2.7 1.1 4.1 1.1 1.5 0 3-.4 4.3-1.2 3.7-2.4 4.8-7.3 2.5-11.1zm-2.1 7.7c-.4.6-.9 1-1.6 1.1-.4 0-.9.2-2.9-.6-1.7-.8-3.1-2.1-4.1-3.6-.6-.7-.9-1.6-1-2.5 0-.8.3-1.5.8-2 .2-.2.4-.3.6-.3h.5c.2 0 .4 0 .5.4.2.5.7 1.7.7 1.8.1.1.1.3 0 .4.1.2 0 .4-.1.5s-.2.3-.3.4c-.2.1-.3.3-.2.5.4.6.9 1.2 1.4 1.7.6.5 1.2.9 1.9 1.2.2.1.4.1.5-.1s.6-.7.8-.9.3-.2.5-.1l1.6.8c.2.1.4.2.5.3.1.3.1.7-.1 1z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.telegram-icon-0jmu8 {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3Csvg height%3D%2232%22 viewBox%3D%220 0 32 32%22 width%3D%2232%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22m16 .5c-8.563 0-15.5 6.938-15.5 15.5s6.938 15.5 15.5 15.5c8.563 0 15.5-6.938 15.5-15.5s-6.938-15.5-15.5-15.5zm7.613 10.619-2.544 11.988c-.188.85-.694 1.056-1.4.656l-3.875-2.856-1.869 1.8c-.206.206-.381.381-.781.381l.275-3.944 7.181-6.488c.313-.275-.069-.431-.482-.156l-8.875 5.587-3.825-1.194c-.831-.262-.85-.831.175-1.231l14.944-5.763c.694-.25 1.3.169 1.075 1.219z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n";
+styleInject(css_248z);
+
+var Share = (function (props) {
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.isMobile;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    language = _useTranslation.i18n.language;
+  if (_typeof(props.url) == 'object') props.url = props.url[language];
+  var url = props.url.replace('{{DivaNr}}', props.divaNr);
+  url = url;
+  var text = t('configurator.sharemessage');
+  function onShare(type) {
+    switch (type) {
+      case 'facebook':
+        window.open("https://www.facebook.com/sharer/sharer.php?u=".concat(encodeURIComponent(url)), '_blank');
+        break;
+      case 'email':
+        window.open("mailto:?body=".concat(encodeURIComponent(text + ' ' + url)), '_blank');
+        break;
+      case 'telegram':
+        window.open("https://telegram.me/share/url?url=".concat(encodeURIComponent(url), "&text=").concat(encodeURIComponent(text)), '_blank');
+        break;
+      case 'whatsapp':
+        window.open("https://api.whatsapp.com/send?text=".concat(encodeURIComponent(text + ' ' + url)), '_blank');
+        break;
+    }
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [props.loading && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: 100
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: loader
+        })
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          position: 'absolute',
+          bottom: 0
+        },
+        children: t('configurator.shareloadinginfo')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        visibility: props.loading ? 'hidden' : 'visible'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: t('configurator.sharedescription')
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: shareOption,
+        onClick: function onClick() {
+          return onShare('email');
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: emailIcon
+        }), /*#__PURE__*/jsx("div", {
+          className: shareText,
+          children: t('configurator.shareemail')
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: shareOption,
+        onClick: function onClick() {
+          return onShare('facebook');
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: facebookIcon
+        }), /*#__PURE__*/jsx("div", {
+          className: shareText,
+          children: t('configurator.sharefacebook')
+        })]
+      }), isMobile && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: shareOption,
+          onClick: function onClick() {
+            return onShare('whatsapp');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: whatsappIcon
+          }), /*#__PURE__*/jsx("div", {
+            className: shareText,
+            children: t('configurator.sharewhatsapp')
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: shareOption,
+          onClick: function onClick() {
+            return onShare('telegram');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: telegramIcon
+          }), /*#__PURE__*/jsx("div", {
+            className: shareText,
+            children: t('configurator.sharetelegram')
+          })]
+        })]
+      })]
+    })]
+  });
+});
+
+export { Share as default };

package/build/esm/index-9ab112f5.js

@@ -0,0 +1,150 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-3ed57e1f.js';
+import 'react';
+import { w as wholeWrapper, n as notExpanded } from './index.module-992239fb.js';
+import TabGroups from './index-cc647f80.js';
+import TabGroupOptions from './index-64b6092f.js';
+import { observer } from 'mobx-react-lite';
+import ProduktDetails from './index-66bd13ae.js';
+import Collapsible from 'react-collapsible';
+import Price from './index-4582e31c.js';
+import classnames from 'classnames';
+import JsonViewer from './index-ea3e3189.js';
+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';
+import './index.module-5d137a40.js';
+import 'react-json-view-lite';
+import './react-json-viewer-cbbc334c.js';
+
+var menuPoint = "menu-point-Bz5zM";
+var collapsibleHeader = "collapsibleHeader-lzT9Y";
+var tabGroupWrapper = "tab-group-wrapper-mSLB-";
+var css_248z = ".menu-point-Bz5zM {\n  font-size: 22px;\n  padding: 0px 0px;\n  padding: 10px 0;\n  background-color: var(--primaryColor);\n  border-bottom: 1px solid;\n  width: 100%;\n  text-align: center;\n  margin-left: 0px;\n  color: white;\n  font-weight: 600;\n}\n.collapsibleHeader-lzT9Y {\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  text-align: center;\n  background-color: #bbbbbb;\n  color: black;\n  border-radius: 5px;\n  margin: 5% 1% 1% 1%;\n  transition: background-color 0.3s;\n  padding: 1% 0%;\n  cursor: pointer;\n}\n.collapsibleHeader-lzT9Y:hover {\n  background-color: var(--primaryColor);\n  color: white;\n}\n.tab-group-wrapper-mSLB- {\n  width: 90%;\n  margin-left: 4%;\n  background-color: white;\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 OptionTree = function OptionTree(_ref) {
+  var _articles$viewHandler, _hiddenOptions$tabGro, _article$getPlannerCo;
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var configTree = viewHandler.tabGroupState.allTabGroups;
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var hiddenOptions = viewHandler.divaWebPlanner.getHiddenOptions();
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  var tree = Object.values(configTree);
+  var hiddenTree = Object.values((_hiddenOptions$tabGro = hiddenOptions === null || hiddenOptions === void 0 ? void 0 : hiddenOptions.tabGroups) !== null && _hiddenOptions$tabGro !== void 0 ? _hiddenOptions$tabGro : {});
+  var canClick = false;
+  tree = tree.filter(function (item) {
+    return item.type == 'OPTION';
+  });
+  var CollapsibleProps = {
+    open: true,
+    easing: 'ease-in',
+    transitionTime: 200
+  };
+  if (!article) {
+    canClick = true;
+  }
+  var mat3D = article === null || article === void 0 || (_article$getPlannerCo = article.getPlannerConfigData) === null || _article$getPlannerCo === void 0 ? void 0 : _article$getPlannerCo.call(article, {}).config;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(wholeWrapper, notExpanded, props.className),
+    children: [/*#__PURE__*/jsx("a", {
+      className: menuPoint,
+      children: "Options \xDCbersicht"
+    }), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Produktdetails"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: !canClick && /*#__PURE__*/jsx(ProduktDetails, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Preise"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx(Price, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Optionsbaum"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: tree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Versteckte Optionen"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: hiddenTree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "3D MAT"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: mat3D && /*#__PURE__*/jsx(JsonViewer, {
+        isExpanded: true,
+        collapsed: 5,
+        json: mat3D
+      })
+    }))]
+  }));
+};
+var OptionTree$1 = observer(OptionTree);
+
+export { OptionTree$1 as default };

package/build/esm/index-9b7e4a2c.js

@@ -0,0 +1,96 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-3ed57e1f.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 };

package/build/esm/index-9c1979d8.js

@@ -0,0 +1,58 @@
+import { s as styleInject, u as useViewHandler } from './index-3ed57e1f.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 wcTabGroupItem = "wcTabGroupItem-TP7vT";
+var portrait = "portrait-3cTAf";
+var landscape = "landscape-6Dea8";
+var wcActiveStep = "wcActiveStep-y3S9Y";
+var wcVisitedStep = "wcVisitedStep-yDCqq";
+var wcStepNum = "wcStepNum-6FgQh";
+var css_248z = ".wcTabGroupItem-TP7vT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: background-color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n}\n.portrait-3cTAf.wcTabGroupItem-TP7vT,\n.landscape-6Dea8.wcTabGroupItem-TP7vT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-TP7vT.wcActiveStep-y3S9Y {\n  color: white;\n  background-color: var(--primaryColor);\n}\n\n.wcActiveStep-y3S9Y.wcTabGroupItem-TP7vT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcVisitedStep-yDCqq {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-yDCqq.wcTabGroupItem-TP7vT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-TP7vT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcStepNum-6FgQh {\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  margin-right: 10px;\n  margin-top: 10px;\n  border: 1px solid white;\n  background-color: white;\n  border-radius: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  color: #6f6f6f;\n}\n\n.wcActiveStep-y3S9Y .wcStepNum-6FgQh {\n  color: var(--primaryColor);\n  font-weight: 700;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%229%22 viewBox%3D%220 0 12 9%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.44531 3.49126L5.625 8.09375L10.75 0.953613%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  color: transparent;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh:empty:before {\n  content: '\\200b';\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontalGold = function TabGroupItemHorizontalGold(_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 isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  return /*#__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, viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive) ? wcVisitedStep : undefined),
+    children: [/*#__PURE__*/jsx("span", {
+      className: classnames(wcStepNum),
+      children: tabGroup.posNr
+    }), t('configurator.' + tabGroup.title, tabGroup.title)]
+  });
+};
+var index = observer(TabGroupItemHorizontalGold);
+
+export { index as default };