@crystaldesign/diva-web-planner-react 25.3.0-rc.2 → 25.3.0-rc.21

package/build/esm/index-0ead3884.js

@@ -0,0 +1,49 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-67492a6a.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import VerticalTabGroupItemStandard from './index-ec189471.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 'classnames';
+import './IconHandler-dab77818.js';
+
+var priceDiv = "price-div-veoFD";
+var priceText = "price-text-34sGt";
+var css_248z = ".price-div-veoFD {\n  font-size: 22px;\n  font-weight: 300;\n  padding-top: calc(15% - 6px);\n}\n\n.price-text-34sGt {\n  font-size: 14px;\n  padding-top: calc(10% - 6px);\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var VerticalTabGroupItemMountain = function VerticalTabGroupItemMountain(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(VerticalTabGroupItemStandard, _objectSpread(_objectSpread({}, props), {}, {
+    lastItemDiv: /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: priceText,
+        children: t('configurator.PRICE_INFO')
+      }), /*#__PURE__*/jsx("div", {
+        className: priceDiv,
+        children: viewHandler.productState.formatedTotalPrice
+      })]
+    }),
+    minHeight: 65
+  }));
+};
+var index = observer(VerticalTabGroupItemMountain);
+
+export { index as default };

package/build/esm/index-0ff338d7.js

@@ -0,0 +1,37 @@
+import { s as styleInject } from './index-67492a6a.js';
+import ProductHeader from './index-b7e3f29e.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+import 'classnames';
+import './index-913933ca.js';
+import '@crystaldesign/content-box';
+import './index-9ff43110.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var productHeader = "product-header-h3vB3";
+var css_248z = ".product-header-h3vB3 * {\n  color: var(--secondaryColor) !important;\n}\n";
+styleInject(css_248z);
+
+var ProductHeaderGold = function ProductHeaderGold(props) {
+  return /*#__PURE__*/jsx(ProductHeader, {
+    productClass: productHeader
+  });
+};
+
+export { ProductHeaderGold as default };

package/build/esm/index-1134270d.js

@@ -0,0 +1,46 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-67492a6a.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { r as reactJson, a as reactJsonExpanded } from './index.module-29159be0.js';
+import classnames from 'classnames';
+import { JsonView, darkStyles } from 'react-json-view-lite';
+import './react-json-viewer-a33a9cc1.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 _excluded = ["json", "isExpanded", "collapsed"];
+var JsonViewer = function JsonViewer(_ref) {
+  var json = _ref.json,
+    isExpanded = _ref.isExpanded;
+    _ref.collapsed;
+    _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx("div", {
+      className: classnames(reactJson, isExpanded ? reactJsonExpanded : undefined),
+      style: {
+        zIndex: 9999
+      },
+      children: /*#__PURE__*/jsx(JsonView, {
+        data: json,
+        style: darkStyles
+      }, viewHandler.settingsState.configChanged)
+    })
+  });
+};
+var JsonViewer$1 = observer(JsonViewer);
+
+export { JsonViewer$1 as default };

package/build/esm/index-14539a5a.js

@@ -0,0 +1,120 @@
+import { s as styleInject } from './index-67492a6a.js';
+import 'react';
+import PlannerUI from './index-c2c3c80a.js';
+import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-1e1a5642.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+import './index-0c7d043e.js';
+import 'classnames';
+import './index-eb3c1d8e.js';
+import './index-1c4c42c6.js';
+import './index-31eaa0a7.js';
+import './index-a926b849.js';
+import './index-b649026d.js';
+import './index-369cc834.js';
+import './index-0690466a.js';
+import './index-d8b37538.js';
+import './index-c03dd756.js';
+import './index-62d7075b.js';
+import './index-de1747ad.js';
+import './index-16442d1b.js';
+import 'react-draggable';
+import './index-e4c05f55.js';
+import './index-98aa40a9.js';
+import './index-14c11bff.js';
+
+var hidden = "hidden-75j7C";
+var css_248z = ".hidden-75j7C {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+var HiddenPlannerUI = function HiddenPlannerUI() {
+  var plannerUIProps = {
+    classes: {
+      buttonGeneral: hidden,
+      dockingPoint: {
+        AVL: {
+          avl: '',
+          avlSel: ''
+        },
+        AVR: {
+          avr: '',
+          avrSel: ''
+        },
+        DPACC: {
+          dp2DAccDocking: '',
+          dp2DAccNotDocking: '',
+          dp2DAccNotDockingSel: '',
+          dp3DAccDocking: '',
+          dp3DAccNotDocking: '',
+          dp3DAccNotDockingSel: ''
+        }
+      },
+      copy: {
+        BoxPlannerCopy: {
+          copyGlobal: '',
+          copyLeft: '',
+          copyTop: '',
+          copyRight: ''
+        },
+        ElementCopy: ''
+      },
+      outline: {
+        outline3D: {
+          outlineSVG: wc3DOutlineSvg,
+          outlinePolygon: wc3DOutlinePolygon,
+          outlinePolygonContours: wc3DOutlinePolygonContours,
+          outlinePolygonContoursSel: wc3DOutlinePolygonContoursSel
+        },
+        outline2D: {
+          draggable: '',
+          draggableActive: '',
+          selectable: ''
+        }
+      },
+      posNr: {
+        posNr: '',
+        posNrAcc: '',
+        posNrSelectable: '',
+        posNrSelectableArea: '',
+        posNrSelected: '',
+        posNrUnSelectable: '',
+        posNrOnHover: ''
+      },
+      rotation: {
+        rotClock: '',
+        rotCounterClock: '',
+        rot3DGrid: ''
+      },
+      move3DGrid: {
+        move3DGrid: ''
+      },
+      trash: {
+        boxplanner: '',
+        trashClass: ''
+      },
+      dimension: {
+        distanceToGround: '',
+        distanceToGroundIcon: ''
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(PlannerUI, {
+    plannerUIProps: plannerUIProps
+  });
+};
+
+export { HiddenPlannerUI as default };

package/build/esm/index-14c11bff.js

@@ -0,0 +1,38 @@
+import './index-67492a6a.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var DistanceToGround = function DistanceToGround(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      left: item.position.x + '%',
+      top: 100 - item.position.y + '%'
+    },
+    id: "distanceToGround",
+    className: classnames(plannerUIProps.classes.dimension.distanceToGround),
+    children: /*#__PURE__*/jsx("div", {
+      children: item.dimensionVal + ' cm'
+    })
+  });
+};
+var DistanceToGround$1 = observer(DistanceToGround);
+
+export { DistanceToGround$1 as default };

package/build/esm/index-15bef713.js

@@ -0,0 +1,41 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject } from './index-67492a6a.js';
+import 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 'mobx-react-lite';
+
+var wcFoldArrow = "wcFoldArrow-sIgSx";
+var wcCancelArrow = "wcCancelArrow-PZ86-";
+var wcOpenArrow = "wcOpenArrow-TZzZy";
+var wcClosedArrow = "wcClosedArrow-fWMiX";
+var css_248z = ".wcFoldArrow-sIgSx {\n  transition: transform 0.35s ease, width 0.5s ease, height 0.5s ease;\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  background-size: contain;\n  right: 10px;\n  top: 8px;\n  width: 12px;\n  height: 12px;\n  transform: rotateZ(0deg);\n}\n.wcCancelArrow-PZ86- {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcCancelArrow-PZ86-:hover {\n  transform: rotateZ(90deg);\n}\n\n.wcOpenArrow-TZzZy {\n  transform: rotateZ(180deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcClosedArrow-fWMiX {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["onClick", "iconAsDelete", "open"];
+var Arrow = function Arrow(_ref) {
+  var onClick = _ref.onClick,
+    iconAsDelete = _ref.iconAsDelete,
+    open = _ref.open,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("span", {
+    onClick: onClick,
+    onTouchEnd: onClick,
+    className: classnames(wcFoldArrow, iconAsDelete ? wcCancelArrow : undefined, !iconAsDelete ? open ? wcOpenArrow : wcClosedArrow : undefined, props.className)
+  });
+};
+
+export { Arrow as default };

package/build/esm/index-163e5260.js

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

package/build/esm/index-16442d1b.js

@@ -0,0 +1,97 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-67492a6a.js';
+import { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import Draggable from 'react-draggable';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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/widget-contact-form';
+import 'mobx-react-lite';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Move3DGrid = function Move3DGrid(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+  var mouseDownDetected = false;
+  var viewHandler = useViewHandler();
+  var onStartDragging = function onStartDragging(e) {
+    mouseDownDetected = true;
+    if (e.type == 'mousedown') {
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    } else if (e.type == 'touchstart') {
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    }
+  };
+  var onDragging = function onDragging(e) {
+    if (mouseDownDetected && !isDragging) {
+      var _item$onDragStartFunc;
+      setIsDragging(true);
+      //TODO START DRAGGINGitem.onDragStartFunction(item.setId, item.elementId);
+      (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+    } else if (isDragging) {
+      var _viewHandler$productS, _viewHandler$productS2;
+      var boundingLeft = (_viewHandler$productS = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS !== void 0 && _viewHandler$productS.getBoundingClientRect().left ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().left : 0;
+      var boundingTop = (_viewHandler$productS2 = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS2 !== void 0 && _viewHandler$productS2.getBoundingClientRect().top ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().top : 0;
+      if (e.type == 'mousemove') {
+        var _item$onDragMoveFunct;
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - boundingLeft, e.clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      } else if (e.type == 'touchmove') {
+        var _item$onDragMoveFunct2;
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - boundingLeft, e.touches[0].clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+    }
+    mouseDownDetected = false;
+  };
+  var onDragEnd = function onDragEnd(e) {
+    if (isDragging) {
+      var _item$onDragEndFuncti;
+      setIsDragging(false);
+      (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+    }
+    mouseDownDetected = false;
+  };
+  return /*#__PURE__*/jsx(Draggable, {
+    handle: ".handle3DMove",
+    nodeRef: draggable,
+    onStart: function onStart(e) {
+      onStartDragging(e);
+    },
+    onDrag: function onDrag(e) {
+      onDragging(e);
+    },
+    onStop: function onStop(e) {
+      onDragEnd();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      ref: draggable,
+      style: {
+        visibility: isDragging ? 'hidden' : 'visible',
+        left: item.position.x + 'px',
+        top: item.position.y + 'px'
+      },
+      className: classnames('handle3DMove', plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.move3DGrid.move3DGrid)
+    })
+  });
+};
+
+export { Move3DGrid as default };

package/build/esm/index-177a1e6b.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-67492a6a.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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 'mobx-react-lite';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ItemVariant = function ItemVariant(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "TabGroup/TabGroupVertical/ItemVariants"
+  }));
+};
+
+export { ItemVariant as default };

package/build/esm/index-1876f191.js

@@ -0,0 +1,125 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-67492a6a.js';
+import { useRef, useState } from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import SettingsHeader from './index-a5307989.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 wcTextBox = "wcTextBox-S90ki";
+var row = "row-U3gX-";
+var title = "title-Hgohv";
+var left = "left-0Vchg";
+var right = "right-jyg7C";
+var colum = "colum-DdC26";
+var languageWrapper = "language-wrapper-mZdxS";
+var languageTitle = "language-title-OOwzi";
+var css_248z = ".PaletteItem-pPFog {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n  transition: all 0.15s ease;\n}\n\n.PaletteItem-pPFog:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-pPFog:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcTextBox-S90ki {\n  width: 100%;\n  padding: 12px 20px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.row-U3gX- {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-Hgohv {\n  display: flex;\n}\n.left-0Vchg {\n  width: 40%;\n}\n.right-jyg7C {\n  width: 60%;\n}\n\n.colum-DdC26 {\n  margin: 8px;\n  white-space: nowrap;\n}\n\n.language-wrapper-mZdxS {\n  display: flex;\n}\n.language-title-OOwzi {\n  width: 50px;\n  line-height: 60px;\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TextBox = function TextBox(_ref) {
+  var _viewHandler$getViewC, _items$;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var throttleRef = useRef(null);
+  var items = item.groups[0].items;
+  var _useState = useState(items[0].freeTextLang),
+    _useState2 = _slicedToArray(_useState, 2),
+    valueLang = _useState2[0],
+    setValueLang = _useState2[1];
+  var handleChange = function handleChange(e) {
+    if (items[0]) {
+      items[0].freeText = e.target.value;
+      viewHandler.paletteViewHandler.clickedOnConfigPalette(items[0], 'inputbox', paletteId);
+    }
+  };
+
+  //for classification
+  var handleLangTextChange = function handleLangTextChange(lang, value) {
+    //delay logic update for 500ms
+    if (throttleRef.current) clearTimeout(throttleRef.current);
+    throttleRef.current = setTimeout(function () {
+      return updateLangLogic(lang, value);
+    }, 500);
+    setValueLang(_objectSpread(_objectSpread({}, valueLang), {}, _defineProperty({}, lang, value)));
+  };
+  var updateLangLogic = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(lang, value) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            viewHandler.paletteViewHandler.onFreeTextLangChanged(lang, value, items[0], paletteId);
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function updateLangLogic(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var languages = (_viewHandler$getViewC = viewHandler.getViewConfig().languagesForInput) !== null && _viewHandler$getViewC !== void 0 ? _viewHandler$getViewC : [];
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref3) {
+      return item.htmlRef = _ref3;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(colum, title, left),
+      children: /*#__PURE__*/jsx(SettingsHeader, {
+        item: item,
+        isInScroller: true,
+        isSettingsHeader: false
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(colum, right),
+      children: languages.length ? /*#__PURE__*/jsx(Fragment, {
+        children: languages.map(function (lang) {
+          return /*#__PURE__*/jsxs("div", {
+            className: languageWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: languageTitle,
+              children: lang
+            }), /*#__PURE__*/jsx("input", {
+              className: wcTextBox,
+              onChange: function onChange(e) {
+                return handleLangTextChange(lang, e.target.value);
+              },
+              type: "text",
+              value: valueLang === null || valueLang === void 0 ? void 0 : valueLang[lang]
+            })]
+          }, lang);
+        })
+      }) : /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx("input", {
+          className: wcTextBox,
+          onChange: handleChange,
+          type: "text",
+          value: (_items$ = items[0]) !== null && _items$ !== void 0 && _items$.freeText ? items[0].freeText : ''
+        })
+      })
+    })]
+  });
+};
+var TextBox$1 = observer(TextBox);
+
+export { TextBox$1 as default };