@crystaldesign/diva-web-planner-react 25.10.0-beta.31 → 25.10.0-beta.33

package/build/esm/index-de58b738.js

@@ -0,0 +1,129 @@
+import { s as styleInject, u as useViewHandler } from './index-70022076.js';
+import { observer } from 'mobx-react-lite';
+import { getLogger, useDivaCore } from '@crystaldesign/diva-core';
+import { useRef, useEffect } from 'react';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import Draggable from 'react-draggable';
+import classnames from 'classnames';
+import { jsx, 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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-epfZs";
+var mobile = "mobile-3mXgj";
+var css_248z = ".wrapper-epfZs {\n  z-index: 1000;\n  position: absolute;\n  display: flex;\n  background: white;\n  width: 450px;\n  flex-direction: column;\n  color: #4f4f4f;\n  font-size: 15px;\n  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25098);\n  border-radius: 5px;\n  top: 0;\n  margin: 4px;\n}\n\n.mobile-3mXgj {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n}\n";
+styleInject(css_248z);
+
+var LOG = getLogger('Planner', 'InfoBox');
+var ContentItemWrapper = function ContentItemWrapper(_ref) {
+  var _viewHandler$productS;
+  var id = _ref.id,
+    _ref$startPos = _ref.startPos,
+    startPos = _ref$startPos === void 0 ? 'left' : _ref$startPos,
+    noWrapper = _ref.noWrapper;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$actions = _useDivaCore.actions,
+    openSideMenu = _useDivaCore$actions.openSideMenu,
+    closeSideMenu = _useDivaCore$actions.closeSideMenu;
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    if (!id) return;
+    if (viewHandler.getIsInMobileView()) {
+      openSideMenu({
+        side: 'left',
+        onClose: function onClose() {
+          viewHandler.settingsState.setContentItemId();
+          closeSideMenu(true);
+        },
+        open: true,
+        content: /*#__PURE__*/jsx("div", {
+          className: classnames(mobile),
+          children: /*#__PURE__*/jsx(ContentItemComponent, {
+            contentItemId: id,
+            wrapperStyle: {
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%'
+            },
+            onContentItemLoaded: function onContentItemLoaded(title) {
+              LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+                id: id,
+                title: title !== null && title !== void 0 ? title : undefined
+              });
+            }
+          })
+        })
+      });
+    }
+  }, [id]);
+  if (viewHandler.getIsInMobileView()) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  if (noWrapper) {
+    return /*#__PURE__*/jsx(ContentItemComponent, {
+      contentItemId: id,
+      wrapperStyle: {
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: 'inherit'
+      },
+      onContentItemLoaded: function onContentItemLoaded(title) {
+        LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+          id: id,
+          title: title !== null && title !== void 0 ? title : undefined
+        });
+      }
+    });
+  }
+  var parentSizes = (_viewHandler$productS = viewHandler.productState.productElement) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
+  return /*#__PURE__*/jsx(Draggable, {
+    nodeRef: draggable,
+    handle: ".handle",
+    bounds: "parent",
+    defaultPosition: startPos == 'right' ? {
+      x: parentSizes !== null && parentSizes !== void 0 && parentSizes.width ? (parentSizes === null || parentSizes === void 0 ? void 0 : parentSizes.width) - 508 : 0,
+      y: 0
+    } : undefined,
+    children: /*#__PURE__*/jsx("div", {
+      ref: draggable,
+      className: wrapper,
+      style: {
+        maxHeight: parentSizes !== null && parentSizes !== void 0 && parentSizes.height && parentSizes.height < 700 + 20 ? (parentSizes === null || parentSizes === void 0 ? void 0 : parentSizes.height) - 20 : 700
+      },
+      children: /*#__PURE__*/jsx(ContentItemComponent, {
+        contentItemId: id,
+        headerClassName: 'handle',
+        headerWrapperStyle: {
+          cursor: 'move'
+        },
+        onClose: function onClose() {
+          return viewHandler.settingsState.setContentItemId();
+        },
+        onContentItemLoaded: function onContentItemLoaded(title) {
+          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+            id: id,
+            title: title !== null && title !== void 0 ? title : undefined
+          });
+        }
+      })
+    })
+  });
+};
+var ContentItemWrapper$1 = observer(ContentItemWrapper);
+
+export { ContentItemWrapper$1 as default };

package/build/esm/index-df2da22f.js

@@ -0,0 +1,61 @@
+import { s as styleInject } from './index-70022076.js';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var shelfPlannerContainerHorizontal = "shelfPlannerContainerHorizontal-zUcmv";
+var shelfPlannerContainerVertical = "shelfPlannerContainerVertical-3jwdx";
+var accessoires = "accessoires-ExU9-";
+var expanded = "expanded-qqANx";
+var shelfGrid = "shelfGrid-VM2OD";
+var shelfGridBorder = "shelfGridBorder-DyInR";
+var shelfPlannerContainerRtv = "shelfPlannerContainerRtv-OFMK-";
+var accessoireContainer = "accessoireContainer-Ht6lL";
+var selectedElement = "selectedElement-e8fZe";
+var info = "info-Kfwx2";
+var warning = "warning-1klI4";
+var configHeaderWrapper = "config-header-wrapper-ycLDr";
+var name = "name-4YnN5";
+var closeButton = "closeButton-kL18z";
+var css_248z = ".shelfPlannerContainerHorizontal-zUcmv {\n  display: flex;\n  width: 100%;\n}\n\n.shelfPlannerContainerVertical-3jwdx {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 60%;\n}\n\n.shelfPlannerContainerVertical-3jwdx .accessoires-ExU9- {\n  width: 100%;\n  height: 60%;\n}\n\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 34%;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 40%;\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerVertical-3jwdx .shelfGrid-VM2OD {\n  width: 100%;\n  height: 40%;\n  padding: 0 0;\n  margin: 10px 0;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGridBorder-DyInR {\n  border-top: solid #c7c7c7 1px;\n  /* border-bottom: solid #c7c7c7 1px; */\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n}\n.shelfPlannerContainerVertical-3jwdx .shelfGridBorder-DyInR {\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n  display: contents;\n}\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 66%;\n}\n\n.shelfPlannerContainerVertacal-rU1lK.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9-,\n.shelfPlannerContainerHorizontal-zUcmv.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9- {\n  width: 100%;\n}\n\n.row-JYcIF:first-child {\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoireContainer-Ht6lL {\n  height: 100%;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe {\n  width: 100%;\n  height: 75px;\n  margin-bottom: 5px;\n}\n\n.info-Kfwx2 {\n  height: 75px;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe img {\n  width: 100px;\n  float: left;\n  height: 75px;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.warning-1klI4 {\n  color: red;\n  padding-bottom: 1rem;\n}\n.config-header-wrapper-ycLDr {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.name-4YnN5 {\n  font-size: 18px;\n  transition: font-size 0.3s ease;\n}\n\n.closeButton-kL18z {\n  width: 50px;\n  height: 50px;\n  background: center / 35% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 0.3s ease, background-image 0.3s ease;\n}\n\n.config-header-wrapper-ycLDr:hover .closeButton-kL18z {\n  background: center / 40% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%233f3f3f%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.config-header-wrapper-ycLDr:hover .name-4YnN5 {\n  font-size: 20px;\n}\n";
+styleInject(css_248z);
+
+var index = function index(_ref) {
+  var selAccItem = _ref.selAccItem;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: selAccItem ? /*#__PURE__*/jsxs("div", {
+      className: selectedElement,
+      children: [/*#__PURE__*/jsx("img", {
+        src: selAccItem.image
+      }), /*#__PURE__*/jsxs("div", {
+        className: info,
+        children: [t('configurator.REGALPLANER_CHOOSE_SPACE_1') + ' ', /*#__PURE__*/jsx("b", {
+          dangerouslySetInnerHTML: {
+            __html: selAccItem.name
+          }
+        }), ' ' + t('configurator.REGALPLANER_CHOOSE_SPACE_2') + ' ', /*#__PURE__*/jsx("b", {
+          children: selAccItem.cellSize
+        }), t('configurator.REGALPLANER_CHOOSE_SPACE_3')]
+      })]
+    }) : /*#__PURE__*/jsxs("div", {
+      className: selectedElement,
+      children: [/*#__PURE__*/jsx("img", {
+        src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+      }), /*#__PURE__*/jsx("div", {
+        className: info,
+        children: t('configurator.REGALPLANER_CHOOSE_FIRST_ARTICLE')
+      })]
+    })
+  });
+};
+var SelectedAcc = observer(index);
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SelectedAcc
+});
+
+export { SelectedAcc as S, shelfPlannerContainerHorizontal as a, shelfPlannerContainerVertical as b, shelfGrid as c, shelfGridBorder as d, expanded as e, accessoires as f, configHeaderWrapper as g, closeButton as h, accessoireContainer as i, index$1 as j, name as n, shelfPlannerContainerRtv as s, warning as w };

package/build/esm/index-e0e64924.js

@@ -0,0 +1,142 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-70022076.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-873e6c64.js';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import ContentItemWrapper from './index-de58b738.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 };

package/build/esm/index-e18e40b4.js

@@ -0,0 +1,47 @@
+import './index-70022076.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } 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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var RotationClockwise = function RotationClockwise(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.rotation.rotClock, plannerUIProps.classes.buttonGeneral),
+    children: item.posNr
+  });
+};
+var RotationClockwise$1 = observer(RotationClockwise);
+
+export { RotationClockwise$1 as default };

package/build/esm/index-e21a8cd1.js

@@ -0,0 +1,28 @@
+import './index-70022076.js';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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';
+
+var Standard = function Standard(props) {
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+
+export { Standard as default };

package/build/esm/index-e22dd208.js

@@ -0,0 +1,113 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-70022076.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import OptionSelector from './index-f81ceec1.js';
+import LayoutSelection from './index-c8a5a692.js';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 './index.module-63ede1e1.js';
+import 'react-select';
+
+var wrapper = "wrapper-XC8ci";
+var scrollable = "scrollable-Smp2u";
+var header = "header-Jz4n0";
+var container = "container-sjWkB";
+var css_248z = ".wrapper-XC8ci {\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 5px);\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n  background-color: #fff;\n}\n.scrollable-Smp2u {\n  overflow: auto;\n  left: 50px;\n}\n.header-Jz4n0 {\n  height: 8%;\n  width: 100%;\n  padding-top: 0.7%;\n  text-align: center;\n  background-color: var(--primaryColor);\n  font-size: 30px;\n  color: white;\n  font-weight: 600;\n}\n.container-sjWkB {\n  width: calc(100% - 40px);\n  margin: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\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 CatalogMakeup = function CatalogMakeup(props) {
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    origOptions = _useState2[0],
+    setOrigOptions = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOption = _useState4[0],
+    setSelectedOptions = _useState4[1];
+  var currentOption = origOptions === null || origOptions === void 0 ? void 0 : origOptions.find(function (o) {
+    return o.codex === selectedOption;
+  });
+  useEffect(function () {
+    var set = viewHandler.divaWebPlanner.actSet();
+    var options = set === null || set === void 0 ? void 0 : set.CatalogData.getOptions();
+    if (options !== null && options !== void 0 && options.length) {
+      setOrigOptions(options);
+    }
+  }, [viewHandler.settingsState.configChanged]);
+  useEffect(function () {
+    var currentOption = origOptions === null || origOptions === void 0 ? void 0 : origOptions.find(function (o) {
+      return o.codex === selectedOption;
+    });
+    if (currentOption) {
+      naviagateToOption(currentOption);
+    }
+  }, [selectedOption]);
+  var naviagateToOption = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(option) {
+      var configStep;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            configStep = viewHandler.configuratorStructureHandler.getFirstConfigStepByOptionCodex(option.codex);
+            if (!configStep) {
+              _context.next = 7;
+              break;
+            }
+            viewHandler.configuratorStructureHandler.navigateToConfigStepByConfigStepKey(configStep === null || configStep === void 0 ? void 0 : configStep.key);
+            viewHandler.updateConfiguratorState(true);
+            _context.next = 6;
+            return DivaUtils.Sleep(100);
+          case 6:
+            viewHandler.paletteViewHandler.scrollToConfigStepByPosNr(configStep.posNr, true);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function naviagateToOption(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        children: "CatalogMakeup"
+      }), /*#__PURE__*/jsxs("div", {
+        className: container,
+        children: [/*#__PURE__*/jsx(OptionSelector, {
+          options: origOptions,
+          optionState: [selectedOption, setSelectedOptions]
+        }), currentOption && /*#__PURE__*/jsx(LayoutSelection, {
+          option: currentOption
+        }, currentOption.codex)]
+      })]
+    })
+  }));
+};
+var CatalogMakeup$1 = observer(CatalogMakeup);
+
+export { CatalogMakeup$1 as default };

package/build/esm/index-e2d8e969.js

@@ -0,0 +1,107 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-70022076.js';
+import 'react';
+import SettingsHeaderContainer from './index-0af8d243.js';
+import SettingsScroller from './index-faa45cac.js';
+import { observer } from 'mobx-react-lite';
+import { w as wcConfiguratorSettings, t as tabsHorizontal, e as expanded, S as SettingsExpanderButtons } from './index-f0a3a725.js';
+import classnames from 'classnames';
+import SettingsSwiper from './index-ea1299c2.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 './index-883a08fe.js';
+import './index-145c313f.js';
+import './index-e2e72a2e.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-e4215171.js';
+import 'react-laag';
+import './index-acb16c92.js';
+import './index-de2d4911.js';
+import 'sift';
+import './index-1cd0d623.js';
+import './index-dde023bd.js';
+import './index-3cde86ba.js';
+import './index-e6ce5e3a.js';
+import './index.module-1c96ff02.js';
+import './index-8219e9f3.js';
+import 'react-switch';
+import './index-369079bf.js';
+import './index-7f01f65c.js';
+import './index-d735ffac.js';
+import 'react-dropdown';
+import './index-7ed3edea.js';
+import './index-bed47b29.js';
+import './index-368f8491.js';
+import './index-ba8ffbfd.js';
+import '@crystaldesign/content-box';
+import './index-0f550a8a.js';
+import './index-8ff94610.js';
+import './index-f5f9210b.js';
+import './index-77f586a1.js';
+import './index-85a3ed16.js';
+import './index-0897a82d.js';
+import './index-5c14fc72.js';
+import './index-90fce2cb.js';
+import './index-9b787832.js';
+import './index-4f1173d6.js';
+import './index-3c5cee21.js';
+import './index-3ade01d6.js';
+import './index-cb9924db.js';
+import './index.module-cf239420.js';
+import './index-f9c42410.js';
+import './index-c10667ab.js';
+import './index-9ede154e.js';
+import './index-01c2ef45.js';
+import './index-c37a9693.js';
+import './index-1dd2f8be.js';
+import './index-478c10a4.js';
+import './index.module-7067ed9c.js';
+import './index-12c6dbf9.js';
+import './index-ef724b13.js';
+import './index-3d43654a.js';
+import './index-f84f5532.js';
+import './index-f847ed58.js';
+import './index-8e125814.js';
+import './index-2c987dfe.js';
+import './index-7090c93f.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-7910f434.js';
+import 'rc-slider';
+import './index-21292a8b.js';
+import './index-71260348.js';
+import './index-a0d45eac.js';
+
+var _excluded = ["className"];
+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 Settings = function Settings(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className, wcConfiguratorSettings, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? tabsHorizontal : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: viewHandler.getIsInMobileView() && viewHandler.getViewConfig().navigateMobileSwiper ? /*#__PURE__*/jsx(SettingsSwiper, {}) : /*#__PURE__*/jsxs(Fragment, {
+      children: [!viewHandler.uiState.isInMobileView && !viewHandler.settingsState.forceSettingsHeaderInScrollContainer && /*#__PURE__*/jsx(SettingsHeaderContainer, {}, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsx(SettingsScroller, {}), /*#__PURE__*/jsx(SettingsExpanderButtons, {})]
+    })
+  }));
+};
+var Settings$1 = observer(Settings);
+
+export { Settings$1 as default };