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

package/build/esm/index-596f0d61.js

@@ -0,0 +1,55 @@
+import { s as styleInject } from './index-4238b6c1.js';
+import { observer } from 'mobx-react-lite';
+import Arrow from './index-ebbb0e7e.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+
+var selectContainer = "select-container-IwjJt";
+var select = "select-ftXa-";
+var arrow = "arrow-vRzWc";
+var css_248z = ".select-container-IwjJt {\n  position: relative;\n}\n\n.select-ftXa- {\n  outline: none !important;\n}\n\n.select-ftXa- {\n  position: relative;\n  font-size: 16px;\n  color: #111;\n  line-height: 20px;\n  height: 30px;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  width: 100%;\n  border: 1px solid var(--select-border);\n  border-radius: 3px;\n  padding: 4px 8px;\n  cursor: pointer;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n\n.arrow-vRzWc {\n  position: absolute;\n  top: 10px;\n  right: 12px;\n  z-index: 10;\n  pointer-events: none;\n}\n";
+styleInject(css_248z);
+
+var MobileDropdown = function MobileDropdown(_ref) {
+  var onChange = _ref.onChange,
+    mobileOptions = _ref.mobileOptions,
+    selectedOption = _ref.selectedOption,
+    id = _ref.id;
+  return /*#__PURE__*/jsxs("div", {
+    className: selectContainer,
+    id: id,
+    children: [/*#__PURE__*/jsx(Arrow, {
+      open: false,
+      className: arrow
+    }), /*#__PURE__*/jsx("select", {
+      className: select,
+      onChange: onChange,
+      value: selectedOption,
+      children: mobileOptions.map(function (option) {
+        return /*#__PURE__*/jsx("option", {
+          value: option.codex,
+          dangerouslySetInnerHTML: {
+            __html: option.text + (!!option.price ? '  -  ' + option.price : '')
+          }
+        }, option.codex);
+      })
+    })]
+  });
+};
+var MobileDropdown$1 = observer(MobileDropdown);
+
+export { MobileDropdown$1 as default };

package/build/esm/index-59c3b640.js

@@ -0,0 +1,57 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.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';
+
+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 };

package/build/esm/index-5a7f03c2.js

@@ -0,0 +1,59 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcConfiguratorAction = "wcConfigurator-action-1kRvz";
+var wcConfiguratorActionButton = "wcConfigurator-action-Button-uCk2M";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-S5Uqm";
+var wcCheckoutButtonText = "wcCheckoutButtonText-AKaeu";
+var css_248z = ".wcConfigurator-action-1kRvz {\n  background: rgba(242.2, 242.2, 242.2, 0.9);\n  transition: width 0.2s ease-in-out;\n}\n\n.wcConfigurator-action-Button-uCk2M {\n  background-color: var(--primaryColor);\n  background-color: var(--saveButton, var(--primaryColor));\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--saveButton, var(--primaryColor)) solid;\n  border-radius: var(--globalBorderRadius);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  line-height: var(--lineHeight1);\n  font-weight: var(--fontWeight1);\n  height: calc(100% - 2px);\n  font-size: 14px;\n  color: white;\n  flex-grow: 1;\n  -webkit-text-stroke: 0px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.wcConfigurator-action-Button-uCk2M:hover {\n  cursor: pointer;\n  transition: box-shadow 0.3s;\n\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcConfigurator-settings-actions-isOnFirstStepDisabled-4PqCh .wcConfigurator-action-Button-uCk2M {\n  pointer-events: none;\n  background-color: #c25353;\n  border-color: #c25353;\n}\n\n.wcCheckoutButtonPrice-S5Uqm {\n  float: right;\n  margin-right: 10%;\n}\n.wcCheckoutButtonIcon-6TJQ5 {\n  background-image: 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\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  width: 50%;\n  height: 50%;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  position: absolute;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz {\n  /*auser In die Zusammenfassung wird ausgeblendet*/\n  display: none;\n}\n.landscape-1LGy8 .wcConfigurator-Settings-hidden-kvVds.wcConfigurator-settings-actions-isOnLastStep-BV9rP .wcConfigurator-action-1kRvz {\n  display: none;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz .wcConfigurator-action-Button-uCk2M {\n  line-height: var(--configuratorActionHeight);\n}\n.wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu,\n.portrait-ySRAg .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.wcCheckoutButtonText-AKaeu {\n  float: left;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+var BasketActionStandard = function BasketActionStandard(_ref) {
+  var _ref$buttonTextClassN = _ref.buttonTextClassName,
+    buttonTextClassName = _ref$buttonTextClassN === void 0 ? wcCheckoutButtonText : _ref$buttonTextClassN,
+    _ref$buttonPriceClass = _ref.buttonPriceClassName,
+    buttonPriceClassName = _ref$buttonPriceClass === void 0 ? wcCheckoutButtonPrice : _ref$buttonPriceClass,
+    containerClassName = _ref.containerClassName,
+    price = _ref.price;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorAction, containerClassName),
+    children: /*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorActionButton,
+      onClick: function onClick() {
+        return viewHandler.actionButtonState.onClickAddToBasket();
+      },
+      id: "wcConfigurator-action-tobasket",
+      children: [/*#__PURE__*/jsx("div", {
+        className: buttonTextClassName,
+        children: t('configurator.ADD_TO_BASKET')
+      }), !hidePrices && viewHandler.tabGroupState.curTabGroupType == 'horizontal' && price && /*#__PURE__*/jsx("div", {
+        className: buttonPriceClassName,
+        children: price
+      })]
+    })
+  });
+};
+var BasketActionStandard$1 = observer(BasketActionStandard);
+
+export { BasketActionStandard$1 as default };

package/build/esm/index-5ac47ee0.js

@@ -0,0 +1,49 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-4238b6c1.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ArticleOverview from './index-65033b70.js';
+import SVGViewer from './index-3e513751.js';
+import { 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 './index.module-649b6c6b.js';
+import './index.module-4b3372ec.js';
+import 'classnames';
+import './index.module-b691c642.js';
+import 'react-collapsible';
+import './index-257cf8c1.js';
+import './index.module-1bcb88ad.js';
+import './index-95645850.js';
+
+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 SVGAnalyser = function SVGAnalyser(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    ChildComponent: SVGViewer,
+    settings: [{
+      key: 'SVGSOURCE',
+      name: 'SVG Source'
+    }, {
+      key: 'SVGOVERVIEW',
+      name: 'SVG Übersicht'
+    }],
+    title: 'SVG Übersicht'
+  }));
+};
+var SVGAnalyzer = observer(SVGAnalyser);
+
+export { SVGAnalyzer as default };

package/build/esm/index-5bc07dea.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-4238b6c1.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-5c7a2fd3.js

@@ -0,0 +1,80 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Group from './index-f482fd5c.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import StandradGroup from './index-ed7704df.js';
+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';
+import 'classnames';
+import './index-6dbfe7e6.js';
+import 'react-collapsible';
+import './index-efc5dd21.js';
+import './index-0f663f3c.js';
+
+var container = "container-IOQq6";
+var css_248z = ".container-IOQq6 {\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var PaletteGroup = function PaletteGroup(_ref) {
+  var itemPalette = _ref.itemPalette,
+    groups = _ref.groups,
+    PaletteComponent = _ref.PaletteComponent,
+    contentInnerClassName = _ref.contentInnerClassName,
+    _ref$rowCount = _ref.rowCount,
+    rowCount = _ref$rowCount === void 0 ? 12 : _ref$rowCount;
+  var viewHandler = useViewHandler();
+  if (!viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(StandradGroup, {
+    contentInnerClassName: contentInnerClassName,
+    itemPalette: itemPalette,
+    groups: groups,
+    PaletteComponent: PaletteComponent,
+    rowCount: rowCount
+  });
+  var _useDivaCore = useDivaCore(),
+    width = _useDivaCore.state.dimensions.width;
+  var itemCount = 0;
+  if (width) while (width / rowCount < 60) {
+    rowCount = rowCount - 1;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    children: groups.map(function (group) {
+      var renderEmptyBox = false;
+      if (itemCount % rowCount === rowCount - 1 && group.items.length > 1) {
+        renderEmptyBox = true;
+        itemCount++;
+      }
+      itemCount = itemCount + group.items.length;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [renderEmptyBox && /*#__PURE__*/jsx("div", {
+          style: {
+            background: 'rgba(242, 242, 242, 0.6)',
+            width: 100 / rowCount + '%'
+          }
+        }), /*#__PURE__*/jsx(Group, {
+          PaletteComponent: PaletteComponent,
+          contentInnerClassName: contentInnerClassName,
+          paletteType: itemPalette.type,
+          group: group,
+          paletteId: itemPalette.id,
+          rowCount: rowCount
+        })]
+      });
+    })
+  });
+};
+var index = observer(PaletteGroup);
+
+export { index as default };

package/build/esm/index-5cbc24c3.js

@@ -0,0 +1,97 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import 'react';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/slicedToArray';
+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 tableOptions = "table-options-phhIL";
+var tableSpan15 = "table-span15-sSyJ4";
+var tableSpan5 = "table-span5-wqrZR";
+var tableSpan7 = "table-span7-z-JAr";
+var img = "img-RdvAq";
+var checked = "checked--oiE6";
+var unchecked = "unchecked-RbO0u";
+var optionImage = "option-image-4wxp2";
+var marginTop = "marginTop-76IgZ";
+var css_248z = ".table-options-phhIL {\n  display: flex;\n  gap: 10px;\n  text-align: left;\n  border-bottom: 1px solid black;\n  margin-bottom: 10px;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.table-options-phhIL th:hover:last-child {\n  cursor: pointer;\n}\n.table-options-phhIL:nth-last-child(-n + 2) {\n  margin-top: 12px;\n}\n\n.table-options-phhIL span {\n  flex-basis: 100%;\n}\n.table-options-phhIL .table-span10-CHfJN {\n  flex-basis: 15%;\n}\n.table-options-phhIL .table-span15-sSyJ4 {\n  flex-basis: 20%;\n  font-size: 12px;\n}\n.table-options-phhIL .table-span5-wqrZR {\n  flex-basis: 4%;\n}\n.table-options-phhIL .table-span7-z-JAr {\n  flex-basis: 7.65%;\n}\n.img-RdvAq {\n  height: 25px;\n  background-repeat: no-repeat;\n  cursor: pointer;\n  background-position: 80% 50%;\n}\n.checked--oiE6 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2224px%22 viewBox%3D%220 0 24 24%22 width%3D%2224px%22 fill%3D%22%23000000%22%3E%3Cpath d%3D%22M0 0h24v24H0V0z%22 fill%3D%22none%22%2F%3E%3Cpath d%3D%22M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.unchecked-RbO0u {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2224px%22 viewBox%3D%220 0 24 24%22 width%3D%2224px%22 fill%3D%22%23000000%22%3E%3Cpath d%3D%22M0 0h24v24H0V0z%22 fill%3D%22none%22%2F%3E%3Cpath d%3D%22M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z%22%2F%3E%3C%2Fsvg%3E\");\n}\n.option-image-4wxp2 {\n  width: 45px;\n  height: 45px;\n}\n.marginTop-76IgZ {\n  margin-top: 12px;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["tabGroupOption", "basketId"];
+var TabGroupOptions = function TabGroupOptions(_ref) {
+  var _article$getArticleOp, _ops$val, _ops$valCodex;
+  var tabGroupOption = _ref.tabGroupOption,
+    basketId = _ref.basketId;
+    _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  var article = articles === null || articles === void 0 ? void 0 : articles[basketId];
+  var ops = article === null || article === void 0 || (_article$getArticleOp = article.getArticleOptionState) === null || _article$getArticleOp === void 0 ? void 0 : _article$getArticleOp.call(article, tabGroupOption.codex);
+  var posNr = Object.values(tabGroupOption.configSteps)[0].posNr;
+  if (ops === undefined) return /*#__PURE__*/jsx(Fragment, {});
+  var image = (_ops$val = ops.val) === null || _ops$val === void 0 ? void 0 : _ops$val.image;
+  if (image) image = article === null || article === void 0 ? void 0 : article.CatalogData.getCatImageURL(image, '_low');else image = undefined;
+  var clickNavigation = /*#__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:
+            viewHandler.configuratorStructureHandler.setActStepByPosNrFromSummary(posNr);
+            viewHandler.updateConfiguratorState(true);
+            _context.next = 4;
+            return DivaUtils.Sleep(100);
+          case 4:
+            viewHandler.paletteViewHandler.scrollToConfigStepByPosNr(posNr, true);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function clickNavigation() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxs("div", {
+      onClick: clickNavigation,
+      className: tableOptions,
+      children: [/*#__PURE__*/jsxs("span", {
+        children: [/*#__PURE__*/jsx("div", {
+          children: ops.optionName + ' (' + ops.optionCodex.replace('OPT', '') + ')'
+        }), /*#__PURE__*/jsx("div", {
+          children: ops.valName + ' (' + ((_ops$valCodex = ops.valCodex) === null || _ops$valCodex === void 0 ? void 0 : _ops$valCodex.replace('OPV', '')) + ')'
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: tableSpan5,
+        children: image != undefined && /*#__PURE__*/jsx("img", {
+          src: image,
+          className: optionImage
+        })
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(tableSpan15, marginTop),
+        children: !!(ops.usedCalcPrice || ops.calcPrice) && DivaUtils.formatPrice(ops.usedCalcPrice || ops.calcPrice)
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(tableSpan5, marginTop),
+        children: ops.headerPosVariationType
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(img, tableSpan7, marginTop, ops.isDefined ? checked : unchecked)
+      })]
+    })
+  });
+};
+var TabGroupOptions$1 = observer(TabGroupOptions);
+
+export { TabGroupOptions$1 as default };

package/build/esm/index-5d2f884d.js

@@ -0,0 +1,97 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import CheckoutFormNew from './index-12ecf2dd.js';
+import ProductCenter from './index-0f8d183c.js';
+import ContentItemWrapper from './index-99f7559c.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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';
+import './index-c9d64e0f.js';
+import 'react-switch';
+import 'react-dropdown';
+import './index-2ff76317.js';
+import './index-5954f30f.js';
+import './index-431d7221.js';
+import './index-dd175f63.js';
+import './index.module-c552273c.js';
+import './index-123d0f65.js';
+import './index-ed55c94f.js';
+import './index-6c3d9700.js';
+import './index-12ef464b.js';
+import './index-b1b70073.js';
+import './index-268632aa.js';
+import '@crystaldesign/content-box';
+import './index-5bc07dea.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var arrow = "arrow-GTKSC";
+var css_248z = ".arrow-GTKSC {\n  bottom: 40px;\n  right: 8px;\n  position: absolute;\n  width: 70px;\n  height: 55px;\n  transform: rotate(90deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 26 10%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%236f6f6f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EElement 1%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_1-2%22 data-name%3D%22Ebene 1%22%3E%3Cpath class%3D%22cls-1%22 d%3D%22M10.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M.5.5l5%2C4.29L.5%2C9.5%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M20.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  z-index: 300;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["contentItemStartPos"];
+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 Product = function Product(_ref) {
+  var _viewHandler$configSt2;
+  var contentItemStartPos = _ref.contentItemStartPos,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var ref = useRef(null);
+  var onClick = function onClick() {
+    if (ref.current) {
+      var scrollTo = ref.current.getBoundingClientRect().height;
+      if (ref.current.scrollTop > 100) {
+        scrollTo = 0;
+      }
+      ref.current.scrollTo({
+        top: scrollTo,
+        behavior: 'smooth'
+      });
+    }
+  };
+  useEffect(function () {
+    if (!ref) return;
+    viewHandler.productState.setProductElement(ref.current);
+  }, [ref]);
+  useEffect(function () {
+    var _viewHandler$configSt;
+    if (!viewHandler.uiState.isLoading && (_viewHandler$configSt = viewHandler.configState.paramters) !== null && _viewHandler$configSt !== void 0 && _viewHandler$configSt.checkout) {
+      onClick();
+    }
+  }, [(_viewHandler$configSt2 = viewHandler.configState.paramters) === null || _viewHandler$configSt2 === void 0 ? void 0 : _viewHandler$configSt2.checkout, viewHandler.uiState.isLoading]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    children: [!viewHandler.uiState.isLoading && /*#__PURE__*/jsx("div", {
+      className: arrow,
+      onClick: onClick
+    }), /*#__PURE__*/jsx(ProductCenter, {
+      style: {
+        height: 'calc(100% - 40px)',
+        width: 'calc(100% - 40px)',
+        top: 0,
+        margin: '20px'
+      }
+    }), !viewHandler.uiState.isLoading && viewHandler.divaWebPlanner.getBasket() !== undefined && /*#__PURE__*/jsx(CheckoutFormNew, {}), viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId && /*#__PURE__*/jsx(ContentItemWrapper, {
+      id: viewHandler.settingsState.contentItemId,
+      startPos: contentItemStartPos
+    })]
+  }));
+};
+var Product$1 = observer(Product);
+
+export { Product$1 as default };

package/build/esm/index-5e62bb5a.js

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

package/build/esm/index-5ed0e71a.js

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