@crystaldesign/diva-web-planner-react 26.3.0-beta.44 → 26.3.0-beta.46

package/build/esm/index-681217b2.js

@@ -0,0 +1,67 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-d8f5f2bc.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-MPQ1D";
+var searchText = "search-text-h7Q58";
+var icon = "icon-yltss";
+var css_248z = ".wrapper-MPQ1D {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n.search-text-h7Q58 {\n  width: 130px;\n  height: 30px;\n  line-height: 28px;\n  border-radius: 5px;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  background-color: #fff;\n  padding: 0 1.6rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: relative;\n  border: 0;\n}\n\n.icon-yltss {\n  width: 36px;\n  height: 36px;\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  margin-left: 12px;\n  margin-right: 12px;\n}\n";
+styleInject(css_248z);
+
+var Search = function Search(_ref) {
+  var _ref$searchState = _slicedToArray(_ref.searchState, 2),
+    search = _ref$searchState[0],
+    setSearch = _ref$searchState[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (value && value.length > 2) setSearch(value);else if ((search === null || search === void 0 ? void 0 : search.length) !== 0) {
+      setSearch(undefined);
+    }
+  }, [value]);
+  useEffect(function () {
+    if (!(search !== null && search !== void 0 && search.length)) setValue('');
+  }, [search]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("input", {
+      ref: inputRef,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      type: 'text',
+      value: value,
+      className: searchText,
+      placeholder: t('filter.global')
+    }), /*#__PURE__*/jsx("div", {
+      className: icon
+    })]
+  });
+};
+
+export { Search as default };

package/build/esm/index-6a83c347.js

@@ -0,0 +1,178 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-d8f5f2bc.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/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 '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 gallerySlideBlurred = "gallery-slide-blurred-S9KVT";
+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.gallery-slide-blurred-S9KVT {\n  filter: blur(16px) brightness(0.72);\n  transform: scale(1.04);\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  font-family: swiper-icons;\n  font-size: 18px;\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 overlay ────────────────────────────────────── */\n\n.loading-overlay-t1CPa {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 12;\n  background: rgba(0, 0, 0, 0.25);\n  animation: overlayFadeIn-aFU2G 0.6s ease both;\n  pointer-events: none;\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;
+  useEffect(function () {
+    var entry = images[activeSlide];
+    if (entry) {
+      aiState.setCurrentlyVisibleRoom({
+        key: entry.key,
+        hash: entry.hash,
+        src: entry.src
+      });
+    }
+  }, [activeSlide]);
+  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) {
+      if (swiperRef.current.params.loop) {
+        swiperRef.current.slideToLoop(0, 300);
+      } else {
+        swiperRef.current.slideTo(0, 300);
+      }
+    }
+    prevLengthRef.current = images.length;
+  }, [images.length]);
+  useEffect(function () {
+    if (!aiState.currentlyVisibleRoom || !swiperRef.current) return;
+    var idx = 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 (idx > -1 && idx !== swiperRef.current.realIndex) {
+      if (swiperRef.current.params.loop) {
+        swiperRef.current.slideToLoop(idx, 300);
+      } else {
+        swiperRef.current.slideTo(idx, 300);
+      }
+    }
+  }, [aiState.currentlyVisibleRoom, images]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wcConfiguratorAiRoom,
+    id: "ai-room-container",
+    style: {
+      visibility: isVisible ? 'visible' : 'hidden',
+      pointerEvents: isVisible ? 'auto' : 'none'
+    },
+    children: [hasImages ? /*#__PURE__*/jsxs("div", {
+      className: galleryContainer,
+      children: [/*#__PURE__*/jsx(Swiper, {
+        modules: [Navigation],
+        navigation: true,
+        slidesPerView: 1,
+        onSwiper: function onSwiper(swiper) {
+          swiperRef.current = swiper;
+        },
+        onSlideChange: function onSlideChange(swiper) {
+          return setActiveSlide(swiper.realIndex);
+        },
+        loop: (images === null || images === void 0 ? void 0 : images.length) > 1 ? true : false,
+        children: images.map(function (entry, idx) {
+          return /*#__PURE__*/jsx(SwiperSlide, {
+            children: /*#__PURE__*/jsx("div", {
+              className: "".concat(gallerySlide, " ").concat(isGenerating ? gallerySlideBlurred : ''),
+              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 && !isGenerating && /*#__PURE__*/jsxs("div", {
+        className: slideCounter,
+        children: [activeSlide + 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
+      })
+    }), isGenerating && /*#__PURE__*/jsxs("div", {
+      className: loadingOverlay,
+      children: [/*#__PURE__*/jsx("div", {
+        className: spinner
+      }), /*#__PURE__*/jsx("p", {
+        className: loadingText,
+        children: messages[messageIndex]
+      }, messageIndex)]
+    }), 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-6c757381.js

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

package/build/esm/index-6ca4b52c.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-d8f5f2bc.js';
+import SummaryOptionTree from './index-1d38110d.js';
+import SummaryArticles from './index-3199e34a.js';
+import SettingsItemAccessoireTemplate from './index-71857ec3.js';
+import Gallery from './index-7f80d622.js';
+import SettingsItemDefaultTemplate from './index-cf80ca98.js';
+import Range from './index-432249ff.js';
+import SettingsItemRoomTemplate from './index-2035f455.js';
+import ViewPoint from './index-9604e14b.js';
+import NumberBox from './index-3766f539.js';
+import PlannerSwitch from './index-bf60f0e2.js';
+import Varaint from './index-0c796cd3.js';
+import GalleryText from './index-9410fe7d.js';
+import 'react';
+import GalleryText2 from './index-17ee461e.js';
+import FaceLift from './index-6fef0623.js';
+import PlannerOverviewItem from './index-098bab7e.js';
+import Article from './index-10efa90a.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'react-switch';
+import 'react-countup';
+import 'react-laag';
+import './index.module-589c6489.js';
+import './index-775a0133.js';
+import './index-720945d2.js';
+import './index-3a8f8861.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index.module-8fe4c434.js';
+import './index-8ff68890.js';
+import './index-c50caae1.js';
+import './index-e98744e1.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+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 itemPaletteTypeComponentMap = {
+  ART: Article,
+  ART_2: FaceLift,
+  'PLANNER_2.0': PlannerOverviewItem,
+  PLANNERSWITCH: PlannerSwitch,
+  ACC: SettingsItemAccessoireTemplate,
+  ACC_CONFIG: SettingsItemAccessoireTemplate,
+  VERY_SMALL: SettingsItemDefaultTemplate,
+  SMALL: SettingsItemDefaultTemplate,
+  GAL_GROUP_DROPDOWN: function GAL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "normalimage.png"
+    }, props));
+  },
+  GAL_SMALL_GROUP_DROPDOWN: function GAL_SMALL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL: Gallery,
+  GAL_SMALL: Gallery,
+  GAL_BIG: Gallery,
+  RANGE: Range,
+  NUMBER: NumberBox,
+  SLIDER: function SLIDER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE: function MULTI_TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE_ROUND: function MULTI_TOGGLE_ROUND() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO: function RADIO() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO_LIST: function RADIO_LIST() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SUMMARY_ARTICLES: SummaryArticles,
+  SUMMARY_OPTIONTREE: SummaryOptionTree,
+  VARIANTS: Varaint,
+  STATICROOM: SettingsItemRoomTemplate,
+  VIEWPOINT: ViewPoint,
+  DROPDOWN_TEXT: function DROPDOWN_TEXT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DROPDOWN_IMAGE: function DROPDOWN_IMAGE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE: function TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_HEADER: function TOGGLE_HEADER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_NAME: function TOGGLE_NAME() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DOOR_PLANNER: function DOOR_PLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TEXTBOX: function TEXTBOX() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SHELFPLANNER: function SHELFPLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PRODUCTS: function PRODUCTS() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PROMOTED: function PROMOTED() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  CHECKOUT: function CHECKOUT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  STYLE_CONSULTANT: function STYLE_CONSULTANT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  GAL_TEXT_2: function GAL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT_2: function GAL_BIG_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT_2: function GAL_SMALL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_TEXT: function GAL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT: function GAL_BIG_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT: function GAL_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_VERY_SMALL_TEXT: function GAL_VERY_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "verysmall"
+    }, props));
+  }
+};
+
+export { itemPaletteTypeComponentMap as default };

package/build/esm/index-6f1206ed.js

@@ -0,0 +1,48 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-d8f5f2bc.js';
+import { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import ItemVariant from './index-a331a364.js';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var TabGroupHorizontal = function TabGroupHorizontal(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.tabGroupState.scrollToCurTabgroupHorizontal();
+  }, [viewHandler.tabGroupState.curTabGroup]);
+  if (!viewHandler.tabGroupState.allTabGroups) return /*#__PURE__*/jsx(Fragment, {});
+  var tabGroups = Object.entries(viewHandler.tabGroupState.allTabGroups);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: tabGroups.map(function (_ref) {
+      var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        tabGroup = _ref2[1];
+      return /*#__PURE__*/jsx(ItemVariant, {
+        tabGroup: tabGroup,
+        width: 'calc(' + ((_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState) === null || _viewHandler$tabGroup2 === void 0 || (_viewHandler$tabGroup2 = _viewHandler$tabGroup2.tabGroupScroller) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.getBoundingClientRect().width) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0) + 'px / ' + tabGroups.length + ')'
+      }, key);
+    })
+  });
+};
+var TabGroupHorizontal$1 = observer(TabGroupHorizontal);
+
+export { TabGroupHorizontal$1 as default };

package/build/esm/index-6f7c4c69.js

@@ -0,0 +1,45 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-d8f5f2bc.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import VerticalTabGroupItemStandard from './index-1ba06f06.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'react-switch';
+import 'react-countup';
+
+var verticalItemPoligon = "verticalItemPoligon-uLIgs";
+var wcActiveStep = "wcActiveStep-Cjjc7";
+var wcVisitedStep = "wcVisitedStep-Syo-H";
+var wcStepIcon = "wcStepIcon-oKNsW";
+var css_248z = ".verticalItemPoligon-uLIgs {\n  fill: #f5f5f5;\n  stroke: #f5f5f5;\n}\n.verticalItemPoligon-uLIgs:hover {\n  stroke: #cca663;\n  stroke-width: 2px;\n}\n.verticalItemPoligon-uLIgs.wcActiveStep-Cjjc7 {\n  stroke: #cca663;\n  color: #cca663;\n}\n.verticalItemPoligon-uLIgs.wcVisitedStep-Syo-H {\n  color: #a1a1a1;\n}\n\n.verticalItemPoligon-uLIgs.wcActiveStep-Cjjc7:hover {\n  stroke: #d6b781;\n}\n\n.verticalItemPoligon-uLIgs:hover,\n.verticalItemPoligon-uLIgs.wcVisitedStep-Syo-H:hover {\n  color: #e1e1e1;\n}\n\n.wcStepIcon-oKNsW {\n  display: block;\n  background-color: black;\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-Cjjc7 .wcStepIcon-oKNsW {\n  background-color: #cca663;\n}\n.wcVisitedStep-Syo-H .wcStepIcon-oKNsW {\n  background-color: #a1a1a1;\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 VerticalTabGroupItemFree = function VerticalTabGroupItemFree(props) {
+  return /*#__PURE__*/jsx(VerticalTabGroupItemStandard, _objectSpread(_objectSpread({}, props), {}, {
+    wcVisitedStepClass: wcVisitedStep,
+    wcActiveStepClass: wcActiveStep,
+    verticalItemPoligonClass: verticalItemPoligon,
+    wcStepIconClass: wcStepIcon
+  }));
+};
+var index = observer(VerticalTabGroupItemFree);
+
+export { index as default };