@crystaldesign/diva-web-planner-react 26.4.0-beta.33 → 26.4.0-beta.34

package/build/esm/index-61d15cf0.js

@@ -0,0 +1,87 @@
+import { s as styleInject, u as useViewHandler } from './index-e88e8992.js';
+import 'react';
+import Dropdown from 'react-dropdown';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import Arrow from './index-2fd11ca9.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wcColorFilterItem = "wcColorFilterItem-xQqck";
+var mobile = "mobile-LQxjP";
+var tablet = "tablet-IHhtG";
+var dropdownRoot = "Dropdown-root-BjRjC";
+var dropdownControl = "Dropdown-control-8aQx0";
+var wrapper = "wrapper-T-b-1";
+var css_248z = ".wcColorFilterItem-xQqck {\n  width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  display: block;\n  float: left;\n  margin-top: 1px;\n  margin-right: 6px;\n  font-size: 14px;\n  color: #333;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .wcColorFilterItem-xQqck {\n  font-size: 12px;\n}\n\n.Dropdown-root-BjRjC {\n  float: right;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n  width: 140px;\n  min-width: 100px;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .Dropdown-root-BjRjC {\n  width: 120px;\n}\n\n.Dropdown-control-8aQx0 {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 12px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n\n.wrapper-T-b-1 .Dropdown-root {\n  position: relative;\n}\n\n.wrapper-T-b-1 .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 2px 24px 2px 10px;\n  transition: all 200ms ease;\n  background-color: #fff;\n  border-radius: var(--globalBorderRadius);\n  font-size: 14px;\n}\n\n.mobile-LQxjP .Dropdown-control {\n  font-size: 12px;\n}\n\n.tablet-IHhtG .Dropdown-control {\n  font-size: 15px;\n}\n\n.wrapper-T-b-1 .Dropdown-control:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n}\n\n.wrapper-T-b-1 .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 8px;\n  top: 7px;\n  width: 0;\n}\n\n.wrapper-T-b-1 .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n.wrapper-T-b-1 .Dropdown-menu {\n  background-color: white;\n  box-sizing: border-box;\n  margin-top: -1px;\n  border: 1px solid #ddd;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n.wrapper-T-b-1 .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n.wrapper-T-b-1 .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:hover {\n  background-color: #f2f9fc;\n}\n\n.wrapper-T-b-1 .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n.wrapper-T-b-1 .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
+styleInject(css_248z);
+
+var RalDropdownFilter = function RalDropdownFilter(_ref) {
+  var _viewHandler$settings;
+  var visibleColorItems = _ref.visibleColorItems,
+    _ref$dropdownRootClas = _ref.dropdownRootClass,
+    dropdownRootClass = _ref$dropdownRootClas === void 0 ? dropdownRoot : _ref$dropdownRootClas,
+    deleteCurValue = _ref.deleteCurValue,
+    id = _ref.id;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  var dropDownValues = visibleColorItems.map(function (item) {
+    return {
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          className: wcColorFilterItem,
+          style: {
+            backgroundColor: item.rgb
+          }
+        }), " ", t('configurator.' + item.text)]
+      }),
+      text: item.text,
+      value: item.text
+    };
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
+    "data-test-id": "ral-dropdown",
+    children: /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRootClass),
+      controlClassName: dropdownControl,
+      options: dropDownValues,
+      value: actValue,
+      onChange: function onChange(val) {
+        return viewHandler.paletteViewHandler.onSelectFilter(id, val.value, 'RAL');
+      },
+      placeholder: t('configurator.colors'),
+      arrowClosed: /*#__PURE__*/jsx(Arrow, {
+        onClick: deleteCurValue,
+        open: false,
+        iconAsDelete: !!actValue
+      }),
+      arrowOpen: /*#__PURE__*/jsx(Arrow, {
+        onClick: deleteCurValue,
+        open: true,
+        iconAsDelete: !!actValue
+      })
+    })
+  });
+};
+
+export { RalDropdownFilter as default };

package/build/esm/index-63739bdf.js

@@ -0,0 +1,159 @@
+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-e88e8992.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import StepInfo from './index-8d6e13ad.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var paletteItem = "palette-item-F-QYy";
+var wcTextBox = "wcTextBox-lKT8X";
+var headerTitle = "headerTitle-RuXs-";
+var css_248z = ".palette-item-F-QYy {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.palette-item-F-QYy > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.palette-item-F-QYy input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.palette-item-F-QYy input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
+styleInject(css_248z);
+
+var NumberBox = function NumberBox(_ref) {
+  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var throttleRef = useRef(null);
+  var viewHandler = useViewHandler();
+  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    userInFocus = _useState2[0],
+    setUserInFocus = _useState2[1];
+  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var isDefined = true;
+  if (itemPalette) {
+    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
+    if (step) isDefined = step.configStep.isDefined;
+  }
+  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target$value;
+      var value;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
+            if (!e.target.value.endsWith('.')) {
+              _context.next = 4;
+              break;
+            }
+            setValue(e.target.value);
+            return _context.abrupt("return");
+          case 4:
+            value = value.replace(/[^0-9.,]/g, '');
+            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');
+
+            //delay logic update for 500ms
+            if (throttleRef.current) clearTimeout(throttleRef.current);
+            throttleRef.current = setTimeout(function () {
+              return updateLogic(value);
+            }, 500);
+            setValue(value);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var updateLogic = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!itemPalette) {
+              _context2.next = 3;
+              break;
+            }
+            _context2.next = 3;
+            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateLogic(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var _itemPalette$selected2, _itemPalette$selected3;
+    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
+  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      if (itemPalette) itemPalette.htmlRef = _ref4;
+    },
+    style: {
+      display: 'block'
+    },
+    children: [itemPalette && /*#__PURE__*/jsx("div", {
+      className: headerTitle,
+      children: itemPalette.name
+    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
+      stepInfo: itemPalette.info
+    }), /*#__PURE__*/jsx("div", {
+      className: paletteItem,
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          margin: '5px'
+        },
+        children: /*#__PURE__*/jsx("input", {
+          onBlur: function onBlur() {
+            setUserInFocus(false);
+          },
+          onFocus: function onFocus() {
+            var _itemPalette$info2;
+            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
+          },
+          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
+          lang: "en-150",
+          className: wcTextBox,
+          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
+          onChange: handleChange,
+          step: "0.01",
+          onKeyDown: function onKeyDown(e) {
+            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
+              e.preventDefault();
+            }
+          },
+          value: value,
+          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
+        })
+      })
+    })]
+  });
+};
+var NumberBox$1 = observer(NumberBox);
+
+export { NumberBox$1 as default };

package/build/esm/index-650e39ee.js

@@ -0,0 +1,56 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-e88e8992.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+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 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-8LcgO";
+var icon = "icon-TWMmb";
+var visible = "visible-RvpD0";
+var tablet = "tablet-XGdK1";
+var css_248z = ".wrapper-8LcgO {\n  position: absolute;\n  transform: translateZ(0);\n  bottom: 12px;\n  right: 12px;\n  width: 42px;\n  height: 42px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--diva-theme-palette-primary-main);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 12000;\n  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  transition:\n    opacity 1.5s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: none;\n}\n\n.wrapper-8LcgO:hover {\n  scale: 0.8;\n}\n\n.wrapper-8LcgO:focus {\n  scale: 0.9;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.icon-TWMmb {\n  width: 20px;\n  height: 20px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.visible-RvpD0 {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.vaul-dragging .wrapper-8LcgO {\n  opacity: 0;\n  transition:\n    opacity 0s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.tablet-XGdK1 {\n  bottom: 16px;\n  right: 16px;\n  width: 52px;\n  height: 52px;\n}\n\n.tablet-XGdK1 .icon-TWMmb {\n  width: 26px;\n  height: 26px;\n}\n";
+styleInject(css_248z);
+
+var NavForwardButton = function NavForwardButton(props) {
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  useEffect(function () {
+    setTimeout(function () {
+      setIsVisible(!viewHandler.actionButtonState.isOnLastStep && !viewHandler.actionButtonState.isOnFirstStepDisabled);
+    }, 400);
+  }, [viewHandler.actionButtonState.isOnLastStep, viewHandler.actionButtonState.isOnFirstStepDisabled]);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, isVisible && visible, viewHandler.uiState.isTablet ? tablet : undefined),
+    onClick: function onClick() {
+      window.lastNavigationType = 'SETTINGS_SWIPER_FORWARD_BUTTON';
+      viewHandler.actionButtonState.onClickConfiguratorSettingsForth();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: icon
+    })
+  });
+};
+var NavForwardButton$1 = observer(NavForwardButton);
+
+export { NavForwardButton$1 as default };

package/build/esm/index-656ad03e.js

@@ -0,0 +1,167 @@
+import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-e88e8992.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import Functions from './index-2aacfdba.js';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { u as useCustomDimensions } from './useCustomDimensions-98389e48.js';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import { jsxs, 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 'react-switch';
+import 'react-countup';
+import './index-7198835a.js';
+
+var wrapper = "wrapper-y4VmL";
+var wcConfiguratorProductHeader = "wcConfiguratorProductHeader-W1oWZ";
+var expanded = "expanded-rNRc-";
+var functionWrapper = "functionWrapper-3sgkI";
+var portrait = "portrait-Otsjq";
+var landscape = "landscape-TuCY-";
+var contentBoxWrapper = "content-box-wrapper-KgSZb";
+var maxExpanded = "max-Expanded-4m94C";
+var textbackground = "textbackground-F3b8W";
+var wcPriceinfoContainer = "wcPriceinfoContainer-bH9C-";
+var wcFormattedPrice = "wc-formatted-price--PHbM";
+var wcFormattedBruttoPrice = "wc-formatted-brutto-price-MDFl1";
+var dimensions = "dimensions-wxroF";
+var rabattVisible = "rabatt-visible-vvkfB";
+var tablet = "tablet-n1n5E";
+var fullscreen = "fullscreen-94axf";
+var sideMenuButton = "side-menu-button-NA9Lt";
+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: 8px 0 0px 8px;\n  pointer-events: none;\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  letter-spacing: 0.2px;\n  color: var(--secondaryColor);\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.textbackground-F3b8W {\n  border-radius: 0px 0px 12px 0px;\n  padding: 0px 12px 6px 8px;\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  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.wcPriceinfoContainer-bH9C- {\n  display: flex;\n  flex-direction: column;\n}\n\n.wcPriceinfo-Zmaer {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n\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.wrapper-y4VmL h1,\n.wc-formatted-price--PHbM,\n.wc-formatted-brutto-price-MDFl1,\n.dimensions-wxroF {\n  margin: 0px;\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: -moz-fit-content;\n  width: fit-content;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.wc-formatted-price--PHbM {\n  color: var(--secondaryColor);\n  font-size: 16px;\n  font-size: var(--priceInfoFontSize, 16px);\n  -webkit-text-stroke: 0.4px;\n  font-weight: 700;\n  transition: color 0.3s ease-in-out;\n}\n.rabatt-visible-vvkfB .wc-formatted-price--PHbM {\n  color: rgb(220, 38, 38);\n}\n\n.wc-formatted-brutto-price-MDFl1 {\n  color: rgb(113, 113, 122);\n  font-size: 14px;\n  -webkit-text-stroke: 0.4px;\n  text-decoration: line-through;\n  height: 0px;\n  overflow: hidden;\n  opacity: 0;\n  transition:\n    height 0.3s ease-in-out,\n    opacity 0.3s ease-in-out;\n}\n\n.rabatt-visible-vvkfB .wc-formatted-brutto-price-MDFl1 {\n  height: 12px;\n  opacity: 1;\n}\n\n.dimensions-wxroF {\n  font-size: 16px;\n  color: var(--secondaryColor);\n  font-weight: 300;\n}\n\n.tablet-n1n5E .dimensions-wxroF {\n  font-size: 14px;\n}\n\n.portrait-Otsjq:not(.tablet-n1n5E) .dimensions-wxroF {\n  font-size: 12px;\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-top: 14px;\n  font-size: 22px;\n  line-height: 18px;\n  width: 67%;\n}\n\n.landscape-TuCY- .wcPriceinfo-Zmaer {\n  font-size: 14px;\n}\n\n.portrait-Otsjq .wc-formatted-price--PHbM {\n  font-size: 14px;\n}\n\n.portrait-Otsjq .wc-formatted-brutto-price-MDFl1 {\n  font-size: 11px;\n}\n\n.landscape-TuCY- .wc-formatted-price--PHbM {\n  font-size: 15px;\n}\n\n.portrait-Otsjq .wrapper-y4VmL {\n  height: 54.4px;\n  width: calc(100% - 4px);\n}\n\n.portrait-Otsjq h1 {\n  font-size: 15px;\n  line-height: 16px;\n}\n\n.tablet-n1n5E .wc-formatted-price--PHbM {\n  font-size: 16px;\n}\n\n.tablet-n1n5E .wc-formatted-brutto-price-MDFl1 {\n  font-size: 14px;\n}\n\n.tablet-n1n5E .wcPriceinfo-Zmaer {\n  font-size: 16px;\n}\n\n.tablet-n1n5E h1 {\n  font-size: 20px;\n  line-height: 22px;\n}\n\n.side-menu-button-NA9Lt {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z%22 fill%3D%22%234F4F4F%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z%22 fill%3D%22%234F4F4F%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: background-color 0.3s ease;\n  z-index: 1000;\n  margin: 10px 12px;\n  aspect-ratio: 1 / 1;\n}\n\n.tablet-n1n5E .side-menu-button-NA9Lt {\n  width: 22px;\n  height: 22px;\n}\n";
+styleInject(css_248z);
+
+var LOG = getLogger('Planner', 'InfoBox');
+var ProductHeader = function ProductHeader(_ref) {
+  var _viewHandler$productS, _viewHandler$productS2, _bbox$X, _bbox$X2, _bbox$Y, _bbox$Z, _bbox$wOLT, _bbox$dOLT, _bbox$hOLT;
+  var hidePrice = _ref.hidePrice,
+    productClass = _ref.productClass;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var bbox = viewHandler.settingsState.bbox;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    hidePrices = _useDivaCore$state.hidePrices,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile;
+    _useDivaCore$state$di.isTablet;
+    var _useDivaCore$state$na = _useDivaCore$state.navigationConfiguration,
+    enableMobile = _useDivaCore$state$na.enableMobile,
+    hideHeader = _useDivaCore$state$na.hideHeader,
+    openSideMenu = _useDivaCore.actions.openSideMenu;
+  var showMobileNavButton = isMobile && enableMobile && !hideHeader;
+  var headerContentBoxProps = viewHandler.getViewConfig().productHeaderContentBox;
+  var _useCustomDimensions = useCustomDimensions(),
+    dimensions$1 = _useCustomDimensions.dimensions,
+    dimOnlyForOneArticle = _useCustomDimensions.dimOnlyForOneArticle;
+  var hideWebConfiguratorTitle = viewHandler.getViewConfig().hideWebConfiguratorTitle || viewHandler.getViewConfig().hideWebConfiguratorTitleInMobile && viewHandler.getIsInMobileView();
+  var showRabatt = viewHandler.productState.formatedBruttoPrice !== undefined && !viewHandler.getViewConfig().hideRabattPrice;
+  var showMainDimensions = viewHandler.productState.doShow3DDimensionLines || viewHandler.productState.doShowGrid || viewHandler.productState.doShowMainDimensions && !isMobile;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, productClass, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, showRabatt ? rabattVisible : undefined, fullscreen),
+    children: [showMobileNavButton && /*#__PURE__*/jsx("div", {
+      id: "side-menu-button",
+      className: sideMenuButton,
+      onClick: function onClick() {
+        return openSideMenu();
+      }
+    }), /*#__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", {
+          className: wcPriceinfoContainer,
+          children: [/*#__PURE__*/jsx("span", {
+            className: classnames(wcFormattedBruttoPrice),
+            "data-test-id": "productHeaderFormattedBruttoPrice",
+            children: /*#__PURE__*/jsx(PriceCounter, {
+              price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0
+            })
+          }), /*#__PURE__*/jsx("span", {
+            className: wcFormattedPrice,
+            "data-test-id": "productHeaderFormattedPrice",
+            children: /*#__PURE__*/jsx(PriceCounter, {
+              price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0
+            })
+          })]
+        }), showMainDimensions && /*#__PURE__*/jsxs(Fragment, {
+          children: [((_bbox$X = bbox === null || bbox === void 0 ? void 0 : bbox.X) !== null && _bbox$X !== void 0 ? _bbox$X : 0) > 0 && /*#__PURE__*/jsxs("div", {
+            className: dimensions,
+            children: [/*#__PURE__*/jsxs("span", {
+              children: [t('configurator.bth_short'), ": "]
+            }), /*#__PURE__*/jsxs("span", {
+              children: [(_bbox$X2 = bbox === null || bbox === void 0 ? void 0 : bbox.X) !== null && _bbox$X2 !== void 0 ? _bbox$X2 : -1, " \xD7 ", (_bbox$Y = bbox === null || bbox === void 0 ? void 0 : bbox.Y) !== null && _bbox$Y !== void 0 ? _bbox$Y : -1, " \xD7 ", (_bbox$Z = bbox === null || bbox === void 0 ? void 0 : bbox.Z) !== null && _bbox$Z !== void 0 ? _bbox$Z : -1, " cm"]
+            })]
+          }), (bbox === null || bbox === void 0 ? void 0 : bbox.wOLT) !== undefined && /*#__PURE__*/jsxs("div", {
+            className: dimensions,
+            children: [/*#__PURE__*/jsxs("span", {
+              children: [t('configurator.without_olf'), ": "]
+            }), /*#__PURE__*/jsxs("span", {
+              children: [(_bbox$wOLT = bbox === null || bbox === void 0 ? void 0 : bbox.wOLT) !== null && _bbox$wOLT !== void 0 ? _bbox$wOLT : -1, " \xD7 ", (_bbox$dOLT = bbox === null || bbox === void 0 ? void 0 : bbox.dOLT) !== null && _bbox$dOLT !== void 0 ? _bbox$dOLT : -1, " \xD7 ", (_bbox$hOLT = bbox === null || bbox === void 0 ? void 0 : bbox.hOLT) !== null && _bbox$hOLT !== void 0 ? _bbox$hOLT : -1, " cm"]
+            })]
+          })]
+        }), (showMainDimensions || !isMobile) && !!(dimensions$1 !== null && dimensions$1 !== void 0 && dimensions$1.length) && dimensions$1.map(function (dimension) {
+          var _dimension$text, _dimension$dimension;
+          return /*#__PURE__*/jsxs("div", {
+            className: dimensions,
+            children: [/*#__PURE__*/jsxs("span", {
+              children: [(_dimension$text = dimension.text) !== null && _dimension$text !== void 0 ? _dimension$text : t('configurator.headerdimension.' + dimension.dimensionId), !dimOnlyForOneArticle && ' (' + dimension.posNrs.join(',') + ')', ":", ' ']
+            }), /*#__PURE__*/jsxs("span", {
+              children: [(_dimension$dimension = dimension.dimension) !== null && _dimension$dimension !== void 0 ? _dimension$dimension : 0, " ", dimension.unit]
+            })]
+          });
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: functionWrapper,
+      children: /*#__PURE__*/jsx(Functions, {})
+    }), !viewHandler.uiState.isInMobileView && viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
+      className: contentBoxWrapper,
+      children: /*#__PURE__*/jsx(ContentItemComponent, {
+        contentItemId: viewHandler.productState.currentBanner.contentItemId,
+        wrapperStyle: {
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: 'inherit'
+        },
+        onContentItemLoaded: function onContentItemLoaded(title) {
+          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+            id: viewHandler.productState.currentBanner.contentItemId,
+            title: title
+          });
+        }
+      })
+    }), headerContentBoxProps && !viewHandler.uiState.isInMobileView && !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-65d5e93f.js

@@ -0,0 +1,47 @@
+import { s as styleInject, u as useViewHandler } from './index-e88e8992.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import RoomSerious from './index-c850cbf0.js';
+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 '@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 'react-switch';
+import 'react-countup';
+
+var container = "container-IUsXl";
+var css_248z = ".container-IUsXl {\n  position: absolute;\n  bottom: 0;\n  left: 0px;\n  z-index: 540;\n}\n";
+styleInject(css_248z);
+
+var RoomListSelection = function RoomListSelection(props) {
+  var viewHandler = useViewHandler();
+  var items = viewHandler.paletteViewHandler.getRoomList();
+  if (!viewHandler.uiState.ViewConfig.roomListInProduct) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    hidden: !viewHandler.settingsState.roomListInitialized,
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/jsx(RoomSerious, {
+        item: item,
+        from: viewHandler.settingsState.roomListInitialized
+      }, item.codex);
+    })
+  });
+};
+var index = observer(RoomListSelection);
+
+export { index as default };

package/build/esm/index-677cc15f.js

@@ -0,0 +1,48 @@
+import './index-e88e8992.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 'react-switch';
+import 'react-countup';
+
+var RotationCounterClockwise = function RotationCounterClockwise(_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.rotCounterClock, plannerUIProps.classes.buttonGeneral),
+    children: item.posNr
+  });
+};
+var RotationCounterClockwise$1 = observer(RotationCounterClockwise);
+
+export { RotationCounterClockwise$1 as default };