@crystaldesign/diva-web-planner-react 25.3.0-rc.8 → 25.3.0

package/build/esm/index-86eaa1b3.js

@@ -0,0 +1,102 @@
+import { s as styleInject, u as useViewHandler } from './index-e681ae39.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, 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 '@crystaldesign/widget-contact-form';
+
+var container = "container-bxM6C";
+var hidden = "hidden-X63IT";
+var mobile = "mobile--b4Sq";
+var wrapper = "wrapper-jE0i2";
+var imageItem = "image-item-2MypG";
+var sel = "sel-9mQFl";
+var css_248z = ".container-bxM6C {\n  position: absolute;\n  top: 20%;\n  right: 16px;\n  z-index: 700;\n  -webkit-tap-highlight-color: transparent;\n  width: 50px;\n  height: 100%;\n  transition: opacity 0.5s;\n}\n\n.hidden-X63IT {\n  opacity: 0;\n  z-index: 0;\n}\n\n.mobile--b4Sq.container-bxM6C {\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  bottom: 8px;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 50%;\n  border-radius: 48px;\n  height: 40px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.wrapper-jE0i2 {\n  background-color: #f2f2f2;\n  border-radius: 40px;\n  position: relative;\n  height: -moz-min-content;\n  height: min-content;\n  max-height: 60%;\n  display: flex;\n  padding-left: 7px;\n  padding-right: 7px;\n  overflow: hidden;\n}\n\n.mobile--b4Sq .wrapper-jE0i2 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: 0;\n  padding-left: initial;\n  padding-right: 0;\n  padding-right: initial;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 100%;\n  height: 32px;\n  max-height: none;\n  max-height: initial;\n  display: block;\n}\n\n.image-item-2MypG {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f8f8f8 2px;\n  display: block;\n  cursor: pointer;\n  transition: border-color 200ms ease;\n}\n\n.mobile--b4Sq .image-item-2MypG {\n  width: 28px;\n  height: 28px;\n  margin-top: 0;\n  margin-top: initial;\n  margin-bottom: 0;\n  margin-bottom: initial;\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n.sel-9mQFl.image-item-2MypG {\n  border: 2px solid #4f4f4f;\n}\n\n.image-item-2MypG:hover {\n  cursor: pointer;\n  border: solid #9d9d9d 2px;\n}\n";
+styleInject(css_248z);
+
+var PromotedOpvs = function PromotedOpvs(props) {
+  var _viewHandler$settings, _promotedOpvs$article;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    height = _useDivaCore$state$di.height,
+    width = _useDivaCore$state$di.width;
+  useEffect(function () {
+    if (viewHandler.productState.configChangedByPromoOpvs) {
+      viewHandler.productState.setConfigChangedByPromoOpvs(false);
+    } else {
+      viewHandler.productState.setSelectedPromitionIndex(undefined);
+    }
+  }, [viewHandler.settingsState.configChanged]);
+  var contents = [];
+  var catalogData = viewHandler.divaWebPlanner.getCatalogData();
+  var promotedOpvs = catalogData === null || catalogData === void 0 ? void 0 : catalogData.promotedOpvs;
+  var selectedArticleCodex = (_viewHandler$settings = viewHandler.settingsState.selectedArticles) === null || _viewHandler$settings === void 0 || (_viewHandler$settings = _viewHandler$settings[0]) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.codex;
+  if (viewHandler.uiState.isLoading || !selectedArticleCodex || !promotedOpvs) return /*#__PURE__*/jsx(Fragment, {});
+  if (!viewHandler.productState.promotionVisible || !((_promotedOpvs$article = promotedOpvs.articles[selectedArticleCodex]) !== null && _promotedOpvs$article !== void 0 && _promotedOpvs$article.length)) {
+    if (viewHandler.uiState.configSettingsIsHidden) viewHandler.uiState.onClickHideConfigSettings();
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var _loop = function _loop(i) {
+    var promo = promotedOpvs.articles[selectedArticleCodex][i];
+    var opv = catalogData.getOptionValue(promo.displayOPV);
+    contents.push({
+      swiperSlideStyle: {
+        height: 'auto',
+        width: 'auto'
+      },
+      content: /*#__PURE__*/jsx("span", {
+        onClick: function onClick(e) {
+          return viewHandler.productState.onPromotionClick(promo.variantValues, i);
+        },
+        style: {
+          backgroundImage: 'url(' + (opv !== null && opv !== void 0 && opv.image ? catalogData.getCatImageURL(opv.image, '_gal') : '') + ')'
+        },
+        className: classnames(imageItem, viewHandler.productState.selectedPromotionIndex === i ? sel : undefined)
+      }, i)
+    });
+  };
+  for (var i = 0; i < promotedOpvs.articles[selectedArticleCodex].length; i++) {
+    _loop(i);
+  }
+  var sliderProps = {
+    type: 'SliderContainer',
+    sliderType: viewHandler.uiState.isInMobileView ? 'slideX' : 'slideY',
+    slidesPerView: 'auto',
+    freeMode: true,
+    allowTouchMove: true,
+    contents: contents,
+    scrollToSelectedItem: true,
+    mousewheel: true
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(container, viewHandler.uiState.isInMobileView ? mobile : undefined, !viewHandler.uiState.configSettingsIsHidden ? hidden : undefined),
+    children: /*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: sliderProps
+          }
+        }, +height + width)
+      })
+    })
+  });
+};
+var PromotedOpvs$1 = observer(PromotedOpvs);
+
+export { PromotedOpvs$1 as default };

package/build/esm/index-8722afb7.js

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

package/build/esm/index-8753a82c.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-e681ae39.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 '@crystaldesign/widget-contact-form';
+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 IsActive = function IsActive(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/IsActive"
+  }));
+};
+
+export { IsActive as default };

package/build/esm/index-8ccb6ff1.js

@@ -0,0 +1,77 @@
+import { s as styleInject, u as useViewHandler } from './index-e681ae39.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import RoomRound from './index-dc0d61e8.js';
+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/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var roomItem = "roomItem-Uuc6r";
+var roomItemSel = "roomItem-sel-ePWgY";
+var mobile = "mobile-gsjDz";
+var roomItemContainer = "roomItem-container-3jH8Z";
+var viewItemContainer = "viewItem-container-OlPAR";
+var css_248z = "li.roomItem-Uuc6r {\n  width: 70px;\n  height: 70px;\n  background-color: #f5f5f5;\n  opacity: 0.8;\n  background-repeat: no-repeat;\n  background-position: center;\n  border-radius: 50%;\n  background-size: 65%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2235%22 viewBox%3D%220 0 42 35%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.6329 26.5973L1 33.4896V1.48962L11.6329 4.93578M11.6329 26.5973V4.93578M11.6329 26.5973H21.2532M11.6329 4.93578H41V26.5973H30.3671M21.2532 26.5973V11.8281H30.3671V26.5973M21.2532 26.5973H30.3671%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%222%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-color 0.2s ease-in-out;\n  opacity: 0.8;\n  border: 1px solid #bebec3;\n}\nli.roomItem-sel-ePWgY {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2235%22 viewBox%3D%220 0 42 35%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.6329 26.5973L1 33.4896V1.48962L11.6329 4.93578M11.6329 26.5973V4.93578M11.6329 26.5973H21.2532M11.6329 4.93578H41V26.5973H30.3671M21.2532 26.5973V11.8281H30.3671V26.5973M21.2532 26.5973H30.3671%22 stroke%3D%22white%22 stroke-width%3D%222%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #4b4b4b;\n}\n\nli.roomItem-Uuc6r:hover {\n  box-shadow: var(--boxShadowHover);\n}\n\n.mobile-gsjDz {\n  position: absolute;\n  right: 6px;\n  bottom: 6px;\n  z-index: 1000;\n}\n\nli.mobile-gsjDz.roomItem-Uuc6r {\n  width: 45px;\n  height: 45px;\n  display: block;\n}\n\n.roomItem-container-3jH8Z {\n  position: absolute;\n  bottom: 90px;\n  left: 29px;\n  z-index: 700;\n  min-width: 300px;\n  overflow-y: auto;\n  overflow-x: visible;\n  /*hide scrollbar*/\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n.roomItem-container-3jH8Z::-webkit-scrollbar {\n  display: none;\n}\n\n.viewItem-container-OlPAR {\n  position: absolute;\n  display: flex;\n  bottom: 6px;\n  left: 111px;\n  z-index: 700;\n  flex-direction: row;\n  overflow-y: visible;\n  overflow-x: auto;\n}\n\n.mobile-gsjDz.roomItem-container-3jH8Z {\n  bottom: 60px;\n  direction: rtl;\n  right: 6px;\n  left: auto;\n  left: initial;\n}\n\n.mobile-gsjDz.viewItem-container-OlPAR {\n  right: 55px;\n  left: auto;\n  left: initial;\n  bottom: 6px;\n}\n";
+styleInject(css_248z);
+
+var RoomListSelection = function RoomListSelection(props) {
+  var _viewHandler$productS;
+  var viewHandler = useViewHandler();
+  var rooms = viewHandler.paletteViewHandler.getRoomList();
+  var views = viewHandler.paletteViewHandler.getRoomViewList();
+  if (!viewHandler.uiState.ViewConfig.roomListInProduct || !viewHandler.settingsState.roomListInitialized || !viewHandler.productState.doShowRenderImage && !viewHandler.productState.doShow3DComb || viewHandler.settingsState.infoBoxContent || viewHandler.uiState.isMobileLandscape) return /*#__PURE__*/jsx(Fragment, {});
+  var divSize = (_viewHandler$productS = viewHandler.productState.planner3DImageSvgArea) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", {
+      "data-test-id": "room-list-selection",
+      className: classnames(roomItem, viewHandler.productState.roomListExpanded ? roomItemSel : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      onClick: function onClick() {
+        viewHandler.productState.setRoomListExpanded(!viewHandler.productState.roomListExpanded);
+      }
+    }), viewHandler.productState.roomListExpanded && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        "data-test-id": "room-selection-expanded",
+        id: "views-selection-expanded",
+        style: {
+          maxHeight: 'calc(' + (divSize === null || divSize === void 0 ? void 0 : divSize.height) + 'px - 80px)'
+        },
+        className: classnames(roomItemContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
+        children: rooms.map(function (item, index) {
+          return /*#__PURE__*/jsx(RoomRound, {
+            item: item,
+            from: viewHandler.settingsState.roomListInitialized
+          }, item.toString());
+        })
+      }), /*#__PURE__*/jsx("div", {
+        id: "rooms-selection-expanded",
+        style: {
+          maxWidth: 'calc(' + (divSize === null || divSize === void 0 ? void 0 : divSize.width) + 'px - 100px)'
+        },
+        className: classnames(viewItemContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
+        children: views.map(function (item, index) {
+          return /*#__PURE__*/jsx(RoomRound, {
+            item: item,
+            from: viewHandler.settingsState.roomListInitialized,
+            isVP: true
+          }, item.toString());
+        })
+      })]
+    })]
+  });
+};
+var index = observer(RoomListSelection);
+
+export { index as default };

package/build/esm/index-8d579adc.js

@@ -0,0 +1,69 @@
+import { s as styleInject, u as useViewHandler } from './index-e681ae39.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { DivaUtils } from '@crystaldesign/diva-core';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var priceWrapper = "price-wrapper-MHpbZ";
+var right = "right-YJreA";
+var additionalPrice = "additional-price-JRJRa";
+var css_248z = ".price-wrapper-MHpbZ {\n  padding-top: 0px;\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.right-YJreA {\n  float: right;\n}\n.additional-price-JRJRa {\n  max-width: 400px;\n  margin: 0;\n  margin: initial;\n  display: inline;\n}\n";
+styleInject(css_248z);
+
+var Price = function Price() {
+  var _articles$viewHandler, _prices$BasePrices;
+  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]];
+  var prices = article === null || article === void 0 ? void 0 : article.getConfigPriceData(article.getVariantBasketData());
+  if (prices === undefined) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: priceWrapper,
+    children: [/*#__PURE__*/jsx("a", {
+      children: "Configurations Preise:"
+    }), /*#__PURE__*/jsx("br", {}), prices.AdditionalPrices.map(function (AdditionalPrice) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("p", {
+          className: additionalPrice,
+          children: AdditionalPrice.Title
+        }), /*#__PURE__*/jsx("a", {
+          className: right,
+          children: DivaUtils.formatPrice(AdditionalPrice.Price)
+        }), /*#__PURE__*/jsx("br", {})]
+      });
+    }), /*#__PURE__*/jsx("hr", {}), (_prices$BasePrices = prices.BasePrices) === null || _prices$BasePrices === void 0 ? void 0 : _prices$BasePrices.map(function (p) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("a", {
+          children: ["Basispreis: ", p.BasePriceTitle]
+        }), /*#__PURE__*/jsx("a", {
+          className: right,
+          children: p.BasePrice ? DivaUtils.formatPrice(p.BasePrice) : 'nicht Definiert'
+        }), /*#__PURE__*/jsx("br", {})]
+      });
+    }), /*#__PURE__*/jsx("hr", {}), /*#__PURE__*/jsx("a", {
+      children: "Berechneter Preis: "
+    }), /*#__PURE__*/jsx("a", {
+      className: right,
+      children: DivaUtils.formatPrice(article.calcPrice())
+    }), /*#__PURE__*/jsx("hr", {}), article.hasPartlistArticle && /*#__PURE__*/jsx(Fragment, {
+      children: "Katalog hat St\xFCcklisten Artikel! genaue Preise sind dort Sichtbar"
+    })]
+  });
+};
+var Price$1 = observer(Price);
+
+export { Price$1 as default };

package/build/esm/index-8ec98486.js

@@ -0,0 +1,41 @@
+import { s as styleInject, u as useViewHandler } from './index-e681ae39.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx, 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 '@crystaldesign/widget-contact-form';
+
+var logo = "logo-h99KB";
+var mobile = "mobile-W86xf";
+var hidden = "hidden-uMA1f";
+var notHidden = "not-hidden-88ft-";
+var landscape = "landscape-gPEyU";
+var css_248z = ".logo-h99KB {\n  right: 0px;\n  bottom: 0px;\n  position: absolute;\n  z-index: 600;\n  opacity: 1;\n  max-width: 30%;\n  max-height: 64px;\n  margin-bottom: 16px;\n  margin-right: 20px;\n}\n\n.mobile-W86xf {\n  right: auto;\n  right: initial;\n  left: 0px;\n  bottom: 36px;\n  margin-bottom: 10px;\n  margin-right: 0;\n  margin-right: initial;\n  margin-left: 20px;\n  max-height: 50px;\n}\n\n.hidden-uMA1f {\n  opacity: 0;\n}\n\n.not-hidden-88ft- {\n  transition: opacity 0.5s;\n}\n\n.landscape-gPEyU.logo-h99KB {\n  opacity: 0;\n}\n";
+styleInject(css_248z);
+
+var Logo = function Logo(props) {
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    logoUrl = _useDivaCore.state.organization.logoUrl;
+  if (!viewHandler.uiState.isInMobileView && !viewHandler.uiState.ViewConfig.showLogoInProductDesktop || !viewHandler.uiState.ViewConfig.showLogoInProduct || !logoUrl) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("img", {
+    className: classnames(logo, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.productState.orbitHidden ? notHidden : hidden, viewHandler.uiState.isMobileLandscape ? landscape : undefined),
+    src: logoUrl
+  });
+};
+var Logo$1 = observer(Logo);
+
+export { Logo$1 as default };

package/build/esm/index-8fa6b327.js

@@ -0,0 +1,114 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-e681ae39.js';
+import { useState, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import Collapsible from 'react-collapsible';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-0eee2d6b.js';
+import PricePreview from './index-3674ff94.js';
+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/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper--ib5A";
+var wcGroupedContainer = "wcGroupedContainer-PIV-1";
+var wcPaletteHeader = "wcPaletteHeader-743rE";
+var wcSizeGroupHeader = "wcSizeGroupHeader-qNjZR";
+var wcGroupHeaderTitle = "wcGroupHeaderTitle-vGDWm";
+var wcFoldingArrow = "wcFoldingArrow-Ta8kT";
+var wcGroupOpen = "wcGroupOpen-oAf0q";
+var css_248z = ".wrapper--ib5A {\n  width: 100%;\n}\n\n.wcConfigurator-settings-Jey-L .wcGroupedContainer-PIV-1 {\n  transition: all 0.35s ease;\n  box-sizing: content-box;\n  overflow: visible;\n  display: inline-block;\n  width: 100%;\n}\n\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR {\n  width: 98%;\n  height: 34px;\n  border-bottom: 1px solid #dfdfdf;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  margin-left: 1%;\n  margin-right: 1%;\n  align-items: center;\n}\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR:hover {\n  z-index: 200;\n}\n\n.wcGroupHeaderTitle-vGDWm {\n  font-size: 17.6px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-text-stroke: 0.4px;\n  width: calc(100% - 32px);\n  padding-top: 6px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n}\n\n.wcGroupHeaderTitle-vGDWm:hover {\n  z-index: 200;\n}\n\n.wcPaletteHeader-743rE .wcFoldingArrow-Ta8kT {\n  margin: 0px 6px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%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;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n}\n\n.wcGroupOpen-oAf0q .wcPaletteHeader-743rE .wcFoldingArrow-Ta8kT {\n  transform: rotateZ(180deg);\n}\n";
+styleInject(css_248z);
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    PaletteComponent = _ref.PaletteComponent,
+    itemPalette = _ref.itemPalette,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useState = useState(group.isFolded),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentHidden = _useState2[0],
+    setContentHidden = _useState2[1];
+  var _useState3 = useState(!group.isFolded),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  useEffect(function () {
+    if (!isOpen && !group.isFolded) {
+      setTimeout(function () {
+        return setIsOpen(!group.isFolded);
+      }, 400);
+    } else {
+      setIsOpen(!group.isFolded);
+    }
+    if (!contentHidden && group.isFolded) {
+      setTimeout(function () {
+        return setContentHidden(group.isFolded);
+      }, 200);
+    } else {
+      setContentHidden(group.isFolded);
+    }
+  }, [group.isFolded]);
+  var name = group.name !== 'none' ? group.name : t('configurator.other');
+  var title = name + (group.parentName && group.parentName != itemPalette.name ? ' (' + group.parentName + ')' : '');
+  var pricePreviewPromise = group.items[0].pricePreviewPromise;
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    id: title,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      className: wcGroupedContainer,
+      open: isOpen,
+      contentInnerClassName: contentInnerClassName,
+      handleTriggerClick: function handleTriggerClick() {
+        if (group.isFolded) viewHandler.settingsState.openGroup(itemPalette.id, group.key, viewHandler.paletteViewHandler.isGroupFolded(itemPalette.id));else {
+          viewHandler.settingsState.closeGroup(itemPalette.id, group.key);
+        }
+      },
+      triggerOpenedClassName: wcGroupOpen,
+      trigger: /*#__PURE__*/jsxs("div", {
+        className: classnames(wcPaletteHeader, wcSizeGroupHeader),
+        children: [/*#__PURE__*/jsx("div", {
+          className: wcFoldingArrow
+        }), group.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+          item: group,
+          style: {
+            zIndex: 100,
+            margin: '0px 10px',
+            position: 'relative'
+          }
+        }, group.key), /*#__PURE__*/jsxs("div", {
+          className: wcGroupHeaderTitle,
+          children: [title, pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+            asyncPricePreview: pricePreviewPromise
+          })]
+        })]
+      }),
+      easing: "ease",
+      children: !contentHidden && group.items.map(function (item, i) {
+        return /*#__PURE__*/jsx(PaletteComponent, {
+          paletteType: itemPalette.type,
+          paletteId: itemPalette.id,
+          item: item,
+          hidePricePreview: true
+        }, i);
+      })
+    })
+  }, title);
+};
+var Group$1 = observer(Group);
+
+export { Group$1 as default };

package/build/esm/index-91ba7a95.js

@@ -0,0 +1,100 @@
+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-e681ae39.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';
+import '@crystaldesign/widget-contact-form';
+
+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', '')) + ')'
+        }), !!ops.freeText && /*#__PURE__*/jsx("div", {
+          children: ops.freeText
+        })]
+      }), /*#__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 };