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

package/build/esm/index-c323afe2.js

@@ -0,0 +1,178 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-18103f13.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import Draggable from 'react-draggable';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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 '@crystaldesign/widget-contact-form';
+
+var container = "container-ulbgy";
+var wrapper = "wrapper-CDDb8";
+var door = "door-MAV8k";
+var mobile = "mobile-lXlb7";
+var first = "first-flj9W";
+var last = "last-joL72";
+var handle = "handle-uyqn6";
+var short1 = "short1-1RTH5";
+var short2 = "short2-ELqSF";
+var short3 = "short3-YuCyl";
+var shortLeft = "short-left-3AMc0";
+var shortRight = "short-right-ElG0J";
+var left = "left-rt3Dw";
+var right = "right-ziERh";
+var invisibleDragger = "invisible-dragger-CYEX3";
+var visibleDragger = "visible-dragger-GTq6j";
+var isOkay = "is-okay-xl784";
+var notOkay = "not-okay-7XIp7";
+var css_248z = ".container-ulbgy,\n.container-ulbgy * {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.container-ulbgy {\n  overflow-x: auto;\n  width: calc(100% - 20px);\n  height: 100%;\n  position: relative;\n  padding: 0;\n  margin: 10px;\n  float: left;\n}\n.wrapper-CDDb8 {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.door-MAV8k {\n  display: inline-block;\n  width: 100px;\n  word-break: break-word;\n  height: 300px;\n  background: #eee;\n  box-sizing: border-box;\n  border: 1px solid black;\n  position: relative;\n}\n\n.mobile-lXlb7 .door-MAV8k {\n  width: 50px;\n  height: 150px;\n}\n\n.first-flj9W {\n  border-left: 3px solid black;\n}\n\n.last-joL72 {\n  border-right: 3px solid black;\n}\n\n.handle-uyqn6 {\n  position: absolute;\n  top: 47%;\n  left: calc(50% - 32px);\n  height: 40px;\n  width: 60px;\n  pointer-events: none;\n}\n\n.short1-1RTH5,\n.short2-ELqSF,\n.short3-YuCyl {\n  position: absolute;\n  height: 0px;\n  width: 100px;\n  pointer-events: none;\n  border: 1px solid black;\n  z-index: 10;\n}\n\n.short-left-3AMc0,\n.short-right-ElG0J {\n  background-color: #eee;\n  height: 30%;\n  position: absolute;\n  bottom: 0px;\n  width: 4px;\n}\n\n.short-left-3AMc0 {\n  left: 100%;\n}\n.short-right-ElG0J {\n  right: 100%;\n}\n\n.short1-1RTH5 {\n  bottom: 30%;\n}\n.short2-ELqSF {\n  bottom: 20%;\n}\n.short3-YuCyl {\n  bottom: 10%;\n}\n\n.first-flj9W .short1-1RTH5,\n.first-flj9W .short2-ELqSF,\n.first-flj9W .short3-YuCyl {\n  width: 98px;\n  left: 2px;\n}\n\n.mobile-lXlb7 .first-flj9W .short1-1RTH5,\n.mobile-lXlb7 .first-flj9W .short2-ELqSF,\n.mobile-lXlb7 .first-flj9W .short3-YuCyl {\n  width: 48px;\n  left: 2px;\n}\n\n.last-joL72 .short1-1RTH5,\n.last-joL72 .short2-ELqSF,\n.last-joL72 .short3-YuCyl {\n  width: 98px;\n  right: 2px;\n}\n\n.mobile-lXlb7 .last-joL72 .short1-1RTH5,\n.mobile-lXlb7 .last-joL72 .short2-ELqSF,\n.mobile-lXlb7 .last-joL72 .short3-YuCyl {\n  width: 48px;\n  right: 2px;\n}\n\n.mobile-lXlb7 .short1-1RTH5,\n.mobile-lXlb7 .short2-ELqSF,\n.mobile-lXlb7 .short3-YuCyl {\n  width: 50px;\n}\n\n.mobile-lXlb7 .handle-uyqn6 {\n  height: 20px;\n  width: 30px;\n  left: calc(50% - 17px);\n}\n\n.left-rt3Dw {\n  border-left: solid 3px black;\n}\n.right-ziERh {\n  border-right: solid 3px black;\n}\n\n.invisible-dragger-CYEX3 {\n  height: 300px;\n  opacity: 0;\n  position: absolute;\n  z-index: 100;\n}\n\n.mobile-lXlb7 .invisible-dragger-CYEX3 {\n  height: 150px;\n}\n\n.visible-dragger-GTq6j {\n  opacity: 1;\n  border: 1px solid black;\n  cursor: ew-resize;\n}\n\n.is-okay-xl784 {\n  border: 1px solid green;\n  background-image: url(data:image/png;base64,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);\n  background-repeat: no-repeat;\n  background-size: 60%;\n  background-position: center 30%;\n}\n\n.not-okay-7XIp7 {\n  border: 1px solid red;\n  background-image: url(data:image/png;base64,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);\n  background-repeat: no-repeat;\n  background-size: 60%;\n  background-position: center 30%;\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 DoorPlanner = function DoorPlanner(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var DOOR_WIDTH = viewHandler.getIsInMobileView() ? 50 : 100;
+  var doors = item.groups[0].items;
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedDoor = _useState4[0],
+    setSelectedDoor = _useState4[1];
+  var scroller = useRef(null);
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    doorSwapPossible = _useState6[0],
+    setDoorSwapPossible = _useState6[1];
+  var handleStart = function handleStart(e) {
+    var offset = getEventOffsetX(e);
+    var xPos = offset - offset % DOOR_WIDTH;
+    setPosition({
+      y: 0,
+      x: xPos
+    });
+    setSelectedDoor(doors[xPos / DOOR_WIDTH]);
+  };
+  var handleDrag = function handleDrag(e) {
+    var offset = getEventOffsetX(e);
+    var index = (offset - offset % DOOR_WIDTH) / DOOR_WIDTH;
+    if (index >= 0 && index < doors.length) {
+      if ((selectedDoor === null || selectedDoor === void 0 ? void 0 : selectedDoor.key) != doors[index].key && (selectedDoor === null || selectedDoor === void 0 ? void 0 : selectedDoor.currentDoor.StrictType) === doors[index].currentDoor.StrictType) {
+        setDoorSwapPossible(true);
+      } else {
+        setDoorSwapPossible(false);
+      }
+    }
+    scrollLeftOrRight(e);
+  };
+  var handleStop = function handleStop(e) {
+    var offset = getEventOffsetX(e);
+    var index = (offset - offset % DOOR_WIDTH) / DOOR_WIDTH;
+    if (doorSwapPossible && selectedDoor && index >= 0 && index < doors.length) {
+      viewHandler.paletteViewHandler.moveDoors(selectedDoor.door, doors[index].door);
+    }
+    setSelectedDoor(undefined);
+    setDoorSwapPossible(false);
+    setPosition({
+      y: 0,
+      x: 0
+    });
+  };
+  var scrollLeftOrRight = function scrollLeftOrRight(e) {
+    var _e$layerX, _viewHandler$settings, _viewHandler$settings2;
+    if (!scroller.current) return;
+    var offset = (_e$layerX = e.layerX) !== null && _e$layerX !== void 0 ? _e$layerX : e.changedTouches[0].clientX - ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().x) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0);
+    if (offset < scroller.current.getBoundingClientRect().width / 100 * 5) {
+      //scroll left
+      scroller.current.scrollTo({
+        left: scroller.current.scrollLeft - 10
+      });
+    } else if (offset > scroller.current.getBoundingClientRect().width / 100 * 95) {
+      //scroll right
+      scroller.current.scrollTo({
+        left: scroller.current.scrollLeft + 10
+      });
+    }
+  };
+  var getEventOffsetX = function getEventOffsetX(e) {
+    var _e$clientX, _viewHandler$settings3, _viewHandler$settings4, _scroller$current$scr, _scroller$current;
+    return ((_e$clientX = e.clientX) !== null && _e$clientX !== void 0 ? _e$clientX : e.changedTouches[0].clientX) - ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().x) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) + ((_scroller$current$scr = (_scroller$current = scroller.current) === null || _scroller$current === void 0 ? void 0 : _scroller$current.scrollLeft) !== null && _scroller$current$scr !== void 0 ? _scroller$current$scr : 0);
+  };
+  var dragHandlers = {
+    onStart: handleStart,
+    onDrag: handleDrag,
+    onStop: handleStop
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [t('configurator.DoorPlanner_Description'), /*#__PURE__*/jsx("div", {
+      ref: scroller,
+      className: classnames(container, 'box', viewHandler.getIsInMobileView() ? mobile : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        className: wrapper,
+        children: [/*#__PURE__*/jsx(Draggable, _objectSpread(_objectSpread({
+          nodeRef: draggable,
+          bounds: "parent",
+          position: position
+        }, dragHandlers), {}, {
+          axis: "x",
+          defaultClassName: invisibleDragger,
+          defaultClassNameDragging: classnames(visibleDragger, doorSwapPossible ? isOkay : notOkay),
+          children: /*#__PURE__*/jsx("div", {
+            ref: draggable,
+            className: "box cursor-x",
+            style: {
+              width: !!selectedDoor ? DOOR_WIDTH : DOOR_WIDTH * doors.length
+            }
+          })
+        })), doors.map(function (item, index) {
+          return /*#__PURE__*/jsxs("div", {
+            className: classnames(door, index == 0 ? first : undefined, index === doors.length - 1 ? last : undefined),
+            children: [item.type.includes('TUER_L') && /*#__PURE__*/jsx("div", {
+              className: classnames(handle, right)
+            }), item.type.includes('TUER_R') && /*#__PURE__*/jsx("div", {
+              className: classnames(handle, left)
+            }), item.type == 'TUER_L_SHORT' && /*#__PURE__*/jsx("div", {
+              className: classnames(shortLeft)
+            }), item.type == 'TUER_R_SHORT' && /*#__PURE__*/jsx("div", {
+              className: classnames(shortRight)
+            }), item.type.includes('SHORT') && /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("div", {
+                className: classnames(short1)
+              }), /*#__PURE__*/jsx("div", {
+                className: classnames(short2)
+              }), /*#__PURE__*/jsx("div", {
+                className: classnames(short3)
+              })]
+            })]
+          });
+        })]
+      })
+    })]
+  });
+};
+var index = observer(DoorPlanner);
+
+export { index as default };

package/build/esm/index-c39e8667.js

@@ -0,0 +1,158 @@
+import { s as styleInject } from './index-18103f13.js';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import QRCode from 'react-qr-code';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 fullscreen = "fullscreen-dVNtA";
+var errorWrapper = "error-wrapper-4Kfuq";
+var errorText = "error-text-aG0TS";
+var errorQrCodeWrapper = "error-qr-code-wrapper-WRr2H";
+var wrapper = "wrapper-uzZ9r";
+var textWrapper = "text-wrapper-rIzGz";
+var header = "header-sWWoX";
+var text = "text-OkwbY";
+var stepsWrapper = "steps-wrapper-4x10n";
+var stepWrapper = "step-wrapper-HY2sH";
+var stepTextWrapper = "step-text-wrapper-S-m1m";
+var stepTitle = "step-title-M7iLu";
+var stepText = "step-text-LPg7J";
+var icon = "icon-K4UgE";
+var step1 = "step1-F9IIG";
+var step2 = "step2-ELycW";
+var step3 = "step3-plnlc";
+var buttonWrapper = "button-wrapper-t88VM";
+var arButton = "ar-button-e122r";
+var disabled = "disabled-5mNQN";
+var qrCodeWrapper = "qr-code-wrapper-gox11";
+var loader = "loader-5y0Dw";
+var css_248z = ".fullscreen-dVNtA {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100000;\n}\n\n.error-wrapper-4Kfuq {\n  display: flex;\n  gap: 48px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.error-text-aG0TS {\n  max-width: 400px;\n}\n.error-qr-code-wrapper-WRr2H {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.wrapper-uzZ9r {\n  display: flex;\n  flex-direction: column;\n  margin: 48px 32px;\n  gap: 42px;\n  color: #000;\n}\n\n.text-wrapper-rIzGz {\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n}\n\n.header-sWWoX {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 19px;\n}\n\n.text-OkwbY {\n  font-weight: 300;\n  font-size: 18px;\n  line-height: 130%;\n}\n\n.steps-wrapper-4x10n {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.step-wrapper-HY2sH {\n  display: flex;\n  gap: 12px;\n}\n\n.step-text-wrapper-S-m1m {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  justify-content: center;\n}\n\n.step-title-M7iLu {\n  font-weight: 300;\n  font-size: 16px;\n  color: #7b7b7b;\n}\n\n.step-text-LPg7J {\n  font-size: 14px;\n  color: #000000;\n}\n\n.icon-K4UgE {\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  width: 56px;\n  height: 56px;\n}\n\n.step1-F9IIG {\n  background: center / 50% no-repeat #f2f2f2 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_300_30100%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_300_30100)%22%3E%3Cpath d%3D%22M4.54815 19.5C4.04302 19.5 3.61545 19.325 3.26545 18.975C2.91547 18.625 2.74048 18.1974 2.74048 17.6923V6.30773C2.74048 5.8026 2.91547 5.37503 3.26545 5.02503C3.61545 4.67503 4.04302 4.50003 4.54815 4.50003H15.9327C16.4378 4.50003 16.8654 4.67503 17.2154 5.02503C17.5654 5.37503 17.7404 5.8026 17.7404 6.30773V10.8847L21.2596 7.36546V16.6346L17.7404 13.1154V17.6923C17.7404 18.1974 17.5654 18.625 17.2154 18.975C16.8654 19.325 16.4378 19.5 15.9327 19.5H4.54815ZM4.54815 18H15.9327C16.0225 18 16.0962 17.9712 16.1539 17.9135C16.2116 17.8558 16.2404 17.782 16.2404 17.6923V6.30773C16.2404 6.21798 16.2116 6.14426 16.1539 6.08656C16.0962 6.02886 16.0225 6.00001 15.9327 6.00001H4.54815C4.4584 6.00001 4.38468 6.02886 4.32698 6.08656C4.26928 6.14426 4.24043 6.21798 4.24043 6.30773V17.6923C4.24043 17.782 4.26928 17.8558 4.32698 17.9135C4.38468 17.9712 4.4584 18 4.54815 18Z%22 fill%3D%22%231C1B1F%22%2F%3E%3Cpath d%3D%22M5 11.75L8.90383 15.6539L15.6269 8.93078L14.573 7.87695L8.90383 13.5462L6.05383 10.6962L5 11.75Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.step2-ELycW {\n  background: center / 50% no-repeat #f2f2f2 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_300_30110%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_300_30110)%22%3E%3Cpath d%3D%22M12 20.9422C11.5987 20.9422 11.2439 20.8365 10.9356 20.6249C10.6272 20.4134 10.4115 20.1358 10.2884 19.7922H9.99997C9.59101 19.7922 9.23877 19.6445 8.94327 19.349C8.64776 19.0535 8.5 18.7012 8.5 18.2923V15.0115C7.49103 14.4 6.69712 13.5801 6.11827 12.5519C5.53942 11.5237 5.25 10.4231 5.25 9.25001C5.25 7.36797 5.90448 5.77246 7.21345 4.46348C8.52243 3.15451 10.1179 2.50003 12 2.50003C13.882 2.50003 15.4775 3.15451 16.7865 4.46348C18.0955 5.77246 18.75 7.36797 18.75 9.25001C18.75 10.4436 18.4605 11.5494 17.8817 12.5673C17.3028 13.5853 16.5089 14.4 15.5 15.0115V18.2923C15.5 18.7012 15.3522 19.0535 15.0567 19.349C14.7612 19.6445 14.4089 19.7922 14 19.7922H13.7115C13.5884 20.1358 13.3727 20.4134 13.0644 20.6249C12.7561 20.8365 12.4013 20.9422 12 20.9422ZM9.99997 18.2923H14V17.3538H9.99997V18.2923ZM9.99997 16.4692H14V15.5H9.99997V16.4692ZM9.79997 14H11.4038V11.0885L9.26153 8.94616L10.1 8.10771L12 10.0077L13.9 8.10771L14.7384 8.94616L12.5961 11.0885V14H14.2C15.1 13.5667 15.8333 12.9292 16.4 12.0875C16.9666 11.2458 17.25 10.3 17.25 9.25001C17.25 7.78334 16.7416 6.54167 15.725 5.52501C14.7083 4.50834 13.4666 4.00001 12 4.00001C10.5333 4.00001 9.29164 4.50834 8.27497 5.52501C7.25831 6.54167 6.74997 7.78334 6.74997 9.25001C6.74997 10.3 7.03331 11.2458 7.59997 12.0875C8.16664 12.9292 8.89997 13.5667 9.79997 14Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.step3-plnlc {\n  background: center / 40% no-repeat #f2f2f2 url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10 19.6538L6.09619 15.75L7.16539 14.6808L9.25004 16.7654V12.25H10.75V16.7501L12.8192 14.6654L13.9038 15.75L10 19.6538ZM4.25002 13.9038L0.346191 10L4.23464 6.11158L5.30384 7.18078L3.23459 9.25003H7.74999V10.75H3.24997L5.33462 12.8192L4.25002 13.9038ZM15.75 13.9038L14.6808 12.8346L16.7654 10.75H12.25V9.25003H16.7501L14.6654 7.18078L15.75 6.09618L19.6538 10L15.75 13.9038ZM9.25004 7.74998V3.23458L7.16539 5.3192L6.09619 4.25L10 0.346176L13.9038 4.25L12.8346 5.3192L10.75 3.23458V7.74998H9.25004Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fsvg%3E\");\n}\n.button-wrapper-t88VM {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ar-button-e122r {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 21px;\n  gap: 10px;\n  background-color: var(--primaryColor);\n  border-radius: 3px;\n  cursor: pointer;\n  transition: box-shadow 0.3s, background-color 0.3s ease, color 0.3s ease;\n  font-weight: 600;\n  letter-spacing: 0.8px;\n  color: #fff;\n  height: 38px;\n}\n.disabled-5mNQN {\n  cursor: wait;\n  background-color: var(--secondaryColor);\n}\n\n.ar-button-e122r:hover {\n  box-shadow: 0px 1px 4px #707070;\n}\n.ar-button-e122r.disabled-5mNQN:hover {\n  box-shadow: none;\n}\n\n.qr-code-wrapper-gox11 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 64px;\n}\n\n.loader-5y0Dw {\n  border: 3px solid #f3f3f3;\n  border-radius: 50%;\n  border-top: 3px solid #aaa;\n  width: 25px;\n  height: 25px;\n  animation: spinner-mDqax 2s linear infinite;\n}\n\n@keyframes spinner-mDqax {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
+var FullscreenAr = function FullscreenAr(_ref) {
+  var url = _ref.url,
+    isArCompatible = _ref.isArCompatible,
+    broswerSupportAR = _ref.broswerSupportAR,
+    activateAR = _ref.activateAR;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isArCompatible == false || !broswerSupportAR) {
+    return /*#__PURE__*/jsxs("div", {
+      className: errorWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: errorText,
+        dangerouslySetInnerHTML: {
+          __html: t('arviewer.failed')
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: errorQrCodeWrapper,
+        children: [" ", url && /*#__PURE__*/React.createElement(QRCode, {
+          value: url,
+          size: 220
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: fullscreen,
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: textWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: header,
+          children: t('configurator.ar_qr_title')
+        }), /*#__PURE__*/jsx("div", {
+          className: text,
+          children: t('configurator.ar_qr_text')
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: stepsWrapper,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: stepWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(icon, step1)
+          }), /*#__PURE__*/jsxs("div", {
+            className: stepTextWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: stepTitle,
+              children: t('configurator.ar_qr_step') + ' 1'
+            }), /*#__PURE__*/jsx("div", {
+              className: stepText,
+              children: t('configurator.ar_qr_step1')
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: stepWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(icon, step2)
+          }), /*#__PURE__*/jsxs("div", {
+            className: stepTextWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: stepTitle,
+              children: t('configurator.ar_qr_step') + ' 2'
+            }), /*#__PURE__*/jsx("div", {
+              className: stepText,
+              children: t('configurator.ar_qr_step2')
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: stepWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(icon, step3)
+          }), /*#__PURE__*/jsxs("div", {
+            className: stepTextWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: stepTitle,
+              children: t('configurator.ar_qr_step') + ' 3'
+            }), /*#__PURE__*/jsx("div", {
+              className: stepText,
+              children: t('configurator.ar_qr_step3')
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: buttonWrapper,
+        children: /*#__PURE__*/jsx("div", {
+          "aria-disabled": !activateAR,
+          className: classnames(arButton, !activateAR ? disabled : undefined),
+          onClick: function onClick() {
+            return activateAR === null || activateAR === void 0 ? void 0 : activateAR();
+          },
+          children: activateAR ? t('configurator.open_ar') : /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx("div", {
+              className: loader
+            }), t('arviewer.initializing')]
+          })
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: text,
+        children: t('configurator.ar_qr_bottom_text')
+      }), url && /*#__PURE__*/jsxs("div", {
+        className: qrCodeWrapper,
+        children: [" ", url && /*#__PURE__*/React.createElement(QRCode, {
+          value: url,
+          size: 220
+        })]
+      })]
+    })
+  });
+};
+var FullscreenAr$1 = observer(FullscreenAr);
+
+export { FullscreenAr$1 as default };

package/build/esm/index-c4987449.js

@@ -0,0 +1,150 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-18103f13.js';
+import 'react';
+import { w as wholeWrapper, n as notExpanded } from './index.module-3156eb78.js';
+import TabGroups from './index-672705b9.js';
+import TabGroupOptions from './index-0e84505a.js';
+import { observer } from 'mobx-react-lite';
+import ProduktDetails from './index-3dc1b35b.js';
+import Collapsible from 'react-collapsible';
+import Price from './index-7ea8e57e.js';
+import classnames from 'classnames';
+import JsonViewer from './index-3385e5e5.js';
+import { jsx, Fragment, jsxs } 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 '@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 './index.module-b80af820.js';
+import 'react-json-view-lite';
+import './react-json-viewer-cd612c70.js';
+
+var menuPoint = "menu-point-Bz5zM";
+var collapsibleHeader = "collapsibleHeader-lzT9Y";
+var tabGroupWrapper = "tab-group-wrapper-mSLB-";
+var css_248z = ".menu-point-Bz5zM {\n  font-size: 22px;\n  padding: 0px 0px;\n  padding: 10px 0;\n  background-color: var(--primaryColor);\n  border-bottom: 1px solid;\n  width: 100%;\n  text-align: center;\n  margin-left: 0px;\n  color: white;\n  font-weight: 600;\n}\n.collapsibleHeader-lzT9Y {\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  text-align: center;\n  background-color: #bbbbbb;\n  color: black;\n  border-radius: 5px;\n  margin: 5% 1% 1% 1%;\n  transition: background-color 0.3s;\n  padding: 1% 0%;\n  cursor: pointer;\n}\n.collapsibleHeader-lzT9Y:hover {\n  background-color: var(--primaryColor);\n  color: white;\n}\n.tab-group-wrapper-mSLB- {\n  width: 90%;\n  margin-left: 4%;\n  background-color: white;\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 OptionTree = function OptionTree(_ref) {
+  var _articles$viewHandler, _hiddenOptions$tabGro, _article$getPlannerCo;
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var configTree = viewHandler.tabGroupState.allTabGroups;
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var hiddenOptions = viewHandler.divaWebPlanner.getHiddenOptions();
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  var tree = Object.values(configTree);
+  var hiddenTree = Object.values((_hiddenOptions$tabGro = hiddenOptions === null || hiddenOptions === void 0 ? void 0 : hiddenOptions.tabGroups) !== null && _hiddenOptions$tabGro !== void 0 ? _hiddenOptions$tabGro : {});
+  var canClick = false;
+  tree = tree.filter(function (item) {
+    return item.type == 'OPTION';
+  });
+  var CollapsibleProps = {
+    open: true,
+    easing: 'ease-in',
+    transitionTime: 200
+  };
+  if (!article) {
+    canClick = true;
+  }
+  var mat3D = article === null || article === void 0 || (_article$getPlannerCo = article.getPlannerConfigData) === null || _article$getPlannerCo === void 0 ? void 0 : _article$getPlannerCo.call(article, {}).config;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(wholeWrapper, notExpanded, props.className),
+    children: [/*#__PURE__*/jsx("a", {
+      className: menuPoint,
+      children: "Options \xDCbersicht"
+    }), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Produktdetails"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: !canClick && /*#__PURE__*/jsx(ProduktDetails, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Preise"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx(Price, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Optionsbaum"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: tree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Versteckte Optionen"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: hiddenTree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "3D MAT"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: mat3D && /*#__PURE__*/jsx(JsonViewer, {
+        isExpanded: true,
+        collapsed: 5,
+        json: mat3D
+      })
+    }))]
+  }));
+};
+var OptionTree$1 = observer(OptionTree);
+
+export { OptionTree$1 as default };

package/build/esm/index-c6845d6d.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-18103f13.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 NavBar = function NavBar(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/Planner3DImage/NavBar"
+  }));
+};
+
+export { NavBar as default };

package/build/esm/index-c6e67f83.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-18103f13.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import RoomSerious from './index-4fdafcb5.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 'classnames';
+
+var container = "container-IUsXl";
+var css_248z = ".container-IUsXl {\n  position: absolute;\n  bottom: 0;\n  left: 0px;\n  z-index: 1000;\n}\n";
+styleInject(css_248z);
+
+var RoomListSelection = function RoomListSelection(props) {
+  var viewHandler = useViewHandler();
+  var items = viewHandler.paletteViewHandler.getRoomList();
+  if (!viewHandler.uiState.ViewConfig.roomListInProduct) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    hidden: !viewHandler.settingsState.roomListInitialized,
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/jsx(RoomSerious, {
+        item: item,
+        from: viewHandler.settingsState.roomListInitialized
+      }, item.codex);
+    })
+  });
+};
+var index = observer(RoomListSelection);
+
+export { index as default };

package/build/esm/index-c947b3b1.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-18103f13.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 SettingsPaletteGroup = function SettingsPaletteGroup(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/PaletteGroup"
+  }));
+};
+
+export { SettingsPaletteGroup as default };