@crystaldesign/diva-web-planner-react 25.9.0-beta.1 → 25.9.0-beta.11

package/build/esm/index-6683bb81.js

@@ -0,0 +1,153 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import { useEffect } from 'react';
+import Inputbox from './index-c33b9185.js';
+import { cssVariables } from './index-c5b244ec.js';
+import Product from './index-e9156d98.js';
+import Settings from './index-0c1d2b56.js';
+import TabGroup from './index-850b93a9.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-b57ad464.js';
+import './index-b2c9d3f7.js';
+import 'react-switch';
+import 'react-dropdown';
+import './index-f52faa93.js';
+import './index-e43bece3.js';
+import './index-56badc52.js';
+import './index-35595731.js';
+import './index-1662f8f8.js';
+import './index.module-f64dfebf.js';
+import './index-137e48db.js';
+import './index-02813a06.js';
+import './index-41a929c2.js';
+import './index-c235c710.js';
+import './index-88febce5.js';
+import './index-2165b5c4.js';
+import '@crystaldesign/content-box';
+import './index-6416893e.js';
+import './index-a53295a7.js';
+import './index-0b862d7c.js';
+import 'react-laag';
+import './index-e706925e.js';
+import 'react-qr-code';
+import './index-e6ac8ef7.js';
+import './index-66bc51d6.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+import './index-1ae68648.js';
+import 'react-i18next';
+import './index-a0c00314.js';
+import './index-f0a416a7.js';
+import './index-bc89b1bb.js';
+import './index-230ef921.js';
+import './index-f9e62abb.js';
+import './index-29fcd088.js';
+import './index-90ab7f53.js';
+import './index-b97beec7.js';
+import 'sift';
+import './index-0c4efc90.js';
+import './index-b66e2cb0.js';
+import './index-14ed4df4.js';
+import './index-70b08ed5.js';
+import './index.module-3edc0f08.js';
+import './index-c84c0bf5.js';
+import './index-d71c5c4c.js';
+import './index-85d56a5f.js';
+import './index-bd8c7c36.js';
+import './index-f981c831.js';
+import './index-d67606ee.js';
+import './index-83be5767.js';
+import './index-075c9607.js';
+import './index-f0f21be7.js';
+import './index-86efa80e.js';
+import './index-df1469ac.js';
+import './index-11e69ed8.js';
+import './index-57309784.js';
+import './index-47c0af4b.js';
+import './index-bdab7c1f.js';
+import './index-30eed94c.js';
+import './index-154bb2d5.js';
+import './index-fc57e842.js';
+import './index-cba76e07.js';
+import './index-c8dd259d.js';
+import './index-d6ed725a.js';
+import './index-da73c5fd.js';
+import './index-36bfcb3e.js';
+import './index.module-b1f771d1.js';
+import './index-e18b8b86.js';
+import './index-0352368d.js';
+import './index-202dad7f.js';
+import './index-8095cf58.js';
+import './index-4b8fdbe0.js';
+import './index-21d57d53.js';
+import './index-12d8ba8a.js';
+import './index.module-4cbeb72c.js';
+import './index-9ba7616c.js';
+import './index-49630c41.js';
+import './index-000f9863.js';
+import './index-84b6ba49.js';
+import './index-3d8f99e5.js';
+import './index-56ef0a21.js';
+import './index-d13376dc.js';
+import './index-882cbf45.js';
+
+var wcConfigurator = "wcConfigurator-VvOGT";
+var wcConfiguratorSteps = "wc-configurator-steps-CYXm7";
+var wcConfiguratorProduct = "wc-configurator-product-Z3rOO";
+var productList = "product-list-18YTy";
+var wcConfiguratorSettings = "wc-configurator-Settings-On8Ph";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-VvOGT {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n\n  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n}\n\n.wcConfigurator-VvOGT *,\n.wcConfigurator-VvOGT *::before,\n.wcConfigurator-VvOGT *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-CYXm7 {\n  width: 75px;\n  position: relative;\n}\n.wc-configurator-product-Z3rOO {\n  width: calc(100% - 501px);\n  position: relative;\n  overflow: auto;\n}\n.wc-configurator-product-Z3rOO.product-list-18YTy {\n  display: none;\n}\n\n.wc-configurator-Settings-On8Ph.product-list-18YTy {\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n}\n\n.wc-configurator-Settings-On8Ph {\n  width: 426px;\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
+styleInject(css_248z);
+
+var Serious = function Serious(props) {
+  var _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  var currentIsProductList = ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'PRODUCTS';
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: wcConfigurator,
+      children: [/*#__PURE__*/jsx(Product, {
+        className: classnames(wcConfiguratorProduct, currentIsProductList ? productList : undefined),
+        contentItemStartPos: "left"
+      }), /*#__PURE__*/jsx(Settings, {
+        className: classnames(wcConfiguratorSettings, currentIsProductList ? productList : undefined)
+      }), /*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps
+      })]
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var index = observer(Serious);
+
+export { index as default };

package/build/esm/index-66bc51d6.js

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

package/build/esm/index-6723b0b6.js

@@ -0,0 +1,170 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-c33b9185.js';
+import Product from './index-08d13b1f.js';
+import Settings from './index-0c1d2b56.js';
+import NavigationButtons from './index-0b56be52.js';
+import BasketAction from './index-72b89453.js';
+import TabGroup from './index-850b93a9.js';
+import { observer } from 'mobx-react-lite';
+import BarrierActions from './index-3b55e13f.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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-a0c00314.js';
+import './index-f0a416a7.js';
+import './index-bc89b1bb.js';
+import './index-230ef921.js';
+import './index-f9e62abb.js';
+import 'react-laag';
+import './index-29fcd088.js';
+import './index-90ab7f53.js';
+import './index-b97beec7.js';
+import 'sift';
+import './index-0c4efc90.js';
+import './index-b66e2cb0.js';
+import './index-14ed4df4.js';
+import './index-70b08ed5.js';
+import './index.module-3edc0f08.js';
+import './index-b2c9d3f7.js';
+import 'react-switch';
+import './index-c84c0bf5.js';
+import './index-d71c5c4c.js';
+import './index-85d56a5f.js';
+import 'react-dropdown';
+import './index-bd8c7c36.js';
+import './index-f981c831.js';
+import './index-d67606ee.js';
+import './index-83be5767.js';
+import '@crystaldesign/content-box';
+import './index-075c9607.js';
+import './index-f0f21be7.js';
+import './index-86efa80e.js';
+import './index-df1469ac.js';
+import './index-11e69ed8.js';
+import './index-57309784.js';
+import './index-47c0af4b.js';
+import './index-bdab7c1f.js';
+import './index-30eed94c.js';
+import './index-154bb2d5.js';
+import './index-fc57e842.js';
+import './index-cba76e07.js';
+import './index-c8dd259d.js';
+import './index-d6ed725a.js';
+import './index-da73c5fd.js';
+import './index-36bfcb3e.js';
+import './index.module-b1f771d1.js';
+import './index-e18b8b86.js';
+import './index-0352368d.js';
+import './index-202dad7f.js';
+import './index-8095cf58.js';
+import './index-4b8fdbe0.js';
+import './index-21d57d53.js';
+import './index-12d8ba8a.js';
+import './index.module-4cbeb72c.js';
+import './index-9ba7616c.js';
+import './index-49630c41.js';
+import './index-000f9863.js';
+import './index-84b6ba49.js';
+import './index-3d8f99e5.js';
+import './index-56ef0a21.js';
+import './index-d13376dc.js';
+import './index-882cbf45.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 foldedup = "foldedup-INA5E";
+var settingsHidden = "settings-hidden-dySS8";
+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}\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: 500;\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: 300;\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: 500;\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: 500;\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/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\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: 50px;\n  left: 0;\n  height: 40%;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n.portrait-mcAF6.foldedup-INA5E .wcConfigurator-product-RWY1l {\n  z-index: 1;\n}\n\n.portrait-mcAF6.settings-hidden-dySS8 .wcConfigurator-product-RWY1l {\n  height: calc(100% - 50px);\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-mcAF6 .wcConfigurator-settings-St4gK {\n  left: 0px;\n  top: calc(40% + 50px);\n  height: calc(60% - 50px - var(--configuratorActionHeight) - 32px - 12px);\n  width: 100%;\n}\n\n.portrait-mcAF6.settings-hidden-dySS8 .wcConfigurator-settings-St4gK {\n  top: 100%;\n}\n\n.portrait-mcAF6.foldedup-INA5E .wcConfigurator-settings-St4gK {\n  top: 2.5rem;\n  height: calc(100% - 50px);\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-mcAF6 .wcConfigurator-steps-fRfjC {\n  position: absolute;\n  left: 0px;\n  top: 0;\n  width: 100%;\n  height: 50px;\n}\n\n.portrait-mcAF6.foldedup-INA5E .wcConfigurator-steps-fRfjC {\n  top: 0px;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-mcAF6 .wcConfigurator-settings-actions--47XW {\n  bottom: 45px;\n  width: calc(100% - 10px);\n  height: 38px;\n  padding-top: 0px;\n  right: 0px;\n  padding: 0 5px 1px 5px;\n}\n\n.portrait-mcAF6.isOnLastStep-2g8Xc .wcConfigurator-settings-actions--47XW,\n.portrait-mcAF6.settings-hidden-dySS8 .wcConfigurator-settings-actions--47XW {\n  display: none !important;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-mcAF6.settings-hidden-dySS8 .wcConfigurator-action-9vcgt {\n  display: none;\n}\n.portrait-mcAF6 .wcConfigurator-action-9vcgt,\n.portrait-mcAF6.isOnLastStep-2g8Xc .wcConfigurator-action-9vcgt {\n  right: 0px;\n  bottom: 0px;\n  width: calc(100% - 10px);\n  height: 40px;\n  margin: 0 5px 5px 5px;\n  padding: 0px;\n  display: flex;\n}\n\n.portrait-mcAF6 .progressBar-dd1Kl {\n  position: absolute;\n  width: 100%;\n  height: 4px;\n  top: 50px;\n  left: 0;\n  z-index: 1000;\n  display: flex;\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);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsFoldedUp ? foldedup : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined),
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps,
+        showCloseButtonInMobile: 'right'
+      }), /*#__PURE__*/jsx(Product, {
+        className: wcConfiguratorProduct
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), /*#__PURE__*/jsx(NavigationButtons, {
+        className: wcConfiguratorSettingsActions,
+        showCheckoutButtons: viewHandler.uiState.isMobilePortrait
+      }), /*#__PURE__*/jsx(BasketAction, {
+        containerClassName: wcConfiguratorAction,
+        showCheckoutButtons: true
+      })]
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {}), /*#__PURE__*/jsx(BarrierActions, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#a81e1e',
+  '--secondaryColor': '#4a4a4a',
+  '--thirdColor': '#f3f3f3',
+  '--globalBorderRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--galleryItemRadius': '3px',
+  '--galleryItemRowCount': '4',
+  '--galleryItemMargin': '1%',
+  '--galleryItemRowCountSmall': '3',
+  '--galleryItemMarginSmall': '0.5%',
+  '--galleryItemBorderColor': '#e8e9ed83',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--galleryItemBorder': '1px',
+  '--settingsBackgroundColor': 'rgba(242, 242, 242, 0.9)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '10px',
+  '--settingsScrollerPaddingLeft': '10px',
+  '--tabGroupBackground': 'var(--thirdColor)',
+  '--foldArrowMarginRight': '16px',
+  '--configuratorActionHeight': '40px',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0 , 0.3)'
+};
+var index = observer(Ralph);
+
+export { index as default };

package/build/esm/index-6730968c.js

@@ -0,0 +1,69 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-GKYw3";
+var wcTabGroupItem = "wcTabGroupItem-xfakc";
+var portrait = "portrait-R75Hr";
+var landscape = "landscape-GMTKj";
+var wcActiveStep = "wcActiveStep-E81Bg";
+var wcStepNum = "wcStepNum-fDZJn";
+var horizontalLine = "horizontal-line-RQbQm";
+var css_248z = ".wrapper-GKYw3 {\n  display: flex;\n  align-items: center;\n  float: left;\n}\n\n.wcTabGroupItem-xfakc {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  border: none;\n  transition: color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  color: #b5b5b5;\n  cursor: pointer;\n}\n.portrait-R75Hr.wcTabGroupItem-xfakc,\n.landscape-GMTKj.wcTabGroupItem-xfakc {\n  line-height: 50px;\n}\n\n.wcTabGroupItem-xfakc:hover {\n  color: #262626;\n}\n\n.wcTabGroupItem-xfakc.wcActiveStep-E81Bg {\n  color: #262626;\n}\n\n.wcStepNum-fDZJn {\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  margin-right: 11px;\n  margin-top: 3px;\n  border: 1px solid #b5b5b5;\n  border-radius: 12px;\n  text-align: center;\n  line-height: 25px;\n  font-size: 16px;\n  color: #b5b5b5;\n}\n\n.wcActiveStep-E81Bg .wcStepNum-fDZJn,\n.wcTabGroupItem-xfakc:hover .wcStepNum-fDZJn {\n  color: #4f555b;\n  border: 1px solid #4f555b;\n}\n\n.horizontal-line-RQbQm {\n  width: 26px;\n  height: 0px;\n  border: 1px solid #bfbfbf;\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontaRalph = function TabGroupItemHorizontaRalph(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var keys = Object.keys(viewHandler.tabGroupState.allTabGroups);
+  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var isLastItem = keys[keys.length - 1] == tabGroup.key;
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: tabGroupItemRef,
+      onClick: function onClick() {
+        return onTabGroupClick(tabGroup);
+      },
+      className: classnames(wcTabGroupItem, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(wcStepNum),
+        children: tabGroup.posNr
+      }), t('configurator.' + tabGroup.title, tabGroup.title)]
+    }), !isLastItem && /*#__PURE__*/jsx("div", {
+      className: horizontalLine
+    })]
+  });
+};
+var index = observer(TabGroupItemHorizontaRalph);
+
+export { index as default };