@crystaldesign/diva-web-planner-react 25.3.0-beta.9 → 25.3.0-rc.1

package/build/esm/index-ec6c02f9.js

@@ -0,0 +1,33 @@
+import { s as styleInject } from './index-76cd82f8.js';
+import 'react';
+import OrbitInteractionStandard from './index-4c56260b.js';
+import { 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 '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+import 'react-3d-cube-interaction';
+import 'classnames';
+
+var orbitInteractionContainer = "orbit-interaction-container-jxGAx";
+var css_248z = ".orbit-interaction-container-jxGAx {\n  position: absolute;\n  bottom: 20px;\n  right: 70px;\n  z-index: 350;\n}\n";
+styleInject(css_248z);
+
+var OrbitInteractionFree = function OrbitInteractionFree(props) {
+  return /*#__PURE__*/jsx(OrbitInteractionStandard, {
+    orbitInteractionContainerClass: orbitInteractionContainer
+  });
+};
+
+export { OrbitInteractionFree as default };

package/build/esm/index-ee5caefd.js

@@ -0,0 +1,125 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-76cd82f8.js';
+import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import MetaData from './index-29e5d86f.js';
+import GenericToolTip from './index-707fae03.js';
+import PricePreview from './index-ce6de83a.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 accItem = "AccItem-EuKUQ";
+var wcSize = "wcSize-vX0Fm";
+var wcSizeNormal = "wcSize-normal-bRIEC";
+var wcImage = "wcImage-ScJeM";
+var wcAccInfoContainer = "wcAccInfoContainer-eEHqy";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Wlfnh";
+var metaData = "meta-data-p5e7t";
+var wcAccSize = "wcAccSize-LdKs3";
+var css_248z = "/* Accessoires*/\n\n.AccItem-EuKUQ {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n}\n\n.AccItem-EuKUQ:hover {\n  z-index: 200;\n}\n\n.AccItem-EuKUQ .wcSize-vX0Fm {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n}\n\n.AccItem-EuKUQ .wcSize-normal-bRIEC {\n  height: 80px;\n}\n\n.AccItem-EuKUQ .wcImagePlaceHolder-t26mm {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.AccItem-EuKUQ .wcSize-normal-bRIEC .wcImage-ScJeM {\n  height: 80px;\n}\n\n.AccItem-EuKUQ .wcImage-ScJeM {\n  width: 80px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.wcAccInfoContainer-eEHqy {\n  float: left;\n  width: calc(100% - 80px);\n  position: relative;\n  height: 100%;\n}\n.AccItem-EuKUQ .wcAccInfoContainer-eEHqy {\n  width: calc(100% - 150px);\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - 12px);\n  justify-content: space-between;\n}\n\n.AccItem-EuKUQ .wcConfigurator-settings-title-Wlfnh {\n  display: -webkit-box;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  margin-top: 14px;\n  max-width: 100%;\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}\n\n.AccItem-EuKUQ .wcConfigurator-settings-title-Wlfnh.meta-data-p5e7t {\n  -webkit-line-clamp: 1;\n}\n\n.AccItem-EuKUQ .wcAccSize-LdKs3 {\n  display: -webkit-box;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  width: 100%;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 110;\n}\n@media all and (max-width: 1100px) {\n  .AccItem-EuKUQ .wcSize-normal-bRIEC {\n    height: 80px;\n  }\n\n  .AccItem-EuKUQ .wcSize-normal-bRIEC img {\n    height: 80px;\n  }\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 ShelfAccessoires = function ShelfAccessoires(_ref) {
+  var _renderLayer;
+  var item = _ref.item,
+    grids = _ref.grids;
+  var viewHandler = useViewHandler();
+  var i18n = useTranslation();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    hidePrices = _useDivaCore$state.hidePrices,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnShelfAccessorie(grids, item.articleCodex, undefined, true);
+    },
+    className: accItem
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcAccInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible !== '' ? metaData : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.name
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.articleCodex), /*#__PURE__*/jsx("div", {
+          className: classnames(wcAccSize),
+          children: DivaUtils.sizeFormatter({
+            width: item.width,
+            height: item.height,
+            depth: item.depth
+          }, i18n)
+        })]
+      })]
+    }), !hidePrices && !!item.price && /*#__PURE__*/jsx(PricePreview, {
+      price: item.price,
+      style: {
+        paddingTop: 6
+      }
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.name,
+      desciption: metaDataVisible,
+      image: item.image,
+      codex: item.articleCodex,
+      layerProps: layerProps
+    }, item.articleCodex)))]
+  }));
+};
+var ShelfAccessoiresOld = observer(ShelfAccessoires);
+
+export { ShelfAccessoiresOld as default };

package/build/esm/index-ee872bb7.js

@@ -0,0 +1,139 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-76cd82f8.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import ProductHeaderFunction from './index-a5f09c05.js';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import ContentItemWrapper from './index-8034911a.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var wrapper = "wrapper-y4VmL";
+var wcConfiguratorProductHeader = "wcConfiguratorProductHeader-W1oWZ";
+var portrait = "portrait-Otsjq";
+var expanded = "expanded-rNRc-";
+var functionWrapper = "functionWrapper-3sgkI";
+var landscape = "landscape-TuCY-";
+var contentBoxWrapper = "content-box-wrapper-KgSZb";
+var maxExpanded = "max-Expanded-4m94C";
+var textbackground = "textbackground-F3b8W";
+var wcPriceinfo = "wcPriceinfo-Zmaer";
+var wcFormattedprice = "wcFormattedprice-sdLxf";
+var wcFormattedBruttoPrice = "wc-formatted-brutto-price-MDFl1";
+var fullscreen = "fullscreen-94axf";
+var room = "room-NxmMf";
+var css_248z = "/* Productdaten */\n\n.wrapper-y4VmL {\n  display: flex;\n  flex-direction: row;\n  height: 70px;\n  z-index: 112;\n  transition:\n    width 0.2s ease-in-out,\n    opacity 0.5s ease-in-out;\n  opacity: 1;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.wcConfiguratorProductHeader-W1oWZ {\n  flex-basis: 50%;\n  justify-self: flex-start;\n  z-index: 300;\n  margin: 16px 0 16px 16px;\n  pointer-events: none;\n}\n.portrait-Otsjq .wcConfiguratorProductHeader-W1oWZ {\n  margin: 12px 0 16px 16px;\n}\n\n.expanded-rNRc- .wcConfiguratorProductHeader-W1oWZ {\n  flex-basis: 100%;\n}\n.functionWrapper-3sgkI {\n  flex-basis: 50%;\n}\n\n.functionWrapper-3sgkI {\n  flex-basis: 100%;\n  position: relative;\n  z-index: 112;\n  margin: 16px;\n}\n.portrait-Otsjq .functionWrapper-3sgkI {\n  margin: 6px 12px;\n}\n\n.landscape-TuCY- .functionWrapper-3sgkI {\n  margin: 8px 12px 0px 0px;\n}\n\n.content-box-wrapper-KgSZb {\n  z-index: 112;\n}\n\n.expanded-rNRc-.wrapper-y4VmL {\n  width: calc(55% - 40px - 24px);\n}\n\n.max-Expanded-4m94C.wrapper-y4VmL,\n.settings-Foldedup-HM7JT.wrapper-y4VmL {\n  opacity: 0;\n}\n\n.wrapper-y4VmL h1 {\n  font-weight: 300;\n  font-size: 24px;\n  line-height: 27.2px;\n  text-transform: uppercase;\n  letter-spacing: 0.2px;\n  color: var(--secondaryColor);\n  margin: 0 0 10px;\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  white-space: nowrap;\n\n  border-radius: 100px;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.textbackground-F3b8W {\n  border-radius: 0px 0px 12px 0px;\n  padding: 0px 12px 6px 16px;\n  position: absolute;\n  width: -moz-fit-content;\n  width: fit-content;\n  white-space: nowrap;\n  left: 0px;\n}\n\n.portrait-Otsjq .textbackground-F3b8W {\n  margin-top: 5px;\n\n  background-color: transparent;\n}\n\n.expanded-rNRc-.wrapper-y4VmL h1 {\n  max-width: 300px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.wcPriceinfo-Zmaer {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  font-weight: 300;\n  -webkit-text-stroke: 0.4px;\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.wcFormattedprice-sdLxf {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  -webkit-text-stroke: 0.4px;\n  margin: 0px;\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.wc-formatted-brutto-price-MDFl1 {\n  position: relative;\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  -webkit-text-stroke: 0.4px;\n  margin: 0px 10px;\n}\n\n.wc-formatted-brutto-price-MDFl1:before {\n  position: absolute;\n  content: '';\n  left: 0;\n  top: 50%;\n  right: 0;\n  border-top: 1px solid;\n  border-color: inherit;\n\n  transform: rotate(5deg);\n}\n\n.landscape-TuCY-.wrapper-y4VmL {\n  margin-left: 2rem;\n  width: calc(100% - 1rem);\n  height: 54.4px;\n}\n\n.fullscreen-94axf.landscape-TuCY-.wrapper-y4VmL {\n  left: 50px;\n  top: 0px;\n  margin-left: 0.5rem;\n  margin-top: 4px;\n  width: calc(100% - 1rem);\n  height: 24.4px;\n}\n\n.landscape-TuCY- h1 {\n  margin: 0px;\n  margin-top: 14.4px;\n  font-size: 22.4px;\n  line-height: 18px;\n  width: 67%;\n}\n.landscape-TuCY- h2 {\n  margin: 0;\n  margin: initial;\n  font-weight: 100;\n  width: 67%;\n  line-height: 0.65;\n  -webkit-text-stroke: 0.3px;\n}\n.landscape-TuCY- .wcPriceinfo-Zmaer {\n  font-size: 15.6px;\n}\n\n.landscape-TuCY- .wcFormattedprice-sdLxf {\n  font-size: 15.6px;\n}\n\n.portrait-Otsjq.wrapper-y4VmL {\n  height: 54.4px;\n  width: calc(100% - 4px);\n}\n\n.portrait-Otsjq h1 {\n  margin: 0px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.portrait-Otsjq.room-NxmMf h1,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf h1 {\n  color: var(--secondaryColor);\n  text-shadow: 3px 4px 15px #000000;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n}\n\n.portrait-Otsjq.room-NxmMf .wcPriceinfo-Zmaer,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf .wcPriceinfo-Zmaer,\n.portrait-Otsjq.room-NxmMf .wcFormattedprice-sdLxf,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf .wcFormattedprice-sdLxf {\n  color: white;\n}\n\n.portrait-Otsjq h2 {\n  margin: 0;\n  margin: initial;\n  font-weight: 100;\n  width: 67%;\n  line-height: 0.65;\n}\n";
+styleInject(css_248z);
+
+var ProductHeader = function ProductHeader(_ref) {
+  var hidePrice = _ref.hidePrice,
+    productClass = _ref.productClass;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    hidePrices = _useDivaCore$state.hidePrices,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var headerContentBoxProps = viewHandler.getViewConfig().productHeaderContentBox;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dimOnlyForOneArticle = _useState4[0],
+    setDimOnlyForOneArticle = _useState4[1];
+  var hideWebConfiguratorTitle = viewHandler.getViewConfig().hideWebConfiguratorTitle || viewHandler.getViewConfig().hideWebConfiguratorTitleInMobile && viewHandler.getIsInMobileView();
+  useEffect(function () {
+    var _viewHandler$productS;
+    if (isMobile && !isTablet || !viewHandler.divaWebPlanner.actSet()) return;
+    (_viewHandler$productS = viewHandler.productState.customDimensions) === null || _viewHandler$productS === void 0 || _viewHandler$productS.then(function (res) {
+      setDimensions(res);
+      var dict = res.reduce(function (basketIdsDict, d) {
+        if (!basketIdsDict[d.dimensionId]) {
+          basketIdsDict[d.dimensionId] = [d.dimension];
+        } else if (!basketIdsDict[d.dimensionId].includes(d.dimension)) basketIdsDict[d.dimensionId].push(d.dimension);
+        return basketIdsDict;
+      }, {});
+      setDimOnlyForOneArticle(!Object.values(dict).find(function (v) {
+        return v.length > 1;
+      }));
+    });
+  }, [viewHandler.divaWebPlanner.actSet(), viewHandler.settingsState.configChanged]);
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, productClass, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, viewHandler.productState.plannerRenderingIsStaticBG ? room : undefined, fullscreen),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorProductHeader,
+      "data-test-id": "configProductHeader",
+      children: [!hideWebConfiguratorTitle && /*#__PURE__*/jsx("h1", {
+        "data-test-id": "productHeaderTitle",
+        children: viewHandler.productState.webConifguratorTitle
+      }), /*#__PURE__*/jsxs("div", {
+        className: textbackground,
+        children: [!hidePrices && !hidePrice && /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsxs("span", {
+            className: wcPriceinfo,
+            "data-test-id": "productHeaderPriceInfo",
+            children: [' ', t('configurator.PRICE_INFO')]
+          }), /*#__PURE__*/jsxs("span", {
+            className: wcFormattedprice,
+            "data-test-id": "productHeaderFormattedPrice",
+            children: [' ', viewHandler.productState.formatedCurSetPrice]
+          }), viewHandler.productState.formatedBruttoPrice && !viewHandler.getViewConfig().hideRabattPrice && /*#__PURE__*/jsxs("span", {
+            className: wcFormattedBruttoPrice,
+            "data-test-id": "productHeaderFormattedBruttoPrice",
+            children: [' ', viewHandler.productState.formatedBruttoPrice]
+          })]
+        }), !!(dimensions !== null && dimensions !== void 0 && dimensions.length) && dimensions.map(function (dimension) {
+          var _dimension$text, _dimension$dimension;
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsxs("span", {
+              className: wcPriceinfo,
+              children: [(_dimension$text = dimension.text) !== null && _dimension$text !== void 0 ? _dimension$text : t('configurator.headerdimension.' + dimension.dimensionId), ' ', !dimOnlyForOneArticle && '(' + dimension.posNrs.join(',') + ')', ":", ' ']
+            }), /*#__PURE__*/jsxs("span", {
+              className: wcFormattedprice,
+              children: [(_dimension$dimension = dimension.dimension) !== null && _dimension$dimension !== void 0 ? _dimension$dimension : 0, " ", dimension.unit]
+            })]
+          });
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: functionWrapper,
+      children: /*#__PURE__*/jsx(ProductHeaderFunction, {})
+    }), !viewHandler.uiState.isMobileLandscape && viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
+      className: contentBoxWrapper,
+      children: /*#__PURE__*/jsx(ContentItemWrapper, {
+        noWrapper: true,
+        id: viewHandler.productState.currentBanner.contentItemId
+      })
+    }), headerContentBoxProps && !viewHandler.uiState.isMobileLandscape && !viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
+      className: contentBoxWrapper,
+      children: /*#__PURE__*/jsx(ContentBoxComponent, {
+        settings: {
+          contentBoxProps: headerContentBoxProps
+        }
+      })
+    })]
+  });
+};
+var ProductHeader$1 = observer(ProductHeader);
+
+export { ProductHeader$1 as default };

package/build/esm/index-f001ce9d.js

@@ -0,0 +1,54 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-76cd82f8.js';
+import { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import ItemVariant from './index-8e997092.js';
+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/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 TabGroupHorizontal = function TabGroupHorizontal(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    if (!viewHandler.tabGroupState.curTabGroup) return;
+    var curTabGroup = viewHandler.tabGroupState.tabGroupItems.get(viewHandler.tabGroupState.curTabGroup.key);
+    if (!viewHandler.tabGroupState.tabGroupScroller || !curTabGroup) return;
+    var offsetToRight = viewHandler.tabGroupState.tabGroupScroller.getBoundingClientRect().width / 100 * 20; //  das Active Div soll 20% in der Breite nach links positioniert sein
+    var actDivPos = curTabGroup.getBoundingClientRect().left - viewHandler.tabGroupState.tabGroupScroller.getBoundingClientRect().left; //     dies ist die Position des activen Divs relative dazu wie gerade gescrollt ist
+    var actScrollVal = viewHandler.tabGroupState.tabGroupScroller.scrollLeft; //           soweit ist aktuell gescrollt
+
+    var toScrollLeft = actDivPos - (viewHandler.uiState.isInMobileView ? 0 : offsetToRight) + actScrollVal;
+    viewHandler.tabGroupState.tabGroupScroller.scrollTo({
+      left: toScrollLeft,
+      top: 0,
+      behavior: 'smooth'
+    });
+  }, [viewHandler.tabGroupState.curTabGroup]);
+  if (!viewHandler.tabGroupState.allTabGroups) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Object.entries(viewHandler.tabGroupState.allTabGroups).map(function (_ref) {
+      var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        tabGroup = _ref2[1];
+      return /*#__PURE__*/jsx(ItemVariant, {
+        tabGroup: tabGroup,
+        width: 'calc(' + ((_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState) === null || _viewHandler$tabGroup2 === void 0 || (_viewHandler$tabGroup2 = _viewHandler$tabGroup2.tabGroupScroller) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.getBoundingClientRect().width) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0) + 'px / ' + Object.entries(viewHandler.tabGroupState.allTabGroups).length + ')'
+      }, key);
+    })
+  });
+};
+var TabGroupHorizontal$1 = observer(TabGroupHorizontal);
+
+export { TabGroupHorizontal$1 as default };

package/build/esm/index-f27a1dbb.js

@@ -0,0 +1,105 @@
+import { s as styleInject, u as useViewHandler } from './index-76cd82f8.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ToolContainer from './index-af33028d.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-508d0f92.js';
+import './index.module-25d415db.js';
+import './index-d63df353.js';
+import './index-da654659.js';
+import 'classnames';
+import './index-63bdfe89.js';
+import 'react-collapsible';
+import './index-d1f714a3.js';
+import './index-7ebd338d.js';
+import './index.module-e5103385.js';
+import 'react-json-view-lite';
+import './react-json-viewer-851e3413.js';
+import './index-1ef6e82d.js';
+import './index.module-67f77ec2.js';
+import './index-484ae4b5.js';
+import 'jsoneditor';
+import './index-45e2b02a.js';
+import './index-fd5c3751.js';
+import './index-0d61343b.js';
+import './index-ce1b22d8.js';
+import './index-764aad91.js';
+import './index.module-3553b297.js';
+import './index-ba1aa3fd.js';
+import './index-e0909ac8.js';
+import './index-6a1d1e4b.js';
+import './index-47069f58.js';
+import 'react-dropdown';
+import './index.module-1e7010f1.js';
+import './index-dcfa534d.js';
+import './index-402c107a.js';
+import './index-412d8f42.js';
+import './DecisionVizualizer-71292314.js';
+import './index-10b901c7.js';
+import './index-01541b53.js';
+import './index-952aba1a.js';
+import './index-0f36c5be.js';
+import './index-2487f0f9.js';
+import './index-08cbd4a6.js';
+import 'react-switch';
+import './CatalogProperties-f4606aa4.js';
+import './ArticleProperties-942b7be8.js';
+import './OptionProperties-080cd4e7.js';
+import './OptionValueProperties-1f97a4b1.js';
+import 'react-select';
+
+var container = "container-43rJg";
+var item = "item-JRY9h";
+var css_248z = ".container-43rJg {\n  display: flex;\n  height: 42px;\n  gap: 12px;\n  justify-content: space-around;\n  overflow: auto;\n  align-items: center;\n  background-color: #f3f3f3;\n}\n\n.item-JRY9h {\n  cursor: pointer;\n  min-width: 80px;\n  padding-left: 12px;\n  padding-right: 12px;\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+var Toolbar = function Toolbar(props) {
+  var _viewHandler$divaWebP, _viewHandler$divaWebP2;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    wwsClient = _useDivaCore.state.organization.settings.wwsClient;
+  var changeVal = function changeVal(newValue) {
+    var value = newValue === viewHandler.uiState.activeCatalogSection ? '3D/2D' : newValue;
+    localStorage.setItem('lastWindow', value);
+    viewHandler.uiState.setActiveCatalogSection(value);
+  };
+  var partlistsExist = !!Object.values((_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP2 === void 0 ? void 0 : _viewHandler$divaWebP2.CatalogData.allCatalogArticles) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {}).find(function (a) {
+    return a.partlistArticlesRules;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [viewHandler.uiState.activeCatalogSection != '3D/2D' && /*#__PURE__*/jsx(ToolContainer, {}), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [partlistsExist && /*#__PURE__*/jsx("div", {
+        className: item,
+        onClick: function onClick() {
+          return changeVal('PartList');
+        },
+        children: "St\xFCckliste"
+      }), wwsClient == 'Pfister' && /*#__PURE__*/jsx("div", {
+        className: item,
+        onClick: function onClick() {
+          return changeVal('ekText');
+        },
+        children: "Ek Text"
+      })]
+    })]
+  });
+};
+var Toolbar$1 = observer(Toolbar);
+
+export { Toolbar$1 as default };

package/build/esm/index-f2a06fa6.js

@@ -0,0 +1,65 @@
+import { s as styleInject, u as useViewHandler } from './index-76cd82f8.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { 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';
+import '@crystaldesign/widget-contact-form';
+
+var paletteItem = "PaletteItem-jutHc";
+var imageWrapper = "imageWrapper--38qX";
+var sel = "sel-wpwWJ";
+var imageBackground = "imageBackground-qOQQh";
+var wcImage = "wcImage-e8f7s";
+var title = "title-63pJt";
+var textHover = "textHover-nhN12";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-jutHc {\n  border-radius: var(--globalBorderRadius);\n  margin: calc(var(--itemsMargin) - 0.1rem);\n  position: relative;\n  float: left;\n  width: 96px;\n  height: 96px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-jutHc:active {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-jutHc:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.imageWrapper--38qX {\n  border-radius: 50%;\n  border: 1px transparent solid;\n  width: 94px;\n  height: 94px;\n  transition: 0.15s ease;\n  border-style: double;\n}\n.imageWrapper--38qX:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n}\n.sel-wpwWJ .imageWrapper--38qX:hover,\n.small-bg43M.sel-wpwWJ .imageWrapper--38qX:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n}\n.sel-wpwWJ .imageWrapper--38qX,\n.small-bg43M.sel-wpwWJ .imageWrapper--38qX {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.imageBackground-qOQQh {\n  border-radius: 50%;\n  border: 4px white solid;\n  width: 86px;\n  height: 86px;\n  transition: 0.15s ease;\n  background-color: #c2c2c2;\n}\n\n.sel-wpwWJ .imageBackground-qOQQh,\n.imageWrapper--38qX:hover {\n  background-color: #404040;\n}\n\n.sel-wpwWJ .imageBackground-qOQQh {\n  border: 4px var(--primaryColor) solid;\n}\n\n.wcImage-e8f7s {\n  width: 100%;\n  height: 86px;\n  border-radius: 50%;\n  background-size: cover;\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.sel-wpwWJ .wcImage-e8f7s,\n.small-bg43M.sel-wpwWJ .wcImage-e8f7s,\n.imageWrapper--38qX:hover .wcImage-e8f7s {\n  opacity: 0.5;\n}\n\n.title-63pJt {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n  line-height: 96px;\n  display: none;\n  position: absolute;\n  top: 0;\n  z-index: 400;\n  color: #fff;\n  font-weight: 600;\n}\n\n.imageWrapper--38qX:hover .title-63pJt,\n.textHover-nhN12,\n.sel-wpwWJ .title-63pJt {\n  display: block;\n}\n\n@media all and (max-width: 1800px) {\n  .PaletteItem-jutHc {\n    width: 81px;\n    height: 81px;\n  }\n  .imageWrapper--38qX {\n    width: 79px;\n    height: 79px;\n  }\n  .imageBackground-qOQQh {\n    width: 71px;\n    height: 71px;\n  }\n  .wcImage-e8f7s {\n    height: 71px;\n  }\n  .title-63pJt {\n    line-height: 81px;\n    font-size: 12px;\n  }\n}\n";
+styleInject(css_248z);
+
+var Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? sel : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        className: classnames(imageWrapper),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(imageBackground),
+          children: /*#__PURE__*/jsx("div", {
+            className: wcImage,
+            style: {
+              backgroundImage: "url(".concat(item.url, ")")
+            }
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(title, !item.url ? textHover : undefined),
+          children: t('configurator.' + item.N)
+        })]
+      })
+    })
+  });
+};
+var RoomSerious = observer(Room);
+
+export { RoomSerious as default };

package/build/esm/index-f46d21cc.js

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