@crystaldesign/diva-web-planner-react 24.15.0-beta.9 → 24.16.0-beta.1

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

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

package/build/esm/index-747d45cb.js

@@ -0,0 +1,86 @@
+import { s as styleInject, u as useViewHandler } from './index-034e1c95.js';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import ArQrCodeIcon from './index-a5ead26c.js';
+import { jsx, Fragment, 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 'react-laag';
+import './index-63f7e6a5.js';
+import 'react-qr-code';
+import './index-6e5b5a15.js';
+
+var wcNav3DToolbar = "wc_Nav3DToolbar-5t7Cu";
+var settingsHidden = "settings-hidden-xs6Vf";
+var arAbsoluteDesktop = "ar-absolute-desktop-2xHB1";
+var wcZoomIn = "wcZoomIn-eSnCA";
+var wcZoomOut = "wcZoomOut-rlrJR";
+var wcFullScreen = "wcFullScreen-B8USD";
+var wc3DGridPlannerMode = "wc3DGridPlannerMode-aiQCR";
+var wc3DDimLine = "wc3DDimLine-BEygX";
+var css_248z = ".wc_Nav3DToolbar-5t7Cu {\n  display: inline;\n  left: -36.8px;\n  width: 58px;\n  position: absolute;\n  z-index: 350;\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n\n@media all and (max-height: 650px) and (min-width: 900px) {\n  .wc_Nav3DToolbar-5t7Cu {\n    width: 120px;\n  }\n  .wc_Nav3DToolbar-5t7Cu ul li {\n    float: left;\n    margin: 0 0 9.6px 9.6px;\n  }\n}\n\n.wc_Nav3DToolbar-5t7Cu li {\n  width: 25.6px;\n  padding: 3.2px;\n  margin-left: auto;\n  margin-right: auto;\n  margin-bottom: 16px;\n  height: 25.6px;\n  display: block;\n  background-color: rgba(223, 223, 223, 0.8);\n  background-repeat: no-repeat;\n  background-position: center center;\n  border-radius: 6px;\n  transition: background-color 0.15s ease;\n}\n\n.wc_Nav3DToolbar-5t7Cu li:hover {\n  background-color: rgba(210, 210, 210, 0.8);\n}\n.wc_Nav3DToolbar-5t7Cu li:active {\n  background-color: rgba(197, 197, 197, 0.8);\n}\n\n@media all and (max-width: 900px) {\n  .wcFunctionsToolbar-LnNuc {\n    margin-top: 8px;\n  }\n  .settings-hidden-xs6Vf.wc_Nav3DToolbar-5t7Cu {\n    bottom: -40px;\n    top: 50%;\n    width: 32px;\n    left: 16px;\n    transform: translate(-50%, -50%);\n    padding: 0;\n    padding: initial;\n    display: block;\n    height: -moz-fit-content;\n    height: fit-content;\n  }\n  .settings-hidden-xs6Vf.wc_Nav3DToolbar-5t7Cu li {\n    margin: 0 8px 16px;\n    float: left;\n  }\n}\n\n#ar-icon {\n  width: 55px;\n  height: 55px;\n  cursor: pointer;\n  padding: 0;\n  border-radius: 50%;\n  background-size: 70%;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3Csvg viewBox%3D%220 0 30 30%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M 17.88 1.861 L 14.94 0.471 C 14.79 0.401 14.62 0.401 14.47 0.471 L 11.52 1.861 C 11.1 2.061 10.91 2.571 11.11 2.991 C 11.25 3.301 11.56 3.481 11.88 3.481 C 12 3.481 12.12 3.451 12.24 3.401 L 13.85 2.641 L 13.85 4.711 C 13.85 5.181 14.23 5.561 14.7 5.561 C 15.17 5.561 15.55 5.181 15.55 4.711 L 15.55 2.641 L 17.16 3.401 C 17.58 3.601 18.09 3.421 18.29 2.991 C 18.49 2.561 18.31 2.061 17.88 1.861 Z M 17.161 7.591 L 14.701 8.751 L 12.241 7.591 C 11.821 7.391 11.311 7.571 11.111 8.001 C 10.911 8.421 11.091 8.931 11.521 9.131 L 13.821 10.211 C 13.821 10.231 13.816 10.248 13.811 10.266 C 13.806 10.283 13.801 10.301 13.801 10.321 L 13.801 12.401 C 13.801 12.871 14.181 13.251 14.651 13.251 C 15.121 13.251 15.501 12.871 15.501 12.401 L 15.501 10.321 C 15.501 10.311 15.498 10.301 15.496 10.291 C 15.493 10.281 15.491 10.271 15.491 10.261 L 17.891 9.131 C 18.311 8.931 18.501 8.421 18.301 8.001 C 18.091 7.581 17.581 7.391 17.161 7.591 Z M 21.051 3.421 L 23.681 4.681 C 23.881 4.771 24.001 4.971 24.001 5.181 L 24.001 8.211 C 24.001 8.681 23.621 9.061 23.151 9.061 C 22.681 9.061 22.301 8.681 22.301 8.211 L 22.301 7.091 L 20.911 7.741 C 20.791 7.791 20.671 7.821 20.551 7.821 C 20.231 7.821 19.921 7.641 19.781 7.331 C 19.581 6.911 19.771 6.401 20.191 6.201 L 21.571 5.551 L 20.321 4.951 C 19.901 4.751 19.721 4.241 19.921 3.821 C 20.121 3.401 20.631 3.221 21.051 3.421 Z M 9.21 6.201 L 7.83 5.551 L 9.08 4.951 C 9.5 4.751 9.68 4.241 9.48 3.821 C 9.28 3.391 8.77 3.211 8.35 3.421 L 5.72 4.681 C 5.52 4.771 5.4 4.971 5.4 5.181 L 5.4 8.201 C 5.4 8.671 5.78 9.051 6.25 9.051 C 6.72 9.051 7.1 8.681 7.1 8.211 L 7.1 7.081 L 8.49 7.731 C 8.61 7.791 8.73 7.821 8.85 7.821 C 9.17 7.821 9.48 7.641 9.62 7.331 C 9.821 6.911 9.64 6.401 9.21 6.201 Z M 22.301 13.081 C 22.301 12.611 22.681 12.231 23.151 12.231 C 23.621 12.231 24.001 12.611 24.011 13.081 L 24.011 16.101 C 24.011 16.321 23.881 16.521 23.691 16.611 L 21.061 17.871 C 20.941 17.921 20.811 17.951 20.691 17.951 C 20.371 17.951 20.071 17.771 19.921 17.471 C 19.721 17.051 19.901 16.541 20.321 16.341 L 21.571 15.741 L 20.191 15.091 C 19.761 14.891 19.581 14.391 19.781 13.961 C 19.981 13.531 20.491 13.351 20.911 13.551 L 22.301 14.201 L 22.301 13.081 Z M 9.62 13.951 C 9.42 13.531 8.91 13.341 8.49 13.541 L 7.1 14.201 L 7.1 13.081 C 7.1 12.611 6.72 12.231 6.25 12.231 C 5.78 12.231 5.4 12.611 5.4 13.081 L 5.4 16.111 C 5.4 16.321 5.52 16.521 5.71 16.611 L 8.34 17.871 C 8.46 17.931 8.58 17.951 8.71 17.951 C 9.03 17.951 9.33 17.771 9.48 17.471 C 9.68 17.051 9.5 16.541 9.08 16.341 L 7.83 15.741 L 9.21 15.091 C 9.64 14.891 9.821 14.381 9.62 13.951 Z M 15.551 18.511 L 17.161 17.751 C 17.581 17.551 18.091 17.731 18.291 18.161 C 18.491 18.581 18.301 19.091 17.881 19.291 L 14.941 20.671 C 14.791 20.741 14.611 20.741 14.461 20.671 L 11.521 19.291 C 11.091 19.091 10.911 18.581 11.111 18.161 C 11.311 17.731 11.821 17.551 12.241 17.751 L 13.851 18.511 L 13.851 16.441 C 13.851 15.971 14.231 15.591 14.701 15.591 C 15.171 15.591 15.551 15.971 15.551 16.441 L 15.551 18.511 Z%22 fill%3D%22white%22%2F%3E  %3Ctext style%3D%22fill%3A rgb(255%2C 255%2C 255)%3B font-family%3A Arial%2C sans-serif%3B font-size%3A 10px%3B font-weight%3A 700%3B letter-spacing%3A 1.9px%3B word-spacing%3A -6.7px%3B white-space%3A pre%3B%22 x%3D%227.235%22 y%3D%2228.446%22%3EAR%3C%2Ftext%3E%3C%2Fsvg%3E\");\n  background-color: var(--primaryColor);\n  background-repeat: no-repeat;\n  background-position: center center;\n  display: block;\n  transition: background-color 0.15s ease;\n}\n\ndiv li.ar-absolute-hmd0N#ar-icon {\n  position: absolute;\n  left: 12px;\n  bottom: 64px;\n  z-index: 1000;\n  width: 48px;\n  height: 48px;\n}\n\ndiv li.ar-absolute-desktop-2xHB1#ar-icon {\n  position: absolute;\n  left: 12px;\n  bottom: 64px;\n  z-index: 1000;\n}\n\n@media all and (max-height: 1200px) and (max-width: 800px) and (orientation: portrait), all and (max-width: 500px) and (orientation: portrait) {\n  .settings-hidden-xs6Vf.wc_Nav3DToolbar-5t7Cu {\n    bottom: -40px;\n    top: auto;\n    top: initial;\n    width: -moz-fit-content;\n    width: fit-content;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    padding: 0;\n    padding: initial;\n  }\n  .settings-hidden-xs6Vf.wc_Nav3DToolbar-5t7Cu li {\n    margin: 0 8px 16px;\n  }\n}\n\n/*------------------------Nav Icons--------------------------------------*/\n\n/* pfister */\n.wcZoomIn-eSnCA {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2226%22 height%3D%2224%22 viewBox%3D%220 0 26 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9.13434 17.3731C13.8328 17.3731 17.6417 13.6079 17.6417 8.96328C17.6417 4.31867 13.8328 0.553467 9.13434 0.553467C4.43584 0.553467 0.626953 4.31867 0.626953 8.96328C0.626953 13.6079 4.43584 17.3731 9.13434 17.3731Z%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22%2F%3E%3Cpath d%3D%22M24.868 22.6179L15.6235 14.5441%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M4.56201 8.96326H13.7097%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M9.13379 4.44189V13.4847%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomOut-rlrJR {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.69615 16.6951C12.9919 16.6951 16.4743 13.2526 16.4743 9.00611C16.4743 4.75961 12.9919 1.31714 8.69615 1.31714C4.40038 1.31714 0.917969 4.75961 0.917969 9.00611C0.917969 13.2526 4.40038 16.6951 8.69615 16.6951Z%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22%2F%3E%3Cpath d%3D%22M23.0816 21.4903L14.6631 14.1379%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M4.51465 9.0061H12.8783%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wc360-EcduT {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2228%22 height%3D%2218%22 viewBox%3D%220 0 28 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9.18854 12L11.1301 14.9951L7.83789 16.8079%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M10.6232 14.8374C5.30499 14.2069 1.42188 12.0788 1.42188 9.55665C1.42188 8.05911 2.85694 6.71921 5.05175 5.69458%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M24.4674 6.48267C25.8181 7.34966 26.5778 8.37429 26.5778 9.55656C26.5778 12.1575 22.357 14.3644 16.7012 14.9162%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M8.87988 9.13184C8.6748 9.13184 8.47135 9.10742 8.26953 9.05859C8.06771 9.00977 7.87565 8.93652 7.69336 8.83887C7.51107 8.74121 7.34342 8.61751 7.19043 8.46777C7.03743 8.31803 6.90723 8.14225 6.7998 7.94043L7.42969 7.5498C7.51432 7.7028 7.61035 7.83464 7.71777 7.94531C7.82845 8.05599 7.94564 8.14714 8.06934 8.21875C8.19629 8.29036 8.3265 8.34408 8.45996 8.37988C8.59342 8.41243 8.72689 8.42871 8.86035 8.42871C9.13053 8.42871 9.38118 8.36361 9.6123 8.2334C9.84342 8.10319 10.0078 7.94043 10.1055 7.74512C10.2064 7.54655 10.2568 7.35124 10.2568 7.15918C10.2568 6.86296 10.1771 6.61719 10.0176 6.42188C9.85807 6.22331 9.66602 6.08496 9.44141 6.00684C9.2168 5.92871 9.01009 5.88314 8.82129 5.87012V5.26953C9.08171 5.25651 9.32096 5.19141 9.53906 5.07422C9.76042 4.95703 9.91667 4.81055 10.0078 4.63477C10.1022 4.45573 10.1494 4.27344 10.1494 4.08789C10.1494 3.84375 10.0794 3.63542 9.93945 3.46289C9.80273 3.29036 9.63835 3.16992 9.44629 3.10156C9.25749 3.0332 9.08496 2.99902 8.92871 2.99902C8.72038 2.99902 8.52507 3.04134 8.34277 3.12598C8.16374 3.20736 8.01562 3.31315 7.89844 3.44336C7.78125 3.57357 7.69173 3.70215 7.62988 3.8291L7 3.43848C7.13672 3.16504 7.32878 2.93555 7.57617 2.75C7.82357 2.5612 8.07259 2.43424 8.32324 2.36914C8.57389 2.30404 8.80501 2.27148 9.0166 2.27148C9.27051 2.27148 9.51465 2.31217 9.74902 2.39355C9.98665 2.47493 10.1966 2.59212 10.3789 2.74512C10.5645 2.89486 10.7126 3.07878 10.8232 3.29688C10.9339 3.51172 10.9893 3.7526 10.9893 4.01953C10.9893 4.30599 10.9372 4.55827 10.833 4.77637C10.7288 4.99447 10.6003 5.16211 10.4473 5.2793C10.2975 5.39648 10.1543 5.48275 10.0176 5.53809C10.2682 5.639 10.4733 5.76595 10.6328 5.91895C10.7956 6.07194 10.9128 6.25749 10.9844 6.47559C11.0592 6.69043 11.0967 6.91504 11.0967 7.14941C11.0967 7.46517 11.0332 7.74674 10.9062 7.99414C10.7826 8.24154 10.6165 8.44987 10.4082 8.61914C10.1999 8.78516 9.96224 8.91211 9.69531 9C9.43164 9.08789 9.15983 9.13184 8.87988 9.13184ZM14.6611 9.13184C14.29 9.13184 13.9694 9.05697 13.6992 8.90723C13.429 8.75423 13.2044 8.55566 13.0254 8.31152C12.8464 8.06413 12.7129 7.78255 12.625 7.4668C12.5404 7.14779 12.498 6.82227 12.498 6.49023C12.498 5.94661 12.5762 5.4388 12.7324 4.9668C12.8919 4.49479 13.1182 4.07487 13.4111 3.70703C13.7074 3.33594 14.0638 3.02832 14.4805 2.78418C14.9004 2.54004 15.3708 2.37565 15.8916 2.29102L16.0479 2.9209C15.7581 2.97298 15.4798 3.06413 15.2129 3.19434C14.9492 3.32129 14.7067 3.47917 14.4854 3.66797C14.264 3.85677 14.0687 4.06999 13.8994 4.30762C13.7334 4.54525 13.6032 4.79915 13.5088 5.06934C13.6813 4.95866 13.8701 4.86914 14.0752 4.80078C14.2835 4.73242 14.5049 4.69824 14.7393 4.69824C15.0485 4.69824 15.3236 4.76009 15.5645 4.88379C15.8053 5.00749 16.0088 5.1735 16.1748 5.38184C16.3408 5.58691 16.4678 5.82454 16.5557 6.09473C16.6436 6.36165 16.6875 6.63997 16.6875 6.92969C16.6875 7.23242 16.6403 7.51725 16.5459 7.78418C16.4548 8.05111 16.3213 8.28548 16.1455 8.4873C15.973 8.68587 15.7614 8.84375 15.5107 8.96094C15.2601 9.07487 14.9769 9.13184 14.6611 9.13184ZM14.6709 8.45801C14.8825 8.45801 15.0664 8.41569 15.2227 8.33105C15.3789 8.24316 15.5075 8.12923 15.6084 7.98926C15.7126 7.84603 15.7907 7.6849 15.8428 7.50586C15.8949 7.32357 15.9209 7.13802 15.9209 6.94922C15.9209 6.62044 15.8574 6.33073 15.7305 6.08008C15.6068 5.82617 15.4408 5.64714 15.2324 5.54297C15.0241 5.43555 14.806 5.38184 14.5781 5.38184C14.3438 5.38184 14.1273 5.41927 13.9287 5.49414C13.7301 5.56901 13.5511 5.66829 13.3916 5.79199C13.3493 6.00358 13.3281 6.23633 13.3281 6.49023C13.3281 6.70508 13.3477 6.92806 13.3867 7.15918C13.429 7.3903 13.5007 7.60352 13.6016 7.79883C13.7025 7.99089 13.8392 8.14876 14.0117 8.27246C14.1875 8.39616 14.4072 8.45801 14.6709 8.45801ZM19.9199 9.1416C19.6465 9.1416 19.3975 9.09603 19.1729 9.00488C18.9482 8.91374 18.7464 8.78841 18.5674 8.62891C18.3916 8.46615 18.2386 8.27572 18.1084 8.05762C17.9782 7.83952 17.8708 7.60352 17.7861 7.34961C17.7015 7.09245 17.638 6.82389 17.5957 6.54395C17.5566 6.264 17.5387 5.98242 17.542 5.69922C17.542 5.2207 17.5957 4.76986 17.7031 4.34668C17.8138 3.92025 17.9798 3.54264 18.2012 3.21387C18.4225 2.88509 18.6846 2.64583 18.9873 2.49609C19.29 2.34635 19.6009 2.27148 19.9199 2.27148C20.1934 2.27148 20.4408 2.31706 20.6621 2.4082C20.8867 2.49935 21.0869 2.62467 21.2627 2.78418C21.4417 2.94368 21.5947 3.13249 21.7217 3.35059C21.8519 3.56543 21.9593 3.7998 22.0439 4.05371C22.1318 4.30762 22.1953 4.57454 22.2344 4.85449C22.2767 5.13444 22.2979 5.41602 22.2979 5.69922C22.2979 6.16797 22.2409 6.62044 22.127 7.05664C22.013 7.49284 21.8438 7.87695 21.6191 8.20898C21.3978 8.54102 21.1357 8.78027 20.833 8.92676C20.5335 9.06999 20.2292 9.1416 19.9199 9.1416ZM19.9199 8.42871C20.2943 8.42871 20.6051 8.26432 20.8525 7.93555C21.0999 7.60677 21.2611 7.23405 21.3359 6.81738C21.4108 6.40072 21.4482 6.02474 21.4482 5.68945C21.4482 5.14909 21.3783 4.66081 21.2383 4.22461C21.0983 3.78516 20.9111 3.4694 20.6768 3.27734C20.4424 3.08529 20.1901 2.98926 19.9199 2.98926C19.6465 2.98926 19.4121 3.06738 19.2168 3.22363C19.0247 3.37988 18.8669 3.58659 18.7432 3.84375C18.6195 4.09766 18.5283 4.38574 18.4697 4.70801C18.4111 5.03027 18.3818 5.35742 18.3818 5.68945C18.3818 6.02474 18.4111 6.35677 18.4697 6.68555C18.5283 7.01107 18.6195 7.30404 18.7432 7.56445C18.8701 7.82161 19.0296 8.02995 19.2217 8.18945C19.417 8.34896 19.6497 8.42871 19.9199 8.42871Z%22 fill%3D%22%236F6F6F%22%2F%3E%3Cpath d%3D%22M23.2016 3.09344C23.6678 3.09344 24.0457 2.74057 24.0457 2.30527C24.0457 1.86997 23.6678 1.51709 23.2016 1.51709C22.7354 1.51709 22.3574 1.86997 22.3574 2.30527C22.3574 2.74057 22.7354 3.09344 23.2016 3.09344Z%22 stroke%3D%22%236F6F6F%22 stroke-width%3D%220.75%22 stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcFocus-o05ls {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2221%22 viewBox%3D%220 0 20 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.122 7.34912H6.94531V13.5258H13.122V7.34912Z%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M6.40838 19.568H2.17869C1.44018 19.568 0.835938 18.9638 0.835938 18.2253V13.9956%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.1642 13.9956V18.2253C19.1642 18.9638 18.56 19.568 17.8215 19.568H13.5918%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M13.5918 1.2395H17.8215C18.56 1.2395 19.1642 1.84374 19.1642 2.58226V6.81194%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M0.835938 6.81194V2.58226C0.835938 1.84374 1.44018 1.2395 2.17869 1.2395H6.40838%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcPan-NXlrf {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2226%22 height%3D%2227%22 viewBox%3D%220 0 26 27%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9.06738 5.18778L12.9615 1.2937L16.9334 5.26566%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M16.8553 21.6209L12.9612 25.5149L8.98926 21.543%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M12.9609 1.68311V9.47127%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M12.9609 17.3374V25.1256%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M4.78373 17.2594L0.889648 13.3653L4.86161 9.39331%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M21.2166 9.47119L25.1106 13.3653L21.1387 17.3372%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M1.2793 13.3652H9.06746%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M16.9336 13.3652H24.7218%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcRoom-7RIQT {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2221%22 viewBox%3D%220 0 23 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.8291 16.5054H18.232V6.32178H12.8291V16.5054Z%22 stroke%3D%22%236F6F6F%22 stroke-width%3D%220.6%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M6.36523 16.5051H12.5532V6.04627H18.5564V16.5051H21.8813V3.29395H6.36523V16.5051Z%22 stroke%3D%22%236F6F6F%22 stroke-width%3D%220.6%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M22.2043 3.01889H6.22644L0.777344 0.633545V20.175L6.22644 16.8264H22.1581V3.01889H22.2043ZM1.05442 1.09227L6.04172 3.24825V16.597L1.05442 19.6246V1.09227ZM18.2329 16.5053H12.83V6.32167H18.2329V16.5053ZM21.881 16.5053H18.51V6.04644H12.5068V16.5511H6.3188V3.29412H21.881V16.5053Z%22 fill%3D%22%236F6F6F%22 stroke%3D%22%236F6F6F%22 stroke-width%3D%220.6%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M17.2702 11.5969H16.9932V12.6061H17.2702V11.5969Z%22 fill%3D%22%236F6F6F%22 stroke%3D%22%236F6F6F%22 stroke-width%3D%220.6%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcFullScreen-B8USD {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2221%22 viewBox%3D%220 0 20 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg clip-path%3D%22url(%23clip0)%22%3E%3Cpath d%3D%22M19.5811 10.3625V16.9734C19.5811 18.5633 18.4933 19.9023 17.2381 19.9023H2.76106C1.42215 19.9023 0.417969 18.5633 0.417969 16.9734V3.75162C0.417969 2.16167 1.50583 0.822754 2.76106 0.822754H9.87404%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M19.5813 0.822754L10.46 9.94409%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M13.7236 0.822754H19.5814V6.59681%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id%3D%22clip0%22%3E%3Crect width%3D%2220%22 height%3D%2220%22 fill%3D%22white%22 transform%3D%22translate(0 0.404297)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");\n}\n.wc3DGridPlannerMode-aiQCR {\n  background-image: url(\"data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2225%22 height%3D%2225%22 viewBox%3D%220 0 393.81 393.81%22%3E%09%3Ctitle%3EPfeil%3C%2Ftitle%3E%09%3Cpath fill%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 d%3D%22M328.44%2C391.41a6%2C6%2C0%2C0%2C0-5.51-6l-137.35-11.5V353a4.74%2C4.74%2C0%2C0%2C0-8.1-3.36l-38.4%2C38.4a4.75%2C4.75%2C0%2C0%2C0%2C0%2C6.71l38.4%2C38.4a4.71%2C4.71%2C0%2C0%2C0%2C3.35%2C1.39%2C4.74%2C4.74%2C0%2C0%2C0%2C4.75-4.74V408.93L323%2C397.43A6%2C6%2C0%2C0%2C0%2C328.44%2C391.41ZM178.7%2C405.77v18.89l-33.25-33.25%2C33.25-33.26V377a3.46%2C3.46%2C0%2C0%2C0%2C3.15%2C3.43l130.64%2C10.94L181.85%2C402.34A3.43%2C3.43%2C0%2C0%2C0%2C178.7%2C405.77Z%22 transform%3D%22translate(-137.69 -194.5)%22%2F%3E%09%3Cpath fill%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 d%3D%22M530.11%2C388.05l-38.4-38.4a4.74%2C4.74%2C0%2C0%2C0-8.09%2C3.36v20.87l-137.4%2C11.5a6.05%2C6.05%2C0%2C0%2C0%2C0%2C12.05l137.36%2C11.5v20.88a4.73%2C4.73%2C0%2C0%2C0%2C2.92%2C4.38%2C4.8%2C4.8%2C0%2C0%2C0%2C1.82.36%2C4.67%2C4.67%2C0%2C0%2C0%2C3.35-1.39l38.4-38.4A4.75%2C4.75%2C0%2C0%2C0%2C530.11%2C388.05Zm-42.77%2C14.29L356.71%2C391.41l130.63-10.94a3.46%2C3.46%2C0%2C0%2C0%2C3.15-3.43V358.15l33.25%2C33.26-33.25%2C33.25V405.77A3.43%2C3.43%2C0%2C0%2C0%2C487.34%2C402.34Z%22 transform%3D%22translate(-137.69 -194.5)%22%2F%3E%09%3Cpath fill%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 d%3D%22M373%2C540.43H352.12L340.62%2C403a6.05%2C6.05%2C0%2C0%2C0-12.05%2C0l-11.5%2C137.36H296.2a4.74%2C4.74%2C0%2C0%2C0-3.36%2C8.09l38.4%2C38.4a4.74%2C4.74%2C0%2C0%2C0%2C6.71%2C0l38.4-38.4a4.74%2C4.74%2C0%2C0%2C0-3.35-8.09Zm-5.15%2C6.87L334.6%2C580.55%2C301.34%2C547.3h18.89a3.46%2C3.46%2C0%2C0%2C0%2C3.43-3.15L334.6%2C413.51l10.93%2C130.64A3.46%2C3.46%2C0%2C0%2C0%2C349%2C547.3Z%22 transform%3D%22translate(-137.69 -194.5)%22%2F%3E%09%3Cpath fill%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 d%3D%22M296.2%2C242.39h20.87l11.5%2C137.39a6.05%2C6.05%2C0%2C0%2C0%2C12.05%2C0l11.5-137.35H373a4.74%2C4.74%2C0%2C0%2C0%2C3.35-8.1L338%2C195.89a4.74%2C4.74%2C0%2C0%2C0-6.71%2C0l-38.4%2C38.4a4.74%2C4.74%2C0%2C0%2C0%2C3.36%2C8.1Zm5.14-6.88%2C33.26-33.25%2C33.25%2C33.25H349a3.45%2C3.45%2C0%2C0%2C0-3.42%2C3.15L334.6%2C369.3%2C323.66%2C238.66a3.47%2C3.47%2C0%2C0%2C0-3.43-3.15Z%22 transform%3D%22translate(-137.69 -194.5)%22%2F%3E%3C%2Fsvg%3E\");\n  margin: 0 0 1rem;\n}\n\n.wc3DDimLine-BEygX {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 15 12%22 style%3D%22enable-background%3Anew 0 0 15 12%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3Anone%3B %7D%09.st1%7Bfill%3A%237E7E7E%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M14.8%2C1.3c0-0.6-0.5-1.2-1.2-1.2H1.4c-0.6%2C0-1.2%2C0.5-1.2%2C1.2v9.4c0%2C0.6%2C0.5%2C1.2%2C1.2%2C1.2h12.2%09c0.6%2C0%2C1.2-0.5%2C1.2-1.2C14.8%2C10.7%2C14.8%2C1.3%2C14.8%2C1.3z%22%2F%3E%3Cg%3E%09%3Cpath class%3D%22st1%22 d%3D%22M12.9%2C2.9c-0.1%2C0-0.2%2C0.1-0.2%2C0.2v5.8c0%2C0.1%2C0.1%2C0.2%2C0.2%2C0.2S13%2C9%2C13%2C8.9V3.1C13%2C3%2C12.9%2C2.9%2C12.9%2C2.9z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M2.1%2C2.9C2.1%2C2.9%2C2%2C3%2C2%2C3.1v5.8C2%2C9%2C2.1%2C9.1%2C2.1%2C9.1c0.1%2C0%2C0.2-0.1%2C0.2-0.2V3.1C2.3%2C3%2C2.2%2C2.9%2C2.1%2C2.9z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M10.3%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0C10.1%2C5%2C10%2C5%2C10%2C5.1v0.8H5V5.1C5%2C5%2C4.9%2C5%2C4.9%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0l-1.5%2C1%09%09c0%2C0-0.1%2C0.1-0.1%2C0.1c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1l1.5%2C1c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0C4.9%2C7.1%2C5%2C7.1%2C5%2C7V6.2H10V7c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1%09%09c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0l1.5-1c0%2C0%2C0.1-0.1%2C0.1-0.1c0-0.1%2C0-0.1-0.1-0.1L10.3%2C4.9z M4.6%2C6.7L3.6%2C6l1-0.6V6.7z M10.4%2C6.7%09%09V5.4l1%2C0.6L10.4%2C6.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  margin: 0 0 1rem;\n}\n";
+styleInject(css_248z);
+
+var NavBar = function NavBar(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("ul", {
+      className: classnames(wcNav3DToolbar, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined),
+      children: viewHandler.productState.doShowNav3D && /*#__PURE__*/jsxs(Fragment, {
+        children: [!viewHandler.productState.plannerRenderingIsStaticBG && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("li", {
+            className: wcZoomIn,
+            onClick: function onClick() {
+              return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomIn');
+            },
+            title: t('configurator.NAV3DZOOMIN_TT')
+          }), /*#__PURE__*/jsx("li", {
+            className: wcZoomOut,
+            onClick: function onClick() {
+              return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomOut');
+            },
+            title: t('configurator.NAV3DZOOMOUT_TT')
+          })]
+        }), /*#__PURE__*/jsx("li", {
+          className: wcFullScreen,
+          onClick: function onClick() {
+            return viewHandler.productState.onNav3DMenuSelect('Nav3DFullScreen');
+          },
+          title: t('configurator.NAV3DFULLSCREEN_TT')
+        }), viewHandler.productState.doShowNav3DPlannerMode && /*#__PURE__*/jsx("li", {
+          className: wc3DGridPlannerMode,
+          onClick: function onClick() {
+            return viewHandler.productState.onNav3DMenuSelect('Nav3DPlannerMode');
+          },
+          title: t('configurator.NAV3DPLANNERMODE_TT')
+        }), viewHandler.productState.doEnableToShow3DDimensionLines && /*#__PURE__*/jsx("li", {
+          className: wc3DDimLine,
+          onClick: function onClick() {
+            return viewHandler.productState.onNav3DMenuSelect('Nav3DDimLine');
+          },
+          title: t('configurator.NAV3DDIMLINE_TT')
+        })]
+      })
+    }), viewHandler.productState.allowQRCodeAR && /*#__PURE__*/jsx(ArQrCodeIcon, {
+      className: arAbsoluteDesktop
+    })]
+  });
+};
+var index = observer(NavBar);
+
+export { index as default };

package/build/esm/index-767b2ad3.js

@@ -0,0 +1,62 @@
+import { s as styleInject, u as useViewHandler } from './index-034e1c95.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+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/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';
+
+var header = "header-88iFZ";
+var wrapper = "wrapper-zFPaP";
+var title = "title-Mime-";
+var sel = "sel--F5X-";
+var collapseArrow = "collapseArrow-iq67x";
+var open = "open-t8G5n";
+var mobile = "mobile-Ksq3e";
+var css_248z = ".header-88iFZ {\n  height: 48px;\n  position: relative;\n  background-color: #f8f8f8;\n  border-bottom: 2px solid #f0f0f0;\n}\n\n.wrapper-zFPaP {\n  margin-left: 16px;\n  margin-right: 16px;\n  display: flex;\n}\n.title-Mime- {\n  padding: 11px;\n  font-weight: 100;\n  font-size: 18px;\n  position: relative;\n}\n\ntitle:hover,\n.sel--F5X- {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.title-Mime-::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  height: 3px;\n  left: 50%;\n  bottom: 0;\n  background-color: var(--diva-theme-palette-primary-main);\n  transition: all ease-in-out 0.2s;\n}\n.title-Mime-:hover::after,\n.sel--F5X-::after {\n  width: 100%;\n  left: 0;\n}\n\n.collapseArrow-iq67x {\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 16.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%22960px%22 height%3D%22560px%22 viewBox%3D%220 0 960 560%22 enable-background%3D%22new 0 0 960 560%22 xml%3Aspace%3D%22preserve%22%3E%3Cg id%3D%22Rounded_Rectangle_33_copy_4_1_%22%3E%09%3Cpath d%3D%22M480%2C344.181L268.869%2C131.889c-15.756-15.859-41.3-15.859-57.054%2C0c-15.754%2C15.857-15.754%2C41.57%2C0%2C57.431l237.632%2C238.937%09%09c8.395%2C8.451%2C19.562%2C12.254%2C30.553%2C11.698c10.993%2C0.556%2C22.159-3.247%2C30.555-11.698l237.631-238.937%09%09c15.756-15.86%2C15.756-41.571%2C0-57.431s-41.299-15.859-57.051%2C0L480%2C344.181z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transform: rotate(90deg);\n  transition: all 0.35s ease;\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  right: 8px;\n  top: 5px;\n}\n.open-t8G5n .collapseArrow-iq67x {\n  transform: rotate(0deg);\n}\n\n.header-88iFZ.mobile-Ksq3e {\n  height: 38px;\n}\n\n.mobile-Ksq3e .title-Mime- {\n  padding: 8px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n.mobile-Ksq3e .collapseArrow-iq67x {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  right: 8px;\n  top: 0px;\n}\n";
+styleInject(css_248z);
+
+var SubTabGroupHeader = function SubTabGroupHeader(_ref) {
+  var openState = _ref.openState,
+    curState = _ref.curState,
+    tabs = _ref.tabs;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    onClick: function onClick() {
+      return openState[1](!openState[0]);
+    },
+    className: classnames(header, openState[0] ? open : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: tabs.map(function (b, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: classnames(title, curState[0] === b && openState[0] ? sel : undefined),
+          onClick: function onClick(e) {
+            curState[1](b);
+            if (!openState[0]) openState[1](true);
+            e.stopPropagation();
+          },
+          children: [b === 'ALL' && tabs.length !== 1 && t('configurator.config_all'), tabs.length === 1 && t('configurator.config_accessoire'), tabs.length > 1 && b !== 'ALL' && index + '.']
+        }, b);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(collapseArrow)
+    })]
+  });
+};
+var SubTabGroupHeader$1 = observer(SubTabGroupHeader);
+
+export { SubTabGroupHeader$1 as default };

package/build/esm/index-76e0dc4e.js

@@ -0,0 +1,44 @@
+import './index-034e1c95.js';
+import 'react';
+import Default from './index-a7ec5498.js';
+import { 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/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import 'classnames';
+import './index.module-f6689f40.js';
+import 'react-laag';
+import './index-a0a3b3e7.js';
+import './index-78fde959.js';
+import './index-b54038c8.js';
+import './index-f00f3588.js';
+
+var GallerySerious = function GallerySerious(_ref) {
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    paletteType = _ref.paletteType,
+    hidePricePreview = _ref.hidePricePreview;
+  var type = 'small';
+  if (paletteType === 'GAL_BIG') {
+    type = 'big';
+  }
+  return /*#__PURE__*/jsx(Default, {
+    item: item,
+    paletteId: paletteId,
+    type: type,
+    hidePricePreview: hidePricePreview
+  });
+};
+
+export { GallerySerious as default };

package/build/esm/index-78e7c005.js

@@ -0,0 +1,223 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-034e1c95.js';
+import React, { useState, useEffect, Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import sift from 'sift';
+import TextBox from './index-d6d94fd5.js';
+import ItemVariant from './index-2a4765d2.js';
+import SettingsPaletteGroup from './index-df518346.js';
+import ToggleOption from './index-b4ac4fbd.js';
+import GroupDropdown from './index-da83e692.js';
+import PromotedProducts from './index-60b4528e.js';
+import ToggleName from './index-52036c1d.js';
+import ProductList from './index-2cb945e9.js';
+import itemPaletteTypeComponentMap from './index-b3193210.js';
+import ItemWrapper from './index-558ead5f.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var collapsableInner = "collapsable-inner-YPvJa";
+var css_248z = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\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 ShelfPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-a53f9795.js');
+});
+var DoorPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-82dc2a4a.js');
+});
+var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
+  var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
+  var item = _ref.item,
+    groupSize = _ref.groupSize;
+  var viewHandler = useViewHandler();
+  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
+  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredGroups = _useState2[0],
+    setFilteredGroups = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredGroupsWithEmptyGroups = _useState4[0],
+    setFilteredGroupsWithEmptyGroups = _useState4[1];
+  useEffect(function () {
+    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
+      return _objectSpread(_objectSpread({}, group), {}, {
+        items: item.currentItemsFilter ? group.items.filter(sift(item.currentItemsFilter)) : group.items
+      });
+    });
+    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
+      return group.items.length > 0;
+    });
+    if (filteredGroups.length > 0) {
+      filteredGroupsWithEmptyGroups = filteredGroups;
+    }
+    setFilteredGroups(filteredGroups);
+    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
+  }, [item, viewHandler.settingsState.itemPalettes]);
+  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
+  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
+
+  //this code now sets a css variable within a specific palette to define the grid items size and gird gap
+  //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
+  //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
+  var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
+  var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
+  var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
+  var infoIconSize = undefined;
+  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
+    gridSize = '240px';
+  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
+    gridSize = 'calc(100% - 20px)';
+  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
+    gridSize = '100px';
+  } else if (item.type == 'ACC') {
+    if (settingsSizes.sizeAccessoires) {
+      gridSize = settingsSizes.sizeAccessoires;
+    }
+  } else if (item.type == 'ACC_CONFIG') {
+    gridSize = '100%';
+  } else if (item.type.startsWith('GAL_SMALL')) {
+    gridSize = '60px';
+  } else if (item.type == 'RANGE') {
+    gridSize = '100%';
+  } else if (item.type == 'GAL') {
+    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
+    gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
+    gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
+  } else if (item.type === 'PLANNERSWITCH') {
+    gridSize = '170px';
+  } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
+    //for the usecase of schlaraffia in mobile
+    //TODO for refactorig this should be done nicer
+    gridSize = '120px';
+  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
+    gridSize = '120px';
+  } else if (item.type === 'VERY_SMALL') {
+    gridSize = '48%';
+  } else if (item.type === 'GAL_TEXT') {
+    gridSize = '100px';
+  } else if (item.type === 'GAL_BIG_TEXT') {
+    gridSize = '120px';
+  } else if (item.type === 'GAL_SMALL_TEXT') {
+    gridSize = '70px';
+  }
+  if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
+    infoIconSize = '20px';
+  }
+  var variables = _objectSpread({
+    '--gridSize': gridSize,
+    '--gridGap': gridGap
+  }, infoIconSize ? {
+    '--infoIconSize': infoIconSize
+  } : {});
+  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
+  switch (item.type) {
+    case 'TOGGLE':
+      return /*#__PURE__*/jsx(ToggleOption, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'TOGGLE_NAME':
+      return /*#__PURE__*/jsx(ToggleName, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'TEXTBOX':
+      return /*#__PURE__*/jsx(TextBox, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'DROPDOWN_TEXT':
+    case 'DROPDOWN_IMAGE':
+      return /*#__PURE__*/jsx(ItemVariant, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'NUMBER':
+      return /*#__PURE__*/jsx(PaletteComponent, {
+        paletteId: item.id,
+        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
+        groupSize: groupSize
+      }, item.id + item.configStepKey);
+    case 'SHELFPLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(ShelfPlanner, {
+          filteredGroups: filteredGroups,
+          item: item,
+          id: item.id,
+          style: variables
+        }, item.id)
+      });
+    case 'PRODUCTS':
+      return /*#__PURE__*/jsx(ProductList, {
+        item: item
+      });
+    case 'PROMOTED':
+      return /*#__PURE__*/jsx(PromotedProducts, {
+        item: item
+      });
+    case 'DOOR_PLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(DoorPlanner, {
+          item: item
+        })
+      });
+    case 'GAL_GROUP_DROPDOWN':
+    case 'GAL_SMALL_GROUP_DROPDOWN':
+      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
+        item: item,
+        PaletteComponent: PaletteComponent,
+        filteredGroups: filteredGroupsWithEmptyGroups,
+        id: item.id,
+        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
+        contentInnerClassName: innerGridClass
+      }, item.configStepKey);
+      return /*#__PURE__*/jsx(ItemWrapper, {
+        style: variables,
+        item: item,
+        children: childGroup
+      });
+    default:
+      var children;
+      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
+        className: innerGridClass,
+        children: filteredGroups.map(function (group) {
+          return group.items.map(function (paletteItem, i) {
+            return /*#__PURE__*/jsx(PaletteComponent, {
+              paletteType: item.type,
+              paletteId: item.id,
+              item: paletteItem
+            }, i);
+          });
+        })
+      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
+        groups: filteredGroups,
+        contentInnerClassName: innerGridClass,
+        itemPalette: item,
+        PaletteComponent: PaletteComponent
+      });
+      return /*#__PURE__*/jsx(ItemWrapper, {
+        style: variables,
+        item: item,
+        children: children
+      });
+  }
+};
+var SettingsItem = observer(SettingsPaletteItem);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SettingsItem
+});
+
+export { SettingsItem as S, collapsableInner as c, index as i };