@crystaldesign/diva-web-planner-react 25.7.0-beta.9 → 25.8.0-beta.1

package/build/esm/index-c1607ea0.js

@@ -0,0 +1,102 @@
+import { s as styleInject, u as useViewHandler } from './index-761d98ba.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, jsxs } 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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var configuratorTabGroup = "Configurator-tabGroup-DK2Gs";
+var configuratorTabGroupTitle = "Configurator-tabGroupTitle-3xPwf";
+var configuratorSpec = "Configurator-spec-oPYns";
+var configuratorSpecThumb = "Configurator-spec-thumb-zZsc4";
+var configuratorSpecTextContainer = "Configurator-spec-text-Container-qZRM5";
+var configuratorSpecCat = "Configurator-spec-cat-qGdqW";
+var configuratorSpecOption = "Configurator-spec-option-WwGgo";
+var isNotDefined = "isNotDefined-EwkSz";
+var configuratorSpecNotDefined = "configurator-spec-not-defined-oO1-l";
+var configuratorSpecPrice = "Configurator-spec-price-IXdTc";
+var configuratorSpecPosNr = "Configurator-spec-posNr-qjwMj";
+var configuratorSpecBtn = "Configurator-spec-btn-LlCEw";
+var configuratorSpecNotExpanded = "Configurator-spec-not-expanded--LVB-";
+var css_248z = "/*Summary*/\n.Configurator-tabGroup-DK2Gs {\n  border-bottom: 1px solid #dfdfdf;\n  margin: 0.75rem 0 0;\n  padding-bottom: 0.75rem;\n}\n.Configurator-tabGroupTitle-3xPwf {\n  font-weight: 300;\n}\n\n.Configurator-spec-oPYns {\n  border-bottom: 1px solid #dfdfdf;\n  overflow: hidden;\n  padding: 0.5rem 0rem;\n  position: relative;\n  width: 100%;\n  height: 4rem;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  color: var(--secondaryColor);\n}\n\n.Configurator-spec-oPYns > div {\n  display: block;\n  position: relative;\n  clear: both;\n  width: calc(100% - 3.5rem);\n  height: 4rem;\n}\n\n.Configurator-spec-oPYns > div > span,\n.Configurator-spec-oPYns > div > div > span {\n  display: block;\n  top: 50%;\n  max-height: 4rem;\n}\n.Configurator-spec-thumb-zZsc4 {\n  max-width: 5rem;\n  width: 5rem;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  overflow: hidden;\n  height: 4rem;\n  float: left;\n}\n\n.Configurator-spec-text-Container-qZRM5 {\n  height: 4rem;\n  float: left;\n  margin-left: 0.7rem;\n  width: calc(100% - 5rem - 0.7rem);\n  position: relative;\n}\n.Configurator-spec-cat-qGdqW {\n  left: 0%;\n  width: 28%;\n  margin-left: 2%;\n  position: absolute;\n  font-size: 16px;\n  margin-right: 2%;\n  transform: translateY(-50%);\n  max-height: 3rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  z-index: 50;\n}\n\n.Configurator-spec-option-WwGgo {\n  left: 32%;\n  width: 28%;\n  margin-right: 2%;\n  transform: translateY(-50%);\n  position: absolute;\n  max-height: 3rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  z-index: 50;\n}\n.isNotDefined-EwkSz .Configurator-spec-option-WwGgo {\n  width: calc(28% - 3rem);\n}\n\n.configurator-spec-not-defined-oO1-l {\n  left: calc(62% - 3rem);\n  width: 48px;\n  height: 48px;\n  transform: translateY(-50%);\n  position: absolute;\n  overflow-y: auto;\n  overflow-x: hidden;\n  z-index: 50;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 %3F%3E%3Csvg height%3D%2232px%22 version%3D%221.1%22 viewBox%3D%220 0 32 32%22 width%3D%2232px%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%2F%3E%3Cdesc%2F%3E%3Cdefs%2F%3E%3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22 id%3D%22Page-1%22 stroke%3D%22none%22 stroke-width%3D%221%22%3E%3Cg fill%3D%22%23929292%22 id%3D%22icon-61-warning%22%3E%3Cpath d%3D%22M15.4242327%2C5.14839275 C16.2942987%2C3.74072976 17.707028%2C3.74408442 18.5750205%2C5.14839275 L29.3601099%2C22.59738 C30.5216388%2C24.4765951 29.6755462%2C26 27.4714068%2C26 L6.5278464%2C26 C4.32321557%2C26 3.47386317%2C24.4826642 4.63914331%2C22.59738 L15.4242327%2C5.14839275 L15.4242327%2C5.14839275 Z M16.353181%2C5.5229211 C16.7005152%2C4.96165163 17.2647678%2C4.9634187 17.6110318%2C5.52292108 L28.6162937%2C23.3055078 C29.1954663%2C24.2413498 28.7622271%2C24.9999996 27.6746349%2C24.9999996 L6.29039231%2C25 C5.19115596%2C25 4.76644971%2C24.2463265 5.34866262%2C23.3055082 L16.353181%2C5.5229211 L16.353181%2C5.5229211 Z M17%2C11 C16.4477153%2C11 16%2C11.4530363 16%2C11.9970301 L16%2C18.0029699 C16%2C18.5536144 16.4438648%2C19 17%2C19 C17.5522847%2C19 18%2C18.5469637 18%2C18.0029699 L18%2C11.9970301 C18%2C11.4463856 17.5561352%2C11 17%2C11 L17%2C11 Z M17%2C23 C17.5522848%2C23 18%2C22.5522848 18%2C22 C18%2C21.4477152 17.5522848%2C21 17%2C21 C16.4477152%2C21 16%2C21.4477152 16%2C22 C16%2C22.5522848 16.4477152%2C23 17%2C23 L17%2C23 Z%22 id%3D%22warning%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 34px;\n}\n\n.Configurator-spec-cat-qGdqW:hover,\n.Configurator-spec-option-WwGgo:hover {\n  overflow-x: visible;\n  z-index: 100;\n  word-break: break-word;\n}\n\n.Configurator-spec-price-IXdTc {\n  left: 62%;\n  width: 18%;\n  margin-right: 2%;\n  transform: translateY(-50%);\n  position: absolute;\n  height: 4rem;\n  line-height: 4rem;\n  text-align: center;\n}\n\nspan.Configurator-spec-posNr-qjwMj {\n  left: 82%;\n  width: 18%;\n  transform: translateY(-50%);\n  position: absolute;\n  max-height: 3rem;\n  overflow-y: auto;\n}\n\n.Configurator-spec-posNr-qjwMj span {\n  background: var(--thirdColor);\n  border-radius: var(--articlePosNrRadius);\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 1.27rem;\n  min-width: 1.27rem;\n  width: 2rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  text-align: center;\n  display: inline-block;\n  padding: 0 1px;\n  -webkit-text-stroke: 0.5px;\n  margin-bottom: 0.2rem;\n}\n\n.Configurator-spec-btn-LlCEw {\n  top: calc(50% - calc(2.2rem / 2));\n  position: absolute;\n  right: 0.7rem;\n  width: 2.1rem;\n  height: 2.1rem;\n  border: none;\n  box-sizing: border-box;\n  -webkit-text-stroke: 0px;\n  -webkit-font-smoothing: antialiased;\n  outline: medium none invert;\n  outline: initial;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2217%22 height%3D%2218%22 viewBox%3D%220 0 17 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.043 2.6653L14.9536 1.5645C14.0535 0.654099 12.5866 0.654099 11.6856 1.5645L1.88323 11.4709C1.82148 11.5333 1.77635 11.6101 1.7526 11.6949L0.300686 16.8317C0.249228 17.0133 0.299895 17.2077 0.431311 17.3413C0.529478 17.4405 0.660103 17.4933 0.794686 17.4933C0.842186 17.4933 0.889686 17.4869 0.935603 17.4733L6.0189 16.0053C6.10281 15.9813 6.1796 15.9357 6.24135 15.8733L16.043 5.9677C16.48 5.5269 16.7199 4.9405 16.7199 4.3165C16.7199 3.6925 16.48 3.1061 16.043 2.6653ZM5.60802 15.0453L1.54123 16.2189L2.70339 12.1101L10.5971 4.1333L13.5017 7.0685L5.60802 15.0453ZM15.317 5.2341L14.2277 6.3349L11.3231 3.3997L12.4124 2.2989C12.9127 1.7933 13.7274 1.7941 14.2285 2.2989L15.3178 3.3997C15.5609 3.6445 15.6939 3.9709 15.6939 4.3173C15.6931 4.6629 15.5593 4.9885 15.317 5.2341Z%22 fill%3D%22%236F6F6F%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-size: 1.1rem;\n  background-position: center center;\n}\n.Configurator-spec-btn-LlCEw:hover {\n  box-shadow: var(--boxShadowHover);\n  cursor: pointer;\n}\n\n/*falls die Configuratorleiste nicht expanded ist*/\n.Configurator-spec-not-expanded--LVB-,\n.Configurator-spec-not-expanded--LVB- .Configurator-spec-text-Container-qZRM5 {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.Configurator-spec-not-expanded--LVB- > div > div > span {\n  width: 100%;\n  position: relative;\n  height: 1.1rem;\n  left: auto;\n  left: initial;\n  top: auto;\n  top: initial;\n  transform: none;\n  margin: 0;\n  margin: initial;\n  font-size: 13px;\n  height: -moz-fit-content;\n  height: fit-content;\n  line-height: 1rem;\n  padding-bottom: 0.3rem;\n  word-break: break-word;\n}\n\n.Configurator-spec-not-expanded--LVB- > div > .isNotDefined-EwkSz .Configurator-spec-option-WwGgo {\n  width: 100%;\n}\n\n.Configurator-spec-not-expanded--LVB- > div > div.isNotDefined-EwkSz > span.configurator-spec-not-defined-oO1-l {\n  width: 28px;\n  height: 28px;\n  float: left;\n}\n\n.Configurator-spec-not-expanded--LVB- > div > div.isNotDefined-EwkSz > span.Configurator-spec-posNr-qjwMj {\n  width: calc(100% - 48px);\n  float: left;\n  padding-left: 10px;\n}\n\n.Configurator-spec-not-expanded--LVB- .Configurator-spec-cat-qGdqW:hover,\n.Configurator-spec-not-expanded--LVB- .Configurator-spec-option-WwGgo:hover {\n  overflow-y: auto;\n  background: none;\n  z-index: 100;\n  word-break: break-word;\n}\n\n@media all and (max-width: 1050px) and (orientation: landscape), all and (max-width: 600px) and (orientation: portrait) {\n  .Configurator-spec-oPYns,\n  .Configurator-spec-text-Container-qZRM5 {\n    height: -moz-fit-content;\n    height: fit-content;\n  }\n\n  .Configurator-spec-oPYns > div > div > span {\n    width: 100%;\n    position: relative;\n    height: 1.1rem;\n    left: auto;\n    left: initial;\n    top: auto;\n    top: initial;\n    transform: none;\n    margin: 0;\n    margin: initial;\n    font-size: 13px;\n    height: -moz-fit-content;\n    height: fit-content;\n    line-height: 1rem;\n    padding-bottom: 0.3rem;\n    word-break: break-word;\n  }\n\n  .Configurator-spec-cat-qGdqW:hover,\n  .Configurator-spec-option-WwGgo:hover {\n    overflow-y: auto;\n    background: none;\n    z-index: 100;\n    word-break: break-word;\n  }\n}\n";
+styleInject(css_248z);
+
+var Summary = function Summary(_ref) {
+  var _item$targetArticlePo;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  if (item.isTabGroup) {
+    return /*#__PURE__*/jsx("div", {
+      className: configuratorTabGroup,
+      children: /*#__PURE__*/jsx("span", {
+        className: configuratorTabGroupTitle,
+        children: t('configurator.' + item.title, item.title)
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(configuratorSpec, viewHandler.uiState.configSettingsIsExpanded || viewHandler.uiState.configSettingsIsMaxExpanded ? undefined : configuratorSpecNotExpanded),
+    children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("span", {
+        className: configuratorSpecThumb,
+        style: {
+          backgroundImage: item.image ? "url(".concat(item.image, ")") : 'none'
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(configuratorSpecTextContainer, !item.isDefined ? isNotDefined : undefined),
+        children: [/*#__PURE__*/jsxs("span", {
+          className: configuratorSpecCat,
+          children: [item.quantity && '(x' + item.quantity + ') ', item.title]
+        }), /*#__PURE__*/jsx("span", {
+          className: configuratorSpecOption,
+          dangerouslySetInnerHTML: {
+            __html: item.description
+          }
+        }), !item.isDefined && /*#__PURE__*/jsx("span", {
+          title: t('configurator.OPTION_NOT_DEFINED'),
+          className: configuratorSpecNotDefined
+        }), !hidePrices && !!item.price && /*#__PURE__*/jsx("span", {
+          className: configuratorSpecPrice,
+          children: DivaUtils.formatPrice(item.price)
+        }), !viewHandler.uiState.ViewConfig.hideElementInfo && /*#__PURE__*/jsx("span", {
+          className: configuratorSpecPosNr,
+          children: (_item$targetArticlePo = item.targetArticlePosNrs) === null || _item$targetArticlePo === void 0 ? void 0 : _item$targetArticlePo.map(function (posNr, i) {
+            return /*#__PURE__*/jsx("span", {
+              children: posNr
+            }, i);
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsx("button", {
+      className: configuratorSpecBtn,
+      type: "button",
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnSummaryPalette(item);
+      }
+    })]
+  });
+};
+var index = observer(Summary);
+
+export { index as default };

package/build/esm/index-c1b90031.js

@@ -0,0 +1,80 @@
+import { s as styleInject, u as useViewHandler } from './index-761d98ba.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import RoomRound from './index-5976b3f0.js';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } 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/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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var roomItem = "roomItem-Uuc6r";
+var roomItemSel = "roomItem-sel-ePWgY";
+var mobile = "mobile-gsjDz";
+var roomItemContainer = "roomItem-container-3jH8Z";
+var viewItemContainer = "viewItem-container-OlPAR";
+var css_248z = "li.roomItem-Uuc6r {\n  width: 70px;\n  height: 70px;\n  background-color: #f5f5f5;\n  opacity: 0.8;\n  background-repeat: no-repeat;\n  background-position: center;\n  border-radius: 50%;\n  background-size: 65%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2235%22 viewBox%3D%220 0 42 35%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.6329 26.5973L1 33.4896V1.48962L11.6329 4.93578M11.6329 26.5973V4.93578M11.6329 26.5973H21.2532M11.6329 4.93578H41V26.5973H30.3671M21.2532 26.5973V11.8281H30.3671V26.5973M21.2532 26.5973H30.3671%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%222%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-color 0.2s ease-in-out;\n  opacity: 0.8;\n  border: 1px solid #bebec3;\n}\nli.roomItem-sel-ePWgY {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2235%22 viewBox%3D%220 0 42 35%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.6329 26.5973L1 33.4896V1.48962L11.6329 4.93578M11.6329 26.5973V4.93578M11.6329 26.5973H21.2532M11.6329 4.93578H41V26.5973H30.3671M21.2532 26.5973V11.8281H30.3671V26.5973M21.2532 26.5973H30.3671%22 stroke%3D%22white%22 stroke-width%3D%222%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #4b4b4b;\n}\n\nli.roomItem-Uuc6r:hover {\n  box-shadow: var(--boxShadowHover);\n}\n\n.mobile-gsjDz {\n  position: absolute;\n  right: 6px;\n  bottom: 6px;\n  z-index: 1000;\n}\n\nli.mobile-gsjDz.roomItem-Uuc6r {\n  width: 45px;\n  height: 45px;\n  display: block;\n}\n\n.roomItem-container-3jH8Z {\n  position: absolute;\n  bottom: 90px;\n  left: 29px;\n  z-index: 700;\n  min-width: 300px;\n  overflow-y: auto;\n  overflow-x: visible;\n  /*hide scrollbar*/\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n.roomItem-container-3jH8Z::-webkit-scrollbar {\n  display: none;\n}\n\n.viewItem-container-OlPAR {\n  position: absolute;\n  display: flex;\n  bottom: 6px;\n  left: 111px;\n  z-index: 700;\n  flex-direction: row;\n  overflow-y: visible;\n  overflow-x: auto;\n}\n\n.mobile-gsjDz.roomItem-container-3jH8Z {\n  bottom: 60px;\n  direction: rtl;\n  right: 6px;\n  left: auto;\n  left: initial;\n}\n\n.mobile-gsjDz.viewItem-container-OlPAR {\n  right: 55px;\n  left: auto;\n  left: initial;\n  bottom: 6px;\n}\n";
+styleInject(css_248z);
+
+var RoomListSelection = function RoomListSelection(props) {
+  var _viewHandler$productS;
+  var viewHandler = useViewHandler();
+  var rooms = viewHandler.paletteViewHandler.getRoomList();
+  var views = viewHandler.paletteViewHandler.getRoomViewList();
+  if (!viewHandler.uiState.ViewConfig.roomListInProduct || !viewHandler.settingsState.roomListInitialized || !viewHandler.productState.doShowRenderImage && !viewHandler.productState.doShow3DComb || viewHandler.settingsState.infoBoxContent || viewHandler.uiState.isMobileLandscape) return /*#__PURE__*/jsx(Fragment, {});
+  var divSize = (_viewHandler$productS = viewHandler.productState.planner3DImageSvgArea) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", {
+      "data-test-id": "room-list-selection",
+      className: classnames(roomItem, viewHandler.productState.roomListExpanded ? roomItemSel : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      onClick: function onClick() {
+        viewHandler.productState.setRoomListExpanded(!viewHandler.productState.roomListExpanded);
+      }
+    }), viewHandler.productState.roomListExpanded && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        "data-test-id": "room-selection-expanded",
+        id: "views-selection-expanded",
+        style: {
+          maxHeight: 'calc(' + (divSize === null || divSize === void 0 ? void 0 : divSize.height) + 'px - 80px)'
+        },
+        className: classnames(roomItemContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
+        children: rooms.map(function (item, index) {
+          return /*#__PURE__*/jsx(RoomRound, {
+            item: item,
+            from: viewHandler.settingsState.roomListInitialized
+          }, item.toString());
+        })
+      }), /*#__PURE__*/jsx("div", {
+        id: "rooms-selection-expanded",
+        style: {
+          maxWidth: 'calc(' + (divSize === null || divSize === void 0 ? void 0 : divSize.width) + 'px - 100px)'
+        },
+        className: classnames(viewItemContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
+        children: views.map(function (item, index) {
+          return /*#__PURE__*/jsx(RoomRound, {
+            item: item,
+            from: viewHandler.settingsState.roomListInitialized,
+            isVP: true
+          }, item.toString());
+        })
+      })]
+    })]
+  });
+};
+var index = observer(RoomListSelection);
+
+export { index as default };

package/build/esm/index-c37b2eb8.js

@@ -0,0 +1,67 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-761d98ba.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+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 TabSearch = function TabSearch(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    var searchGotResetted = !!viewHandler.tabGroupState.filterTabgroup && !search;
+    viewHandler.tabGroupState.setFilterTabgroup(search && search !== '' ? search : undefined);
+    if (searchGotResetted) {
+      setTimeout(function () {
+        return viewHandler.tabGroupState.scrollToCurTabgroup();
+      }, 200);
+    }
+  }, [search]);
+  useEffect(function () {
+    if (viewHandler.tabGroupState.filterTabgroup === undefined && search) {
+      setSearch('');
+    }
+  }, [viewHandler.tabGroupState.filterTabgroup]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx("input", {
+      value: search,
+      type: "text",
+      onChange: function onChange(e) {
+        return setSearch(e.target.value);
+      },
+      placeholder: t('filter.global')
+    }), !!search && /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return setSearch('');
+      }
+    })]
+  }));
+};
+var TabSearch$1 = observer(TabSearch);
+
+export { TabSearch$1 as default };

package/build/esm/index-c394510e.js

@@ -0,0 +1,66 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-761d98ba.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 '@crystaldesign/widget-contact-form';
+
+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-c40fc4b4.js

@@ -0,0 +1,166 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-761d98ba.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef, useEffect } from 'react';
+import { useLayer } from 'react-laag';
+import Tooltip from './index-5ff57e34.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import FullscreenAr from './index-9ff19079.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import 'react-qr-code';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ArQrCodeTooltip = function ArQrCodeTooltip(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    openModal = _useDivaCore.actions.openModal,
+    _useDivaCore$state = _useDivaCore.state,
+    isMobile = _useDivaCore$state.isMobile,
+    isTablet = _useDivaCore$state.dimensions.isTablet;
+  //tooltip is going to close itself by timer
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoClose = _useState2[0],
+    setAutoClose = _useState2[1];
+  var autoCloseTimeout = useRef();
+  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
+  var openAr = isMobile || isTablet;
+  //if the viewer is in an iframe (pfister) we dont want to open the modal for the arcombi
+  var shouldOpenModal = openAr && (!viewHandler.uiState.AllConfig.arViewerIframe || !viewHandler.productState.allow3DComb && !viewHandler.productState.allowRTV);
+
+  //for fade animation
+  var _useState3 = useState(viewHandler.productState.arCodeWasVisibleOnce),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVisible = _useState4[0],
+    setTooltipVisible = _useState4[1];
+  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible;
+  var _useLayer = useLayer({
+      isOpen: showTooltip,
+      auto: true,
+      placement: 'right-end',
+      triggerOffset: 16
+    }),
+    triggerProps = _useLayer.triggerProps,
+    layerProps = _useLayer.layerProps,
+    renderLayer = _useLayer.renderLayer,
+    arrowProps = _useLayer.arrowProps;
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    url = _useState6[0],
+    setUrl = _useState6[1];
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode == true) {
+      viewHandler.openARObserverConnection(function () {
+        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
+      } // request hqr onreceivehqr triggers update
+      ).then(function (url) {
+        return setUrl(url);
+      });
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode && shouldOpenModal) openModal({
+      content: /*#__PURE__*/jsx(FullscreenAr, {
+        url: url,
+        isArCompatible: viewHandler.productState.isArCompatible,
+        broswerSupportAR: viewHandler.productState.browserSupportAR,
+        activateAR: viewHandler.productState.activateAR
+      }),
+      fullscreen: true,
+      rejectByIcon: true,
+      dontRenderForm: true,
+      callback: function callback(value) {
+        viewHandler.productState.loadRTVForAr = false;
+        viewHandler.productState.setDoShowARQRCode(false);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
+      }
+    });
+  }, [viewHandler.productState.activateAR, url]);
+  useEffect(function () {
+    //start timeout for auto open the tooltip
+    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
+      var _arQrCodeConfig$timeU;
+      autoCloseTimeout.current = setTimeout(function () {
+        viewHandler.productState.setArCodeWasVisibleOnce();
+        setAutoClose(true);
+        viewHandler.productState.setDoShowARQRCode(true);
+      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
+    }
+    if (!viewHandler.productState.doShowARQRCode && autoClose) {
+      setAutoClose(false);
+    }
+    //delay the state of visible so we animate the fade out
+    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
+      setTimeout(function () {
+        setTooltipVisible(viewHandler.productState.doShowARQRCode);
+      }, 200);
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  var onClick = function onClick() {
+    viewHandler.productState.setDoShowARQRCode(true);
+    if (shouldOpenModal) {
+      if (!viewHandler.productState.doShowRTV && !(viewHandler.viewPlannerHandler.getCurPlannerViewMode() == 'RTViewer' || viewHandler.viewPlannerHandler.getCurPlannerViewMode() == '3DCOMB')) {
+        viewHandler.productState.loadRTVForAr = true;
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
+      }
+      openModal({
+        content: /*#__PURE__*/jsx(FullscreenAr, {
+          url: url,
+          isArCompatible: viewHandler.productState.isArCompatible,
+          broswerSupportAR: viewHandler.productState.browserSupportAR,
+          activateAR: viewHandler.productState.activateAR
+        }),
+        fullscreen: true,
+        dontRenderForm: true,
+        rejectByIcon: true,
+        callback: function callback(value) {
+          viewHandler.productState.loadRTVForAr = false;
+          viewHandler.productState.setDoShowARQRCode(false);
+          viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
+      id: "ar-icon"
+    }, props), {}, {
+      className: classnames(props.className),
+      onClick: onClick,
+      title: t('configurator.ar_qr_title')
+    }, triggerProps), {}, {
+      style: {
+        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV ? 'visible' : 'hidden'
+      }
+    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
+      arrowProps: arrowProps,
+      layerProps: layerProps,
+      autoClose: autoClose,
+      fadeIn: tooltipVisible,
+      fadeout: !viewHandler.productState.doShowARQRCode,
+      url: url
+    }))]
+  });
+};
+var ArQrCodeIcon = observer(ArQrCodeTooltip);
+
+export { ArQrCodeIcon as default };

package/build/esm/index-c44eae38.js

@@ -0,0 +1,47 @@
+import './index-761d98ba.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/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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var RotationClockwise = function RotationClockwise(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.rotation.rotClock, plannerUIProps.classes.buttonGeneral),
+    children: item.posNr
+  });
+};
+var RotationClockwise$1 = observer(RotationClockwise);
+
+export { RotationClockwise$1 as default };