@crystaldesign/diva-web-planner-react 26.7.0-rc.8 → 26.7.0-rc.9

package/build/esm/index-f8f1620b.js

@@ -0,0 +1,41 @@
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import classnames from 'classnames';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import '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/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var infoContainer = "info-container-7yeog";
+var mobile = "mobile-EMOn-";
+var css_248z = ".info-container-7yeog {\n  position: absolute;\n  top: 0;\n  right: 0;\n  background-color: rgba(248, 248, 248, 0.75);\n  z-index: 800;\n  width: 300px;\n}\n\n.mobile-EMOn-.info-container-7yeog {\n  bottom: 0;\n  left: 0;\n  top: auto;\n  top: initial;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var ProductInfo = function ProductInfo(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx(Fragment, {
+    children: viewHandler.settingsState.infoBoxContent && /*#__PURE__*/jsx("div", {
+      className: classnames(infoContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      children: viewHandler.settingsState.infoBoxContent && toJS(viewHandler.settingsState.infoBoxContent.content)
+    })
+  });
+};
+var ProductInfo$1 = observer(ProductInfo);
+
+export { ProductInfo$1 as default };

package/build/esm/index-f9a110fe.js

@@ -0,0 +1,48 @@
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+var imageItem = "image-item-NA3C7";
+var sel = "sel-gUlno";
+var css_248z = ".image-item-NA3C7 {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f0f0f0 var(--galleryItemBorder);\n  margin: 10px 0;\n}\n\n.sel-gUlno {\n  margin: 8px 0;\n\n  border: solid var(--secondaryColor) 4px;\n}\n";
+styleInject(css_248z);
+
+var FilterItem = function FilterItem(_ref) {
+  var _viewHandler$settings;
+  var item = _ref.item,
+    id = _ref.id;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  return /*#__PURE__*/jsx("span", {
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.onSelectFilter(id, item.text, 'RAL');
+    },
+    style: {
+      backgroundColor: item.rgb
+    },
+    className: classnames(imageItem, actValue === item.text ? sel : undefined)
+  });
+};
+var FilterItem$1 = observer(FilterItem);
+
+export { FilterItem$1 as default };

package/build/esm/index-f9ea5b62.js

@@ -0,0 +1,206 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+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/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+var wcConfiguratorAiRoom = "wc-configurator-ai-room-BITO0";
+var galleryContainer = "gallery-container-Ly7-0";
+var gallerySlide = "gallery-slide-GiS-r";
+var aiRoomImage = "ai-room-image-seKys";
+var slideCounter = "slide-counter-Uh6Iz";
+var loadingOverlay = "loading-overlay-t1CPa";
+var spinner = "spinner-bUgHj";
+var loadingText = "loading-text-v1LhC";
+var aiWarningBadge = "ai-warning-badge-VRwxc";
+var css_248z = ".wc-configurator-ai-room-BITO0 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 990;\n  display: flex;\n  background-color: #fff;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n/* ── Gallery ────────────────────────────────────────────── */\n\n.gallery-container-Ly7-0 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.gallery-container-Ly7-0 .swiper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.gallery-container-Ly7-0 .swiper-wrapper {\n  position: relative;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n}\n\n.gallery-container-Ly7-0 .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n}\n\n.gallery-slide-GiS-r {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n  will-change: filter, transform;\n}\n\n.ai-room-image-seKys {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  -o-object-fit: contain;\n     object-fit: contain;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n/* ── Navigation arrows ──────────────────────────────────── */\n\n.gallery-container-Ly7-0 .swiper-button-prev,\n.gallery-container-Ly7-0 .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  width: 44px;\n  height: 44px;\n  margin-top: -22px;\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.35);\n  border-radius: 50%;\n  color: #fff;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.2s,\n    transform 0.15s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:hover,\n.gallery-container-Ly7-0 .swiper-button-next:hover {\n  background: rgba(0, 0, 0, 0.55);\n  transform: scale(1.06);\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:active,\n.gallery-container-Ly7-0 .swiper-button-next:active {\n  transform: scale(0.96);\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:focus,\n.gallery-container-Ly7-0 .swiper-button-prev:active,\n.gallery-container-Ly7-0 .swiper-button-next:focus,\n.gallery-container-Ly7-0 .swiper-button-next:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev::before,\n.gallery-container-Ly7-0 .swiper-button-next::before {\n  display: none !important;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after,\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  text-transform: none !important;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after,\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: 18px;\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev {\n  left: 16px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-next {\n  right: 16px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after {\n  content: 'prev';\n}\n\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  content: 'next';\n}\n\n.gallery-container-Ly7-0 .swiper-button-disabled {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev svg,\n.gallery-container-Ly7-0 .swiper-button-next svg {\n  display: none;\n}\n\n/* ── Slide counter ──────────────────────────────────────── */\n\n.slide-counter-Uh6Iz {\n  position: absolute;\n  bottom: 84px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 5;\n  padding: 5px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(0, 0, 0, 0.38);\n  border-radius: 20px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile .slide-counter-Uh6Iz {\n  bottom: 20px;\n}\n\n/* ── Loading slide (rendered inside the gallery swiper) ── */\n\n.loading-overlay-t1CPa {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.25);\n  animation: overlayFadeIn-aFU2G 0.6s ease both;\n}\n\n@keyframes overlayFadeIn-aFU2G {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.spinner-bUgHj {\n  width: 52px;\n  height: 52px;\n  border: 3px solid rgba(255, 255, 255, 0.25);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: spin-CwPAa 0.9s linear infinite;\n}\n\n@keyframes spin-CwPAa {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text-v1LhC {\n  margin-top: 20px;\n  font-size: 15px;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  color: #fff;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);\n  animation: textSlideIn-u-Flk 0.5s ease both;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n@keyframes textSlideIn-u-Flk {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* ── Warning badge ──────────────────────────────────────── */\n\n.ai-warning-badge-VRwxc {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  padding: 6px 12px;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 12px;\n  border-radius: 4px;\n  pointer-events: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  font-weight: 500;\n  z-index: 5;\n}\n\n.mobile .ai-warning-badge-VRwxc {\n  font-size: 11px;\n}\n";
+styleInject(css_248z);
+
+var LOADING_MESSAGES = {
+  de: ["Lichter werden eingerichtet\u2026", "Kamera wird positioniert\u2026", "M\xF6bel werden platziert\u2026", "Stoffe werden ausgew\xE4hlt\u2026", "Schatten werden angepasst\u2026", "Accessoires werden gestylt\u2026", "W\xE4nde werden gestrichen\u2026", "Letzte Details werden hinzugef\xFCgt\u2026", "Raum wird arrangiert\u2026", "Szene wird perfektioniert\u2026", "Oberfl\xE4chen werden poliert\u2026", "Ambiente wird abgestimmt\u2026"],
+  en: ["Setting up lights\u2026", "Positioning camera\u2026", "Placing furniture\u2026", "Choosing fabrics\u2026", "Adjusting shadows\u2026", "Styling accessories\u2026", "Painting the walls\u2026", "Adding final touches\u2026", "Arranging the room\u2026", "Perfecting the scene\u2026", "Polishing surfaces\u2026", "Tuning the ambiance\u2026"],
+  fr: ["Installation des lumi\xE8res\u2026", "Positionnement de la cam\xE9ra\u2026", "Placement des meubles\u2026", "Choix des tissus\u2026", "Ajustement des ombres\u2026", "Mise en place des accessoires\u2026", "Peinture des murs\u2026", "Ajout des touches finales\u2026", "Am\xE9nagement de la pi\xE8ce\u2026", "Perfectionnement de la sc\xE8ne\u2026", "Polissage des surfaces\u2026", "R\xE9glage de l\u2019ambiance\u2026"],
+  it: ["Preparazione delle luci\u2026", "Posizionamento della fotocamera\u2026", "Disposizione dei mobili\u2026", "Scelta dei tessuti\u2026", "Regolazione delle ombre\u2026", "Allestimento degli accessori\u2026", "Pittura delle pareti\u2026", "Aggiunta dei dettagli finali\u2026", "Organizzazione della stanza\u2026", "Perfezionamento della scena\u2026", "Lucidatura delle superfici\u2026", "Sintonizzazione dell\u2019atmosfera\u2026"]
+};
+var PlannerAIRoom = function PlannerAIRoom() {
+  var _i18n$language, _LOADING_MESSAGES$lan;
+  var viewHandler = useViewHandler();
+  var aiState = viewHandler.aiState;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n,
+    t = _useTranslation.t;
+  var swiperRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    messageIndex = _useState2[0],
+    setMessageIndex = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeSlide = _useState4[0],
+    setActiveSlide = _useState4[1];
+  var prevLengthRef = useRef(0);
+  var lang = ((_i18n$language = i18n.language) !== null && _i18n$language !== void 0 ? _i18n$language : 'de').toLowerCase().slice(0, 2);
+  var messages = (_LOADING_MESSAGES$lan = LOADING_MESSAGES[lang]) !== null && _LOADING_MESSAGES$lan !== void 0 ? _LOADING_MESSAGES$lan : LOADING_MESSAGES.de;
+  var isGenerating = aiState.isAnyGenerationInProgress;
+  var images = aiState.generatedImageHistory;
+  var isVisible = viewHandler.productState.doShowAIRoom;
+  var hasImages = images.length > 0;
+  var totalSlides = images.length + (isGenerating ? 1 : 0);
+  // Loading slide sits at index 0 when generating; real images are offset by 1.
+  var imageIndexOffset = isGenerating ? 1 : 0;
+  var isLoadingSlideActive = isGenerating && activeSlide === 0;
+  useEffect(function () {
+    var entry = images[activeSlide - imageIndexOffset];
+    if (entry) {
+      aiState.setCurrentlyVisibleRoom({
+        key: entry.key,
+        hash: entry.hash,
+        src: entry.src
+      });
+    }
+  }, [activeSlide, imageIndexOffset]);
+  useEffect(function () {
+    if (!isGenerating) {
+      setMessageIndex(0);
+      return;
+    }
+    var interval = setInterval(function () {
+      setMessageIndex(function (prev) {
+        return (prev + 1) % messages.length;
+      });
+    }, 3000);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [isGenerating]);
+  useEffect(function () {
+    if (images.length > prevLengthRef.current && swiperRef.current) {
+      // Freshly generated images are prepended to the history; focus index 0 in the real image range.
+      var targetIdx = isGenerating ? 1 : 0;
+      if (swiperRef.current.params.loop) {
+        swiperRef.current.slideToLoop(targetIdx, 300);
+      } else {
+        swiperRef.current.slideTo(targetIdx, 300);
+      }
+    }
+    prevLengthRef.current = images.length;
+  }, [images.length]);
+  useEffect(function () {
+    if (!aiState.currentlyVisibleRoom || !swiperRef.current) return;
+    var imgIdx = images.findIndex(function (img) {
+      var _aiState$currentlyVis;
+      return img.src === ((_aiState$currentlyVis = aiState.currentlyVisibleRoom) === null || _aiState$currentlyVis === void 0 ? void 0 : _aiState$currentlyVis.src);
+    });
+    if (imgIdx < 0) return;
+    var swiperIdx = imgIdx + imageIndexOffset;
+    if (swiperIdx !== swiperRef.current.realIndex) {
+      if (swiperRef.current.params.loop) {
+        swiperRef.current.slideToLoop(swiperIdx, 300);
+      } else {
+        swiperRef.current.slideTo(swiperIdx, 300);
+      }
+    }
+  }, [aiState.currentlyVisibleRoom, images, imageIndexOffset]);
+
+  // Auto-navigate the gallery to the loading slide (index 0) whenever generation
+  // starts or the style consultant explicitly asks for it (e.g. clicking the placeholder).
+  useEffect(function () {
+    if (!isGenerating || !swiperRef.current) return;
+    if (swiperRef.current.params.loop) {
+      swiperRef.current.slideToLoop(0, 300);
+    } else {
+      swiperRef.current.slideTo(0, 300);
+    }
+  }, [isGenerating, aiState.loadingSlideFocusRequest]);
+
+  // Publish loading-slide visibility so the style consultant can mirror it in the history.
+  useEffect(function () {
+    aiState.setLoadingSlideActive(isLoadingSlideActive);
+    return function () {
+      return aiState.setLoadingSlideActive(false);
+    };
+  }, [isLoadingSlideActive]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wcConfiguratorAiRoom,
+    id: "ai-room-container",
+    style: {
+      visibility: isVisible ? 'visible' : 'hidden',
+      pointerEvents: isVisible ? 'auto' : 'none'
+    },
+    children: [hasImages || isGenerating ? /*#__PURE__*/jsxs("div", {
+      className: galleryContainer,
+      children: [/*#__PURE__*/jsxs(Swiper, {
+        modules: [Navigation],
+        navigation: true,
+        slidesPerView: 1,
+        onSwiper: function onSwiper(swiper) {
+          swiperRef.current = swiper;
+        },
+        onSlideChange: function onSlideChange(swiper) {
+          return setActiveSlide(swiper.realIndex);
+        },
+        loop: totalSlides > 1,
+        children: [isGenerating && /*#__PURE__*/jsx(SwiperSlide, {
+          children: /*#__PURE__*/jsxs("div", {
+            className: "".concat(gallerySlide, " ").concat(loadingOverlay),
+            children: [/*#__PURE__*/jsx("div", {
+              className: spinner
+            }), /*#__PURE__*/jsx("p", {
+              className: loadingText,
+              children: messages[messageIndex]
+            }, messageIndex)]
+          })
+        }, "loading-slide"), images.map(function (entry, idx) {
+          return /*#__PURE__*/jsx(SwiperSlide, {
+            children: /*#__PURE__*/jsx("div", {
+              className: gallerySlide,
+              children: /*#__PURE__*/jsx("img", {
+                className: aiRoomImage,
+                src: entry.src,
+                alt: "AI Generated Room",
+                draggable: false
+              })
+            })
+          }, "".concat(entry.key, "-").concat(entry.hash, "-").concat(idx));
+        })]
+      }), images.length > 1 && !isLoadingSlideActive && /*#__PURE__*/jsxs("div", {
+        className: slideCounter,
+        children: [activeSlide - imageIndexOffset + 1, " / ", images.length]
+      })]
+    }) : aiState.currentlyVisibleRoom && /*#__PURE__*/jsx("div", {
+      className: gallerySlide,
+      children: /*#__PURE__*/jsx("img", {
+        className: aiRoomImage,
+        src: aiState.currentlyVisibleRoom.src,
+        alt: "AI Generated Room",
+        draggable: false
+      })
+    }), hasImages && !isGenerating && /*#__PURE__*/jsx("div", {
+      className: aiWarningBadge,
+      children: t('configurator.roomRendering.aiGenerated')
+    })]
+  });
+};
+var PlannerAIRoom$1 = observer(PlannerAIRoom);
+
+export { PlannerAIRoom$1 as default };

package/build/esm/index-fb82924a.js

@@ -0,0 +1,46 @@
+import { u as useViewHandler } from './index-2a04e43a.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { c as wcConfiguratorSettingsExpander, h as hidden, d as wcConfiguratorSettingsMaxExpander, f as wcConfiguratorSettingsMinExpander } from './index.module-654ad05a.js';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+var SettingsExpanderButtons = function SettingsExpanderButtons(props) {
+  var viewHandler = useViewHandler();
+  var hide = viewHandler.settingsState.contentItemId && viewHandler.settingsState.contentItemVisible;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [viewHandler.uiState.doShowConfSettingsExpander && !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorSettingsExpander, hide ? hidden : undefined),
+      onClick: viewHandler.uiState.onClickExpandConfigSettings
+    }), !viewHandler.uiState.isInMobileView && viewHandler.uiState.doShowConfSettingsMaxMinExpander && /*#__PURE__*/jsxs(Fragment, {
+      children: [!viewHandler.uiState.configSettingsIsMaxExpanded && /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorSettingsMaxExpander, hide ? hidden : undefined),
+        onClick: viewHandler.uiState.onClickExpandMaxConfigSettings
+      }), !viewHandler.uiState.configSettingsIsMinExpanded && /*#__PURE__*/jsx("div", {
+        className: wcConfiguratorSettingsMinExpander,
+        onClick: viewHandler.uiState.onClickExpandMinConfigSettings
+      })]
+    })]
+  });
+};
+var SettingsExpanderButtons$1 = observer(SettingsExpanderButtons);
+
+export { SettingsExpanderButtons$1 as default };

package/build/esm/index-fcb9b2fe.js

@@ -0,0 +1,167 @@
+import { s as styleInject } from './index-2a04e43a.js';
+import 'react';
+import { w as wcBoxPlannerAddElement, a as wcBoxPlannerAddElementLeft, b as wcBoxPlannerAddElementTop, c as wcBoxPlannerAddElementRight, d as wcPlanner3DRot, e as wcPlanner3DMove, f as wcPlannerDistanceToGround, g as wcPlannerArrowDistanceToGround } from './index.module-2c20036f.js';
+import { w as wcUi2DOutlineDraggable, a as wcUi2DOutlineDraggableActive, b as wcUi2DOutlineSelectable, c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-06d73aa9.js';
+import PlannerUI from './index-c6c9e2b6.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+import './index-09e17356.js';
+import './index-bb13d79e.js';
+import './index-cff84c1c.js';
+import './index-54c3ebe8.js';
+import './index-681d7af4.js';
+import './index-6194d597.js';
+import './index-3fc41c92.js';
+import './index-ba7c5dd4.js';
+import './index-74936c28.js';
+import './index-fe72615f.js';
+import './index-a426301c.js';
+import './index-d4650811.js';
+import './index-752d51c9.js';
+import 'react-draggable';
+import './index-f572c482.js';
+import './index-b11b590c.js';
+import './index-eb5e1899.js';
+
+var wcPlannerButton = "wcPlannerButton-7VWLs";
+var mobile = "mobile-JpBZv";
+var css_248z$6 = ".wcPlannerButton-7VWLs {\n  position: absolute;\n  background-repeat: no-repeat;\n  --globalSize: 28px;\n  --posNrSize: var(--globalSize) --trashSize: var(--globalSize);\n  --rotSize: 35px;\n  --copySize: var(--globalSize);\n  --fontSize: 26px;\n  --copyArrowSize: 40px;\n}\n\n:not(.tablet-CDlVX).mobile-JpBZv {\n  --globalSize: 16px;\n  --fontSize: 14px;\n  --rotSize: 16px;\n  --copyArrowSize: var(--globalSize);\n}\n\n.tablet-CDlVX {\n  --globalSize: 24px;\n  --fontSize: 16px;\n  --rotSize: 24px;\n  --copyArrowSize: var(--globalSize);\n}\n";
+styleInject(css_248z$6);
+
+var wcUi2DDpAvl = "wcUI2D_DP_AVL-w776P";
+var wcUi2DDpAvlSel = "wcUI2D_DP_AVL_SEL-zCEhK";
+var css_248z$5 = ".wcUI2D_DP_AVL-w776P {\n  border-radius: 0px !important;\n}\n\n.wcUI2D_DP_AVL-w776P {\n  height: calc(var(--globalSize) * 1.2);\n  width: calc(var(--globalSize) * 1.2);\n  background-color: rgba(0, 0, 0, 0);\n  background-position: center right;\n  background-size: calc(var(--globalSize) * 0.48);\n  background-position-x: calc(calc(var(--globalSize) * 0.48) + 6);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.47657 13.1203C1.15196 12.7895 0.989658 12.6242 0.989658 12.4198C0.989658 12.2154 1.15196 12.0501 1.47657 11.7193L11.8254 1.17541C12.5534 0.433651 12.9174 0.0627729 13.2282 0.189821C13.5391 0.316868 13.5391 0.836538 13.5391 1.87588L13.5391 22.9637C13.5391 24.0031 13.5391 24.5227 13.2282 24.6498C12.9174 24.7768 12.5534 24.4059 11.8254 23.6642L1.47657 13.1203Z%22 fill%3D%22%234A4A4A%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  transform-origin: top left;\n  z-index: 263;\n}\n\n.wcUI2D_DP_AVL_SEL-zCEhK {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.14125 13.1203C0.816636 12.7895 0.654331 12.6242 0.654331 12.4198C0.654331 12.2154 0.816636 12.0501 1.14125 11.7193L11.4901 1.17541C12.2181 0.433651 12.5821 0.0627729 12.8929 0.189821C13.2037 0.316868 13.2037 0.836538 13.2037 1.87588L13.2037 22.9637C13.2037 24.0031 13.2037 24.5227 12.8929 24.6498C12.5821 24.7768 12.2181 24.4059 11.4901 23.6642L1.14125 13.1203Z%22 fill%3D%22%23272727%22%2F%3E%3C%2Fsvg%3E\") !important;\n}\n";
+styleInject(css_248z$5);
+
+var wcUi2DDpAvr = "wcUI2D_DP_AVR-oYj8A";
+var wcUi2DDpAvrSel = "wcUI2D_DP_AVR_SEL-XRrsh";
+var css_248z$4 = ".wcUI2D_DP_AVR-oYj8A {\n  border-radius: 0px !important;\n}\n\n.wcUI2D_DP_AVR-oYj8A {\n  height: calc(var(--globalSize) * 1.2);\n  width: calc(var(--globalSize) * 1.2);\n  background-color: rgba(0, 0, 0, 0);\n  background-size: calc(var(--globalSize) * 0.48);\n  background-position: center left;\n  background-position-x: 4px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0291 11.7193C13.3537 12.0501 13.516 12.2154 13.516 12.4198C13.516 12.6242 13.3537 12.7895 13.0291 13.1203L2.68029 23.6642C1.95226 24.4059 1.58825 24.7768 1.27743 24.6498C0.966613 24.5227 0.966613 24.0031 0.966613 22.9637L0.966614 1.87588C0.966614 0.836538 0.966614 0.316868 1.27743 0.18982C1.58825 0.0627725 1.95226 0.43365 2.68029 1.17541L13.0291 11.7193Z%22 fill%3D%22%234A4A4A%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  transform-origin: top left;\n  z-index: 263;\n}\n\n.wcUI2D_DP_AVR_SEL-XRrsh {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.6938 11.7193C13.0184 12.0501 13.1808 12.2154 13.1808 12.4198C13.1808 12.6242 13.0184 12.7895 12.6938 13.1203L2.34503 23.6642C1.617 24.4059 1.25298 24.7768 0.942164 24.6498C0.631346 24.5227 0.631346 24.0031 0.631347 22.9637L0.631347 1.87588C0.631348 0.836538 0.631348 0.316868 0.942165 0.18982C1.25298 0.0627725 1.617 0.43365 2.34503 1.17541L12.6938 11.7193Z%22 fill%3D%22%23272727%22%2F%3E%3C%2Fsvg%3E\") !important;\n}\n";
+styleInject(css_248z$4);
+
+var wcUi2DDpAvDocking = "wcUI2D_DP_AV_DOCKING-dykAB";
+var wcUi2DDpAvNotDocking = "wcUI2D_DP_AV_NOT_DOCKING-4AvG7";
+var wcUi2DDpAvNotDockingSel = "wcUI2D_DP_AV_NOT_DOCKING_SEL-vuwqN";
+var wcUi3DDpAvDocking = "wcUI3D_DP_AV_DOCKING--4iHA";
+var wcUi3DDpAvNotDocking = "wcUI3D_DP_AV_NOT_DOCKING-NwAjs";
+var wcUi3DDpAvNotDockingSel = "wcUI3D_DP_AV_NOT_DOCKING_SEL--PDLM";
+var css_248z$3 = ".wcUI2D_DP_AV_DOCKING-dykAB {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: calc(var(--globalSize) * 0.5);\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2223%22 viewBox%3D%220 0 23 23%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.5618 22.3251C17.474 22.3251 22.2668 17.5323 22.2668 11.6201C22.2668 5.70789 17.474 0.9151 11.5618 0.9151C5.64957 0.9151 0.856781 5.70789 0.856781 11.6201C0.856781 17.5323 5.64957 22.3251 11.5618 22.3251Z%22 fill%3D%22%23F2F2F2%22%2F%3E%3Cpath d%3D%22M5.85678 11.715H17.4568%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: calc(var(--globalSize) * -0.5);\n  z-index: 263;\n}\n\n.wcUI2D_DP_AV_NOT_DOCKING-4AvG7 {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: calc(var(--globalSize) * 0.5);\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2222%22 height%3D%2222%22 viewBox%3D%220 0 22 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.1518 21.4198C17.064 21.4198 21.8568 16.627 21.8568 10.7148C21.8568 4.80262 17.064 0.00982666 11.1518 0.00982666C5.23957 0.00982666 0.446777 4.80262 0.446777 10.7148C0.446777 16.627 5.23957 21.4198 11.1518 21.4198Z%22 fill%3D%22%23F2F2F2%22%2F%3E%3Cpath d%3D%22M11.2469 5.00983V16.6098%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M5.44678 10.8097H17.0468%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: calc(var(--globalSize) * -0.5);\n  z-index: 263;\n}\n.wcUI2D_DP_AV_NOT_DOCKING_SEL-vuwqN {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2222%22 viewBox%3D%220 0 23 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.5498 21.4198C17.4621 21.4198 22.2548 16.627 22.2548 10.7148C22.2548 4.80262 17.4621 0.00982666 11.5498 0.00982666C5.63764 0.00982666 0.844849 4.80262 0.844849 10.7148C0.844849 16.627 5.63764 21.4198 11.5498 21.4198Z%22 fill%3D%22%23DFDFDF%22%2F%3E%3Cpath d%3D%22M11.645 5.00983V16.6098%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M5.84485 10.8097H17.4448%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\") !important;\n  background-color: #dfdfdf !important;\n}\n\n.wcUI3D_DP_AV_DOCKING--4iHA {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: calc(var(--globalSize) * 0.5);\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2223%22 viewBox%3D%220 0 23 23%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.5618 22.3251C17.474 22.3251 22.2668 17.5323 22.2668 11.6201C22.2668 5.70789 17.474 0.9151 11.5618 0.9151C5.64957 0.9151 0.856781 5.70789 0.856781 11.6201C0.856781 17.5323 5.64957 22.3251 11.5618 22.3251Z%22 fill%3D%22%23F2F2F2%22%2F%3E%3Cpath d%3D%22M5.85678 11.715H17.4568%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: 0px;\n  z-index: 270;\n}\n.wcUI3D_DP_AV_NOT_DOCKING-NwAjs {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: calc(var(--globalSize) * 0.5);\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2222%22 height%3D%2222%22 viewBox%3D%220 0 22 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.1518 21.4198C17.064 21.4198 21.8568 16.627 21.8568 10.7148C21.8568 4.80262 17.064 0.00982666 11.1518 0.00982666C5.23957 0.00982666 0.446777 4.80262 0.446777 10.7148C0.446777 16.627 5.23957 21.4198 11.1518 21.4198Z%22 fill%3D%22%23F2F2F2%22%2F%3E%3Cpath d%3D%22M11.2469 5.00983V16.6098%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M5.44678 10.8097H17.0468%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: 0px;\n  z-index: 270;\n}\n.wcUI3D_DP_AV_NOT_DOCKING_SEL--PDLM {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2222%22 viewBox%3D%220 0 23 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.5498 21.4198C17.4621 21.4198 22.2548 16.627 22.2548 10.7148C22.2548 4.80262 17.4621 0.00982666 11.5498 0.00982666C5.63764 0.00982666 0.844849 4.80262 0.844849 10.7148C0.844849 16.627 5.63764 21.4198 11.5498 21.4198Z%22 fill%3D%22%23DFDFDF%22%2F%3E%3Cpath d%3D%22M11.645 5.00983V16.6098%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M5.84485 10.8097H17.4448%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\") !important;\n  background-color: #dfdfdf !important;\n}\n";
+styleInject(css_248z$3);
+
+var wc2DRotClock = "wc2DRot_Clock-n78aC";
+var wc2DRotCounterClock = "wc2DRot_CounterClock-nWr4L";
+var css_248z$2 = ".wc2DRot_Clock-n78aC {\n  background-size: 100%;\n  width: var(--rotSize);\n  height: var(--rotSize);\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2233%22 height%3D%2233%22 viewBox%3D%220 0 33 33%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.6421 32.4198C7.80553 32.4198 0.642092 25.2564 0.642092 16.4198C0.642092 7.58326 7.80553 0.419815 16.6421 0.419815C25.4786 0.419815 32.6421 7.58326 32.6421 16.4198C32.6421 25.2564 25.4786 32.4198 16.6421 32.4198Z%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M19.5435 10.5015C19.6332 10.5811 19.6332 10.7212 19.5435 10.8008L15.7327 14.1809C15.6036 14.2954 15.3999 14.2038 15.3999 14.0313V11.5247C12.5284 12.1012 10.3655 14.6372 10.3655 17.6785C10.3655 21.145 13.1757 23.9551 16.6422 23.9551C20.1087 23.9551 22.9188 21.145 22.9188 17.6785C22.9188 17.4576 23.0979 17.2785 23.3188 17.2785H24.3188C24.4249 17.2785 24.5267 17.3207 24.6017 17.3957C24.6767 17.4707 24.7188 17.5725 24.7188 17.6785C24.7188 22.1391 21.1028 25.7551 16.6422 25.7551C12.1816 25.7551 8.5655 22.1391 8.5655 17.6785C8.5655 13.6404 11.5292 10.2944 15.3999 9.69677V7.27096C15.3999 7.09849 15.6036 7.00689 15.7327 7.12134L19.5435 10.5015Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  z-index: 260;\n  transform: translate(-50%, -50%);\n}\n.wc2DRot_CounterClock-nWr4L {\n  background-size: 100%;\n  width: var(--rotSize);\n  height: var(--rotSize);\n  background-position: center center;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2233%22 height%3D%2233%22 viewBox%3D%220 0 33 33%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.6421 32.4198C25.4786 32.4198 32.6421 25.2564 32.6421 16.4198C32.6421 7.58326 25.4786 0.419815 16.6421 0.419815C7.80553 0.419815 0.64209 7.58326 0.64209 16.4198C0.64209 25.2564 7.80553 32.4198 16.6421 32.4198Z%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13.7407 10.5015C13.6509 10.5811 13.6509 10.7212 13.7407 10.8008L17.5515 14.1809C17.6805 14.2954 17.8842 14.2038 17.8842 14.0313V11.5247C20.7557 12.1012 22.9187 14.6372 22.9187 17.6785C22.9187 21.145 20.1085 23.9551 16.642 23.9551C13.1755 23.9551 10.3654 21.145 10.3653 17.6785C10.3653 17.4576 10.1863 17.2785 9.96534 17.2785H8.96534C8.85925 17.2785 8.75751 17.3207 8.68249 17.3957C8.60748 17.4707 8.56534 17.5725 8.56534 17.6785C8.56539 22.1391 12.1814 25.7551 16.642 25.7551C21.1026 25.7551 24.7187 22.1391 24.7187 17.6785C24.7187 13.6404 21.755 10.2944 17.8842 9.69677V7.27096C17.8842 7.09849 17.6805 7.00689 17.5515 7.12134L13.7407 10.5015Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\");\n  z-index: 260;\n  transform: translate(-50%, -50%);\n}\n";
+styleInject(css_248z$2);
+
+var wcUiDel = "wcUI_Del-1Gwbv";
+var css_248z$1 = ".wcUI_Del-1Gwbv {\n  width: calc(var(--globalSize));\n  height: calc(var(--globalSize));\n  border-radius: 3px;\n  background: #dfdfdf;\n  background-repeat: no-repeat;\n  background-size: 54%;\n  text-align: center;\n  cursor: pointer;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2221%22 viewBox%3D%220 0 16 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M15.2784 3.0226H10.9717V2.08029C10.9717 1.35784 10.4151 0.72963 9.71198 0.72963H6.78229C6.10846 0.72963 5.52252 1.32643 5.52252 2.08029V3.0226H1.21588C0.981506 3.0226 0.776428 3.24248 0.776428 3.49376C0.776428 3.74505 0.981506 3.96492 1.21588 3.96492H2.18268V17.7542C2.18268 19.0734 3.17877 20.11 4.37994 20.11H12.1436C13.3741 20.11 14.3409 19.042 14.3409 17.7542V3.93351H15.3077C15.5714 3.93351 15.7764 3.71364 15.7764 3.46235C15.7764 3.17966 15.5421 3.0226 15.2784 3.0226ZM6.43073 2.08029C6.43073 1.829 6.6358 1.67195 6.78229 1.67195H9.71198C9.94635 1.67195 10.0928 1.86041 10.0928 2.08029V3.0226H6.43073V2.08029ZM13.462 17.7228C13.462 18.508 12.876 19.1363 12.1436 19.1363H4.37994C3.64752 19.1363 3.06158 18.508 3.06158 17.7228V3.96492H13.462V17.7228Z%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath d%3D%22M8.68658 6.82326V16.2464C8.68658 16.5291 8.5108 16.749 8.24713 16.749C7.98346 16.749 7.80768 16.5291 7.80768 16.2464V6.82326C7.80768 6.54056 8.04205 6.3521 8.24713 6.3521C8.48151 6.3521 8.68658 6.57197 8.68658 6.82326Z%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath d%3D%22M11.6456 6.82326V16.2464C11.6456 16.5291 11.4405 16.749 11.2061 16.749C10.9717 16.749 10.7667 16.5291 10.7667 16.2464V6.82326C10.7667 6.54056 10.9717 6.3521 11.2061 6.3521C11.4405 6.3521 11.6456 6.57197 11.6456 6.82326Z%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath d%3D%22M5.78619 6.82326V16.2464C5.78619 16.5291 5.58112 16.749 5.34674 16.749C5.11237 16.749 4.87799 16.5291 4.87799 16.2464V6.82326C4.87799 6.54056 5.08307 6.3521 5.31744 6.3521C5.55182 6.3521 5.78619 6.57197 5.78619 6.82326Z%22 fill%3D%22%234A4A4A%22%2F%3E%3C%2Fsvg%3E\");\n  z-index: 262;\n  transform: translate(-50%, -50%);\n}\n";
+styleInject(css_248z$1);
+
+var wcPlannerPosNr = "wcPlanner_PosNr-RBqyV";
+var posNrAcc = "posNrAcc-hNhyN";
+var wcPlannerPosNrSelected = "wcPlanner_PosNr_Selected-boByP";
+var wcPlannerPosNrSelectable = "wcPlanner_PosNr_Selectable-SoSIj";
+var wcPlannerPosNrSelectableArea = "wcPlanner_PosNr_Selectable_Area-jiYPo";
+var wcPlannerPosNrUnSelectable = "wcPlanner_PosNr_UnSelectable-5I9n1";
+var wcPlannerPosNrOnHover = "wcPlanner_PosNr_OnHover-pSfg2";
+var css_248z = ".wcPlanner_PosNr-RBqyV {\n  min-width: var(--globalSize);\n  height: var(--globalSize);\n  border-radius: 3px;\n  font-size: calc(var(--globalSize) * 0.7);\n  line-height: var(--globalSize);\n  text-align: center;\n  z-index: 262;\n  transform: translate(-50%, -50%);\n}\n\n.posNrAcc-hNhyN {\n  min-width: 20px;\n  height: 20px;\n  font-size: 12px;\n  line-height: 20px;\n  padding: 0 3px;\n}\n\n.wcPlanner_PosNr_Selected-boByP {\n  background: var(--primaryColor);\n  color: #ffffff;\n  box-shadow: none;\n}\n.wcPlanner_PosNr_Selectable-SoSIj {\n  background: #dfdfdf;\n  color: #4a4a4a;\n}\n.wcPlanner_PosNr_Selectable_Area-jiYPo {\n  width: 50px;\n  height: 50px;\n  position: absolute;\n  transform: translate(-25%, -25%);\n  background-color: rgba(100, 100, 100, 0);\n  cursor: pointer;\n}\n\n.wcPlanner_PosNr_UnSelectable-5I9n1 {\n  background: #dfdfdf;\n  color: rgb(175, 172, 172);\n  cursor: inherit;\n}\n\n.wcPlanner_PosNr_UnSelectable-5I9n1:hover {\n  background: #dfdfdf;\n}\n\n.wcPlanner_PosNr_OnHover-pSfg2 {\n  background-color: #a3a3a3;\n  transition: background-color 0.15s ease;\n}\n";
+styleInject(css_248z);
+
+var GoldenPlannerUI = function GoldenPlannerUI() {
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  var plannerUIProps = {
+    classes: {
+      buttonGeneral: classnames(wcPlannerButton, isMobile ? mobile : undefined),
+      dockingPoint: {
+        AVL: {
+          avl: wcUi2DDpAvl,
+          avlSel: wcUi2DDpAvlSel
+        },
+        AVR: {
+          avr: wcUi2DDpAvr,
+          avrSel: wcUi2DDpAvrSel
+        },
+        DPACC: {
+          dp2DAccDocking: wcUi2DDpAvDocking,
+          dp2DAccNotDocking: wcUi2DDpAvNotDocking,
+          dp2DAccNotDockingSel: wcUi2DDpAvNotDockingSel,
+          dp3DAccDocking: wcUi3DDpAvDocking,
+          dp3DAccNotDocking: wcUi3DDpAvNotDocking,
+          dp3DAccNotDockingSel: wcUi3DDpAvNotDockingSel
+        }
+      },
+      copy: {
+        BoxPlannerCopy: {
+          copyGlobal: wcBoxPlannerAddElement,
+          copyLeft: wcBoxPlannerAddElementLeft,
+          copyTop: wcBoxPlannerAddElementTop,
+          copyRight: wcBoxPlannerAddElementRight
+        },
+        ElementCopy: ''
+      },
+      outline: {
+        outline2D: {
+          draggable: wcUi2DOutlineDraggable,
+          draggableActive: wcUi2DOutlineDraggableActive,
+          selectable: wcUi2DOutlineSelectable
+        },
+        outline3D: {
+          outlineSVG: wc3DOutlineSvg,
+          outlinePolygon: wc3DOutlinePolygon,
+          outlinePolygonContours: wc3DOutlinePolygonContours,
+          outlinePolygonContoursSel: wc3DOutlinePolygonContoursSel
+        }
+      },
+      posNr: {
+        posNr: wcPlannerPosNr,
+        posNrAcc: posNrAcc,
+        posNrSelectable: wcPlannerPosNrSelectable,
+        posNrSelectableArea: wcPlannerPosNrSelectableArea,
+        posNrSelected: wcPlannerPosNrSelected,
+        posNrUnSelectable: wcPlannerPosNrUnSelectable,
+        posNrOnHover: wcPlannerPosNrOnHover,
+        moreThanOneNr: ''
+      },
+      rotation: {
+        rotClock: wc2DRotClock,
+        rotCounterClock: wc2DRotCounterClock,
+        rot3DGrid: wcPlanner3DRot
+      },
+      move3DGrid: {
+        move3DGrid: wcPlanner3DMove
+      },
+      trash: {
+        boxplanner: '',
+        trashClass: wcUiDel
+      },
+      dimension: {
+        distanceToGround: wcPlannerDistanceToGround,
+        distanceToGroundIcon: wcPlannerArrowDistanceToGround
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(PlannerUI, {
+    plannerUIProps: plannerUIProps
+  });
+};
+
+export { GoldenPlannerUI as default };

package/build/esm/index-fd458c50.js

@@ -0,0 +1,48 @@
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsxs, 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/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-XGE9U";
+var css_248z = ".wrapper-XGE9U {\n  position: absolute;\n  bottom: 0;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  cursor: pointer;\n}\n";
+styleInject(css_248z);
+
+var DontReopenAutomatically = function DontReopenAutomatically(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    onClick: function onClick() {
+      return viewHandler.settingsState.setDontReopenAutomatically(!viewHandler.settingsState.dontReopenAutomatically);
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      children: t('configurator.dontReopenAutomatically')
+    }), /*#__PURE__*/jsx("input", {
+      type: "checkbox",
+      checked: viewHandler.settingsState.dontReopenAutomatically
+    })]
+  });
+};
+var index = observer(DontReopenAutomatically);
+
+export { index as default };

package/build/esm/index-fe72615f.js

@@ -0,0 +1,51 @@
+import { c as usePlannerUIHandler } from './index-2a04e43a.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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+var DPACC = function DPACC(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, item.dockToElementId);
+    },
+    style: {
+      left: item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, item.plannerMode == '2D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDocking : undefined, item.plannerMode == '2D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDockingSel : undefined : undefined, item.plannerMode == '3D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDocking : undefined, item.plannerMode == '3D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDockingSel : undefined : undefined),
+    children: item.posNr
+  });
+};
+var DPACC$1 = observer(DPACC);
+
+export { DPACC$1 as default };