@crystaldesign/diva-web-planner-react 25.2.0-beta.2 → 25.2.0-beta.21

package/build/esm/index-cfd5dbf0.js

@@ -0,0 +1,142 @@
+import { s as styleInject, u as useViewHandler } from './index-bfb7feaa.js';
+import { useEffect } from 'react';
+import Settings from './index-7e545440.js';
+import TabGroup from './index-6464901b.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-a691e780.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-1e93e75e.js';
+import './index-9eaf08a2.js';
+import './index-2923ca8f.js';
+import './index-10095e81.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-9e95986f.js';
+import 'react-laag';
+import './index-1193ed89.js';
+import 'classnames';
+import './index-e60bd458.js';
+import './index-1126206f.js';
+import 'sift';
+import './index-74b909f0.js';
+import './index-3f967125.js';
+import './index-8f55b825.js';
+import './index-f6061b2c.js';
+import './index.module-d66248ab.js';
+import './index-791084e3.js';
+import 'react-switch';
+import './index-e8678693.js';
+import './index-deba0462.js';
+import './index-01ebe54b.js';
+import 'react-dropdown';
+import './index-e33c141c.js';
+import './index-88e6d823.js';
+import './index-35da1669.js';
+import './index-e80aafd9.js';
+import '@crystaldesign/content-box';
+import './index-3ad16ce9.js';
+import './index-e7abac8f.js';
+import './index-a87ffae6.js';
+import './index-903e604b.js';
+import './index-455a4267.js';
+import './index-51135c0c.js';
+import './index-1d0cd950.js';
+import './index-5dc98f9e.js';
+import './index-3c0470d4.js';
+import './index-b922d1ed.js';
+import './index-81f15d2a.js';
+import './index-c6cc855f.js';
+import './index-18b69117.js';
+import './index-34c0dd56.js';
+import './index-9eba5570.js';
+import './index-c901f1ae.js';
+import './index.module-b80d97f8.js';
+import './index-471e93be.js';
+import './index-22064e75.js';
+import './index-9a5124da.js';
+import './index-cdbd1e90.js';
+import './index-daabd5b2.js';
+import './index-291fdf80.js';
+import './index-f346aca0.js';
+import './index.module-6a00ac29.js';
+import './index-a4d80c02.js';
+import './index-c783fda0.js';
+import './index-cf8e6165.js';
+import './index-f47ebcaf.js';
+import './index-9ab6bf42.js';
+import './index-076cee40.js';
+import './index-595a8b64.js';
+import './index-5601710b.js';
+
+var wcConfigurator = "wcConfigurator-IeI91";
+var wcConfiguratorSteps = "wc-configurator-steps-yPThi";
+var wcConfiguratorSettings = "wc-configurator-Settings-3U39-";
+var tabSearchClass = "tab-search-class-qJEaW";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-IeI91 {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\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  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n}\n\n.wcConfigurator-IeI91 *,\n.wcConfigurator-IeI91 *::before,\n.wcConfigurator-IeI91 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-yPThi {\n  border-radius: 8px 0 0 8px;\n  overflow: hidden;\n  width: 350px;\n  position: relative;\n}\n\n.wc-configurator-Settings-3U39- {\n  width: calc(100% - 350px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n\n.tab-search-class-qJEaW {\n  background-color: #0d3040;\n  padding: 12px 16px;\n  position: relative;\n  display: flex;\n}\n\n.tab-search-class-qJEaW input {\n  outline: medium none invert !important;\n  outline: initial !important;\n}\n\n.tab-search-class-qJEaW input {\n  color: #fff;\n  width: 100%;\n  background-color: #0d3040;\n  font-size: 14px;\n  border: 0px solid;\n}\n\n.tab-search-class-qJEaW div {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%23eee%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 75%;\n  width: 16px;\n  height: 16px;\n  transition: all 0.15s ease;\n  margin: 0px 3px;\n  border-radius: var(--globalBorderRadius);\n  cursor: pointer;\n}\n\n.tab-search-class-qJEaW div:hover {\n  background-size: 100%;\n}\n";
+styleInject(css_248z);
+
+var Classification = function Classification(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsx(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: wcConfigurator,
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps,
+        tabSearchClass: tabSearchClass
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+    })
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#455864',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#f4f4f4',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--primaryColor)',
+  '--foldArrowMarginRight': '16px',
+  '--configuratorActionWidthForthBackSpacer': '0.1rem',
+  '--configuratorActionForthWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--configuratorActionBackWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--itemsMargin': '0.3125rem'
+};
+var index = observer(Classification);
+
+export { index as default };

package/build/esm/index-d028d7fc.js

@@ -0,0 +1,45 @@
+import { u as useViewHandler } from './index-bfb7feaa.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import NavBar from './index-4c4408d2.js';
+import { g as wcConfigurator3Dimage, h as imageCenterOrbit, j as imageCenterStatic } from './index.module-1b1b8941.js';
+import Logo from './index-b7b6ba53.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 '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+
+var Planner3DImage = function Planner3DImage(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setImage3DElement(_ref);
+    },
+    className: wcConfigurator3Dimage,
+    id: "3DImage-Container",
+    style: {
+      // backgroundImage: viewHandler.productState.RenderImageURL,
+      visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
+    },
+    children: [/*#__PURE__*/jsx(NavBar, {}), /*#__PURE__*/jsx("img", {
+      className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
+      id: "diva3dImg",
+      draggable: "false",
+      src: viewHandler.productState.diva3dImgSrc
+    }), /*#__PURE__*/jsx(Logo, {})]
+  });
+};
+var Planner3DImage$1 = observer(Planner3DImage);
+
+export { Planner3DImage$1 as default };

package/build/esm/index-d141d885.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-bfb7feaa.js';
+import { useState, useEffect } from 'react';
+import { n as notExpanded } from './index.module-9da22490.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import './react-json-viewer-0a5e0dd1.js';
+import DecisionVisualization from './DecisionVizualizer-a8a96c38.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-d4235a8e.js

@@ -0,0 +1,43 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-bfb7feaa.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-0068229d.js';
+import PriceSumm from './index-7d5f0354.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+
+var backOverwrite = "back-overwrite--AJgH";
+var forthOverwrite = "forth-overwrite-l0e3R";
+var actionNavigationClass = "action-navigation-class-jX4Hl";
+var css_248z = ".back-overwrite--AJgH,\n.forth-overwrite-l0e3R {\n  border: 1px #262626 solid !important;\n  background-color: var(--thirdColor) !important;\n  color: #262626 !important;\n  font-weight: 700 !important;\n}\n\n.back-overwrite--AJgH,\n.forth-overwrite-l0e3R {\n  cursor: pointer;\n}\n\n.action-navigation-class-jX4Hl {\n  height: 100%;\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 ActionNavigationRalph = function ActionNavigationRalph(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [!viewHandler.getIsInMobileView() && /*#__PURE__*/jsx(PriceSumm, {}), /*#__PURE__*/jsx(ActionNavigation, {
+      className: viewHandler.getIsInMobileView() ? actionNavigationClass : undefined,
+      showBackButtonText: true,
+      forthOverwrite: forthOverwrite,
+      backOverwrite: backOverwrite
+    })]
+  }));
+};
+var index = observer(ActionNavigationRalph);
+
+export { index as default };

package/build/esm/index-d6b08f80.js

@@ -0,0 +1,71 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-bfb7feaa.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';
+
+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-d729e84f.js

@@ -0,0 +1,99 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-bfb7feaa.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
+import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
+import SettingsHeader from './index-9eaf08a2.js';
+import classnames from 'classnames';
+import Search from './index-4bc11867.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/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 pdpOverlay = "pdp-overlay-2gWQq";
+var navigationVisible = "navigation-visible-goqGH";
+var pdpBackground = "pdp-background-1tl-9";
+var pdpContainer = "pdp-container-EljBO";
+var isMobileClass = "is-mobile-class-eOYXj";
+var closeButton = "close-button-tHReC";
+var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  position: relative;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n\n.close-button-tHReC {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n  z-index: 100;\n}\n.close-button-tHReC:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n";
+styleInject(css_248z);
+
+var ProductList = function ProductList(_ref) {
+  var _viewHandler$settings, _viewHandler$getViewC;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore();
+    _useDivaCore.actions.openComponent;
+    var _useDivaCore$state = _useDivaCore.state,
+    HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    height = _useDivaCore$state$di.height,
+    isPortrait = _useDivaCore$state$di.isPortrait,
+    organization = _useDivaCore$state.organization;
+  var _useTranslation = useTranslation();
+    _useTranslation.t;
+  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
+  var currentlyMobile = isMobile && isPortrait || height < 500;
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentProductId = _useState2[0],
+    setCurrentProductId = _useState2[1];
+  var productState = useProductState({
+    parameters: {
+      'customFlags.variantsList.organizations': organization._id
+    },
+    sort: '{-created}',
+    scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
+  });
+  var closePDP = useCallback(function () {
+    setCurrentProductId(undefined);
+  }, []);
+  var openPDP = useCallback(function (_ref2) {
+    var _id = _ref2._id;
+    setCurrentProductId(_id);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item,
+      specialElement1: /*#__PURE__*/jsx(Search, {
+        searchState: productState.search
+      })
+    }), viewHandler.settingsState.settingsScrollerElement && /*#__PURE__*/jsx(ProductsComponent, {
+      productState: productState,
+      onClickFunction: openPDP
+    }), currentProductId && /*#__PURE__*/jsxs("div", {
+      className: classnames(pdpOverlay, currentlyMobile ? isMobileClass : undefined, !!portalHeaderHeight ? navigationVisible : undefined),
+      children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
+        onClick: closePDP,
+        className: pdpBackground
+      }), /*#__PURE__*/jsxs("div", {
+        className: pdpContainer,
+        children: [/*#__PURE__*/jsx("div", {
+          onClick: closePDP,
+          className: closeButton
+        }), /*#__PURE__*/jsx(ProductDetailPageComponent, {
+          settings: (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.productDetailPageConfig,
+          productId: currentProductId
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ProductList);
+
+export { index as default };

package/build/esm/index-d82688f0.js

@@ -0,0 +1,61 @@
+import { s as styleInject } from './index-bfb7feaa.js';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var shelfPlannerContainerHorizontal = "shelfPlannerContainerHorizontal-zUcmv";
+var shelfPlannerContainerVertical = "shelfPlannerContainerVertical-3jwdx";
+var accessoires = "accessoires-ExU9-";
+var expanded = "expanded-qqANx";
+var shelfGrid = "shelfGrid-VM2OD";
+var shelfGridBorder = "shelfGridBorder-DyInR";
+var shelfPlannerContainerRtv = "shelfPlannerContainerRtv-OFMK-";
+var accessoireContainer = "accessoireContainer-Ht6lL";
+var selectedElement = "selectedElement-e8fZe";
+var info = "info-Kfwx2";
+var warning = "warning-1klI4";
+var configHeaderWrapper = "config-header-wrapper-ycLDr";
+var name = "name-4YnN5";
+var closeButton = "closeButton-kL18z";
+var css_248z = ".shelfPlannerContainerHorizontal-zUcmv {\n  display: flex;\n  width: 100%;\n}\n\n.shelfPlannerContainerVertical-3jwdx {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 60%;\n}\n\n.shelfPlannerContainerVertical-3jwdx .accessoires-ExU9- {\n  width: 100%;\n  height: 60%;\n}\n\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 34%;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 40%;\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerVertical-3jwdx .shelfGrid-VM2OD {\n  width: 100%;\n  height: 40%;\n  padding: 0 0;\n  margin: 10px 0;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGridBorder-DyInR {\n  border-top: solid #c7c7c7 1px;\n  /* border-bottom: solid #c7c7c7 1px; */\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n}\n.shelfPlannerContainerVertical-3jwdx .shelfGridBorder-DyInR {\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n  display: contents;\n}\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 66%;\n}\n\n.shelfPlannerContainerVertacal-rU1lK.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9-,\n.shelfPlannerContainerHorizontal-zUcmv.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9- {\n  width: 100%;\n}\n\n.row-JYcIF:first-child {\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoireContainer-Ht6lL {\n  height: 100%;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe {\n  width: 100%;\n  height: 75px;\n  margin-bottom: 5px;\n}\n\n.info-Kfwx2 {\n  height: 75px;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe img {\n  width: 100px;\n  float: left;\n  height: 75px;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.warning-1klI4 {\n  color: red;\n  padding-bottom: 1rem;\n}\n.config-header-wrapper-ycLDr {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.name-4YnN5 {\n  font-size: 18px;\n  transition: font-size 0.3s ease;\n}\n\n.closeButton-kL18z {\n  width: 50px;\n  height: 50px;\n  background: center / 35% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 0.3s ease, background-image 0.3s ease;\n}\n\n.config-header-wrapper-ycLDr:hover .closeButton-kL18z {\n  background: center / 40% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%233f3f3f%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.config-header-wrapper-ycLDr:hover .name-4YnN5 {\n  font-size: 20px;\n}\n";
+styleInject(css_248z);
+
+var index = function index(_ref) {
+  var selAccItem = _ref.selAccItem;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: selAccItem ? /*#__PURE__*/jsxs("div", {
+      className: selectedElement,
+      children: [/*#__PURE__*/jsx("img", {
+        src: selAccItem.image
+      }), /*#__PURE__*/jsxs("div", {
+        className: info,
+        children: [t('configurator.REGALPLANER_CHOOSE_SPACE_1') + ' ', /*#__PURE__*/jsx("b", {
+          dangerouslySetInnerHTML: {
+            __html: selAccItem.name
+          }
+        }), ' ' + t('configurator.REGALPLANER_CHOOSE_SPACE_2') + ' ', /*#__PURE__*/jsx("b", {
+          children: selAccItem.cellSize
+        }), t('configurator.REGALPLANER_CHOOSE_SPACE_3')]
+      })]
+    }) : /*#__PURE__*/jsxs("div", {
+      className: selectedElement,
+      children: [/*#__PURE__*/jsx("img", {
+        src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+      }), /*#__PURE__*/jsx("div", {
+        className: info,
+        children: t('configurator.REGALPLANER_CHOOSE_FIRST_ARTICLE')
+      })]
+    })
+  });
+};
+var SelectedAcc = observer(index);
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SelectedAcc
+});
+
+export { SelectedAcc as S, shelfPlannerContainerHorizontal as a, shelfPlannerContainerVertical as b, shelfGrid as c, shelfGridBorder as d, expanded as e, accessoires as f, configHeaderWrapper as g, closeButton as h, accessoireContainer as i, index$1 as j, name as n, shelfPlannerContainerRtv as s, warning as w };