@crystaldesign/diva-web-planner-react 26.10.0-beta.3 → 26.10.0-beta.30

package/build/esm/index-180189d9.js

@@ -0,0 +1,165 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import SettingsHeaderContainer from './index-e0900a31.js';
+import classnames from 'classnames';
+import TotalPrice from './index-07075961.js';
+import SettingsItemsWrapper from './index-7ae6b393.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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-4a1aeedd.js';
+import 'sift';
+import './index-84f83c67.js';
+import './index-a784e48f.js';
+import './index-ada3c152.js';
+import './index-8b6d1b2c.js';
+import './index.module-ce9cbd44.js';
+import './index-37df8f9a.js';
+import './index-83d6bb83.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-869d65ec.js';
+import 'react-dropdown';
+import './index-f74add7e.js';
+import './index-624149c8.js';
+import './index-dc3778bc.js';
+import './index-ead3c18e.js';
+import '@crystaldesign/content-box';
+import './index-71c05fb2.js';
+import './index-45ae8ca7.js';
+import './index-985d0ac1.js';
+import './index-8ce6adb9.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-3fb76e70.js';
+import './index-73c75e94.js';
+import './index-08d97746.js';
+import './index-5ad09ef7.js';
+import './index-61b4ebd3.js';
+import './index-afe33b8f.js';
+import './index-69650205.js';
+import 'react-laag';
+import './index.module-41cf846f.js';
+import './index-1e23c982.js';
+import './index-9562a9d8.js';
+import './index-f3bca3be.js';
+import './index-6fe3ff14.js';
+import './index-8d52e836.js';
+import './index.module-15c22604.js';
+import './index-1487d493.js';
+import './index-102ef56e.js';
+import './index-a7de9a70.js';
+import './index-031864a2.js';
+import './index-bd8d0479.js';
+import './index-1d2d7fb6.js';
+import './index-e7790e24.js';
+import './index-1010faf1.js';
+import './index-0908ac1e.js';
+import './index-84657f6d.js';
+import './index-fdd2f2b6.js';
+import './index-d8f30b62.js';
+import './index-2e12b9e1.js';
+import 'rc-slider';
+import './index-16fe405b.js';
+import './index-e8eb5116.js';
+import './index-a52f90e6.js';
+import './index-da2a2a8b.js';
+import './index-7c7b6fc7.js';
+import 'react-confetti-explosion';
+import './index-17ba7b38.js';
+import './index-99c94447.js';
+import './index-048552f0.js';
+import 'react-qr-code';
+import './index-eb30bc4d.js';
+import './useCustomDimensions-f2bb4edd.js';
+import './index-0ec473cc.js';
+import './ussIsSticky-6dac519b.js';
+import './index-85269def.js';
+import './index-10cd9e60.js';
+import './index-ac5a2704.js';
+import './index.module-25cdca01.js';
+import './index-f45ab225.js';
+import './index-46e9d390.js';
+import './index-89fd7133.js';
+import './index-52eb8599.js';
+import './index-2a46675e.js';
+import './index-bf19aa67.js';
+
+var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
+var expanded = "expanded-r-uGX";
+var minExpanded = "minExpanded-oyaLK";
+var scrollerFlex = "scrollerFlex-XVfOS";
+var scrollerContentFill = "scrollerContentFill-p1UEK";
+var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n\n/* When in wysiwyg inspect mode: scroller becomes flex so content can fill height */\n.scrollerFlex-XVfOS {\n  display: flex;\n  flex-direction: column;\n}\n\n.scrollerFlex-XVfOS .scrollerContentFill-p1UEK {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n";
+styleInject(css_248z);
+
+var SettingsScroller = function SettingsScroller(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var settingsScrollerElement = useRef(null);
+  var itemPalettesArr = [];
+  useEffect(function () {
+    if (settingsScrollerElement.current) {
+      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
+      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
+    }
+    return function () {};
+  }, [settingsScrollerElement]);
+  var style = {};
+  var snapPoint = viewHandler.uiState.snapPoints[viewHandler.settingsState.activeSnapPointIndex];
+  var mobileHeight;
+  if (isNaN(Number(snapPoint))) {
+    mobileHeight = snapPoint;
+  } else {
+    mobileHeight = snapPoint - 38 + 'px';
+  }
+  if (viewHandler.uiState.isInMobileView) {
+    style.height = mobileHeight;
+  } else {
+    var _viewHandler$settings, _viewHandler$settings2;
+    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
+  }
+  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
+    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
+    if (!itemPalette.isRenderedNotInSettingPalette && itemPalette.visible) itemPalettesArr.push(itemPalette);
+  }
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsMinExpanded) viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MIN_CONFIG_SETTINGS');else viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MAX_CONFIG_SETTINGS');
+  }, [viewHandler.uiState.configSettingsIsExpanded, viewHandler.uiState.configSettingsIsMinExpanded]);
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerFlex),
+    id: "wcConfigurator-settings-scroller",
+    ref: settingsScrollerElement,
+    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__PURE__*/jsx(SettingsHeaderContainer, {
+      isScroller: true
+    }, (_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__*/jsxs("div", {
+      className: classnames(viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerContentFill),
+      children: [/*#__PURE__*/jsx(SettingsItemsWrapper, {
+        itemPalettesArr: itemPalettesArr
+      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
+    })]
+  });
+};
+var SettingsScroller$1 = observer(SettingsScroller);
+
+export { SettingsScroller$1 as default };

package/build/esm/index-181ff2a0.js

@@ -0,0 +1,124 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, G as GenericToolTip } from './index-899b8922.js';
+import { observer } from 'mobx-react-lite';
+import { useState, createElement } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import MetaData from './index-1d2d7fb6.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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-q2VFw";
+var textWrapper = "text-wrapper-Th9kS";
+var element = "element-e6pDX";
+var elementText = "element-text-Lfswv";
+var image = "image-p37Vz";
+var hexColor = "hexColor-JQ-dp";
+var text = "text-DX9ZX";
+var deleteButton = "delete-button-sXPbV";
+var css_248z = ".wrapper-q2VFw {\n  position: relative;\n}\n\n.text-wrapper-Th9kS {\n  width: 48%;\n}\n.element-e6pDX {\n  position: relative;\n  display: flex;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 2px solid var(--primaryColor);\n  overflow: hidden;\n  cursor: pointer;\n  background-color: #fff;\n}\n\n.element-text-Lfswv {\n  border-radius: 0px;\n  border: 0px solid #fff;\n  width: calc(100% - 26px);\n  margin-top: 5px;\n  height: 64px;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: 26px;\n}\n\n.image-p37Vz {\n  width: 100%;\n  height: auto;\n}\n\n.hexColor-JQ-dp {\n  width: 100%;\n  height: 100%;\n}\n\n.text-DX9ZX {\n  line-height: 20px;\n  width: 100%;\n  font-size: 15px;\n  white-space: nowrap;\n}\n\n.delete-button-sXPbV {\n  position: absolute;\n  top: 0px;\n  right: -8px;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  background-color: red;\n  background-repeat: no-repeat;\n  background-size: 80%;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23fff%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.delete-button-sXPbV:hover {\n  cursor: pointer;\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 Item = function Item(_ref) {
+  var _renderLayer, _selectedElement$meta;
+  var selectedElement = _ref.selectedElement,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var notRelevant = selectedElement.codex.includes('OPV_NICHT_RELEVANT');
+  var isTextElement = !selectedElement.image && !selectedElement.hexColor;
+  if (notRelevant) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, isTextElement ? textWrapper : undefined),
+    children: [/*#__PURE__*/createElement("div", _objectSpread(_objectSpread(_objectSpread({}, triggerProps), hoverProps), {}, {
+      key: selectedElement.codex,
+      className: classnames(element, isTextElement ? elementText : undefined),
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.scrollToOPV(paletteId, selectedElement.codex);
+      },
+      title: t('configurator.scroll_there', 'hier hin scrollen')
+    }), selectedElement.image ? /*#__PURE__*/jsx("img", {
+      className: image,
+      src: selectedElement.image
+    }) : selectedElement.hexColor ? /*#__PURE__*/jsx("div", {
+      className: hexColor,
+      style: {
+        backgroundColor: '#' + selectedElement.hexColor
+      }
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: text,
+        children: selectedElement.text
+      }), /*#__PURE__*/jsx(MetaData, {
+        metaData: selectedElement.metaData,
+        visible: [metaDataVisible, setMetaDataVisible]
+      }, selectedElement.codex)]
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: selectedElement.text,
+      codex: (_selectedElement$meta = selectedElement.metaData) === null || _selectedElement$meta === void 0 || (_selectedElement$meta = _selectedElement$meta.find(function (m) {
+        return m.codex === 'codex';
+      })) === null || _selectedElement$meta === void 0 ? void 0 : _selectedElement$meta.values[0],
+      image: selectedElement.image,
+      hexColor: selectedElement.hexColor,
+      layerProps: layerProps
+    }, selectedElement.codex)))), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedElement, undefined, paletteId);
+      },
+      className: deleteButton,
+      title: t('configurator.remove_selection', 'Auswahl entfernen')
+    })]
+  });
+};
+var Item$1 = observer(Item);
+
+export { Item$1 as default };

package/build/esm/index-1d2d7fb6.js

@@ -0,0 +1,74 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { useState, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 metaData = "meta-data-kJbmQ";
+var css_248z = ".meta-data-kJbmQ {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: var(--secondaryColor);\n  width: 100%;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .meta-data-kJbmQ {\n  color: #fff;\n}\n";
+styleInject(css_248z);
+
+var MetaData = function MetaData(_ref) {
+  var style = _ref.style,
+    metaData$1 = _ref.metaData,
+    _ref$visible = _ref.visible,
+    _ref$visible2 = _ref$visible === void 0 ? useState('') : _ref$visible,
+    _ref$visible3 = _slicedToArray(_ref$visible2, 2),
+    metaDataVisible = _ref$visible3[0],
+    setMetaDataVisible = _ref$visible3[1];
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var displayMetaDatas = viewHandler.getViewConfig().displayMetaDatas;
+  var firstItem = metaData$1 === null || metaData$1 === void 0 ? void 0 : metaData$1.find(function (data) {
+    return displayMetaDatas === null || displayMetaDatas === void 0 ? void 0 : displayMetaDatas.includes(data.codex);
+  });
+  useEffect(function () {
+    if (!firstItem) return;
+    var textTmp = '';
+    for (var i = 0; i < firstItem.values.length; i++) {
+      if (textTmp !== '') textTmp = textTmp + ', ';
+      var _loop = function _loop(j) {
+        var data = metaData$1 === null || metaData$1 === void 0 ? void 0 : metaData$1.find(function (data) {
+          return data.codex === displayMetaDatas[j];
+        });
+        if (!data) return 1; // continue
+        if (textTmp !== '') textTmp = textTmp + ' ';
+        textTmp = textTmp + (data.name ? data.name + ': ' : '') + data.values[i];
+      };
+      for (var j = 0; j < displayMetaDatas.length; j++) {
+        if (_loop(j)) continue;
+      }
+    }
+    setText(textTmp);
+    setMetaDataVisible(textTmp);
+  }, []);
+  if (!metaDataVisible) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    style: style,
+    className: metaData,
+    children: text
+  });
+};
+
+export { MetaData as default };

package/build/esm/index-1d481484.js

@@ -0,0 +1,224 @@
+import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-82a28d6e.js';
+import Product from './index-15d52408.js';
+import Settings from './index-7e78bbac.js';
+import NavigationButtons from './index-c8de3993.js';
+import ActionBasket from './index-337b35af.js';
+import TabGroup from './index-f930afa0.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-40ca5eeb.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import ProgressBar from './index-33722dfd.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-e0900a31.js';
+import './index-180189d9.js';
+import './index-07075961.js';
+import './index-7ae6b393.js';
+import './index-4a1aeedd.js';
+import 'sift';
+import './index-84f83c67.js';
+import './index-a784e48f.js';
+import './index-ada3c152.js';
+import './index-8b6d1b2c.js';
+import './index.module-ce9cbd44.js';
+import './index-37df8f9a.js';
+import './index-83d6bb83.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-869d65ec.js';
+import 'react-dropdown';
+import './index-f74add7e.js';
+import './index-624149c8.js';
+import './index-dc3778bc.js';
+import './index-ead3c18e.js';
+import '@crystaldesign/content-box';
+import './index-71c05fb2.js';
+import './index-45ae8ca7.js';
+import './index-985d0ac1.js';
+import './index-8ce6adb9.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-3fb76e70.js';
+import './index-73c75e94.js';
+import './index-08d97746.js';
+import './index-5ad09ef7.js';
+import './index-61b4ebd3.js';
+import './index-afe33b8f.js';
+import './index-69650205.js';
+import 'react-laag';
+import './index.module-41cf846f.js';
+import './index-1e23c982.js';
+import './index-9562a9d8.js';
+import './index-f3bca3be.js';
+import './index-6fe3ff14.js';
+import './index-8d52e836.js';
+import './index.module-15c22604.js';
+import './index-1487d493.js';
+import './index-102ef56e.js';
+import './index-a7de9a70.js';
+import './index-031864a2.js';
+import './index-bd8d0479.js';
+import './index-1d2d7fb6.js';
+import './index-e7790e24.js';
+import './index-1010faf1.js';
+import './index-0908ac1e.js';
+import './index-84657f6d.js';
+import './index-fdd2f2b6.js';
+import './index-d8f30b62.js';
+import './index-2e12b9e1.js';
+import 'rc-slider';
+import './index-16fe405b.js';
+import './index-e8eb5116.js';
+import './index-a52f90e6.js';
+import './index-da2a2a8b.js';
+import './index-7c7b6fc7.js';
+import 'react-confetti-explosion';
+import './index-17ba7b38.js';
+import './index-99c94447.js';
+import './index-048552f0.js';
+import 'react-qr-code';
+import './index-eb30bc4d.js';
+import './useCustomDimensions-f2bb4edd.js';
+import './index-0ec473cc.js';
+import './ussIsSticky-6dac519b.js';
+import './index-85269def.js';
+import './index-10cd9e60.js';
+import './index-ac5a2704.js';
+import './index.module-25cdca01.js';
+import './index-f45ab225.js';
+import './index-46e9d390.js';
+import './index-89fd7133.js';
+import './index-52eb8599.js';
+import './index-2a46675e.js';
+import './index-bf19aa67.js';
+import './index.module-5bcecdc6.js';
+import './index-c7d3af7e.js';
+import './index-854179de.js';
+import './index-3ee68248.js';
+import './index-e260a81a.js';
+import '@mui/material';
+import './index-4e4215ad.js';
+import './index-5ec31db5.js';
+import './index-0029288b.js';
+import './index-d6856cc5.js';
+import './index-74d46a1a.js';
+import './index-9663c0f2.js';
+
+var wcConfigurator = "wcConfigurator-8WNGD";
+var landscape = "landscape-fycCb";
+var portrait = "portrait-mcAF6";
+var wcConfiguratorProduct = "wcConfigurator-product-RWY1l";
+var wcConfiguratorSettings = "wcConfigurator-settings-St4gK";
+var wcConfiguratorSteps = "wcConfigurator-steps-fRfjC";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions--47XW";
+var wcConfiguratorAction = "wcConfigurator-action-9vcgt";
+var expanded = "expanded-tbaDC";
+var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-6Fs5C";
+var mobileSettingsWrapper = "mobile-settings-wrapper-JxzDy";
+var css_248z = ".wcConfigurator-8WNGD {\n  position: relative;\n  height: calc(100% - 60px);\n  width: 100%;\n  margin: 30px 0;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\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  overscroll-behavior-y: contain;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-8WNGD *,\n.wcConfigurator-8WNGD *::before,\n.wcConfigurator-8WNGD *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-8WNGD.landscape-fycCb {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n.wcConfigurator-8WNGD.portrait-mcAF6 {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-RWY1l {\n  position: absolute;\n  width: 69%;\n  top: calc(56px + 20px);\n  height: calc(100% - 56px - 20px);\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-St4gK {\n  position: absolute;\n  width: 31%;\n  overflow: visible;\n  z-index: 600;\n  right: 0px;\n  top: calc(56px + 20px);\n  height: calc(100% - 60px - 56px - 70px - 40px);\n  transition: width 0.2s ease-in-out;\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-fRfjC {\n  position: absolute;\n  z-index: 600;\n  height: 56px;\n  width: 100%;\n  transition: width 0.2s ease-in-out;\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions--47XW {\n  position: absolute;\n  width: calc(31% - var(--settingsScrollerPaddingRight) - var(--settingsScrollerPaddingLeft));\n  height: 80px;\n  right: 0px;\n  bottom: calc(40px + 20px);\n  padding-top: 10px;\n  z-index: 600;\n  transition: width 0.2s ease-in-out;\n  padding-right: var(--settingsScrollerPaddingRight);\n  padding-left: var(--settingsScrollerPaddingLeft);\n  background-color: var(--settingsBackgroundColor);\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-9vcgt {\n  position: absolute;\n  width: calc(31% - var(--settingsScrollerPaddingRight) - var(--settingsScrollerPaddingLeft));\n  height: 40px;\n  right: 0px;\n  bottom: 0px;\n  padding-top: 20px;\n  z-index: 600;\n  transition: width 0.2s ease-in-out;\n  font-weight: 700;\n  padding-right: var(--settingsScrollerPaddingRight);\n  padding-left: var(--settingsScrollerPaddingLeft);\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-tbaDC .wcConfigurator-settings-St4gK {\n  width: 62%;\n}\n\n.expanded-tbaDC .wcConfigurator-action-9vcgt,\n.expanded-tbaDC .wcConfigurator-settings-actions--47XW {\n  width: calc(62% - var(--settingsScrollerPaddingRight) - var(--settingsScrollerPaddingLeft));\n}\n\n.wcConfigurator-8WNGD.portrait-mcAF6,\n.landscape-fycCb.wcConfigurator-8WNGD {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n} /*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-fycCb .wcConfigurator-product-RWY1l {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-fycCb .wcConfigurator-settings-St4gK {\n  display: none;\n}\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-fycCb .wcConfigurator-steps-fRfjC {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-fycCb .wcConfigurator-settings-actions--47XW {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-fycCb .wcConfigurator-action-9vcgt {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-mcAF6 .wcConfigurator-product-RWY1l {\n  top: 0px;\n  left: 0px;\n  height: var(--configuratorProductHeight);\n  transition: height 0.2s ease-out;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-mcAF6 .wcConfigurator-settings-St4gK {\n  left: 0px;\n  top: auto;\n  top: initial;\n  transition: height 0.2s ease-out;\n  bottom: 0px;\n  width: 100%;\n  z-index: 1000;\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-mcAF6 .wcConfigurator-steps-fRfjC {\n  position: relative;\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  transition: none 0s ease 0s;\n  transition: initial;\n  flex-grow: 10;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-mcAF6 .wcConfigurator-settings-actions--47XW {\n  display: none;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-mcAF6 .wcConfigurator-action-9vcgt,\n.portrait-mcAF6.settings-hidden-dySS8 .wcConfigurator-action-9vcgt {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-6Fs5C {\n  position: relative;\n  transition: bottom 0.2s ease-out;\n  width: 50px;\n  height: var(--configuratorTabGroupHeight);\n  background: no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 300;\n}\n\n.mobile-settings-wrapper-JxzDy {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.landscape-fycCb,\n.portrait-mcAF6 {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-cNnDV {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\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";
+styleInject(css_248z);
+
+var Ralph = function Ralph(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  var _useDivaCore = useDivaCore(),
+    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        id: "wcConfigurator-wrapper",
+        ref: function ref(wrapperRef) {
+          return viewHandler.uiState.setWrapperRef(wrapperRef);
+        },
+        className: mobileSettingsWrapper,
+        children: [/*#__PURE__*/jsx(Product, {
+          className: wcConfiguratorProduct
+        }), viewHandler.uiState.isInMobileView ? /*#__PURE__*/jsx(Settings, {
+          tabgroupElement: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(TabGroup, {
+              className: wcConfiguratorSteps,
+              showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+            }), /*#__PURE__*/jsx(BasketMobile, {
+              className: mobileActionAfterTabgroups
+            }), /*#__PURE__*/jsx(ProgressBar, {})]
+          })
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(TabGroup, {
+            className: wcConfiguratorSteps,
+            showCloseButtonInMobile: 'right'
+          }), /*#__PURE__*/jsx(Settings, {
+            className: wcConfiguratorSettings
+          }), /*#__PURE__*/jsx(NavigationButtons, {
+            className: wcConfiguratorSettingsActions,
+            showCheckoutButtons: viewHandler.uiState.isMobilePortrait
+          }), /*#__PURE__*/jsx(ActionBasket, {
+            containerClassName: wcConfiguratorAction,
+            showCheckoutButtons: true
+          })]
+        }), ")"]
+      })
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#a81e1e',
+  '--secondaryColor': '#4a4a4a',
+  '--thirdColor': '#f3f3f3',
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.95)',
+  '--tabGroupBackground': 'rgba(248, 248, 248, 0.95)',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--galleryItemRadius': '3px',
+  '--galleryItemRowCount': '4',
+  '--galleryItemMargin': '1%',
+  '--galleryItemRowCountSmall': '3',
+  '--galleryItemMarginSmall': '0.5%',
+  '--galleryItemBorderColor': '#e8e9ed83',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorder': '1px',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '10px',
+  '--settingsScrollerPaddingLeft': '10px',
+  '--configuratorActionHeight': '40px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0 , 0.3)',
+  '--globalBorderRadius': '3px',
+  '--mobile-tabgroup-drawer-border-radius': '12px',
+  '--buttons-border-radius': '8px'
+};
+var index = observer(Ralph);
+
+export { index as default };