@crystaldesign/diva-web-planner-react 24.15.0-beta.3 → 24.15.0-beta.31

package/build/esm/index-96a5452f.js

@@ -0,0 +1,172 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-c5b31a7e.js';
+import Product from './index-5e62bb5a.js';
+import Settings from './index-50582a58.js';
+import NavigationButtons from './index-2e689813.js';
+import BasketAction from './index-1fb8d0dc.js';
+import TabGroup from './index-8db3f081.js';
+import { observer } from 'mobx-react-lite';
+import BarrierActions from './index-a2ac40bb.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-3526adba.js';
+import './index-28e57850.js';
+import './index-cea49781.js';
+import './index-cd9c3912.js';
+import './index-8d21c4b9.js';
+import 'react-laag';
+import './index-0df4489c.js';
+import './index-6cb338a6.js';
+import './index-0a62ea63.js';
+import 'sift';
+import './index-0e4c18f2.js';
+import './index-7c3fd2ea.js';
+import './index-a39ff64d.js';
+import './index-43c635c5.js';
+import './index.module-fc5a5fa4.js';
+import './index-c9d64e0f.js';
+import 'react-switch';
+import './index-efc5dd21.js';
+import './index-0f663f3c.js';
+import './index-76e80cda.js';
+import 'react-dropdown';
+import './index-f4bbad50.js';
+import './index-17162832.js';
+import './index-ebbb0e7e.js';
+import './index-edd299b4.js';
+import '@crystaldesign/content-box';
+import './index-0b321731.js';
+import './index-25a1df5d.js';
+import './index-e695c275.js';
+import './index-2e36cbea.js';
+import './index-956e77fb.js';
+import '@crystaldesign/product-detail-page';
+import '@crystaldesign/products-component';
+import './index-c4b4a961.js';
+import './index-27d132cf.js';
+import './index-d1584d77.js';
+import './index-796275b1.js';
+import './index-197e79bf.js';
+import './index-731c8660.js';
+import './index-423da763.js';
+import './index-91d5eb8a.js';
+import './index-42df1486.js';
+import './index-c7960446.js';
+import './index-9e3366bc.js';
+import './index-c15bd722.js';
+import './index-56e5cc54.js';
+import './index.module-88189b53.js';
+import './index-7fe327dd.js';
+import './index-3c138b4d.js';
+import './index-e701f826.js';
+import './index-710590c2.js';
+import './index-0489077a.js';
+import './index-ef460f33.js';
+import './index-ee3c80e7.js';
+import './index.module-992ce231.js';
+import './index-32f7ee15.js';
+import './index-ec77ca4a.js';
+import './index-3ec5c531.js';
+import './index-8696ed4f.js';
+import './index-76dbdd6a.js';
+import './index-5621fdb4.js';
+import './index-07e47dd0.js';
+import './index-840b428d.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
+      }), /*#__PURE__*/jsx(BasketAction, {
+        containerClassName: wcConfiguratorAction
+      })]
+    }), 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',
+  '--configuratorActionWidthForthBackSpacer': '10px',
+  '--configuratorActionForthWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2))',
+  '--configuratorActionBackWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2))',
+  '--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)',
+  '--itemsMargin': '11.2px 0 0 0'
+};
+var index = observer(Ralph);
+
+export { index as default };

package/build/esm/index-975ec0c7.js

@@ -0,0 +1,65 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-60f7e09a.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var wcTabGroupItem = "wcTabGroupItem-RxTRT";
+var landscape = "landscape-XFSPQ";
+var wcActiveStep = "wcActiveStep-W687q";
+var wcVisitedStep = "wcVisitedStep-IGlR4";
+var wcTabGroupItemMobile = "wcTabGroupItemMobile-tMZbr";
+var secondaryColorDiv = "secondaryColorDiv-fx0Cm";
+var wcStepIcon = "wcStepIcon-JtMDZ";
+var css_248z = ".wcTabGroupItem-RxTRT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: background-color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n}\n\n.landscape-XFSPQ.wcTabGroupItem-RxTRT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q,\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q.wcTabGroupItem-RxTRT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcTabGroupItem-RxTRT.wcVisitedStep-IGlR4 {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-IGlR4.wcTabGroupItem-RxTRT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-RxTRT.wcTabGroupItem-RxTRT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q {\n  color: white;\n}\n\n.wcTabGroupItemMobile-tMZbr {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: width 0.4s ease;\n  line-height: 56px;\n  padding: 0 6px 0 13px;\n  color: var(--secondaryColor);\n  font-size: 10px;\n  font-weight: 600;\n  position: relative;\n}\n\n.secondaryColorDiv-fx0Cm {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n  background-color: var(--secondaryColor);\n}\n\n.wcTabGroupItemMobile-tMZbr.wcActiveStep-W687q {\n  background-color: var(--thirdColor);\n}\n\n.wcStepIcon-JtMDZ {\n  display: block;\n  background-color: var(--secondaryColor);\n  background-position: center center;\n  width: 30px;\n  height: 50px;\n  margin: auto;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center center;\n  float: right;\n}\n.wcActiveStep-W687q .wcStepIcon-JtMDZ {\n  margin-left: 5px;\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_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 active = tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var icon = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(!viewHandler.uiState.isInMobileView ? wcTabGroupItem : wcTabGroupItemMobile, viewHandler.uiState.isMobileLandscape ? landscape : undefined, active ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !active ? wcVisitedStep : undefined),
+    children: [(active || !icon) && t('configurator.' + tabGroup.title, tabGroup.title), active && /*#__PURE__*/jsx("div", {
+      className: secondaryColorDiv
+    }), icon && /*#__PURE__*/jsx("div", {
+      className: wcStepIcon,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    })]
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };

package/build/esm/index-97cef2a6.js

@@ -0,0 +1,49 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var checkoutButton = "checkout-button-obLRi";
+var checkoutButtonWhite = "checkout-button-white-twwsk";
+var checkoutText = "checkout-text-q48pZ";
+var css_248z = ".checkout-button-obLRi {\n  border-radius: 4px !important;\n}\n.checkout-button-obLRi {\n  background-color: #0f1531;\n  padding-left: 20px;\n  background-position: 97% 50%;\n  background-size: 30px;\n  font-weight: 300;\n}\n.checkout-button-white-twwsk {\n  background-color: initial;\n  padding-left: 20px;\n  background-position: 97% 50%;\n  background-size: 30px;\n  font-weight: 300;\n  border: solid 1px;\n  color: #0f1531;\n  border-color: #0f1531;\n  background-color: white;\n}\n.checkout-text-q48pZ {\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n}\n";
+styleInject(css_248z);
+
+var index = function index(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.uiState.setBarrierActions([{
+      className: checkoutButton,
+      onClick: function onClick() {},
+      text: 'text'
+    }, {
+      className: checkoutButtonWhite,
+      onClick: function onClick() {},
+      text: 'text'
+    }, {
+      className: checkoutButtonWhite,
+      onClick: function onClick() {},
+      text: 'text'
+    }]);
+    viewHandler.uiState.barrierTextClass = checkoutText;
+    viewHandler.uiState.barrierCreateActionOrder = 1;
+  }, []);
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+
+export { index as default };

package/build/esm/index-9959dc45.js

@@ -0,0 +1,119 @@
+import { s as styleInject } from './index-4238b6c1.js';
+import 'react';
+import PlannerUI from './index-f1d2d970.js';
+import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-1f566e42.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import './index-1a96ddd2.js';
+import 'classnames';
+import './index-aad047d7.js';
+import './index-8a4c8046.js';
+import './index-28f0f193.js';
+import './index-48d563f8.js';
+import './index-382c3be8.js';
+import './index-f135e552.js';
+import './index-fba4b59b.js';
+import './index-bd50c9a2.js';
+import './index-212206c0.js';
+import './index-1c920b80.js';
+import './index-1ad2bd7b.js';
+import './index-b02b8dfb.js';
+import 'react-draggable';
+import './index-4e594abd.js';
+import './index-bb0f3ae8.js';
+import './index-862ba611.js';
+
+var hidden = "hidden-75j7C";
+var css_248z = ".hidden-75j7C {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+var HiddenPlannerUI = function HiddenPlannerUI() {
+  var plannerUIProps = {
+    classes: {
+      buttonGeneral: hidden,
+      dockingPoint: {
+        AVL: {
+          avl: '',
+          avlSel: ''
+        },
+        AVR: {
+          avr: '',
+          avrSel: ''
+        },
+        DPACC: {
+          dp2DAccDocking: '',
+          dp2DAccNotDocking: '',
+          dp2DAccNotDockingSel: '',
+          dp3DAccDocking: '',
+          dp3DAccNotDocking: '',
+          dp3DAccNotDockingSel: ''
+        }
+      },
+      copy: {
+        BoxPlannerCopy: {
+          copyGlobal: '',
+          copyLeft: '',
+          copyTop: '',
+          copyRight: ''
+        },
+        ElementCopy: ''
+      },
+      outline: {
+        outline3D: {
+          outlineSVG: wc3DOutlineSvg,
+          outlinePolygon: wc3DOutlinePolygon,
+          outlinePolygonContours: wc3DOutlinePolygonContours,
+          outlinePolygonContoursSel: wc3DOutlinePolygonContoursSel
+        },
+        outline2D: {
+          draggable: '',
+          draggableActive: '',
+          selectable: ''
+        }
+      },
+      posNr: {
+        posNr: '',
+        posNrAcc: '',
+        posNrSelectable: '',
+        posNrSelectableArea: '',
+        posNrSelected: '',
+        posNrUnSelectable: '',
+        posNrOnHover: ''
+      },
+      rotation: {
+        rotClock: '',
+        rotCounterClock: '',
+        rot3DGrid: ''
+      },
+      move3DGrid: {
+        move3DGrid: ''
+      },
+      trash: {
+        boxplanner: '',
+        trashClass: ''
+      },
+      dimension: {
+        distanceToGround: '',
+        distanceToGroundIcon: ''
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(PlannerUI, {
+    plannerUIProps: plannerUIProps
+  });
+};
+
+export { HiddenPlannerUI as default };

package/build/esm/index-99f7559c.js

@@ -0,0 +1,164 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { observer } from 'mobx-react-lite';
+import { getLogger, useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import Draggable from 'react-draggable';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wrapper = "wrapper-epfZs";
+var header = "header-GXHlA";
+var handle = "handle-wTliC";
+var closeIcon = "close-icon-L0FOF";
+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.header-GXHlA {\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  position: absolute;\n  z-index: 1100;\n}\n\n.handle-wTliC {\n  cursor: move;\n  flex-grow: 1;\n}\n\n.close-icon-L0FOF {\n  padding: 12px;\n  z-index: 1002;\n  width: -moz-max-content;\n  width: max-content;\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 28%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-L0FOF:hover {\n  background-size: 36%;\n  cursor: pointer;\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(),
+    contentItemHandler = _useDivaCore.handler.contentItemHandler,
+    _useDivaCore$actions = _useDivaCore.actions,
+    openSideMenu = _useDivaCore$actions.openSideMenu,
+    closeSideMenu = _useDivaCore$actions.closeSideMenu;
+  var _useTranslation = useTranslation(),
+    language = _useTranslation.i18n.language;
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  useEffect(function () {
+    if (!id) return;
+    loadData();
+  }, [id]);
+  var loadData = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _infoBoxTitle$;
+      var data, infoBoxTitle;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return contentItemHandler.getContentItem(id, language);
+          case 2:
+            data = _context.sent;
+            infoBoxTitle = data.content.filter(function (item) {
+              return item.type === 'Title' && item.text;
+            }).map(function (item) {
+              return item.text;
+            });
+            LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+              id: data._id,
+              title: (_infoBoxTitle$ = infoBoxTitle[0]) !== null && _infoBoxTitle$ !== void 0 ? _infoBoxTitle$ : undefined
+            });
+            setData(data);
+            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, {
+                    settings: {
+                      contentItems: data.content,
+                      wrapperStyle: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%'
+                      }
+                    }
+                  })
+                })
+              });
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (id === undefined) setData(undefined);
+  }, [id]);
+  if (!data) return /*#__PURE__*/jsx(Fragment, {});
+  if (viewHandler.getIsInMobileView()) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  if (noWrapper) {
+    return /*#__PURE__*/jsx(ContentItemComponent, {
+      settings: {
+        contentItems: data.content,
+        wrapperStyle: {
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: 'inherit'
+        }
+      }
+    });
+  }
+  var parentSizes = (_viewHandler$productS = viewHandler.productState.productElement) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
+  return /*#__PURE__*/jsx(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__*/jsxs("div", {
+      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__*/jsxs("div", {
+        className: header,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames('handle', handle)
+        }), /*#__PURE__*/jsx("div", {
+          className: closeIcon,
+          onClick: function onClick() {
+            return viewHandler.settingsState.setContentItemId();
+          }
+        })]
+      }), /*#__PURE__*/jsx(ContentItemComponent, {
+        settings: {
+          contentItems: data.content,
+          wrapperStyle: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'inherit'
+          }
+        }
+      })]
+    })
+  });
+};
+var ContentItemWrapper$1 = observer(ContentItemWrapper);
+
+export { ContentItemWrapper$1 as default };