@crystaldesign/diva-web-planner-react 25.4.0-beta.3 → 25.4.0-beta.30

package/build/esm/index-fa995449.js

@@ -0,0 +1,553 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { a as usePlannerUIHandler, u as useViewHandler } from './index-273b10aa.js';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import AVL from './index-be8b4eef.js';
+import AVR from './index-e25887b1.js';
+import Outline from './index-6436e089.js';
+import RotationClockwise from './index-e24b39e0.js';
+import RotationCounterClockwise from './index-ecbae35b.js';
+import Trash from './index-6518698c.js';
+import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-25ac7e94.js';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import PosNr from './index-efc6e248.js';
+import BoxCopy from './index-2ed8f826.js';
+import Move3DGrid from './index-263b64e5.js';
+import Rotation3DGrid from './index-2ce79e98.js';
+import { getLogger } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import ElementCopy from './index-47365bdb.js';
+import DistanceToGround from './index-dc610021.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/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/widget-contact-form';
+import 'classnames';
+import './index-81b510a4.js';
+import 'react-draggable';
+
+function usePosNrPositioning(_ref) {
+  var _item$position$x, _item$position$y, _boundingState$width, _boundingState$height;
+  var posNrElement = _ref.posNrElement,
+    item = _ref.item;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = posNrElement === null || posNrElement === void 0 ? void 0 : posNrElement.getBoundingClientRect();
+  var left = (_item$position$x = item === null || item === void 0 ? void 0 : item.position.x) !== null && _item$position$x !== void 0 ? _item$position$x : 0;
+  var top = (_item$position$y = item === null || item === void 0 ? void 0 : item.position.y) !== null && _item$position$y !== void 0 ? _item$position$y : 0;
+  if (boundingState) {
+    var correctedPos = new Vector2(left, top);
+    var viewConfig = plannerUIHandler.getViewConfig();
+    var offsetVec = new Vector2(0, 0);
+    switch (item === null || item === void 0 ? void 0 : item.plannerMode) {
+      case '2D':
+        switch (viewConfig.iconPosition2DGrid) {
+          case 'BORDER':
+            offsetVec = new Vector2(boundingState.width, -boundingState.height * 0.1);
+            if (item !== null && item !== void 0 && item.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, item === null || item === void 0 ? void 0 : item.rotOfElement);
+            correctedPos = new Vector2(left + offsetVec.x, top + offsetVec.y, 'pixel');
+            break;
+          case 'OUTSIDE':
+            var distance = item !== null && item !== void 0 && item.iconZoom ? item.iconZoom : 1;
+            offsetVec = new Vector2(boundingState.width + distance, -boundingState.height / 2 - (boundingState.height / 2.5 - distance));
+            if (item !== null && item !== void 0 && item.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, item === null || item === void 0 ? void 0 : item.rotOfElement);
+            correctedPos = new Vector2(left + offsetVec.x, top + offsetVec.y, 'pixel');
+            break;
+        }
+        left = correctedPos.x;
+        top = correctedPos.y;
+        break;
+      case '3D':
+        top = 100 - top - 1;
+        left += 3;
+        if (left < 1) left = 1;
+        if (top < 1) top = 1;
+        break;
+    }
+  }
+  var posNrRect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left
+  };
+  return posNrRect;
+}
+
+var border$1 = 4;
+var collisionDistance$1 = 100; //indicates the minimal distance the icons posNr and trash can have without colliding. If the distance is smaller and the rotation should be placed like Pfister - set the rotation icon on top of the trash icon
+function useRotClockwisePositioning(_ref) {
+  var _rotItem$position$x, _rotItem$position$y, _boundingState$width, _boundingState$height;
+  var rotElement = _ref.rotElement,
+    posNrRect = _ref.posNrRect,
+    trashRect = _ref.trashRect,
+    rotItem = _ref.rotItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = rotElement === null || rotElement === void 0 ? void 0 : rotElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = (_rotItem$position$x = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.x) !== null && _rotItem$position$x !== void 0 ? _rotItem$position$x : 0;
+  var top = (_rotItem$position$y = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.y) !== null && _rotItem$position$y !== void 0 ? _rotItem$position$y : 0;
+  if (boundingState && posNrRect && trashRect) {
+    var offsetVec = new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        left = (posNrRect.left + trashRect.left) / 2;
+        top = (posNrRect.top + trashRect.top) / 2;
+        offsetVec = new Vector2(-boundingState.width, 0);
+        if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+        left += offsetVec.x;
+        top += offsetVec.y;
+        break;
+      case 'TOP_RIGHT_BACK':
+        var collisionDetected = Math.sqrt(Math.pow(posNrRect.left - trashRect.left, 2) + Math.pow(posNrRect.top - trashRect.top, 2)) <= collisionDistance$1;
+        if (collisionDetected) {
+          var delta = new Vector2(0, -boundingState.height - border$1);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement && rotItem.rotOfElement != 0) {
+            delta = Vector2.rotateOrigin(delta, rotItem.rotOfElement);
+          }
+          left = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.left) + delta.x;
+          top = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.top) + delta.y;
+        } else {
+          var _delta = new Vector2(-boundingState.width - border$1, 0);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement && rotItem.rotOfElement != 0) {
+            _delta = Vector2.rotateOrigin(_delta, rotItem.rotOfElement);
+          }
+          left = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.left) + _delta.x;
+          top = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.top) + _delta.y;
+        }
+        break;
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left
+  };
+  return rect;
+}
+
+var border = 3;
+var collisionDistance = 100;
+function useRotCounterClockwisePositioning(_ref) {
+  var _rotItem$position$x, _rotItem$position$y, _boundingState$width, _boundingState$height;
+  var rotElement = _ref.rotElement,
+    posNrRect = _ref.posNrRect,
+    trashRect = _ref.trashRect,
+    rotClockRect = _ref.rotClockRect,
+    rotItem = _ref.rotItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = rotElement === null || rotElement === void 0 ? void 0 : rotElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = (_rotItem$position$x = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.x) !== null && _rotItem$position$x !== void 0 ? _rotItem$position$x : 0;
+  var top = (_rotItem$position$y = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.y) !== null && _rotItem$position$y !== void 0 ? _rotItem$position$y : 0;
+  if (boundingState && posNrRect && trashRect && rotClockRect) {
+    var offsetVec = new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        left = (posNrRect.left + trashRect.left) / 2;
+        top = (posNrRect.top + trashRect.top) / 2;
+        offsetVec = new Vector2(boundingState.width, 0);
+        if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+        left += offsetVec.x;
+        top += offsetVec.y;
+        break;
+      case 'TOP_RIGHT_BACK':
+        var collisionDetected = Math.sqrt(Math.pow(posNrRect.left - trashRect.left, 2) + Math.pow(posNrRect.top - trashRect.top, 2)) <= collisionDistance;
+        if (collisionDetected) {
+          offsetVec = new Vector2(0, -boundingState.height - border);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+          left = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.left) + offsetVec.x;
+          top = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.top) + offsetVec.y;
+        } else {
+          offsetVec = new Vector2(-boundingState.width - border, -0);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+          left = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.left) + offsetVec.x;
+          top = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.top) + offsetVec.y;
+        }
+        break;
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left
+  };
+  return rect;
+}
+
+function useTrashPositioning(_ref) {
+  var _trashItem$position$x, _trashItem$position$y, _boundingState$width, _boundingState$height;
+  var trashElement = _ref.trashElement,
+    posNrRect = _ref.posNrRect,
+    boxPlannerCopyLeftRect = _ref.boxPlannerCopyLeftRect,
+    boxPlannerCopyTopRect = _ref.boxPlannerCopyTopRect,
+    boxPlannerCopyRightRect = _ref.boxPlannerCopyRightRect,
+    trashItem = _ref.trashItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = trashElement === null || trashElement === void 0 ? void 0 : trashElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = (_trashItem$position$x = trashItem === null || trashItem === void 0 ? void 0 : trashItem.position.x) !== null && _trashItem$position$x !== void 0 ? _trashItem$position$x : 0;
+  var top = (_trashItem$position$y = trashItem === null || trashItem === void 0 ? void 0 : trashItem.position.y) !== null && _trashItem$position$y !== void 0 ? _trashItem$position$y : 0;
+  var leftCalc = '';
+  var topCalc = '';
+  var useCalc = false;
+  if (boundingState && posNrRect) {
+    var offsetVec = new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        // return new Vector2(screenPos.x, screenPos.y - trashBoundingState.height / 2, "pixel");
+        if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '2D') {
+          offsetVec = new Vector2(0, -posNrRect.height - boundingState.height / 2);
+          if (trashItem !== null && trashItem !== void 0 && trashItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, trashItem.rotOfElement);
+          left = posNrRect.left + offsetVec.x;
+          top = posNrRect.top + offsetVec.y;
+        } else if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '3D' || (trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == 'BOX') {
+          if (viewConfig.enableElementCopy) {
+            useCalc = true;
+            leftCalc = 'calc(' + posNrRect.left.toString() + '% - ' + posNrRect.width / 1.8 + 'px)';
+            // total space for trash is 35, 5 for offset up&down
+            if (posNrRect.top < 4) topCalc = 'calc(' + posNrRect.top + '% + 30px - var(--globalSize) / 2';else topCalc = 'calc(' + posNrRect.top + '% - (var(--globalSize) + 5px) / 2';
+          } else {
+            useCalc = true;
+            leftCalc = posNrRect.left.toString() + '%';
+            // space for trash is 30, 5 for offset up&down
+            if (posNrRect.top < 4) topCalc = 'calc(' + posNrRect.top + '% + 30px - var(--globalSize) / 2';else topCalc = 'calc(' + posNrRect.top + '% - (var(--globalSize) + 5px) / 2';
+          }
+        }
+        break;
+      case 'TOP_RIGHT_BACK':
+        if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '2D') {
+          var distance = trashItem !== null && trashItem !== void 0 && trashItem.iconZoom ? trashItem.iconZoom : 1;
+          offsetVec = new Vector2(-boundingState.width / 2 - (boundingState.width / 3 + distance), -boundingState.height / 2 - (boundingState.height / 3.7 - distance));
+          if (trashItem !== null && trashItem !== void 0 && trashItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, trashItem.rotOfElement);
+          left = left + offsetVec.x;
+          top = top + offsetVec.y;
+          var collisionDetected = Math.sqrt(Math.pow(posNrRect.left - left, 2) + Math.pow(posNrRect.top - top, 2)) <= posNrRect.width;
+          if (collisionDetected) {
+            offsetVec = new Vector2(posNrRect.width, 0);
+            if (trashItem !== null && trashItem !== void 0 && trashItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, trashItem.rotOfElement);
+            left = left + offsetVec.x;
+            top = top + offsetVec.y;
+          }
+        } else if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '3D' || (trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == 'BOX') {
+          if (boxPlannerCopyLeftRect || boxPlannerCopyRightRect || boxPlannerCopyTopRect) {
+            //if one of the bounding box Copy Icons is set -> check for collision with one copy element.
+            var collisionFound = false;
+            if (boxPlannerCopyLeftRect) {
+              var distanceLeft = Math.sqrt(Math.pow(boxPlannerCopyLeftRect.left - left, 2) + Math.pow(boxPlannerCopyLeftRect.top - top, 2));
+              if (distanceLeft < 9) {
+                top += 5;
+                collisionFound = true;
+              }
+              if (!collisionFound && boxPlannerCopyRightRect) {
+                var distanceRight = Math.sqrt(Math.pow(boxPlannerCopyRightRect.left - left, 2) + Math.pow(boxPlannerCopyRightRect.top - top, 2));
+                if (distanceRight < 9) {
+                  top += 5;
+                  collisionFound = true;
+                }
+              }
+              if (!collisionFound && boxPlannerCopyTopRect) {
+                var distanceTop = Math.sqrt(Math.pow(boxPlannerCopyTopRect.left - left, 2) + Math.pow(boxPlannerCopyTopRect.top - top, 2));
+                if (distanceTop < 9) {
+                  top += 5;
+                  collisionFound = true;
+                }
+              }
+            }
+          }
+          top = 100 - top - 2;
+          left -= 1;
+          if (left > 99) left = 99;
+          if (top < 1) top = 1;
+        }
+        break;
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left,
+    doUseCalc: useCalc,
+    topCalc: useCalc ? topCalc : undefined,
+    leftCalc: useCalc ? leftCalc : undefined
+  };
+  return rect;
+}
+
+var LOG = getLogger('Planner', 'CopyElementPositioning');
+function useCopyElementPositioning(_ref) {
+  var _boundingState$width, _boundingState$height;
+  var copyElement = _ref.copyElement,
+    posNrRect = _ref.posNrRect,
+    copyElementItem = _ref.copyElementItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = copyElement === null || copyElement === void 0 ? void 0 : copyElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = 0;
+  var top = 0;
+  var leftCalc = '';
+  var topCalc = '';
+  var useCalc = false;
+  if (boundingState && posNrRect) {
+    new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        // return new Vector2(screenPos.x, screenPos.y - trashBoundingState.height / 2, "pixel");
+        if ((copyElementItem === null || copyElementItem === void 0 ? void 0 : copyElementItem.plannerMode) == '3D') {
+          if (viewConfig.enableElementCopy) {
+            useCalc = true;
+            leftCalc = 'calc(' + posNrRect.left.toString() + '% + ' + posNrRect.width / 1.8 + 'px)';
+            topCalc = 'calc(' + posNrRect.top + '% - ' + (posNrRect.height + 2) + 'px)';
+          }
+        }
+        break;
+      case 'TOP_RIGHT_BACK':
+        LOG.error(new DivaError('Do implement copy Element for TOP_RIGHT_BACK Positioning', {
+          code: 'WC_0012'
+        }));
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left,
+    doUseCalc: useCalc,
+    topCalc: useCalc ? topCalc : undefined,
+    leftCalc: useCalc ? leftCalc : undefined
+  };
+  return rect;
+}
+
+/**
+ * render all Icons of one element
+ * @param  items Array of the items
+ */
+var ItemsContainer = function ItemsContainer(_ref) {
+  var items = _ref.items,
+    plannerUIProps = _ref.plannerUIProps;
+  var viewHandler = useViewHandler();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    posNrElement = _useState2[0],
+    setPosNrElement = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    avlElement = _useState4[0],
+    setAvlElement = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    avrElement = _useState6[0],
+    setAvrElement = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    boxPlannerCopyLeftElement = _useState8[0];
+    _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    boxPlannerCopyTopElement = _useState10[0];
+    _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    boxPlannerCopyRightElement = _useState12[0];
+    _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    trashElement = _useState14[0],
+    setTrashElement = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    copyElement = _useState16[0],
+    setCopyElement = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    rotClockwiseElement = _useState18[0],
+    setRotClockwiseElement = _useState18[1];
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2);
+    _useState20[0];
+    var setRotCounterClockwiseElement = _useState20[1];
+  var posNrItem = items.find(function (item) {
+    return item.type == 'PosNr';
+  });
+  var avlItem = items.find(function (item) {
+    return item.type == 'AVL';
+  });
+  var avrItem = items.find(function (item) {
+    return item.type == 'AVR';
+  });
+  var dpAccItems = [];
+  var distanceToGroundItems = [];
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].type == 'AccDP') {
+      dpAccItems.push(items[i]);
+    } else if (items[i].type == 'DistanceFromGround') {
+      distanceToGroundItems.push(items[i]);
+    }
+  }
+  var outlineItem = items.find(function (item) {
+    return item.type == 'Outline';
+  });
+  var trashItem = items.find(function (item) {
+    return item.type == 'TrashIcon';
+  });
+  var copyElementItem = items.find(function (item) {
+    return item.type == 'CopyElement';
+  });
+  var rotClockwiseItem = items.find(function (item) {
+    return item.type == 'RotateC';
+  });
+  var rotCounterClockwiseItem = items.find(function (item) {
+    return item.type == 'RotateCC';
+  });
+  var boxPlannerCopyLeftItem = items.find(function (item) {
+    return item.type == 'BoxCopyLeft';
+  });
+  var boxPlannerCopyTopItem = items.find(function (item) {
+    return item.type == 'BoxCopyTop';
+  });
+  var boxPlannerCopyRightItem = items.find(function (item) {
+    return item.type == 'BoxCopyRight';
+  });
+  var move3DGridItem = items.find(function (item) {
+    return item.type == 'Move3DGrid';
+  });
+  var rot3DGridItem = items.find(function (item) {
+    return item.type == 'Rot3DGrid';
+  });
+  var posNrRect = usePosNrPositioning({
+    item: posNrItem,
+    posNrElement: posNrElement
+  });
+  var avlRect = useDockingPointPositioning({
+    item: avlItem,
+    dpElement: avlElement
+  });
+  var avrRect = useDockingPointPositioning({
+    item: avrItem,
+    dpElement: avrElement
+  });
+  var boxPlannerCopyLeftRect = useDockingPointPositioning({
+    item: boxPlannerCopyLeftItem,
+    dpElement: boxPlannerCopyLeftElement
+  });
+  var boxPlannerCopyTopRect = useDockingPointPositioning({
+    item: boxPlannerCopyTopItem,
+    dpElement: boxPlannerCopyTopElement
+  });
+  var boxPlannerCopyRightRect = useDockingPointPositioning({
+    item: boxPlannerCopyRightItem,
+    dpElement: boxPlannerCopyRightElement
+  });
+  var trashRect = useTrashPositioning({
+    trashItem: trashItem,
+    posNrRect: posNrRect,
+    boxPlannerCopyLeftRect: boxPlannerCopyLeftRect,
+    boxPlannerCopyTopRect: boxPlannerCopyTopRect,
+    boxPlannerCopyRightRect: boxPlannerCopyRightRect,
+    trashElement: trashElement
+  });
+  var copyElementRect = useCopyElementPositioning({
+    copyElementItem: copyElementItem,
+    posNrRect: posNrRect,
+    copyElement: copyElement
+  });
+  var rotClockwiseRect = useRotClockwisePositioning({
+    rotItem: rotClockwiseItem,
+    posNrRect: posNrRect,
+    trashRect: trashRect,
+    rotElement: rotClockwiseElement
+  });
+  var rotCounterClockwiseRect = useRotCounterClockwisePositioning({
+    rotItem: rotClockwiseItem,
+    posNrRect: posNrRect,
+    trashRect: trashRect,
+    rotClockRect: rotClockwiseRect,
+    rotElement: rotClockwiseElement
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [posNrItem && /*#__PURE__*/jsx(PosNr, {
+      item: posNrItem,
+      rect: posNrRect,
+      onElement: setPosNrElement,
+      plannerUIProps: plannerUIProps,
+      hasTrash: !!trashItem
+    }), outlineItem && /*#__PURE__*/jsx(Outline, {
+      item: outlineItem,
+      plannerUIProps: plannerUIProps
+    }, outlineItem.key), avlItem && /*#__PURE__*/jsx(AVL, {
+      item: avlItem,
+      rect: avlRect,
+      onElement: setAvlElement,
+      plannerUIProps: plannerUIProps
+    }, avlItem === null || avlItem === void 0 ? void 0 : avlItem.key), avrItem && /*#__PURE__*/jsx(AVR, {
+      item: avrItem,
+      rect: avrRect,
+      onElement: setAvrElement,
+      plannerUIProps: plannerUIProps
+    }, avrItem === null || avrItem === void 0 ? void 0 : avrItem.key), boxPlannerCopyLeftItem && boxPlannerCopyRightItem && /*#__PURE__*/jsx(BoxCopy, {
+      item: boxPlannerCopyLeftItem,
+      rect: boxPlannerCopyLeftRect,
+      invertLeftRight: boxPlannerCopyRightRect.left < boxPlannerCopyLeftRect.left,
+      plannerUIProps: plannerUIProps
+    }, boxPlannerCopyLeftItem.key), boxPlannerCopyTopItem && /*#__PURE__*/jsx(BoxCopy, {
+      item: boxPlannerCopyTopItem,
+      rect: boxPlannerCopyTopRect,
+      invertLeftRight: false,
+      plannerUIProps: plannerUIProps
+    }, boxPlannerCopyTopItem.key), boxPlannerCopyRightItem && boxPlannerCopyLeftItem && /*#__PURE__*/jsx(BoxCopy, {
+      item: boxPlannerCopyRightItem,
+      rect: boxPlannerCopyRightRect,
+      invertLeftRight: boxPlannerCopyRightRect.left < boxPlannerCopyLeftRect.left,
+      plannerUIProps: plannerUIProps
+    }, boxPlannerCopyRightItem.key), trashItem && /*#__PURE__*/jsx(Trash, {
+      item: trashItem,
+      rect: trashRect,
+      onElement: setTrashElement,
+      plannerUIProps: plannerUIProps
+    }), copyElementItem && /*#__PURE__*/jsx(ElementCopy, {
+      item: copyElementItem,
+      rect: copyElementRect,
+      onElement: setCopyElement,
+      plannerUIProps: plannerUIProps
+    }), rotClockwiseItem && /*#__PURE__*/jsx(RotationClockwise, {
+      item: rotClockwiseItem,
+      rect: rotClockwiseRect,
+      onElement: setRotClockwiseElement,
+      plannerUIProps: plannerUIProps
+    }), rotCounterClockwiseItem && /*#__PURE__*/jsx(RotationCounterClockwise, {
+      item: rotCounterClockwiseItem,
+      rect: rotCounterClockwiseRect,
+      onElement: setRotCounterClockwiseElement,
+      plannerUIProps: plannerUIProps
+    }), dpAccItems.map(function (item, i) {
+      return /*#__PURE__*/jsx(ItemsDPAccContainer, {
+        item: item,
+        plannerUIProps: plannerUIProps
+      }, item.key);
+    }), viewHandler.productState.getDoShow3DDimensionLines() && distanceToGroundItems.map(function (item, i) {
+      return /*#__PURE__*/jsx(DistanceToGround, {
+        item: item,
+        plannerUIProps: plannerUIProps
+      }, item.key);
+    }), move3DGridItem && /*#__PURE__*/jsx(Move3DGrid, {
+      item: move3DGridItem,
+      plannerUIProps: plannerUIProps
+    }, move3DGridItem === null || move3DGridItem === void 0 ? void 0 : move3DGridItem.key), rot3DGridItem && /*#__PURE__*/jsx(Rotation3DGrid, {
+      item: rot3DGridItem,
+      plannerUIProps: plannerUIProps
+    }, rot3DGridItem === null || rot3DGridItem === void 0 ? void 0 : rot3DGridItem.key)]
+  });
+};
+var ItemsContainer$1 = observer(ItemsContainer);
+
+export { ItemsContainer$1 as default };

package/build/esm/index-fb8350b9.js

@@ -0,0 +1,82 @@
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.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/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';
+
+var wcConfiguratorProductFooter = "wcConfigurator-product-footer-BQAEt";
+var portrait = "portrait-dDB1V";
+var settingsHidden = "settings-hidden-p8yxj";
+var landscape = "landscape-U5rkX";
+var expanded = "expanded-ENaC6";
+var wcButton = "wcButton-ejK-0";
+var wcFoto = "wcFoto-w00Jj";
+var sel = "sel-BDwTn";
+var wcGrid = "wcGrid-W7T4M";
+var wcAccessorie = "wcAccessorie-pXi-s";
+var wcRtv = "wcRtv-AT3Rr";
+var wcViewAs = "wc_ViewAs-pTwrO";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-BQAEt {\n  text-align: center;\n  z-index: 350;\n}\n\n.wcConfigurator-product-footer-BQAEt {\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.portrait-dDB1V.wcConfigurator-product-footer-BQAEt {\n  display: none;\n}\n\n.portrait-dDB1V.settings-hidden-p8yxj.wcConfigurator-product-footer-BQAEt {\n  position: absolute;\n  display: block;\n  height: 40px;\n}\n\n.portrait-dDB1V.settings-hidden-p8yxj.wcConfigurator-product-footer-BQAEt {\n  bottom: 20px;\n}\n\n.landscape-U5rkX.settings-hidden-p8yxj.wcConfigurator-product-footer-BQAEt {\n  position: absolute;\n  display: block;\n  bottom: 20px;\n  height: 40px;\n}\n\n.expanded-ENaC6.wcConfigurator-product-footer-BQAEt {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0 {\n  width: 60px;\n  height: 60px;\n  border-radius: 50%;\n  background-repeat: no-repeat;\n  min-width: 0;\n  min-width: initial;\n  margin: 0 0.5rem;\n  background-size: contain;\n  background-position: center center;\n  cursor: pointer;\n  transition: background-color 0.4s;\n  background-size: 80%;\n}\n\n.landscape-U5rkX .wcButton-ejK-0 {\n  width: 40px;\n  height: 40px;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0:hover {\n  box-shadow: var(--boxShadowHover);\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2237%22 height%3D%2236%22 viewBox%3D%220 0 37 36%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.14907 22.7265C8.1201 22.474 8.10558 22.2201 8.10557 21.966V14.034C8.09599 12.3106 8.77144 10.654 9.9833 9.42865C11.1952 8.20328 12.8442 7.50952 14.5676 7.5H22.6436C24.367 7.50952 26.016 8.20328 27.2278 9.42865C28.4397 10.654 29.1151 12.3106 29.1056 14.034V21.966C29.1151 23.6894 28.4397 25.346 27.2278 26.5714C26.016 27.7967 24.367 28.4905 22.6436 28.5H14.5676C11.2725 28.4843 8.51236 26.0015 8.14907 22.7265ZM8.14907 22.7265C8.95396 22.005 9.7017 21.2222 10.3856 20.3851C11.3976 19.0159 13.191 18.4778 14.7896 19.0636C18.5756 20.2636 21.9551 24.6721 25.1966 22.3801C26.387 21.4717 27.3084 20.2569 27.8621 18.8656C28.1879 18.1013 28.6054 17.3795 29.1056 16.7161M14.1851 12.8189C14.1851 13.2389 13.8446 13.5794 13.4246 13.5794C13.0046 13.5794 12.6641 13.2389 12.6641 12.8189C12.6641 12.3989 13.0046 12.0584 13.4246 12.0584C13.8446 12.0584 14.1851 12.3989 14.1851 12.8189Z%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2237%22 height%3D%2237%22 viewBox%3D%220 0 37 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.14907 23.0289C8.1201 22.7764 8.10558 22.5225 8.10557 22.2684V14.3364C8.09599 12.613 8.77144 10.9564 9.9833 9.73101C11.1952 8.50565 12.8442 7.81189 14.5676 7.80237H22.6436C24.367 7.81189 26.016 8.50565 27.2278 9.73101C28.4397 10.9564 29.1151 12.613 29.1056 14.3364V22.2684C29.1151 23.9918 28.4397 25.6484 27.2278 26.8737C26.016 28.0991 24.367 28.7928 22.6436 28.8024H14.5676C11.2725 28.7867 8.51236 26.3039 8.14907 23.0289ZM8.14907 23.0289C8.95396 22.3073 9.7017 21.5246 10.3856 20.6874C11.3976 19.3183 13.191 18.7802 14.7896 19.3659C18.5756 20.5659 21.9551 24.9744 25.1966 22.6824C26.387 21.774 27.3084 20.5593 27.8621 19.1679C28.1879 18.4037 28.6054 17.6819 29.1056 17.0184M14.1851 13.1213C14.1851 13.5413 13.8446 13.8818 13.4246 13.8818C13.0046 13.8818 12.6641 13.5413 12.6641 13.1213C12.6641 12.7013 13.0046 12.3608 13.4246 12.3608C13.8446 12.3608 14.1851 12.7013 14.1851 13.1213Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2237%22 height%3D%2237%22 viewBox%3D%220 0 37 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.14907 23.0289C8.1201 22.7764 8.10558 22.5225 8.10557 22.2684V14.3364C8.09599 12.613 8.77144 10.9564 9.9833 9.73101C11.1952 8.50565 12.8442 7.81189 14.5676 7.80237H22.6436C24.367 7.81189 26.016 8.50565 27.2278 9.73101C28.4397 10.9564 29.1151 12.613 29.1056 14.3364V22.2684C29.1151 23.9918 28.4397 25.6484 27.2278 26.8737C26.016 28.0991 24.367 28.7928 22.6436 28.8024H14.5676C11.2725 28.7867 8.51236 26.3039 8.14907 23.0289ZM8.14907 23.0289C8.95396 22.3073 9.7017 21.5246 10.3856 20.6874C11.3976 19.3183 13.191 18.7802 14.7896 19.3659C18.5756 20.5659 21.9551 24.9744 25.1966 22.6824C26.387 21.774 27.3084 20.5593 27.8621 19.1679C28.1879 18.4037 28.6054 17.6819 29.1056 17.0184M14.1851 13.1213C14.1851 13.5413 13.8446 13.8818 13.4246 13.8818C13.0046 13.8818 12.6641 13.5413 12.6641 13.1213C12.6641 12.7013 13.0046 12.3608 13.4246 12.3608C13.8446 12.3608 14.1851 12.7013 14.1851 13.1213Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2235%22 height%3D%2218%22 viewBox%3D%220 0 35 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M25.3008 13L17.3008 17L9.30078 13M25.3008 13L17.3008 9M25.3008 13L33.3008 9L25.3008 5M9.30078 13L17.3008 9M9.30078 13L1.30078 9L9.30078 5M17.3008 9L25.3008 5M17.3008 9L9.30078 5M25.3008 5L17.3008 1L9.30078 5%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2235%22 height%3D%2219%22 viewBox%3D%220 0 35 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M25.3008 13.3024L17.3008 17.3024L9.30078 13.3024M25.3008 13.3024L17.3008 9.30237M25.3008 13.3024L33.3008 9.30237L25.3008 5.30237M9.30078 13.3024L17.3008 9.30237M9.30078 13.3024L1.30078 9.30237L9.30078 5.30237M17.3008 9.30237L25.3008 5.30237M17.3008 9.30237L9.30078 5.30237M25.3008 5.30237L17.3008 1.30237L9.30078 5.30237%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2235%22 height%3D%2219%22 viewBox%3D%220 0 35 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M25.3008 13.3024L17.3008 17.3024L9.30078 13.3024M25.3008 13.3024L17.3008 9.30237M25.3008 13.3024L33.3008 9.30237L25.3008 5.30237M9.30078 13.3024L17.3008 9.30237M9.30078 13.3024L1.30078 9.30237L9.30078 5.30237M17.3008 9.30237L25.3008 5.30237M17.3008 9.30237L9.30078 5.30237M25.3008 5.30237L17.3008 1.30237L9.30078 5.30237%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcAccessorie-pXi-s.wcButton-ejK-0 {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 55 55%22 style%3D%22enable-background%3Anew 0 0 55 55%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%23F5F5F5%3B%7D%09.st1%7Bfill%3Anone%3B%7D%09.st2%7Benable-background%3Anew    %3B%7D%09.st3%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2227.5%22 cy%3D%2227.5%22 r%3D%2227.5%22%2F%3E%3Crect x%3D%2211.8%22 y%3D%224%22 class%3D%22st1%22 width%3D%2243.5%22 height%3D%2251.5%22%2F%3E%3Cg class%3D%22st2%22%3E%09%3Cpath class%3D%22st3%22 d%3D%22M25.3%2C40V29.6H15v-4.3h10.3V15h4.4v10.3H40v4.3H29.7V40H25.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcAccessorie-pXi-s:hover {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 55 55%22 style%3D%22enable-background%3Anew 0 0 55 55%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%234B4B4B%3B%7D%09.st1%7Bfill%3Anone%3B%7D%09.st2%7Benable-background%3Anew    %3B%7D%09.st3%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2227.5%22 cy%3D%2227.5%22 r%3D%2227.5%22%2F%3E%3Crect x%3D%2211.9%22 y%3D%224%22 class%3D%22st1%22 width%3D%2243.5%22 height%3D%2251.5%22%2F%3E%3Cg class%3D%22st2%22%3E%09%3Cpath class%3D%22st3%22 d%3D%22M25.3%2C40V29.6H15v-4.3h10.3V15h4.4v10.3H40v4.3H29.7V40H25.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcAccessorie-pXi-s:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcAccessorie-pXi-s.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 55 55%22 style%3D%22enable-background%3Anew 0 0 55 55%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%234B4B4B%3B%7D%09.st1%7Bfill%3Anone%3B%7D%09.st2%7Benable-background%3Anew    %3B%7D%09.st3%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2227.5%22 cy%3D%2227.5%22 r%3D%2227.5%22%2F%3E%3Crect x%3D%2211.9%22 y%3D%224%22 class%3D%22st1%22 width%3D%2243.5%22 height%3D%2251.5%22%2F%3E%3Cg class%3D%22st2%22%3E%09%3Cpath class%3D%22st3%22 d%3D%22M25.3%2C40V29.6H15v-4.3h10.3V15h4.4v10.3H40v4.3H29.7V40H25.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  border: 1px solid white;\n  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcRtv-AT3Rr.wcButton-ejK-0 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2236%22 height%3D%2236%22 viewBox%3D%220 0 36 36%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M17.5 15.3039V20.413M17.5 15.3039L13.8478 13.9348M17.5 15.3039L21.1522 13.9348M7 11.6526V16.3039M7 11.6526L10.6522 13.0217M7 11.6526L9.39674 10.7395M28 16.3039V11.6526M28 11.6526L24.3478 13.0217M28 11.6526L25.0326 10.5221M17.5 8V11.6522M17.5 8L13.8478 9.39148M17.5 8L21.1522 9.39148M28 24.4789V20M28 24.4789L24.3478 22.7994M28 24.4789L25.6033 25.599M7 20V24.4789M7 24.4789L10.6522 22.7994M7 24.4789L9.96739 25.8657M17.5 28.9594V24.4794M17.5 28.9594L21.1522 27.2525M17.5 28.9594L13.8478 27.2525%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcRtv-AT3Rr:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2236%22 height%3D%2237%22 viewBox%3D%220 0 36 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M17.5 15.6063V20.7154M17.5 15.6063L13.8478 14.2372M17.5 15.6063L21.1522 14.2372M7 11.955V16.6063M7 11.955L10.6522 13.3241M7 11.955L9.39674 11.0418M28 16.6063V11.955M28 11.955L24.3478 13.3241M28 11.955L25.0326 10.8244M17.5 8.30237V11.9545M17.5 8.30237L13.8478 9.69385M17.5 8.30237L21.1522 9.69385M28 24.7812V20.3023M28 24.7812L24.3478 23.1018M28 24.7812L25.6033 25.9014M7 20.3023V24.7812M7 24.7812L10.6522 23.1018M7 24.7812L9.96739 26.1681M17.5 29.2618V24.7818M17.5 29.2618L21.1522 27.5549M17.5 29.2618L13.8478 27.5549%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcRtv-AT3Rr:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcRtv-AT3Rr.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2236%22 height%3D%2237%22 viewBox%3D%220 0 36 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M17.5 15.6063V20.7154M17.5 15.6063L13.8478 14.2372M17.5 15.6063L21.1522 14.2372M7 11.955V16.6063M7 11.955L10.6522 13.3241M7 11.955L9.39674 11.0418M28 16.6063V11.955M28 11.955L24.3478 13.3241M28 11.955L25.0326 10.8244M17.5 8.30237V11.9545M17.5 8.30237L13.8478 9.69385M17.5 8.30237L21.1522 9.69385M28 24.7812V20.3023M28 24.7812L24.3478 23.1018M28 24.7812L25.6033 25.9014M7 20.3023V24.7812M7 24.7812L10.6522 23.1018M7 24.7812L9.96739 26.1681M17.5 29.2618V24.7818M17.5 29.2618L21.1522 27.5549M17.5 29.2618L13.8478 27.5549%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n/* ViewAs  */\n.wc_ViewAs-pTwrO {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  margin-bottom: 16px;\n  padding: 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-pTwrO li {\n  display: block;\n  float: left;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var viewHandler = useViewHandler();
+  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.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, wcFoto, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        }
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, wcFoto, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          }
+        }), ((_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, wcAccessorie, 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);
+            }
+          });
+        })]
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, wcGrid, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        }
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, wcRtv, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        }
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };