@crystaldesign/diva-web-planner-react 25.2.0-beta.35 → 25.2.0-beta.4

package/build/esm/index-fa9ac66f.js

@@ -0,0 +1,155 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-54d6be58.js';
+import { useState, useEffect } from 'react';
+import { n as notExpanded } from './index.module-68abd2fb.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import './react-json-viewer-2727fd1e.js';
+import DecisionVisualization from './DecisionVizualizer-a664574e.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var table = "table-iqWqM";
+var column = "column-0LUrX";
+var scrollable = "scrollable-g4Mgr";
+var header = "header-4-lJa";
+var decision = "decision-d8i43";
+var css_248z = ".table-iqWqM {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-color: #ffffff;\n  border-collapse: collapse;\n  border-width: 0px;\n  border-color: #e7eaf8;\n  border-style: solid;\n  color: #000000;\n  font-weight: normal;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  overflow-y: auto;\n  top: 73px;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n.table-iqWqM thead {\n  font-weight: bold !important;\n}\n.table-iqWqM thead {\n  border-bottom: 1px solid;\n  background-color: var(--thirdColor);\n  font-size: 16px;\n  padding-top: 1%;\n  color: white;\n}\n.column-0LUrX {\n  text-align: left;\n}\n.column-0LUrX:first-child {\n  height: 20px;\n}\n\n.column-0LUrX th {\n  border-bottom: 1px solid;\n  padding-right: 10px;\n  margin-bottom: 1%;\n  font-weight: normal;\n}\n.scrollable-g4Mgr {\n  overflow: auto;\n  left: 50px;\n}\n.header-4-lJa {\n  height: 8%;\n  width: 100%;\n  padding-top: 0.7%;\n  text-align: center;\n  position: absolute;\n  background-color: var(--primaryColor);\n  font-size: 30px;\n  color: white;\n  font-weight: 600;\n}\n\n.decision-d8i43 {\n  z-index: 100;\n  position: fixed;\n  top: 0;\n  right: 240px;\n  width: 700px;\n  height: 100%;\n  background-color: #fff;\n  overflow: auto;\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 DecisionAnalyzer = function DecisionAnalyzer(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  useEffect(function () {
+    var asyncFunct = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return DivaUtils.Sleep(1000);
+            case 2:
+              setRerender(!rerender);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function asyncFunct() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    asyncFunct();
+  }, [viewHandler.tabGroupState.allTabGroups]);
+  var article = Object.values(articles !== null && articles !== void 0 ? articles : {}).find(function (a) {
+    return a.posNr == 1;
+  });
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedDecision = _useState4[0],
+    setSelectedDecision = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    filter = _useState6[0],
+    setFilter = _useState6[1];
+  if (!article) return /*#__PURE__*/jsx(Fragment, {});
+  var longestStack = article.decisionDebugStacks[0].stack.length;
+  var entries = _toConsumableArray(Array(longestStack).keys());
+  var _onClick = function onClick(nr, decision) {
+    if (nr == (selectedDecision === null || selectedDecision === void 0 ? void 0 : selectedDecision.Number)) {
+      setSelectedDecision(undefined);
+    } else setSelectedDecision(decision);
+  };
+  var filteredDecisions = article.decisionDebugStacks.map(function (d) {
+    return d.stack.map(function (d) {
+      var _d$decision$Options, _d$decision$DOC;
+      return _objectSpread(_objectSpread({}, d), {}, {
+        bold: !!((_d$decision$Options = d.decision.Options) !== null && _d$decision$Options !== void 0 && _d$decision$Options.includes('OPT' + filter)) || ((_d$decision$DOC = d.decision.DOC) === null || _d$decision$DOC === void 0 ? void 0 : _d$decision$DOC.find(function (doc) {
+          var _doc$DA;
+          return (_doc$DA = doc.DA) === null || _doc$DA === void 0 ? void 0 : _doc$DA.find(function (da) {
+            return da.OptionCodex == filter;
+          });
+        }))
+      });
+    });
+  });
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsxs("a", {
+      className: header,
+      children: ["Decision history", /*#__PURE__*/jsx("input", {
+        value: filter,
+        onChange: function onChange(e) {
+          return setFilter(e.target.value);
+        },
+        placeholder: "filter option ohne OPT"
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsxs("table", {
+        className: table,
+        children: [/*#__PURE__*/jsx("thead", {
+          children: /*#__PURE__*/jsx("tr", {
+            className: column,
+            children: filteredDecisions.map(function (d, i) {
+              var text = '';
+              for (var key in article.decisionDebugStacks[i].variantValues) {
+                text = text + key + ': ' + article.decisionDebugStacks[i].variantValues[key] + '\n';
+              }
+              return /*#__PURE__*/jsx("th", {
+                children: text
+              }, i);
+            })
+          })
+        }), /*#__PURE__*/jsx("tbody", {
+          children: entries.map(function (x, i) {
+            return /*#__PURE__*/jsx("tr", {
+              className: column,
+              children: filteredDecisions.map(function (d, j) {
+                var _d$i, _d$i2;
+                return /*#__PURE__*/jsx("th", {
+                  onClick: function onClick() {
+                    return _onClick(d[i].nr, d[i].decision);
+                  },
+                  children: d[i].bold ? /*#__PURE__*/jsx("strong", {
+                    children: (_d$i = d[i]) === null || _d$i === void 0 ? void 0 : _d$i.text
+                  }) : (_d$i2 = d[i]) === null || _d$i2 === void 0 ? void 0 : _d$i2.text
+                }, j);
+              })
+            }, i);
+          })
+        })]
+      }), selectedDecision && /*#__PURE__*/jsx("div", {
+        className: decision,
+        children: /*#__PURE__*/jsx(DecisionVisualization, {
+          decision: selectedDecision
+        })
+      })]
+    })]
+  }));
+};
+var DecisionAnalyzer$1 = observer(DecisionAnalyzer);
+
+export { DecisionAnalyzer$1 as default };

package/build/esm/index-fb30f27b.js

@@ -0,0 +1,200 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-54d6be58.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-7c01cd74.js';
+import Product from './index-7a12e54f.js';
+import Settings from './index-0dab4cab.js';
+import TabGroup from './index-105e3f95.js';
+import NavigationButtons from './index-d6c5bfe4.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import BasketActionStandard from './index-d757c205.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-c7975795.js';
+import ProgressBar from './index-fe1f13f7.js';
+import BarrierActions from './index-4b056143.js';
+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 './index-3c792bc2.js';
+import './index-01ad7965.js';
+import './index-35729e4f.js';
+import './index-1ae6504b.js';
+import './index-33896c97.js';
+import 'react-laag';
+import './index-1899615f.js';
+import './index-85e0c17a.js';
+import './index-6e7d2e26.js';
+import 'sift';
+import './index-893a769b.js';
+import './index-c2b40da3.js';
+import './index-b17ae86a.js';
+import './index-f3ea2c52.js';
+import './index.module-c9bef34d.js';
+import './index-0a9d8acb.js';
+import 'react-switch';
+import './index-c03688e1.js';
+import './index-b1bbf24a.js';
+import './index-76540bad.js';
+import 'react-dropdown';
+import './index-22116f95.js';
+import './index-4c37fb0e.js';
+import './index-427c31f9.js';
+import './index-9f28f4ae.js';
+import '@crystaldesign/content-box';
+import './index-77bf4fb4.js';
+import './index-c7877768.js';
+import './index-de4443e9.js';
+import './index-c7b63c12.js';
+import './index-389d80c2.js';
+import './index-53bad72b.js';
+import './index-5a445d18.js';
+import './index-b86dea91.js';
+import './index-a16b98a4.js';
+import './index-eb5a3153.js';
+import './index-b8ce8d4e.js';
+import './index-30ed765c.js';
+import './index-dc69a4ef.js';
+import './index-d3d41f67.js';
+import './index-3e8b4332.js';
+import './index-f4315d1b.js';
+import './index.module-41ad8591.js';
+import './index-1201d944.js';
+import './index-1ce3bddb.js';
+import './index-ef41ed48.js';
+import './index-f8e7e5bd.js';
+import './index-19259082.js';
+import './index-6a54ffdf.js';
+import './index-00a7d828.js';
+import './index.module-c7b58886.js';
+import './index-200f3876.js';
+import './index-4bc2c14a.js';
+import './index-5aa48ea0.js';
+import './index-9d8f56bf.js';
+import './index-dfa1268a.js';
+import './index-06f59306.js';
+import './index-e6679386.js';
+import './index-a9c48c48.js';
+
+var wcConfigurator = "wcConfigurator-YOuy8";
+var landscape = "landscape-EyFBs";
+var portrait = "portrait-XiOPl";
+var wcConfiguratorProduct = "wcConfigurator-product-Ovdqk";
+var minExpanded = "min-expanded-aFvtw";
+var wcConfiguratorSettingsWrapper = "wc-configurator-settings-wrapper-ymkif";
+var expanded = "expanded-LXnio";
+var maxExpanded = "max-expanded-Q2hOy";
+var wcConfiguratorSettings = "wcConfigurator-settings-OLzdK";
+var wcConfiguratorSteps = "wcConfigurator-steps-1--dZ";
+var closeButtonVisible = "close-button-visible-y3GY8";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-xqcr5";
+var wcConfiguratorAction = "wcConfigurator-action-ycd5b";
+var foldedup = "foldedup-Qqnox";
+var settingsHidden = "settings-hidden-NnHMW";
+var burgerVisible = "burger-visible-AFcf0";
+var isOnLastStep = "isOnLastStep-eAWSY";
+var progressBar = "progressBar-Izqk1";
+var actionOnTop = "action-on-top-UqyK5";
+var css_248z = ".wcConfigurator-YOuy8 {\n  position: relative;\n\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n}\n\n.wcConfigurator-YOuy8 *,\n.wcConfigurator-YOuy8 *::before,\n.wcConfigurator-YOuy8 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-YOuy8.landscape-EyFBs {\n  height: 100%;\n  width: 100%;\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl {\n  height: 100%;\n  width: 100%;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-Ovdqk {\n  position: absolute;\n  width: 63%;\n  max-width: calc(100% - 564px);\n  left: 0px;\n  top: 0;\n  height: 100%;\n}\n.min-expanded-aFvtw .wcConfigurator-product-Ovdqk {\n  width: calc(100% - 128px - 16px);\n  max-width: none;\n  max-width: initial;\n}\n\n.wc-configurator-settings-wrapper-ymkif {\n  position: absolute;\n  z-index: 600;\n  height: calc(100% - 32px);\n  width: calc(37% - 16px);\n  min-width: 550px;\n  right: 0;\n  padding: 16px 16px 16px 0;\n  background-color: var(--settingsBackgroundColor);\n  transition: width 0.45s;\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\n}\n\n.expanded-LXnio .wc-configurator-settings-wrapper-ymkif {\n  width: 70%;\n}\n\n.min-expanded-aFvtw .wc-configurator-settings-wrapper-ymkif {\n  width: calc(128px);\n  min-width: 0;\n  min-width: initial;\n}\n.max-expanded-Q2hOy .wc-configurator-settings-wrapper-ymkif {\n  width: calc(100% - 16px);\n  z-index: 801;\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-OLzdK {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n\n  transition:\n    height 0.45s,\n    top 0.45s;\n  overflow-y: hidden;\n  overflow-x: hidden;\n  overflow: visible;\n  z-index: 100;\n  right: calc(128px + 4px + 16px);\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-1--dZ {\n  position: absolute;\n  z-index: 300;\n  right: 16px;\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n  width: 128px;\n}\n.close-button-visible-y3GY8 .wcConfigurator-steps-1--dZ {\n  top: 80px;\n  height: calc(100% - 32px - 4px - 50px - 64px);\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-xqcr5 {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n  height: 50px;\n  right: calc(128px + 4px + 16px);\n  bottom: 16px;\n  z-index: 200;\n}\n\n.min-expanded-aFvtw .wcConfigurator-settings-actions-xqcr5 {\n  overflow: hidden;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-ycd5b {\n  position: absolute;\n  width: 128px;\n  height: 50px;\n  right: 16px;\n  bottom: 16px;\n  z-index: 200;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-LXnio .wcConfigurator-settings-OLzdK,\n.max-expanded-Q2hOy .wcConfigurator-settings-OLzdK,\n.expanded-LXnio .wcConfigurator-settings-actions-xqcr5,\n.max-expanded-Q2hOy .wcConfigurator-settings-actions-xqcr5 {\n  width: calc(100% - 128px - 16px - 4px);\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl,\n.landscape-EyFBs.wcConfigurator-YOuy8 {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-EyFBs .wcConfigurator-product-Ovdqk {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-EyFBs .wcConfigurator-settings-OLzdK {\n  display: none;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\n} */\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-EyFBs .wcConfigurator-steps-1--dZ {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-EyFBs .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-EyFBs .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-XiOPl .wcConfigurator-product-Ovdqk {\n  top: 50px;\n  left: 0;\n  height: 40%;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-product-Ovdqk {\n  z-index: 1;\n}\n\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-product-Ovdqk {\n  height: calc(100% - 50px);\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\n  left: 0px;\n  top: calc(40% + 50px);\n  height: calc(60% - 50px - var(--configuratorActionHeight) - 6px);\n  width: 100%;\n}\n\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-settings-OLzdK {\n  top: 100%;\n}\n\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-settings-OLzdK {\n  top: 2.5rem;\n  height: calc(100% - 50px);\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\n  position: absolute;\n  left: 0px;\n  top: 0;\n  width: calc(100% - 50px);\n  height: 50px;\n}\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ.burger-visible-AFcf0 {\n  left: 50px;\n  width: calc(100% - 50px - 50px);\n}\n\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-steps-1--dZ {\n  top: 0px;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n.portrait-XiOPl.isOnLastStep-eAWSY .wcConfigurator-settings-actions-xqcr5,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-settings-actions-xqcr5 {\n  display: none !important;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-XiOPl .wcConfigurator-action-ycd5b,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n.portrait-XiOPl.isOnLastStep-eAWSY .wcConfigurator-action-ycd5b {\n  right: 0px;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  display: block;\n}\n\n.portrait-XiOPl .progressBar-Izqk1 {\n  position: absolute;\n  width: 100%;\n  height: 4px;\n  top: 50px;\n  left: 0;\n  z-index: 1000;\n  display: flex;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.action-on-top-UqyK5 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 50px;\n  height: 50px;\n  background: no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 300;\n}\n\n.landscape-EyFBs,\n.portrait-XiOPl {\n  --configuratorActionHeight: 50px;\n}\n\n.wcConfigurator-YOuy8 ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
+styleInject(css_248z);
+
+var Standard = function Standard(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    headerInfos = _useDivaCore$state.headerInfos,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsFoldedUp ? foldedup : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, viewHandler.actionButtonState.isOnLastStep ? isOnLastStep : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
+      children: [/*#__PURE__*/jsx(Product, {
+        className: wcConfiguratorProduct
+      }), !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorSettingsWrapper,
+        children: [/*#__PURE__*/jsx(TabGroup, {
+          className: wcConfiguratorSteps
+        }), /*#__PURE__*/jsx(Settings, {
+          className: wcConfiguratorSettings
+        }), /*#__PURE__*/jsx(NavigationButtons, {
+          className: wcConfiguratorSettingsActions
+        }), /*#__PURE__*/jsx(BasketActionStandard, {
+          containerClassName: wcConfiguratorAction
+        })]
+      }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(TabGroup, {
+          className: classnames(wcConfiguratorSteps, headerInfos.onlyBurgerVisibles || isFullscreenComponent ? burgerVisible : undefined),
+          showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+        }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(ProgressBar, {
+          className: progressBar
+        }), /*#__PURE__*/jsx(Settings, {
+          className: wcConfiguratorSettings
+        }), /*#__PURE__*/jsx(NavigationButtons, {
+          className: classnames(wcConfiguratorSettingsActions)
+        }), /*#__PURE__*/jsx(BasketActionStandard, {
+          containerClassName: wcConfiguratorAction
+        }), /*#__PURE__*/jsx(BasketMobile, {
+          className: actionOnTop
+        })]
+      })]
+    }), /*#__PURE__*/jsx(BarrierActions, {}), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#d60084',
+  '--secondaryColor': '#4b4b4b',
+  '--thirdColor': '#e5e5e5; ',
+  '--globalBorderRadius': '3px',
+  '--articlePosNrRadius': '50%',
+  '--articlePosNrSize': '1.5rem',
+  '--articlePosNrFontSize': '1.1rem',
+  '--galleryItemRadius': '50%',
+  '--galleryItemRowCount': '5',
+  '--galleryItemMargin': '0.5%',
+  '--galleryItemRowCountSmall': '6',
+  '--galleryItemMarginSmall': '0.3%',
+  '--galleryItemBorder': '0px',
+  '--galleryItemBorderColor': '#e8e9ed',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--lineHeight1': '20.8px',
+  '--fontWeight1': '300',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--itemsMargin': '11.2px 0 0 0',
+  '--tabGroupBackground': 'unset',
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.9)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '5px',
+  '--settingsScrollerPaddingLeft': '5px',
+  '--foldArrowMarginRight': 'calc(50% - 8px)',
+  '--configuratorActionHeight': '50px',
+  '--configuratorActionWidthForthBackSpacer': '6px',
+  '--configuratorActionForthWidth': 'calc((100% - 53px) - (var(--configuratorActionWidthForthBackSpacer) / 2))',
+  '--configuratorActionBackWidth': 'calc(53px - (var(--configuratorActionWidthForthBackSpacer) / 2))'
+};
+var index = observer(Standard);
+
+export { index as default };

package/build/esm/index-fc8a7c8b.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-54d6be58.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 OrbitInteraction = function OrbitInteraction(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/Planner3DImage/OrbitInteraction"
+  }));
+};
+
+export { OrbitInteraction as default };

package/build/esm/index-fd4948f9.js

@@ -0,0 +1,78 @@
+import { s as styleInject } from './index-54d6be58.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, jsxs, Fragment } 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';
+
+var row = "row-aKbIG";
+var rowPaddingTop = "row-padding-top-SRH2s";
+var rowPaddingTopArticle = "row-padding-top-article-Iwelk";
+var columnLeft = "column-left-jSCha";
+var columnRight = "column-right-rkkBn";
+var columnRightRed = "column-right-red-Lmt65";
+var columnOption = "column-option-2v7Hm";
+var columnPartlist = "column-partlist-0LS9Z";
+var codexes = "codexes--r2fL";
+var tabGroup = "tab-group-an6TP";
+var css_248z = ".row-aKbIG {\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  font-weight: 300;\n  padding-right: 0.9375rem;\n  padding-left: 0.9375rem;\n  display: flow-root;\n  color: #404040;\n}\n.row-padding-top-SRH2s {\n  padding-top: 8px;\n}\n\n.row-padding-top-article-Iwelk {\n  padding-top: 1rem;\n}\n\n.column-left-jSCha {\n  float: left;\n}\n.column-left-jSCha a {\n  color: var(--primaryColor);\n}\n.column-right-rkkBn {\n  float: right;\n  text-align: right;\n}\n\n.column-right-red-Lmt65 {\n  color: var(--primaryColor);\n}\n.column-option-2v7Hm {\n  font-size: 0.8125rem;\n  font-weight: normal;\n  line-height: 1.1;\n}\n.column-partlist-0LS9Z {\n  max-width: 70%;\n}\n\n.codexes--r2fL {\n  font-style: italic;\n}\n\n.tab-group-an6TP {\n  border-bottom: 1px solid var(--primaryColor);\n  font-size: 1.125rem;\n  margin: 1.5rem 0 0 0;\n  color: var(--primaryColor);\n  padding: 0;\n  text-align: left;\n  text-transform: capitalize;\n  font-weight: 300;\n}\n";
+styleInject(css_248z);
+
+var OptiontreeSerious = function OptiontreeSerious(_ref) {
+  var itemP = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var item = itemP;
+  if (item.isTabGroup) {
+    return /*#__PURE__*/jsx("div", {
+      className: tabGroup,
+      children: item.title
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [item.isPartlistArticle && /*#__PURE__*/jsxs("div", {
+      className: classnames(row, rowPaddingTopArticle),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(columnPartlist, columnLeft),
+        children: item.title
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnRight),
+        children: (item.quantity && item.quantity > 1 ? '(x' + item.quantity + ') ' : '') + (!hidePrices && item.price ? DivaUtils.formatPrice(item.price) : '')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(row, item.isPartlistArticle ? rowPaddingTop : undefined),
+      children: [/*#__PURE__*/jsxs("span", {
+        className: classnames(columnOption, columnLeft),
+        children: [item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            children: item.size && item.size !== '' ? t('configurator.size') : item.description
+          }), ": ", item.size]
+        }), !item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            children: item.title
+          }), item.description && ': ' + item.description]
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnOption, columnRight, columnRightRed, codexes),
+        children: item.codex
+      })]
+    })]
+  });
+};
+var index = observer(OptiontreeSerious);
+
+export { index as default };

package/build/esm/index-fe1f13f7.js

@@ -0,0 +1,53 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-54d6be58.js';
+import 'react';
+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';
+
+var doneBar = "doneBar-xosJY";
+var todoBar = "todoBar-sVQM-";
+var css_248z = ".doneBar-xosJY {\n  background: var(--secondaryColor);\n  border-radius: 0 2px 2px 0;\n  transition: width 0.35s ease-in-out;\n}\n\n.todoBar-sVQM- {\n  background: var(--thirdColor);\n  transition: width 0.35s ease-in-out;\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 ProgressBar = function ProgressBar(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var lastStep = viewHandler.configuratorStructureHandler.lastConfigStep;
+  var currentStep = viewHandler.tabGroupState.curConfigStep;
+  if (!lastStep || !currentStep) return /*#__PURE__*/jsx(Fragment, {});
+  var current = currentStep.posNr - 1;
+  var total = lastStep.posNr - 1;
+  var doneInPercent = Math.round(current / total * 100);
+  var todoInPercent = 100 - doneInPercent;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: doneBar,
+      style: {
+        width: doneInPercent + '%'
+      }
+    }), /*#__PURE__*/jsx("div", {
+      className: todoBar,
+      style: {
+        width: todoInPercent + '%'
+      }
+    })]
+  }));
+};
+var ProgressBar$1 = observer(ProgressBar);
+
+export { ProgressBar$1 as default };

package/build/esm/index-fe48e6bd.js

@@ -0,0 +1,65 @@
+import { s as styleInject, u as useViewHandler } from './index-54d6be58.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-dd726f01.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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcTabGroupItem = "wcTabGroupItem-RxTRT";
+var landscape = "landscape-XFSPQ";
+var wcActiveStep = "wcActiveStep-W687q";
+var wcVisitedStep = "wcVisitedStep-IGlR4";
+var wcTabGroupItemMobile = "wcTabGroupItemMobile-tMZbr";
+var secondaryColorDiv = "secondaryColorDiv-fx0Cm";
+var wcStepIcon = "wcStepIcon-JtMDZ";
+var css_248z = ".wcTabGroupItem-RxTRT {\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\n.landscape-XFSPQ.wcTabGroupItem-RxTRT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q,\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q.wcTabGroupItem-RxTRT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcTabGroupItem-RxTRT.wcVisitedStep-IGlR4 {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-IGlR4.wcTabGroupItem-RxTRT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-RxTRT.wcTabGroupItem-RxTRT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q {\n  color: white;\n}\n\n.wcTabGroupItemMobile-tMZbr {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: width 0.4s ease;\n  line-height: 56px;\n  padding: 0 6px 0 13px;\n  color: var(--secondaryColor);\n  font-size: 10px;\n  font-weight: 600;\n  position: relative;\n}\n\n.secondaryColorDiv-fx0Cm {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n  background-color: var(--secondaryColor);\n}\n\n.wcTabGroupItemMobile-tMZbr.wcActiveStep-W687q {\n  background-color: var(--thirdColor);\n}\n\n.wcStepIcon-JtMDZ {\n  display: block;\n  background-color: var(--secondaryColor);\n  background-position: center center;\n  width: 30px;\n  height: 50px;\n  margin: auto;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center center;\n  float: right;\n}\n.wcActiveStep-W687q .wcStepIcon-JtMDZ {\n  margin-left: 5px;\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_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 active = tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var icon = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(!viewHandler.uiState.isInMobileView ? wcTabGroupItem : wcTabGroupItemMobile, viewHandler.uiState.isMobileLandscape ? landscape : undefined, active ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !active ? wcVisitedStep : undefined),
+    children: [(active || !icon) && t('configurator.' + tabGroup.title, tabGroup.title), active && /*#__PURE__*/jsx("div", {
+      className: secondaryColorDiv
+    }), icon && /*#__PURE__*/jsx("div", {
+      className: wcStepIcon,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    })]
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };