@crystaldesign/diva-web-planner-react 25.13.0-beta.21 → 25.13.0-beta.23

package/build/esm/index-cfd50dee.js

@@ -0,0 +1,86 @@
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } 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';
+
+var wcConfiguratorProductFooter = "wcConfigurator-product-footer-SQUKh";
+var portrait = "portrait-begxM";
+var landscape = "landscape-m3RkP";
+var expanded = "expanded-D5PIt";
+var wcButton = "wcButton-2kxBv";
+var sel = "sel-4wfuc";
+var wcViewAs = "wc_ViewAs-QJyAI";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-SQUKh {\n  text-align: center;\n  z-index: 350;\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n  display: flex;\n  gap: 10px;\n}\n\n.portrait-begxM.wcConfigurator-product-footer-SQUKh {\n  display: none;\n}\n\n.landscape-m3RkP.wcConfigurator-product-footer-SQUKh {\n  display: none;\n}\n\n.expanded-D5PIt.wcConfigurator-product-footer-SQUKh {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc,\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc:hover {\n  background: #262626;\n  color: white;\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv:active,\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc:active {\n  background: #262626;\n  color: white;\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv {\n  background: white;\n  box-sizing: border-box;\n  -webkit-text-stroke: 0.6px;\n  min-width: 150px;\n  width: auto;\n  height: 38.4px;\n  line-height: 35.8px;\n  color: var(--secondaryColor);\n  border-radius: var(--globalBorderRadius);\n  border: 1px solid #262626;\n}\n\n.portrait-begxM.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv {\n  min-width: 140px;\n}\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv:hover {\n  color: var(--secondaryColor);\n  background: white;\n  box-shadow: var(--boxShadowHover);\n}\n\n/* ViewAs  */\n.wc_ViewAs-QJyAI {\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: flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.wc_ViewAs-QJyAI li {\n  display: block;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  if (viewHandler.productState.footerVisible.length <= 1 && (((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) != 'SUMMARY' || !renderings.length)) return /*#__PURE__*/jsx(Fragment, {});
+  if (viewHandler.uiState.ViewConfig.roomListInProduct && viewHandler.productState.roomListExpanded && viewHandler.settingsState.roomListInitialized) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorProductFooter, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : 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.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.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$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.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.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-d03c2ee2.js

@@ -0,0 +1,62 @@
+import { u as useViewHandler } from './index-f895d7dd.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx, Fragment, jsxs } 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';
+
+var PosNr = function PosNr(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps,
+    hasTrash = _ref.hasTrash;
+  var viewHandler = useViewHandler();
+  var top = item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px';
+  if (hasTrash && rect.top < 4) top = 'calc(' + top + ' + 35px + var(--globalSize) / 2)'; // 35px space for trash icon
+  else top = 'calc(' + top + ' + var(--globalSize) / 2)'; // correct for icon center
+  if (item.posNr == undefined) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    style: {
+      left: item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left,
+      top: top,
+      visibility: viewHandler.productState.isBoxPlanner ? 'hidden' : 'visible'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.posNr.posNr, item.isDockedAccessoire ? plannerUIProps.classes.posNr.posNrAcc : undefined, item.elemState == 'selected' ? plannerUIProps.classes.posNr.posNrSelected : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.posNr.posNrSelectable : undefined, item.elemState == 'unselectable' ? plannerUIProps.classes.posNr.posNrUnSelectable : undefined, item.posNr.toString().length > 1 ? plannerUIProps.classes.posNr.moreThanOneNr : undefined, item.onHover && item.elemState != 'unselectable' ? plannerUIProps.classes.posNr.posNrOnHover : undefined
+    //TODO ADD wcPlanner_PosNr_Selectable_Area logic!
+    ),
+    children: [item.posNr, /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        var _item$clickFunction;
+        (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+      },
+      style: {
+        left: '0px',
+        top: '0px',
+        visibility: viewHandler.productState.isBoxPlanner ? 'hidden' : 'visible'
+      },
+      className: classnames(item.elemState == 'selectable' ? plannerUIProps.classes.posNr.posNrSelectableArea : undefined)
+    })]
+  });
+};
+var PosNr$1 = observer(PosNr);
+
+export { PosNr$1 as default };

package/build/esm/index-d0833032.js

@@ -0,0 +1,85 @@
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import 'react';
+import Dropdown from 'react-dropdown';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import Arrow from './index-73d8de18.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 'mobx-react-lite';
+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';
+
+var wcColorFilterItem = "wcColorFilterItem-xQqck";
+var mobile = "mobile-LQxjP";
+var tablet = "tablet-IHhtG";
+var dropdownRoot = "Dropdown-root-BjRjC";
+var dropdownControl = "Dropdown-control-8aQx0";
+var wrapper = "wrapper-T-b-1";
+var css_248z = ".wcColorFilterItem-xQqck {\n  width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  display: block;\n  float: left;\n  margin-top: 1px;\n  margin-right: 6px;\n  font-size: 14px;\n  color: #333;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .wcColorFilterItem-xQqck {\n  font-size: 12px;\n}\n\n.Dropdown-root-BjRjC {\n  float: right;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n  width: 140px;\n  min-width: 100px;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .Dropdown-root-BjRjC {\n  width: 120px;\n}\n\n.Dropdown-control-8aQx0 {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 12px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n\n.wrapper-T-b-1 .Dropdown-root {\n  position: relative;\n}\n\n.wrapper-T-b-1 .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 2px 24px 2px 10px;\n  transition: all 200ms ease;\n  background-color: #fff;\n  border-radius: var(--globalBorderRadius);\n  font-size: 14px;\n}\n\n.mobile-LQxjP .Dropdown-control {\n  font-size: 12px;\n}\n\n.tablet-IHhtG .Dropdown-control {\n  font-size: 15px;\n}\n\n.wrapper-T-b-1 .Dropdown-control:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n}\n\n.wrapper-T-b-1 .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 8px;\n  top: 7px;\n  width: 0;\n}\n\n.wrapper-T-b-1 .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n.wrapper-T-b-1 .Dropdown-menu {\n  background-color: white;\n  box-sizing: border-box;\n  margin-top: -1px;\n  border: 1px solid #ddd;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n.wrapper-T-b-1 .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n.wrapper-T-b-1 .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:hover {\n  background-color: #f2f9fc;\n}\n\n.wrapper-T-b-1 .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n.wrapper-T-b-1 .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
+styleInject(css_248z);
+
+var RalDropdownFilter = function RalDropdownFilter(_ref) {
+  var _viewHandler$settings;
+  var visibleColorItems = _ref.visibleColorItems,
+    _ref$dropdownRootClas = _ref.dropdownRootClass,
+    dropdownRootClass = _ref$dropdownRootClas === void 0 ? dropdownRoot : _ref$dropdownRootClas,
+    deleteCurValue = _ref.deleteCurValue,
+    id = _ref.id;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  var dropDownValues = visibleColorItems.map(function (item) {
+    return {
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          className: wcColorFilterItem,
+          style: {
+            backgroundColor: item.rgb
+          }
+        }), " ", t('configurator.' + item.text)]
+      }),
+      text: item.text,
+      value: item.text
+    };
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
+    "data-test-id": "ral-dropdown",
+    children: /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRootClass),
+      controlClassName: dropdownControl,
+      options: dropDownValues,
+      value: actValue,
+      onChange: function onChange(val) {
+        return viewHandler.paletteViewHandler.onSelectFilter(id, val.value, 'RAL');
+      },
+      placeholder: t('configurator.colors'),
+      arrowClosed: /*#__PURE__*/jsx(Arrow, {
+        onClick: deleteCurValue,
+        open: false,
+        iconAsDelete: !!actValue
+      }),
+      arrowOpen: /*#__PURE__*/jsx(Arrow, {
+        onClick: deleteCurValue,
+        open: true,
+        iconAsDelete: !!actValue
+      })
+    })
+  });
+};
+
+export { RalDropdownFilter as default };

package/build/esm/index-d23d7797.js

@@ -0,0 +1,152 @@
+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-f895d7dd.js';
+import { useState, useEffect } from 'react';
+import OrbitControlElement from 'react-3d-cube-interaction';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+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/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';
+
+var orbitInteractionContainer = "orbit-interaction-container-BHDEA";
+var cubeText = "cubeText-rsimr";
+var mobile = "mobile-YALCk";
+var roomVisible = "room-visible-QNMOE";
+var css_248z = ".orbit-interaction-container-BHDEA {\n  position: absolute;\n  bottom: 16px;\n  right: 20px;\n  z-index: 350;\n}\n\n.cubeText-rsimr {\n  font-size: max(12px, min(2vw, 20px));\n}\n\n.mobile-YALCk.orbit-interaction-container-BHDEA {\n  position: absolute;\n  bottom: 52px;\n  left: 10px;\n  right: auto;\n  right: initial;\n  z-index: 350;\n}\n\n.room-visible-QNMOE {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+var camRotHorizontal_LastFrame = undefined;
+var camRotVertical_LastFrame = undefined;
+var AUTO_HIDE_IN_MS = 2000;
+var timeOut = undefined;
+var OrbitInteractionStandard = function OrbitInteractionStandard(_ref) {
+  var _viewHandler$productS;
+  var _ref$orbitInteraction = _ref.orbitInteractionContainerClass,
+    orbitInteractionContainerClass = _ref$orbitInteraction === void 0 ? orbitInteractionContainer : _ref$orbitInteraction;
+  var viewHandler = useViewHandler();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHidden = _useState2[0],
+    setHidden = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  useEffect(function () {
+    if (timeOut) clearTimeout(timeOut);
+    if (isHidden) {
+      timeOut = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              viewHandler.productState.setOrbitIsHidden(true);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      })), AUTO_HIDE_IN_MS);
+    } else {
+      viewHandler.productState.setOrbitIsHidden(false);
+    }
+  }, [isHidden]);
+  if (viewHandler.productState.plannerRenderingIsStaticBG) return /*#__PURE__*/jsx(Fragment, {});
+  var initParams = viewHandler.viewPlannerHandler.getOrbitCubeInitParams();
+  var onRotationChange = function onRotationChange(p) {
+    if (viewHandler.productState.ignoreUpdateRenderingOnOrbitChanged) {
+      viewHandler.productState.setIgnoreUpdateRenderingOnOrbitChanged(false);
+      return;
+    }
+    if (camRotHorizontal_LastFrame != undefined && camRotVertical_LastFrame != undefined && p.horizontal == camRotHorizontal_LastFrame && p.vertical == camRotVertical_LastFrame) return;
+    var rotHori = p.horizontal;
+    var rotVert = p.vertical;
+    camRotHorizontal_LastFrame = p.horizontal;
+    camRotVertical_LastFrame = p.vertical;
+    viewHandler.viewPlannerHandler.updateOrbitCubeInitParams(p.horizontal, p.vertical);
+    viewHandler.divaWebPlanner.handle3DVisualizationChanged('Nav3DSetVPByVal', {
+      nav3DSetVPByVal: {
+        rotX: rotHori,
+        rotY: rotVert
+      }
+    });
+  };
+
+  /**
+   *
+   * @param p form 10 (max zoom) to -10 (min zoom)
+   */
+  var onZoomChange = function onZoomChange(zoom) {
+    var p = Math.round(zoom.absoluteZoom);
+    viewHandler.divaWebPlanner.handle3DVisualizationChanged('Nav3DZoom', {
+      nav3DZoom: {
+        zoomVal: p
+      }
+    });
+  };
+  if (viewHandler.uiState.isLoading) {
+    camRotHorizontal_LastFrame = undefined;
+    camRotVertical_LastFrame = undefined;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(orbitInteractionContainerClass, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.productState.roomListExpanded ? roomVisible : undefined),
+    children: /*#__PURE__*/jsx(OrbitControlElement, {
+      hiddenState: [isHidden, setHidden],
+      ref: function ref(_ref3) {
+        return viewHandler.productState.setOrbitCubeElement(_ref3);
+      },
+      size: viewHandler.uiState.isInMobileView ? '40px' : '80px',
+      interactionElement: (_viewHandler$productS = viewHandler.productState.planner3DImageSvgArea) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : document.getElementById('diva3dImg'),
+      onRotationChange: onRotationChange,
+      onZoomChange: onZoomChange,
+      autoHide: AUTO_HIDE_IN_MS,
+      initialRotation: initParams != undefined ? {
+        horizontal: initParams.rotHorizontal,
+        vertical: initParams.rotVertical
+      } : undefined,
+      zoomFactorResetDelay: 500,
+      minCssScale: 0.5,
+      maxCssScale: 1.5,
+      disableDefaultScrollBehaviour: true,
+      cubeFaceChildren: {
+        back: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.back')
+        }),
+        bottom: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.bottom')
+        }),
+        front: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.front')
+        }),
+        left: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.left')
+        }),
+        right: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.right')
+        }),
+        top: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.top')
+        })
+      }
+    })
+  });
+};
+var OrbitInteractionStandard$1 = observer(OrbitInteractionStandard);
+
+export { OrbitInteractionStandard$1 as default };