@crystaldesign/diva-web-planner-react 26.10.0-beta.26 → 26.10.0-beta.28

package/build/esm/index-fcb72e7d.js

@@ -0,0 +1,213 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler, a as useAnalyzerComponents, M as MissingAnalyzerComponent } from './index-899b8922.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect, createElement } from 'react';
+import Product from './index-b9739a43.js';
+import Sidebar from './index-b48334cf.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-5ad9fa64.js';
+import './index-74d5ee8b.js';
+import '@crystaldesign/content-item';
+import './index-8cef9ec1.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-618fdc08.js';
+import './index-57f6aec3.js';
+import './index-3c925a9c.js';
+import './index-415fbe83.js';
+import './index-01e167be.js';
+import './index-b6397dbb.js';
+import './index-ff020436.js';
+import './index-8d2f95c8.js';
+import './index-ef5f8f90.js';
+import './index-bdf5827b.js';
+import './index-9a249b74.js';
+import './index-2ad23b0d.js';
+import './index-0c7b8562.js';
+import './index-0e05b6b9.js';
+
+var list = "list-N44Jp";
+var css_248z = ".whole-wrapper-5OM64 {\n  position: absolute;\n  margin-left: 50px;\n  height: 92%;\n  background-color: var(--settingsBackgroundColor);\n  padding-left: 5px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  box-shadow: inset 0px 4px 40px 1px rgba(0, 0, 0, 0.1);\n  border-right: 2px solid;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n.not-expanded-A0UYP {\n  width: calc(25.5%) !important;\n}\n.not-expanded-A0UYP {\n  background-color: white;\n}\n.list-N44Jp {\n  width: calc(63% - 50px) !important;\n}\n.list-N44Jp {\n  z-index: 590;\n  background-color: rgba(250, 250, 250, 0.5);\n  margin-left: 50px;\n  /*width: calc(69% - 50px); pfister*/\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 WINDOW_TO_COMPONENT = {
+  Options: 'OptionTree',
+  PartList: 'PartListTable',
+  DecisionAnalyzer: 'DecisionAnalyzer',
+  PriceAnalyzer: 'PriceAnalyzer',
+  'Artikelübersicht': 'ArticleOverview',
+  'SVGübersicht': 'SVGAnalyzer',
+  ekText: 'EkTextViewer',
+  CatalogMakeup: 'CatalogMakeup',
+  RTVAnalyzer: 'RTVAnalyzer',
+  J3DEditor: 'J3DEditor',
+  PropertiesEditor: 'PropertiesEditor',
+  GridOverview: 'GridOverview'
+};
+var CatalogProduct = function CatalogProduct(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var analyzerComponents = useAnalyzerComponents();
+  var changeVal = function changeVal(newValue) {
+    localStorage.setItem('lastWindow', newValue);
+    viewHandler.uiState.setActiveCatalogSection(newValue);
+  };
+  useEffect(function () {
+    switch (viewHandler.uiState.activeCatalogSection) {
+      case 'Options':
+        viewHandler.uiState.setConfigSettingsIsExpanded(true);
+        break;
+      case 'ekText':
+      case '3D/2D':
+      case 'PartList':
+      case 'Artikelübersicht':
+      case 'SVGübersicht':
+      case 'DecisionAnalyzer':
+      case 'CatalogMakeup':
+      case 'RTVAnalyzer':
+      case 'J3DEditor':
+      case 'PropertiesEditor':
+      case 'GridOverview':
+        viewHandler.uiState.setConfigSettingsIsExpanded(false);
+        break;
+    }
+  }, [viewHandler.uiState.activeCatalogSection]);
+  useEffect(function () {
+    if (viewHandler.getIsInMobileView()) viewHandler.uiState.setActiveCatalogSection('3D/2D');
+  }, []);
+  var section = viewHandler.uiState.activeCatalogSection;
+  var classname = props.className + ' ' + list;
+  var activeWindow = undefined;
+  if (section !== '3D/2D') {
+    var componentKey = WINDOW_TO_COMPONENT[section];
+    if (componentKey) {
+      var Component = analyzerComponents[componentKey];
+      if (Component) {
+        var extraProps = section === 'Options' ? {
+          style: {
+            zIndex: 700
+          }
+        } : {
+          className: classname
+        };
+        activeWindow = /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, props), extraProps));
+      } else {
+        activeWindow = /*#__PURE__*/jsx(MissingAnalyzerComponent, {
+          name: componentKey
+        });
+      }
+    }
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(Sidebar, _objectSpread(_objectSpread({}, props), {}, {
+      currentWindowActive: viewHandler.uiState.activeCatalogSection,
+      setCurrentWindowActive: changeVal
+    })), /*#__PURE__*/createElement(Product, _objectSpread(_objectSpread({}, props), {}, {
+      style: {
+        boxSizing: 'border-box',
+        borderLeft: !viewHandler.uiState.isInMobileView ? '50px solid transparent' : undefined
+      },
+      key: 'product'
+    })), activeWindow]
+  });
+};
+var index = observer(CatalogProduct);
+
+export { index as default };

package/build/esm/index-fdd2f2b6.js

@@ -0,0 +1,137 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, G as GenericToolTip, P as PricePreview } from './index-899b8922.js';
+import classnames from 'classnames';
+import { useHover, useLayer } from 'react-laag';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import MetaData from './index-1d2d7fb6.js';
+import InfoIcon from './index-37df8f9a.js';
+import { jsxs, jsx } 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 articleItem = "article-item-i3J2S";
+var sel = "sel-3vhEw";
+var replacemode = "replacemode-XssaJ";
+var wcArticleInfoContainer = "wcArticleInfoContainer-6umFd";
+var pricesAreHiddenClass = "pricesAreHiddenClass-5i5mY";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-C-sNn";
+var wcConfiguratorSettingsTitleSingleLine = "wcConfigurator-settings-title-single-line-xIggU";
+var wcSize = "wcSize-DKVv4";
+var wcSizeNormal = "wcSize-normal-H7PI-";
+var wcImage = "wcImage-bSQnw";
+var wcArticleSize = "wcArticleSize-FGDRM";
+var css_248z = "/*Planner*/\n\n.article-item-i3J2S {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  white-space: pre-line;\n  border: 3px solid transparent;\n  border: 3px solid var(--optionItemBorderColor, transparent);\n}\n.sel-3vhEw {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderSelColor, var(--primaryColor));\n}\n\n.article-item-i3J2S:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.article-item-i3J2S.replacemode-XssaJ:hover {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderHoverColor, var(--primaryColor));\n}\n\n.article-item-i3J2S:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.wcArticleInfoContainer-6umFd {\n  display: flex;\n  float: left;\n  margin-top: 8px;\n  margin-left: 8px;\n  height: calc(100% - 14px);\n  max-width: calc(100% - 171.2px);\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.pricesAreHiddenClass-5i5mY .wcArticleInfoContainer-6umFd {\n  max-width: calc(100% - 100px);\n}\n\n.article-item-i3J2S .wcConfigurator-settings-title-C-sNn {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  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.article-item-i3J2S .wcConfigurator-settings-title-single-line-xIggU {\n  -webkit-line-clamp: 1;\n}\n.article-item-i3J2S .wcSize-DKVv4 {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\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.article-item-i3J2S .wcSize-DKVv4.wcSize-normal-H7PI- {\n  max-height: 74px;\n}\n\n.article-item-i3J2S .wcImagePlaceHolder-KQO1T {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.article-item-i3J2S .wcImage-bSQnw {\n  width: 74px;\n  height: 74px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  margin-left: 3.2px;\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  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.article-item-i3J2S .wcArticleSize-FGDRM {\n  bottom: 8px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  z-index: 50;\n\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.article-item-i3J2S .wcArticleSize-FGDRM:hover {\n  overflow: visible;\n}\n@media all and (max-width: 1100px) {\n  .article-item-i3J2S .wcSize-normal-H7PI- {\n    height: 96px;\n  }\n\n  .article-item-i3J2S .wcConfigurator-settings-title-C-sNn {\n    -webkit-line-clamp: 2;\n  }\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Article = function Article(_ref) {
+  var _renderLayer, _item$longDescription;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet,
+    hidePrices = _useDivaCore$state.hidePrices;
+  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: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || !item.price;
+  var isInReplaceMode = viewHandler.settingsState.plannerReplaceMode && !(paletteId == 1 && viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    className: classnames(articleItem, pricesAreHidden ? pricesAreHiddenClass : undefined, 'wcConfigurator_Article', item.sel ? sel : undefined, isInReplaceMode ? replacemode : undefined),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnPlannerPalette(item, paletteId);
+    }
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcArticleInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible ? wcConfiguratorSettingsTitleSingleLine : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.title
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+          text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.title,
+          desciption: metaDataVisible,
+          codex: item.articleCodex,
+          image: item.image,
+          layerProps: layerProps,
+          price: item.price
+        }, item.codex))), /*#__PURE__*/jsx("div", {
+          className: classnames(wcArticleSize),
+          children: item.sizeInfo
+        })]
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item,
+        style: {
+          bottom: 8
+        }
+      }, item.articleCodex)]
+    }), !pricesAreHidden && /*#__PURE__*/jsx(PricePreview, {
+      price: item.price,
+      style: {
+        right: -3,
+        top: -3,
+        paddingTop: 6
+      }
+    })]
+  }));
+};
+var Article$1 = observer(Article);
+
+export { Article$1 as default };

package/build/esm/index-fdf86798.js

@@ -0,0 +1,231 @@
+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-efa06494.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-cdb372f1.js';
+import './index.module-76c17bd6.js';
+import './index-5ec31db5.js';
+import './index-0029288b.js';
+import './index-d6856cc5.js';
+import './index-74d46a1a.js';
+import './index-9663c0f2.js';
+
+var wcConfigurator = "wcConfigurator-XDqzc";
+var landscape = "landscape-h-sQZ";
+var portrait = "portrait-GHprw";
+var wcConfiguratorProduct = "wcConfigurator-product--JVWg";
+var wcConfiguratorSettings = "wcConfigurator-settings-YxHjA";
+var wcConfiguratorSteps = "wcConfigurator-steps-sGIVo";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-M6Qsu";
+var wcConfiguratorAction = "wcConfigurator-action-EgrS-";
+var expanded = "expanded-Iylhn";
+var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-89qkB";
+var tablet = "tablet-OKln-";
+var css_248z = ".wcConfigurator-XDqzc {\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: 100;\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-XDqzc *,\n.wcConfigurator-XDqzc *::before,\n.wcConfigurator-XDqzc *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-XDqzc.landscape-h-sQZ {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n.wcConfigurator-XDqzc.portrait-GHprw {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product--JVWg {\n  position: absolute;\n  width: 69%;\n  top: calc(56px + 20px);\n  height: calc(100% - 56px - 20px);\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-YxHjA {\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);\n  transition: width 0.2s ease-in-out;\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-sGIVo {\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-M6Qsu {\n  position: absolute;\n  width: 31%;\n  height: 40px;\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  background-color: var(--settingsBackgroundColor);\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-EgrS- {\n  position: absolute;\n  width: 31%;\n  height: 40px;\n  right: 0px;\n  bottom: 0px;\n  padding-top: 20px;\n  z-index: 600;\n\n  transition: width 0.2s ease-in-out;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-Iylhn .wcConfigurator-settings-YxHjA,\n.expanded-Iylhn .wcConfigurator-action-EgrS-,\n.expanded-Iylhn .wcConfigurator-settings-actions-M6Qsu {\n  width: 62%;\n}\n\n.wcConfigurator-XDqzc.portrait-GHprw,\n.landscape-h-sQZ.wcConfigurator-XDqzc {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-h-sQZ .wcConfigurator-product--JVWg {\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-h-sQZ .wcConfigurator-settings-YxHjA {\n  display: none;\n}\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-h-sQZ .wcConfigurator-steps-sGIVo {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-h-sQZ .wcConfigurator-settings-actions-M6Qsu {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-h-sQZ .wcConfigurator-action-EgrS- {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-GHprw .wcConfigurator-product--JVWg {\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-GHprw .wcConfigurator-settings-YxHjA {\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-GHprw .wcConfigurator-steps-sGIVo {\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-GHprw .wcConfigurator-settings-actions-M6Qsu {\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-GHprw .wcConfigurator-action-EgrS-,\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-action-EgrS- {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-89qkB {\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.landscape-h-sQZ,\n.portrait-GHprw {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-OKln- {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\n}\n\n.mobile-settings-wrapper-f-gT6 {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\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 Gold = function Gold(props) {
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  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, viewHandler.uiState.isTablet ? tablet : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        id: "wcConfigurator-wrapper",
+        ref: function ref(wrapperRef) {
+          return viewHandler.uiState.setWrapperRef(wrapperRef);
+        },
+        style: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          bottom: 0,
+          left: 0
+        },
+        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: 'none'
+          }), /*#__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 = {
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.98)',
+  '--tabGroupBackground': 'rgba(248, 248, 248, 0.98)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '10px',
+  '--settingsScrollerPaddingLeft': '10px',
+  '--primaryColor': '#a81e1e',
+  '--secondaryColor': '#4a4a4a',
+  '--thirdColor': '#dfdfdf',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--galleryItemRadius': '3px',
+  '--galleryItemRowCount': '4',
+  '--galleryItemMargin': '1%',
+  '--galleryItemRowCountSmall': '3',
+  '--galleryItemMarginSmall': '0.5%',
+  '--galleryItemBorderColor': '#e8e9ed83',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorder': '1px',
+  '--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(Gold);
+
+export { index as default };