@crystaldesign/diva-web-planner-react 26.6.6 → 26.6.7

package/build/esm/index-6341445a.js

@@ -0,0 +1,50 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-17d0180a.js';
+import PriceSumm from './index-1ee4eaec.js';
+import classnames from 'classnames';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index.module-8f6a57d9.js';
+
+var container = "container-jfAym";
+var backOverwrite = "back-overwrite--AJgH";
+var forthOverwrite = "forth-overwrite-l0e3R";
+var actionNavigationClass = "action-navigation-class-jX4Hl";
+var css_248z = ".container-jfAym .back-overwrite--AJgH,\n.container-jfAym .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.container-jfAym .back-overwrite--AJgH,\n.container-jfAym .forth-overwrite-l0e3R {\n  cursor: pointer;\n  width: 50%;\n  flex-grow: 1;\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: classnames(viewHandler.getIsInMobileView() ? actionNavigationClass : undefined, container),
+      showBackButtonText: true,
+      forthOverwrite: forthOverwrite,
+      backOverwrite: backOverwrite
+    })]
+  }));
+};
+var index = observer(ActionNavigationRalph);
+
+export { index as default };

package/build/esm/index-63d75fa2.js

@@ -0,0 +1,106 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import MultiToggleSwitch from './index-72d71409.js';
+import classnames from 'classnames';
+import InfoIcon from './index-f78afc73.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var row = "row-F7HtB";
+var colum = "colum-t-N58";
+var title = "title-d5AfW";
+var toggle = "toggle-oIMCS";
+var css_248z = ".wrapper-Ec98j {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-bottom: 24px;\n}\n.multi-toggle-wrapper-RNQU4 {\n  width: calc(100% - 64px);\n  padding: 8px 32px;\n}\n\n.row-F7HtB {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 4px;\n  margin-bottom: 10px;\n  gap: 12px;\n}\n.colum-t-N58 {\n  width: 70%;\n}\n.colum-t-N58:first-child {\n  width: 30%;\n  margin: 10px 0px;\n  position: relative;\n  display: flex;\n  gap: 8px;\n}\n\n.colum-toggle-name-AfLOD {\n  flex-grow: 1;\n  height: 58px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  min-width: 33%;\n}\n\n.title-d5AfW {\n  text-align: left;\n  margin-left: 0;\n  margin-left: initial;\n  cursor: pointer;\n}\n\n.toggle-oIMCS {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
+styleInject(css_248z);
+
+var MultiToggleComponent = function MultiToggleComponent(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    style = _ref.style,
+    round = _ref.round,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggleValues = _useState4[0],
+    setToggleValues = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    curIndex = _useState6[0],
+    setCurIndex = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    allEndWithCM = _useState8[0],
+    setAllEndWithCM = _useState8[1];
+  useEffect(function () {
+    var itemList = item.groups.flatMap(function (group) {
+      return group.items;
+    });
+    var allEndWithCM = itemList.every(function (i) {
+      return i.text.endsWith('cm');
+    });
+    setItems(itemList);
+    setAllEndWithCM(allEndWithCM);
+    setToggleValues(itemList.map(function (i) {
+      return allEndWithCM ? i.text.replace('cm', '') : i.text;
+    }));
+    setCurIndex(itemList.findIndex(function (i) {
+      return i.sel;
+    }));
+  }, [item]);
+  var onChangeValue = function onChangeValue(index) {
+    setCurIndex(index);
+    var item = items[index];
+    if (item) viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(colum, title),
+      children: [item.name + (allEndWithCM ? ' (cm)' : ''), ((_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement[0].contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+        item: item.selectedElements[0],
+        style: {
+          position: 'relative'
+        }
+      }, item.selectedElements[0].codex)]
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(colum, toggle),
+      children: /*#__PURE__*/jsx(MultiToggleSwitch, {
+        items: items,
+        values: toggleValues,
+        state: [curIndex, onChangeValue],
+        round: round
+      })
+    })]
+  });
+};
+var MultiToggle = observer(MultiToggleComponent);
+
+export { MultiToggle as default };

package/build/esm/index-644e2e45.js

@@ -0,0 +1,62 @@
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import IsActive from './index-8a501200.js';
+import InfoIcon from './index-f78afc73.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var articleItem = "article-item-560hu";
+var wcSize = "wcSize-NqLig";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Tn0PY";
+var wcImage = "wcImage-ui7-N";
+var css_248z = "/*Planner*/\n\n.article-item-560hu {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  float: left;\n}\n\n.article-item-560hu:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n.article-item-560hu:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.article-item-560hu:hover {\n  z-index: 200;\n}\n\n.article-item-560hu .wcSize-NqLig {\n  width: 100%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.article-item-560hu .wcConfigurator-settings-title-Tn0PY {\n  float: left;\n  margin-top: 11.2px;\n  margin-left: 11.2px;\n  max-width: calc(100% - 72px);\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.article-item-560hu .wcImage-ui7-N {\n  width: 60px;\n  height: 60px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.article-item-560hu .wcConfigurator-settings-title-Tn0PY:hover {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  background: #fff;\n}\n";
+styleInject(css_248z);
+
+var PlannerSwitch = function PlannerSwitch(_ref) {
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(articleItem),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickOnPlannerElementSwitch(item);
+    },
+    children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+      item: item
+    }, item.articleCodex), /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        },
+        title: item.title
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorSettingsTitle),
+        children: item.title
+      })]
+    })]
+  });
+};
+var PlannerSwitch$1 = observer(PlannerSwitch);
+
+export { PlannerSwitch$1 as default };

package/build/esm/index-645843c4.js

@@ -0,0 +1,86 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import React, { Suspense } from 'react';
+import Planner2DGrid from './index-04223be5.js';
+import Planner3DImage from './index-dd0c0b50.js';
+import PlannerAIRoom from './index-57001ba2.js';
+import { w as wcConfiguratorProductCenter, p as portrait, l as landscape, i as inGridVisible, f as fullscreen, a as wcConfiguratorArticleImage, c as center } from './index.module-518abc81.js';
+import classnames from 'classnames';
+import Planner3DGrid from './index-bfc5a2d2.js';
+import PlannerMsgContainer from './index-5087ec54.js';
+import PlannerUIVariant from './index-d4c74336.js';
+import RotateInfo from './index-c3bcb3ac.js';
+import OrbitInteraction from './index-7e0b25a4.js';
+import MobileNavIcons from './index-a51d5d5b.js';
+import Logo from './index-d25c1faf.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-a9fd060e.js';
+import 'swiper/react';
+import 'swiper/modules';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-33341010.js';
+import 'react-laag';
+import './index-ee669dff.js';
+import 'react-qr-code';
+import './index-5b581fa5.js';
+import './index-19d87026.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 Planner3D = /*#__PURE__*/React.lazy(function () {
+  return import('./index-4e03e181.js');
+});
+var PlannerRTV = /*#__PURE__*/React.lazy(function () {
+  return import('./index-6ac072e6.js');
+});
+var ProductCenter = function ProductCenter(_ref) {
+  var style = _ref.style;
+  var viewHandler = useViewHandler();
+  var allowOrbitCube = !viewHandler.uiState.ViewConfig.dontShowOrbitInMobile || !viewHandler.getIsInMobileView();
+  return /*#__PURE__*/jsxs("div", {
+    style: _objectSpread(_objectSpread({}, style), viewHandler.productState.isARIframeVisible ? {
+      zIndex: 1000000
+    } : {}),
+    className: classnames(wcConfiguratorProductCenter, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.productState.doShowGrid ? inGridVisible : undefined, fullscreen),
+    onMouseDown: function onMouseDown() {
+      if (viewHandler.productState.roomListExpanded) viewHandler.productState.setRoomListExpanded(false);
+    },
+    onTouchStart: function onTouchStart() {
+      if (viewHandler.productState.roomListExpanded) viewHandler.productState.setRoomListExpanded(false);
+    },
+    children: [/*#__PURE__*/jsx(PlannerMsgContainer, {}), /*#__PURE__*/jsx(Planner3DImage, {}), /*#__PURE__*/jsx(Logo, {}), viewHandler.productState.allow3DComb && /*#__PURE__*/jsx(Suspense, {
+      fallback: /*#__PURE__*/jsx(Fragment, {}),
+      children: /*#__PURE__*/jsx(Planner3D, {})
+    }), /*#__PURE__*/jsx(Planner3DGrid, {}), (viewHandler.productState.allowRTV || viewHandler.productState.allowQRCodeAR) && /*#__PURE__*/jsx(Suspense, {
+      fallback: /*#__PURE__*/jsx(Fragment, {}),
+      children: /*#__PURE__*/jsx(PlannerRTV, {})
+    }), allowOrbitCube && /*#__PURE__*/jsx(OrbitInteraction, {}), /*#__PURE__*/jsx(Planner2DGrid, {}), /*#__PURE__*/jsx(PlannerAIRoom, {}), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(MobileNavIcons, {}), /*#__PURE__*/jsx(RotateInfo, {}), !viewHandler.productState.hidePlannerUiIcons && !(viewHandler.productState.doShowRTV || viewHandler.productState.doShow3DComb) && /*#__PURE__*/jsx(PlannerUIVariant, {}), viewHandler.productState.plannerMode == 'No' && /*#__PURE__*/jsx("div", {
+      className: wcConfiguratorArticleImage,
+      children: viewHandler.productState.articleImage && /*#__PURE__*/jsx("img", {
+        src: viewHandler.productState.articleImage,
+        className: center
+      })
+    })]
+  });
+};
+var ProductCenter$1 = observer(ProductCenter);
+
+export { ProductCenter$1 as default };

package/build/esm/index-654b9d98.js

@@ -0,0 +1,109 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler, e as evalVisible, _ as _onClickCheckout, I as Icon, b as PriceCounter } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { c as checkoutButton } from './index.module-8f6a57d9.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wcConfiguratorAction = "wcConfigurator-action-1kRvz";
+var wcConfiguratorActionButton = "wcConfigurator-action-Button-uCk2M";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-S5Uqm";
+var wcCheckoutButtonText = "wcCheckoutButtonText-AKaeu";
+var bruttoPrice = "brutto-price-yaDwF";
+var canceled = "canceled-J6Faa";
+var hidden = "hidden-sa4Pc";
+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  display: flex;\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: 20.8px;\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  display: flex;\n  justify-content: center;\n  align-items: center;\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.wcConfigurator-action-Button-uCk2M:hover {\n  background-color: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n  cursor: pointer;\n  transition:\n    box-shadow 0.3s ease,\n    background-color 0.3s ease,\n    border-color 0.3s ease;\n\n  box-shadow: 0px 1px 4px #707070;\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\n.brutto-price-yaDwF {\n  float: right;\n  position: relative;\n  margin-right: 20px;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  min-width: 64px;\n  text-align: right;\n  font-weight: 300;\n}\n\n.brutto-price-yaDwF.canceled-J6Faa {\n  color: #eee;\n  opacity: 1;\n  transition:\n    opacity 0.3s ease-in-out,\n    max-width 0.3s ease-in-out;\n  max-width: 110px;\n}\n.brutto-price-yaDwF.canceled-J6Faa.hidden-sa4Pc {\n  opacity: 0;\n  max-width: 0px;\n}\n\n.brutto-price-yaDwF.canceled-J6Faa:before {\n  position: absolute;\n  content: '';\n  left: -6px;\n  top: 44%;\n  right: 0;\n  border-top: 2px solid;\n  border-color: grey;\n  transform: rotate(-7deg);\n}\n\n.is-mobile-Zx3zd .brutto-price-yaDwF.canceled-J6Faa:before {\n  top: 45%;\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 BasketActionStandard = function BasketActionStandard(_ref) {
+  var _viewHandler$uiState$, _viewHandler$uiState$2, _viewHandler$productS, _viewHandler$productS2;
+  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,
+    showCheckoutButtons = _ref.showCheckoutButtons;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var addToBasketButton = (_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.find(function (b) {
+    return b.type === 'ADD_TO_BASKET';
+  });
+  var onClick = function onClick() {
+    if (addToBasketButton) {
+      _onClickCheckout(addToBasketButton, viewHandler, addToBasketButton.index, t);
+    } else {
+      viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wcConfiguratorAction, containerClassName),
+    children: [showCheckoutButtons && ((_viewHandler$uiState$2 = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.buttons.filter(function (b) {
+      return evalVisible(b, viewHandler, 'navigator');
+    }).map(function (b) {
+      return /*#__PURE__*/jsx("div", {
+        className: checkoutButton,
+        onClick: function onClick() {
+          return _onClickCheckout(b, viewHandler, b.index, t);
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          checkoutButton: _objectSpread(_objectSpread({}, b), {}, {
+            isPrimary: false
+          }),
+          size: 32
+        })
+      }, b.index);
+    })), /*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorActionButton,
+      onClick: onClick,
+      id: "wcConfigurator-action-tobasket",
+      children: [addToBasketButton ? /*#__PURE__*/jsx(Icon, {
+        checkoutButton: _objectSpread({
+          isPrimary: true
+        }, addToBasketButton),
+        size: 40
+      }) : /*#__PURE__*/jsx("div", {
+        className: buttonTextClassName,
+        children: t('configurator.ADD_TO_BASKET')
+      }), !hidePrices && price !== undefined && viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(bruttoPrice, canceled, !viewHandler.productState.formatedBruttoPrice ? hidden : undefined),
+          children: /*#__PURE__*/jsx(PriceCounter, {
+            price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: buttonPriceClassName,
+          children: /*#__PURE__*/jsx(PriceCounter, {
+            price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0
+          })
+        })]
+      })]
+    })]
+  });
+};
+var BasketAction = observer(BasketActionStandard);
+
+export { BasketAction as default };

package/build/esm/index-68c5580d.js

@@ -0,0 +1,54 @@
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { t as tabgroupWrapper, a as tablet, m as mobile, b as tabgroupTitle, o as optionWrapper, O as OptionItem } from './index-00c9113e.js';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-f78afc73.js';
+import './index-b7a79f8e.js';
+
+var Summary = function Summary(_ref) {
+  var itemP = _ref.item;
+  var viewHandler = useViewHandler();
+  var item = itemP;
+  if (!item.isTabGroup) return /*#__PURE__*/jsx(Fragment, {});
+  if (item.isTabGroup) {
+    var _item$summaryItems;
+    return /*#__PURE__*/jsxs("div", {
+      className: classnames(tabgroupWrapper, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      children: [/*#__PURE__*/jsx("div", {
+        className: tabgroupTitle,
+        children: item.title
+      }), /*#__PURE__*/jsx("div", {
+        className: optionWrapper,
+        children: Object.values((_item$summaryItems = item.summaryItems) !== null && _item$summaryItems !== void 0 ? _item$summaryItems : {}).map(function (option, index) {
+          return /*#__PURE__*/jsx(OptionItem, {
+            option: option
+          }, index);
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+var index = observer(Summary);
+
+export { index as default };