@crystaldesign/diva-web-planner-react 25.9.0-beta.2 → 25.9.0-beta.20

package/build/esm/index-1545f8b7.js

@@ -0,0 +1,123 @@
+import { s as styleInject } from './index-299c4e58.js';
+import 'react';
+import PlannerUI from './index-041e0b38.js';
+import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-5427e45a.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import './index-186658e7.js';
+import './index-849a3cc4.js';
+import './index-382d84e5.js';
+import './index-e60e2fbf.js';
+import './index-70592dcd.js';
+import './index-a261e85d.js';
+import './index-887e4c75.js';
+import './index-38160328.js';
+import './index-962562ab.js';
+import './index-a72b632e.js';
+import './index-d95c9934.js';
+import './index-8ff3a319.js';
+import './index-867164c7.js';
+import 'react-draggable';
+import './index-2b193f7b.js';
+import './index-049c85ea.js';
+import './index-5464cd15.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-178be9de.js

@@ -0,0 +1,68 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-299c4e58.js';
+import { createElement } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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';
+import '@crystaldesign/widget-contact-form';
+
+var svgWrapper = "svg-wrapper-hvaq9";
+var css_248z = ".svg-wrapper-hvaq9 {\n  margin-left: 50px;\n  color: rgba(255,255,255,0.42353);\n  height: 100vh;\n}\n.table-GRFj- {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  background-color: rgb(28, 32, 35);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  gap: 10px;\n}\n.column-CbeYE {\n  width: 20%;\n  border-bottom: 1px solid;\n}\n.image-zSukX {\n  width: 50px;\n  height: 50px;\n}\n.svg-wrapper-hvaq9 textarea {\n  background-color: rgb(28, 32, 35);\n  color: white;\n  width: 97.7%;\n  height: 100%;\n  padding-top: 2%;\n  padding-left: 2%;\n  overflow: auto;\n}\n.svg-wrapper-hvaq9 .expanded-rBYHe {\n  max-height: 62.1%;\n  transition: max-height 0.5s;\n}\n\n.cur-item-PDYTf {\n  color: black !important;\n}\n\n.cur-item-PDYTf {\n  background-color: rgba(96, 245, 96, 0.377);\n}\n.table-GRFj- img {\n  height: 50px;\n  width: 50px;\n}\n.table-GRFj- tbody {\n  height: 100%;\n  vertical-align: top;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.table-GRFj- tr th {\n  width: 4%;\n}\n.table-GRFj- tr th:last-child {\n  width: 90px;\n}\n.table-GRFj- thead {\n  border-bottom: 1px solid white;\n}\n.table-GRFj- tbody th {\n  width: 23px;\n  table-layout: fixed;\n  line-break: anywhere;\n  font-size: 15px;\n}\n.table-GRFj- tbody th:nth-child(1) {\n  width: 35px;\n}\n.table-GRFj- tbody th:last-child {\n  width: 890px;\n  font-size: 9px;\n}\n.selected-cRqzN {\n  background-color: rgba(96, 245, 96, 0.377);\n}\n.collapsibleHeader-7zGnE {\n  top: 10px;\n  width: 47.6%;\n  text-align: center;\n  color: black;\n  background-color: rgba(96, 245, 96, 0.377);\n}\n.collapsible-4mPxe {\n  position: absolute;\n  top: 286px;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["curBox", "isExpanded", "state"];
+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 SVGSourceViewer = function SVGSourceViewer(_ref) {
+  var _articles$0$plannerDa, _articles$0$plannerDa2;
+  _ref.curBox;
+    _ref.isExpanded;
+    var state = _ref.state,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var articlesLoaded = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articlesLoaded) return /*#__PURE__*/jsx(Fragment, {});
+  var articles = Object.values(articlesLoaded).filter(function (a) {
+    return a.catalogArticle.catalogPlannerArticle;
+  });
+  if (!articles.length) return /*#__PURE__*/jsx(Fragment, {});
+  var svgBefore = (_articles$0$plannerDa = articles[0].plannerData) === null || _articles$0$plannerDa === void 0 ? void 0 : _articles$0$plannerDa.svgBefore;
+  var svgAfter = (_articles$0$plannerDa2 = articles[0].plannerData) === null || _articles$0$plannerDa2 === void 0 ? void 0 : _articles$0$plannerDa2.svgAfter;
+  var svg = state == 'before' ? svgBefore : svgAfter;
+  return /*#__PURE__*/createElement("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(svgWrapper),
+    key: viewHandler.settingsState.configChanged
+  }), /*#__PURE__*/jsxs("div", {
+    style: {
+      height: 500,
+      overflow: 'auto'
+    },
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: function onClick() {
+        return navigator.clipboard.writeText(svg !== null && svg !== void 0 ? svg : '');
+      },
+      children: "copy"
+    }), /*#__PURE__*/jsx("textarea", {
+      readOnly: true,
+      value: svg
+    })]
+  }));
+};
+var SVGSourceViewer$1 = observer(SVGSourceViewer);
+
+export { SVGSourceViewer$1 as default };

package/build/esm/index-186658e7.js

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

package/build/esm/index-190fad23.js

@@ -0,0 +1,118 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-299c4e58.js';
+import QRCode from 'react-qr-code';
+import { observer } from 'mobx-react-lite';
+import React, { useRef, useEffect } from 'react';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { Arrow } from 'react-laag';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-E7OAf";
+var qrCodeWrapper = "qr-code-wrapper-I0N1r";
+var textWrapper = "text-wrapper-HcIJv";
+var header = "header-TxcNf";
+var text = "text-5GiNL";
+var closeIcon = "close-icon-SiRMa";
+var doneBar = "doneBar-7QqkY";
+var css_248z = ".wrapper-E7OAf {\n  background: #ffffff;\n  border-radius: 3px;\n  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));\n  display: flex;\n  padding: 22px;\n  gap: 12px;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out;\n}\n\n.qr-code-wrapper-I0N1r {\n  width: 96px;\n  height: 96px;\n}\n\n.text-wrapper-HcIJv {\n  display: flex;\n  flex-direction: column;\n  color: #000000;\n  width: 220px;\n  gap: 8px;\n}\n\n.header-TxcNf {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 17px;\n  line-height: 19px;\n}\n\n.text-5GiNL {\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 130%;\n}\n\n.close-icon-SiRMa {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 42px;\n  height: 42px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 80%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id%3D%22mask0_332_143%22 style%3D%22mask-type%3Aalpha%22 maskUnits%3D%22userSpaceOnUse%22 x%3D%220%22 y%3D%220%22 width%3D%2224%22 height%3D%2224%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg mask%3D%22url(%23mask0_332_143)%22%3E%3Cpath d%3D%22M8.22749 16.8365L7.16406 15.7731L10.9372 12L7.16406 8.2519L8.22749 7.18848L12.0006 10.9616L15.7487 7.18848L16.8121 8.2519L13.039 12L16.8121 15.7731L15.7487 16.8365L12.0006 13.0634L8.22749 16.8365Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-SiRMa:hover {\n  background-size: 90%;\n}\n.doneBar-7QqkY {\n  background: var(--secondaryColor);\n  height: 3px;\n  border-radius: 0 2px 2px 0;\n  animation-name: example-saRWU;\n  animation-timing-function: linear;\n  transition: width 0s ease-in;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n@keyframes example-saRWU {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\n  }\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 ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
+  var _theme$typography;
+  var layerProps = _ref.layerProps,
+    arrowProps = _ref.arrowProps,
+    autoClose = _ref.autoClose,
+    fadeIn = _ref.fadeIn,
+    fadeout = _ref.fadeout,
+    url = _ref.url;
+  var viewHandler = useViewHandler();
+  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
+  var AUTOHIDE_SEC = arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.timeUnitAutohide ? arQrCodeConfig.timeUnitAutohide : 6;
+  var _useDivaCore = useDivaCore(),
+    theme = _useDivaCore.state.theme;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var autoCloseTimeout = useRef();
+  useEffect(function () {
+    //if opend automatically close after AUTOHIDE_SEC the tooltip again
+    if (autoClose) {
+      if (!(autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current)) autoCloseTimeout.current = setTimeout(function () {
+        return viewHandler.productState.setDoShowARQRCode(false);
+      }, (AUTOHIDE_SEC + 1) * 1000);
+    }
+    return function () {
+      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
+    };
+  }, [autoClose]);
+
+  //clear autoclose when user interacts with button
+  useEffect(function () {
+    if (!viewHandler.productState.doShowARQRCode) {
+      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
+    } else viewHandler.productState.setArCodeWasVisibleOnce();
+  }, [viewHandler.productState.doShowARQRCode]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, layerProps), {}, {
+    className: wrapper,
+    style: _objectSpread(_objectSpread({
+      opacity: fadeout ? 0 : fadeIn ? 1 : undefined
+    }, layerProps.style), {}, {
+      zIndex: 1000005
+    }),
+    children: [/*#__PURE__*/jsx("div", {
+      className: qrCodeWrapper,
+      children: url && /*#__PURE__*/React.createElement(QRCode, {
+        value: url,
+        size: 96,
+        onClick: function onClick() {
+          return url && window.open(url, '_blank');
+        }
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: textWrapper,
+      style: {
+        fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: header,
+        children: t('configurator.ar_qr_title')
+      }), /*#__PURE__*/jsx("div", {
+        className: text,
+        children: t('configurator.ar_qr_text')
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: closeIcon,
+      onClick: function onClick() {
+        return viewHandler.productState.setDoShowARQRCode(false);
+      }
+    }), /*#__PURE__*/jsx(Arrow, _objectSpread({
+      onPointerEnterCapture: undefined,
+      onPointerLeaveCapture: undefined
+    }, arrowProps)), autoClose && /*#__PURE__*/jsx("div", {
+      className: doneBar,
+      style: {
+        animationDuration: AUTOHIDE_SEC + 's'
+      }
+    })]
+  }));
+};
+var Tooltip = observer(ArQrCodeTooltip);
+
+export { Tooltip as default };

package/build/esm/index-1a08bb27.js

@@ -0,0 +1,49 @@
+import { u as useViewHandler } from './index-299c4e58.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import NavBar from './index-8e5d82de.js';
+import { g as wcConfigurator3Dimage, h as imageCenterOrbit, j as imageCenterStatic } from './index.module-6a127403.js';
+import Logo from './index-4b3fd55f.js';
+import { jsxs, jsx } 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var Planner3DImage = function Planner3DImage(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setImage3DElement(_ref);
+    },
+    className: wcConfigurator3Dimage,
+    id: "3DImage-Container",
+    style: {
+      // backgroundImage: viewHandler.productState.RenderImageURL,
+      visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
+    },
+    children: [/*#__PURE__*/jsx(NavBar, {}), /*#__PURE__*/jsx("img", {
+      className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
+      id: "diva3dImg",
+      draggable: "false",
+      src: viewHandler.productState.diva3dImgSrc
+    }), /*#__PURE__*/jsx(Logo, {})]
+  });
+};
+var Planner3DImage$1 = observer(Planner3DImage);
+
+export { Planner3DImage$1 as default };

package/build/esm/index-1a12cce7.js

@@ -0,0 +1,95 @@
+import { u as useViewHandler } from './index-299c4e58.js';
+import 'react';
+import DivaUtils from '@crystaldesign/diva-utils';
+import Toggle from './index-43b4013b.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import 'react-switch';
+
+var Varaint = function Varaint(_ref) {
+  var _item$variantValues;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      userSelect: 'unset',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 20,
+      alignItems: 'center',
+      borderBottom: '1px solid grey',
+      justifyContent: 'space-between',
+      padding: 10
+    },
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: item.onClick,
+      children: "konfigurieren"
+    }), /*#__PURE__*/jsx("div", {
+      children: item.index
+    }), (_item$variantValues = item.variantValues) === null || _item$variantValues === void 0 ? void 0 : _item$variantValues.map(function (item) {
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10
+        },
+        children: [item.optionValueImage && /*#__PURE__*/jsx("img", {
+          src: item.optionValueImage,
+          style: {
+            height: 40
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 5,
+            width: '150px'
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            children: item.optionName
+          }), /*#__PURE__*/jsx("div", {
+            children: item.optionValueName
+          })]
+        })]
+      }, item.opt);
+    }), /*#__PURE__*/jsx("div", {
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      children: DivaUtils.formatPrice(item.price)
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        alignSelf: 'flex-end'
+      },
+      children: /*#__PURE__*/jsx(Toggle, {
+        height: 32,
+        handleDiameter: 22,
+        width: 60,
+        onChange: function onChange() {
+          item.onToggle();
+          viewHandler.paletteViewHandler.updateCurPaletteData(true);
+        },
+        state: !item.disabled
+      })
+    })]
+  }, item.hash);
+};
+
+export { Varaint as default };