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

package/build/esm/index-246d2364.js

@@ -0,0 +1,142 @@
+import { s as styleInject, u as useViewHandler } from './index-299c4e58.js';
+import { useEffect } from 'react';
+import Settings from './index-d0e3750e.js';
+import TabGroup from './index-29c92a58.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-c985ffa7.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import './index-5825b025.js';
+import './index-a94b75c6.js';
+import './index-fb22d3f8.js';
+import './index-ed0f0c33.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-532fa2a1.js';
+import 'react-laag';
+import './index-1ff7d081.js';
+import './index-c3b7883a.js';
+import './index-39e11b6d.js';
+import 'sift';
+import './index-a138da1c.js';
+import './index-e7a184a8.js';
+import './index-57cac0c7.js';
+import './index-5bc3e5e6.js';
+import './index.module-d020c1e9.js';
+import './index-43b4013b.js';
+import 'react-switch';
+import './index-83f4237d.js';
+import './index-564930df.js';
+import './index-38d34428.js';
+import 'react-dropdown';
+import './index-e9c975f5.js';
+import './index-bdc8341e.js';
+import './index-b841086e.js';
+import './index-f4921a13.js';
+import '@crystaldesign/content-box';
+import './index-d2a625db.js';
+import './index-4100b283.js';
+import './index-0e25fb62.js';
+import './index-cc23a6e6.js';
+import './index-746b1b59.js';
+import './index-f7322ea2.js';
+import './index-3c974e00.js';
+import './index-513081ca.js';
+import './index-8a0cdcf7.js';
+import './index-0459028f.js';
+import './index-eb909757.js';
+import './index-37ed0b48.js';
+import './index-fa62f47e.js';
+import './index-a596098d.js';
+import './index-b202d06b.js';
+import './index-e8167b80.js';
+import './index.module-9fba66d7.js';
+import './index-2af2fd77.js';
+import './index-31bf0b50.js';
+import './index-117983f3.js';
+import './index-fafb9909.js';
+import './index-806d449d.js';
+import './index-1a12cce7.js';
+import './index-fc20559b.js';
+import './index.module-cf457608.js';
+import './index-8833a1ab.js';
+import './index-4e2883f3.js';
+import './index-523b82b9.js';
+import './index-5886b03e.js';
+import './index-04a7f7ac.js';
+import './index-383af318.js';
+import './index-3fa38eef.js';
+import './index-94276511.js';
+
+var wcConfigurator = "wcConfigurator-IeI91";
+var wcConfiguratorSteps = "wc-configurator-steps-yPThi";
+var wcConfiguratorSettings = "wc-configurator-Settings-3U39-";
+var tabSearchClass = "tab-search-class-qJEaW";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-IeI91 {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n\n  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n}\n\n.wcConfigurator-IeI91 *,\n.wcConfigurator-IeI91 *::before,\n.wcConfigurator-IeI91 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-yPThi {\n  border-radius: 8px 0 0 8px;\n  overflow: hidden;\n  width: 350px;\n  position: relative;\n}\n\n.wc-configurator-Settings-3U39- {\n  width: calc(100% - 350px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n\n.tab-search-class-qJEaW {\n  background-color: #0d3040;\n  padding: 12px 16px;\n  position: relative;\n  display: flex;\n}\n\n.tab-search-class-qJEaW input {\n  outline: medium none invert !important;\n  outline: initial !important;\n}\n\n.tab-search-class-qJEaW input {\n  color: #fff;\n  width: 100%;\n  background-color: #0d3040;\n  font-size: 14px;\n  border: 0px solid;\n}\n\n.tab-search-class-qJEaW div {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%23eee%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 75%;\n  width: 16px;\n  height: 16px;\n  transition: all 0.15s ease;\n  margin: 0px 3px;\n  border-radius: var(--globalBorderRadius);\n  cursor: pointer;\n}\n\n.tab-search-class-qJEaW div:hover {\n  background-size: 100%;\n}\n";
+styleInject(css_248z);
+
+var Classification = function Classification(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: wcConfigurator,
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps,
+        tabSearchClass: tabSearchClass
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+    })
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#455864',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#f4f4f4',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--primaryColor)',
+  '--foldArrowMarginRight': '16px',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)'
+};
+var index = observer(Classification);
+
+export { index as default };

package/build/esm/index-25f5b441.js

@@ -0,0 +1,130 @@
+import { s as styleInject, u as useViewHandler } from './index-299c4e58.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Group from './index-de743ca7.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import StandradGroup from './index-aff35bf9.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import './index-39e11b6d.js';
+import 'sift';
+import './index-a138da1c.js';
+import './index-a94b75c6.js';
+import './index-e7a184a8.js';
+import './index-57cac0c7.js';
+import './index-5bc3e5e6.js';
+import './index.module-d020c1e9.js';
+import './index-43b4013b.js';
+import 'react-switch';
+import './index-83f4237d.js';
+import './index-564930df.js';
+import './index-38d34428.js';
+import 'react-dropdown';
+import './index-e9c975f5.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-bdc8341e.js';
+import './index-b841086e.js';
+import './index-f4921a13.js';
+import '@crystaldesign/content-box';
+import './index-d2a625db.js';
+import './index-4100b283.js';
+import './index-0e25fb62.js';
+import './index-cc23a6e6.js';
+import './index-746b1b59.js';
+import './index-f7322ea2.js';
+import 'react-laag';
+import './index-3c974e00.js';
+import './index-513081ca.js';
+import './index-8a0cdcf7.js';
+import './index-0459028f.js';
+import './index-eb909757.js';
+import './index-37ed0b48.js';
+import './index-fa62f47e.js';
+import './index-a596098d.js';
+import './index-b202d06b.js';
+import './index-e8167b80.js';
+import './index.module-9fba66d7.js';
+import './index-2af2fd77.js';
+import './index-31bf0b50.js';
+import './index-117983f3.js';
+import './index-fafb9909.js';
+import './index-806d449d.js';
+import './index-1a12cce7.js';
+import './index-fc20559b.js';
+import './index.module-cf457608.js';
+import './index-8833a1ab.js';
+import './index-4e2883f3.js';
+import './index-e3d44ed0.js';
+import 'react-collapsible';
+
+var container = "container-IOQq6";
+var css_248z = ".container-IOQq6 {\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var PaletteGroup = function PaletteGroup(_ref) {
+  var itemPalette = _ref.itemPalette,
+    groups = _ref.groups,
+    PaletteComponent = _ref.PaletteComponent,
+    contentInnerClassName = _ref.contentInnerClassName,
+    _ref$rowCount = _ref.rowCount,
+    rowCount = _ref$rowCount === void 0 ? 12 : _ref$rowCount;
+  var viewHandler = useViewHandler();
+  if (!viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(StandradGroup, {
+    contentInnerClassName: contentInnerClassName,
+    itemPalette: itemPalette,
+    groups: groups,
+    PaletteComponent: PaletteComponent,
+    rowCount: rowCount
+  });
+  var _useDivaCore = useDivaCore(),
+    width = _useDivaCore.state.dimensions.width;
+  var itemCount = 0;
+  if (width) while (width / rowCount < 60) {
+    rowCount = rowCount - 1;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    children: groups.map(function (group) {
+      var renderEmptyBox = false;
+      if (itemCount % rowCount === rowCount - 1 && group.items.length > 1) {
+        renderEmptyBox = true;
+        itemCount++;
+      }
+      itemCount = itemCount + group.items.length;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [renderEmptyBox && /*#__PURE__*/jsx("div", {
+          style: {
+            background: 'rgba(242, 242, 242, 0.6)',
+            width: 100 / rowCount + '%'
+          }
+        }), /*#__PURE__*/jsx(Group, {
+          PaletteComponent: PaletteComponent,
+          contentInnerClassName: contentInnerClassName,
+          paletteType: itemPalette.type,
+          group: group,
+          paletteId: itemPalette.id,
+          rowCount: rowCount
+        })]
+      });
+    })
+  });
+};
+var index = observer(PaletteGroup);
+
+export { index as default };

package/build/esm/index-26646c76.js

@@ -0,0 +1,142 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-299c4e58.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-369ea236.js';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import ContentItemWrapper from './index-241cf893.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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+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 };