@crystaldesign/diva-web-planner-react 25.3.0-beta.9 → 25.4.0-beta.1

package/build/esm/index-5067bd64.js

@@ -0,0 +1,148 @@
+import { s as styleInject, u as useViewHandler } from './index-36d862a1.js';
+import { useEffect } from 'react';
+import Inputbox from './index-adfe03e4.js';
+import { cssVariables } from './index-8dbbc68d.js';
+import Product from './index-57e787e9.js';
+import Settings from './index-66e92e94.js';
+import TabGroup from './index-c319d37c.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+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 '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-5a0dcbe4.js';
+import './index-d5c7af95.js';
+import 'react-switch';
+import 'react-dropdown';
+import './index-e74246e7.js';
+import './index-4b1587bb.js';
+import './index-a1277b31.js';
+import './index-8015f2be.js';
+import './index-d1b736c9.js';
+import './index.module-fac4511e.js';
+import './index-8b418ae0.js';
+import './index-afa1b098.js';
+import './index-cbc985e9.js';
+import './index-43a0ee97.js';
+import './index-5ea7d7f9.js';
+import './index-5deb451a.js';
+import '@crystaldesign/content-box';
+import './index-f533dd53.js';
+import './index-6bd22ee8.js';
+import './index-a8edf394.js';
+import 'react-laag';
+import './index-dc7c9e94.js';
+import 'react-qr-code';
+import './index-9810b0af.js';
+import './index-31393dfa.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+import './index-b5b407de.js';
+import './index-76cbe1b1.js';
+import './index-720e7b71.js';
+import './index-1cf1f3b3.js';
+import './index-05569dbe.js';
+import './index-af092475.js';
+import './index-1decbefb.js';
+import './index-f4c937cf.js';
+import 'sift';
+import './index-18f15f4d.js';
+import './index-d43dad9c.js';
+import './index-0bfd7e7c.js';
+import './index-cd7743bb.js';
+import './index.module-d1c0f793.js';
+import './index-004c4904.js';
+import './index-68589e7f.js';
+import './index-c2b5863c.js';
+import './index-3d1101f7.js';
+import './index-81d793d2.js';
+import './index-39706bd4.js';
+import './index-0263aa31.js';
+import './index-236de351.js';
+import './index-291bda8e.js';
+import './index-f8925247.js';
+import './index-db4feee5.js';
+import './index-a90c5f21.js';
+import './index-983b79ad.js';
+import './index-4a9bcacc.js';
+import './index-15d125cd.js';
+import './index-8c022b8f.js';
+import './index-9fe880a1.js';
+import './index-9d32e537.js';
+import './index-4f44c34c.js';
+import './index-422f4c9d.js';
+import './index-2780393a.js';
+import './index-29b8bd39.js';
+import './index-3765e233.js';
+import './index.module-7406218b.js';
+import './index-024e923a.js';
+import './index-7b2870c7.js';
+import './index-5d34e0f5.js';
+import './index-c6f6ee4a.js';
+import './index-cf61f3f3.js';
+import './index-c89f1fba.js';
+import './index-a113455f.js';
+import './index.module-7b791951.js';
+import './index-657c8c5f.js';
+import './index-cdd38c69.js';
+import './index-1e6456f0.js';
+import './index-c93d8ce1.js';
+import './index-c0e927d0.js';
+import './index-53f56e26.js';
+import './index-4390e9e3.js';
+import './index-c0349023.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-506aae3e.js

@@ -0,0 +1,105 @@
+import { s as styleInject, u as useViewHandler } from './index-36d862a1.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ToolContainer from './index-8e0fae77.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-7b8a7fc1.js';
+import './index.module-1cef8653.js';
+import './index-44461ce0.js';
+import './index-0b1addff.js';
+import 'classnames';
+import './index-2e873431.js';
+import 'react-collapsible';
+import './index-23adae03.js';
+import './index-4b842848.js';
+import './index.module-56fbd357.js';
+import 'react-json-view-lite';
+import './react-json-viewer-ff84abf7.js';
+import './index-998ae609.js';
+import './index.module-863426f2.js';
+import './index-edcfe1d3.js';
+import 'jsoneditor';
+import './index-59f6165d.js';
+import './index-b58e9363.js';
+import './index-df51b97b.js';
+import './index-06540c3e.js';
+import './index-c1c1aad8.js';
+import './index.module-c4bd75c1.js';
+import './index-d85a13a6.js';
+import './index-45cb416c.js';
+import './index-38ab9547.js';
+import './index-e8de8ca0.js';
+import 'react-dropdown';
+import './index.module-52b0dfc6.js';
+import './index-39706bd4.js';
+import './index-9ab94dc0.js';
+import './index-eec4a09f.js';
+import './DecisionVizualizer-61990580.js';
+import './index-9c0658d5.js';
+import './index-7cacde99.js';
+import './index-444e8c9c.js';
+import './index-f3a37404.js';
+import './index-395d9036.js';
+import './index-d5c7af95.js';
+import 'react-switch';
+import './CatalogProperties-4f2535c9.js';
+import './ArticleProperties-b0848926.js';
+import './OptionProperties-52ea7ba0.js';
+import './OptionValueProperties-01a05933.js';
+import 'react-select';
+
+var container = "container-43rJg";
+var item = "item-JRY9h";
+var css_248z = ".container-43rJg {\n  display: flex;\n  height: 42px;\n  gap: 12px;\n  justify-content: space-around;\n  overflow: auto;\n  align-items: center;\n  background-color: #f3f3f3;\n}\n\n.item-JRY9h {\n  cursor: pointer;\n  min-width: 80px;\n  padding-left: 12px;\n  padding-right: 12px;\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+var Toolbar = function Toolbar(props) {
+  var _viewHandler$divaWebP, _viewHandler$divaWebP2;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    wwsClient = _useDivaCore.state.organization.settings.wwsClient;
+  var changeVal = function changeVal(newValue) {
+    var value = newValue === viewHandler.uiState.activeCatalogSection ? '3D/2D' : newValue;
+    localStorage.setItem('lastWindow', value);
+    viewHandler.uiState.setActiveCatalogSection(value);
+  };
+  var partlistsExist = !!Object.values((_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP2 === void 0 ? void 0 : _viewHandler$divaWebP2.CatalogData.allCatalogArticles) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {}).find(function (a) {
+    return a.partlistArticlesRules;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [viewHandler.uiState.activeCatalogSection != '3D/2D' && /*#__PURE__*/jsx(ToolContainer, {}), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [partlistsExist && /*#__PURE__*/jsx("div", {
+        className: item,
+        onClick: function onClick() {
+          return changeVal('PartList');
+        },
+        children: "St\xFCckliste"
+      }), wwsClient == 'Pfister' && /*#__PURE__*/jsx("div", {
+        className: item,
+        onClick: function onClick() {
+          return changeVal('ekText');
+        },
+        children: "Ek Text"
+      })]
+    })]
+  });
+};
+var Toolbar$1 = observer(Toolbar);
+
+export { Toolbar$1 as default };

package/build/esm/index-53f56e26.js

@@ -0,0 +1,88 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-36d862a1.js';
+import { useState, useEffect } from 'react';
+import ItemVariant from './index-4390e9e3.js';
+import { observer } from 'mobx-react-lite';
+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/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 '@crystaldesign/widget-contact-form';
+
+var TabGroupVertical = function TabGroupVertical(props) {
+  var _viewHandler$tabGroup2;
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceRerender = _useState2[0],
+    setRerender = _useState2[1];
+  var tabGroups = viewHandler.tabGroupState.allTabGroups;
+
+  //scroll logic
+  useEffect(function () {
+    viewHandler.tabGroupState.scrollToCurTabgroup();
+  }, [viewHandler.tabGroupState.curTabGroup]);
+
+  //render until we get initial heigth
+  useEffect(function () {
+    var didCancel = false;
+    var interval = window.setInterval(function () {
+      var _viewHandler$tabGroup;
+      var totalHeight = (_viewHandler$tabGroup = viewHandler.tabGroupState.tabGroupScroller) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.getBoundingClientRect().height;
+      if (totalHeight && totalHeight > 0) {
+        if (!didCancel) {
+          setRerender(!forceRerender);
+        }
+        window.clearInterval(interval);
+      }
+    }, 100);
+    return function () {
+      didCancel = true;
+      window.clearInterval(interval);
+    };
+  }, [viewHandler.tabGroupState.tabGroupScroller]);
+  if (!tabGroups) return /*#__PURE__*/jsx(Fragment, {});
+  var totalHeight = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.tabGroupScroller) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.getBoundingClientRect().height;
+  var minHeightOfOneStep = 80;
+  var minHeight = undefined;
+  var tabCount = Object.keys(tabGroups).length;
+  var height = 0;
+  if (totalHeight) {
+    height = totalHeight / tabCount;
+    if (tabCount * minHeightOfOneStep > totalHeight) {
+      minHeight = minHeightOfOneStep;
+    }
+  } else {
+    setTimeout(function () {
+      return setRerender(!forceRerender);
+    }, 100);
+  }
+  var firstKey = Object.keys(tabGroups)[0];
+  var lastKey = Object.keys(tabGroups)[Object.keys(tabGroups).length - 1];
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Object.entries(tabGroups).map(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2);
+        _ref2[0];
+        var tabGroup = _ref2[1];
+      return /*#__PURE__*/jsx(ItemVariant, {
+        tabGroup: tabGroup,
+        height: height,
+        isFirstItem: tabGroups[firstKey].key == tabGroup.key,
+        isLastItem: tabGroups[lastKey].key == tabGroup.key,
+        minHeight: minHeight
+      }, tabGroup.title);
+    })
+  });
+};
+var TabGroupVertical$1 = observer(TabGroupVertical);
+
+export { TabGroupVertical$1 as default };

package/build/esm/index-555db5cb.js

@@ -0,0 +1,65 @@
+import { s as styleInject } from './index-36d862a1.js';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+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/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';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+var container = "container-ebOfa";
+var title = "title--2-cN";
+var css_248z = ".container-ebOfa {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  margin-bottom: 3px;\n  background: rgba(242, 242, 242, 0.6);\n  padding-top: 5px;\n}\n\n.title--2-cN {\n  padding-top: 3px;\n  text-align: center;\n  white-space: nowrap;\n  overflow: visible;\n  font-size: 12px;\n  color: #4b4b4b;\n  width: 100%;\n  overflow: visible;\n  height: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  z-index: 100;\n}\n";
+styleInject(css_248z);
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    PaletteComponent = _ref.PaletteComponent,
+    paletteId = _ref.paletteId,
+    rowCount = _ref.rowCount,
+    paletteType = _ref.paletteType,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var items = group.items;
+  var name = group.name !== 'none' ? group.name : t('configurator.other');
+  return /*#__PURE__*/jsx(Fragment, {
+    children: items.map(function (item, i) {
+      return /*#__PURE__*/jsxs("div", {
+        className: classnames(container, contentInnerClassName),
+        style: {
+          width: 'calc(' + 100 / rowCount + '%' + (i === 0 ? ' - 3px' : '') + ' - 5px)',
+          borderRadius: i === items.length - 1 && i === 0 ? '8px' : i === 0 ? '8px 0px 0px 8px' : i === items.length - 1 ? '0px 8px 8px 0px' : undefined,
+          marginLeft: i === 0 ? 3 : undefined,
+          paddingRight: '5px'
+        },
+        children: [/*#__PURE__*/jsx(PaletteComponent, {
+          paletteId: paletteId,
+          item: item,
+          paletteType: paletteType,
+          style: {
+            '--galleryItemRowCount': '1',
+            '--galleryItemRowCountSmall': '1',
+            paddingTop: 'unset'
+          }
+        }, i), /*#__PURE__*/jsx("span", {
+          className: title,
+          children: i === 0 ? name : ''
+        })]
+      });
+    })
+  });
+};
+
+export { Group as default };

package/build/esm/index-56735a10.js

@@ -0,0 +1,83 @@
+import { s as styleInject, u as useViewHandler } from './index-36d862a1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs, 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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfiguratorProductFooter = "wcConfigurator-product-footer-ygF4L";
+var portrait = "portrait-FCw3Q";
+var settingsHidden = "settings-hidden-PBWln";
+var landscape = "landscape-KhTSA";
+var expanded = "expanded-pQR-c";
+var wcButton = "wcButton-s5DtR";
+var sel = "sel-1Qm3v";
+var wcViewAs = "wc_ViewAs-y1Kh8";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-ygF4L {\n  text-align: center;\n  z-index: 350;\n}\n\n.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.portrait-FCw3Q.wcConfigurator-product-footer-ygF4L {\n  display: none;\n}\n\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  display: block;\n  height: 40px;\n}\n\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  bottom: 0px;\n}\n\n.landscape-KhTSA.wcConfigurator-product-footer-ygF4L {\n  display: none;\n}\n\n.landscape-KhTSA.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  display: block;\n  bottom: 0;\n  height: 40px;\n}\n\n.expanded-pQR-c.wcConfigurator-product-footer-ygF4L {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v,\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:hover {\n  background: var(--secondaryColor);\n  color: white;\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:active,\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:active {\n  background: #616161;\n  color: white;\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR {\n  background: white;\n  border: 1px solid var(--secondaryColor);\n\n  box-sizing: border-box;\n  -webkit-text-stroke: 0.6px;\n  min-width: 160px;\n  width: auto;\n  height: 38.4px;\n  line-height: 35.8px;\n  color: var(--secondaryColor);\n  border-right: 0px;\n  border-radius: 0px 0px 0px 0px;\n}\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:hover {\n  color: var(--secondaryColor);\n  background: white;\n  box-shadow: var(--boxShadowHover);\n}\n\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:last-child {\n  border-top-right-radius: var(--globalBorderRadius);\n  border-bottom-right-radius: var(--globalBorderRadius);\n  border-right: 1px solid var(--secondaryColor);\n}\n\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:first-child {\n  border-top-left-radius: var(--globalBorderRadius);\n  border-bottom-left-radius: var(--globalBorderRadius);\n}\n\n/* ViewAs  */\n.wc_ViewAs-y1Kh8 {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  list-style: none;\n  white-space: nowrap;\n  display: inline-flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n}\n\n.wc_ViewAs-y1Kh8 li {\n  display: block;\n  float: left;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorProductFooter, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        },
+        children: t('configurator.Foto')
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          },
+          children: t('configurator.Foto')
+        }), ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'SUMMARY' && renderings.map(function (rendering) {
+          var _viewHandler$productS;
+          return /*#__PURE__*/jsx("li", {
+            className: classnames(wcButton, viewHandler.productState.doShowRenderImage && ((_viewHandler$productS = viewHandler.productState.curAlternateRendering) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.imageCodex) === rendering.imageCodex ? sel : undefined),
+            onClick: function onClick() {
+              return viewHandler.productState.onChangePlannerView('3D', rendering);
+            },
+            children: rendering.title
+          });
+        })]
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        },
+        children: t('configurator.Grundriss')
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        },
+        children: t('configurator.RTV')
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };

package/build/esm/index-572ae089.js

@@ -0,0 +1,129 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler, a as usePlannerUIHandler } from './index-36d862a1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } 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/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 '@crystaldesign/widget-contact-form';
+
+var mouseDownDetected = false;
+var polygonSelected = false;
+var Outline3D = function Outline3D(_ref) {
+  var items = _ref.items,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var viewHandler = useViewHandler();
+  var plannerUIHandler = usePlannerUIHandler();
+  if (viewHandler.uiState.isLoading) return /*#__PURE__*/jsx(Fragment, {});
+  var on3DPlannerBGClick = function on3DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+  };
+  var renderPolygon = function renderPolygon(item) {
+    switch (item.elemState) {
+      case 'selectable':
+        return /*#__PURE__*/jsx("polygon", {
+          onMouseUp: function onMouseUp(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction;
+              (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onTouchEnd: function onTouchEnd(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction2;
+              (_item$clickFunction2 = item.clickFunction) === null || _item$clickFunction2 === void 0 || _item$clickFunction2.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (!isDragging) plannerUIHandler.updateOnHoverOutline3D(true, item, 'PosNr');
+          },
+          onMouseLeave: function onMouseLeave() {
+            plannerUIHandler.updateOnHoverOutline3D(false, item, 'PosNr');
+          },
+          points: item.polygonPoints,
+          style: {
+            zIndex: item.zIndex
+          },
+          className: classnames(item.type == 'Outline3D' ? plannerUIProps.classes.outline.outline3D.outlinePolygon : undefined, item.type == 'Outline3D_Contour' ? plannerUIProps.classes.outline.outline3D.outlinePolygonContours : undefined)
+        }, item.key.toString());
+      case 'selected':
+        if (item.type == 'Outline3D_Contour') {
+          return /*#__PURE__*/jsx("polygon", {
+            points: item.polygonPoints,
+            style: {
+              zIndex: item.zIndex
+            },
+            className: classnames(plannerUIProps.classes.outline.outline3D.outlinePolygonContoursSel)
+          }, item.key.toString());
+        }
+    }
+    return '';
+  };
+  return /*#__PURE__*/jsx("svg", {
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onTouchStart: function onTouchStart(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onTouchMove: function onTouchMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onMouseUp: function onMouseUp(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    ref: function ref(_ref2) {
+      viewHandler.productState.setPlanner3DImageSvgArea(_ref2);
+      //viewHandler.viewModel.htmlElementRefs.planner3DImageSvgArea = ref as any;
+    },
+    style: {
+      zIndex: 100,
+      touchAction: 'pan-x pan-y',
+      height: '100%'
+    },
+    className: classnames(plannerUIProps.classes.outline.outline3D.outlineSVG),
+    children: items.map(function (item, i) {
+      return renderPolygon(item);
+    })
+  }, items.length > 0 ? items[0].key : Math.random());
+};
+var Outline3D$1 = observer(Outline3D);
+
+export { Outline3D$1 as default };