@crystaldesign/diva-web-planner-react 25.3.0-rc.2 → 25.3.0-rc.20

package/build/esm/index-1baeeac5.js

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

package/build/esm/index-1bc4f492.js

@@ -0,0 +1,58 @@
+import { s as styleInject, u as useViewHandler } from './index-f8f7ef4c.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from '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';
+import '@crystaldesign/widget-contact-form';
+
+var wcTabGroupItem = "wcTabGroupItem-TP7vT";
+var portrait = "portrait-3cTAf";
+var landscape = "landscape-6Dea8";
+var wcActiveStep = "wcActiveStep-y3S9Y";
+var wcVisitedStep = "wcVisitedStep-yDCqq";
+var wcStepNum = "wcStepNum-6FgQh";
+var css_248z = ".wcTabGroupItem-TP7vT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: background-color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n}\n.portrait-3cTAf.wcTabGroupItem-TP7vT,\n.landscape-6Dea8.wcTabGroupItem-TP7vT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-TP7vT.wcActiveStep-y3S9Y {\n  color: white;\n  background-color: var(--primaryColor);\n}\n\n.wcActiveStep-y3S9Y.wcTabGroupItem-TP7vT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcVisitedStep-yDCqq {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-yDCqq.wcTabGroupItem-TP7vT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-TP7vT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcStepNum-6FgQh {\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  margin-right: 10px;\n  margin-top: 10px;\n  border: 1px solid white;\n  background-color: white;\n  border-radius: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  color: #6f6f6f;\n}\n\n.wcActiveStep-y3S9Y .wcStepNum-6FgQh {\n  color: var(--primaryColor);\n  font-weight: 700;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%229%22 viewBox%3D%220 0 12 9%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.44531 3.49126L5.625 8.09375L10.75 0.953613%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  color: transparent;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh:empty:before {\n  content: '\\200b';\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontalGold = function TabGroupItemHorizontalGold(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(wcTabGroupItem, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive) ? wcVisitedStep : undefined),
+    children: [/*#__PURE__*/jsx("span", {
+      className: classnames(wcStepNum),
+      children: tabGroup.posNr
+    }), t('configurator.' + tabGroup.title, tabGroup.title)]
+  });
+};
+var index = observer(TabGroupItemHorizontalGold);
+
+export { index as default };

package/build/esm/index-1cc1f15d.js

@@ -0,0 +1,38 @@
+import './index-f8f7ef4c.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 '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var DistanceToGround = function DistanceToGround(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      left: item.position.x + '%',
+      top: 100 - item.position.y + '%'
+    },
+    id: "distanceToGround",
+    className: classnames(plannerUIProps.classes.dimension.distanceToGround),
+    children: /*#__PURE__*/jsx("div", {
+      children: item.dimensionVal + ' cm'
+    })
+  });
+};
+var DistanceToGround$1 = observer(DistanceToGround);
+
+export { DistanceToGround$1 as default };

package/build/esm/index-1d0b63c4.js

@@ -0,0 +1,86 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-f8f7ef4c.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import TabGroupHorizontal from './index-668f5f17.js';
+import TabGroupVertical from './index-8df86287.js';
+import TabSearch from './index-434aa254.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import './index-53367c40.js';
+import './index-a5ab25a8.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+var wcConfiguratorSteps = "wcConfigurator-steps-1pUS0";
+var horizontal = "horizontal-6TCsO";
+var wcConfiguratorStepsSplit = "wcConfigurator-steps-split-ATmZ8";
+var portrait = "portrait-uvNtu";
+var closeRight = "close-right-rv5xk";
+var closeLeft = "close-left-S5bW1";
+var vertical = "vertical-HLAFY";
+var tabSearchVisibleClass = "tab-search-visible-class-VelST";
+var landscape = "landscape-O7G0i";
+var wcConfigCloseButton = "wcConfigCloseButton-mkHVY";
+var closeButtonHidden = "closeButtonHidden-g1FQc";
+var wcConfiguratorStepsContainer = "wcConfigurator-steps-Container-Yb9mE";
+var css_248z = ".wcConfigurator-steps-1pUS0 {\n  z-index: 300;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: var(--thirdColor);\n}\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n  background: var(--tabGroupBackground);\n}\n\n.horizontal-6TCsO.portrait-uvNtu.close-right-rv5xk .wcConfigurator-steps-split-ATmZ8 {\n  width: calc(100% - 3.6rem);\n}\n.horizontal-6TCsO.portrait-uvNtu.close-left-S5bW1 .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: 100%;\n  background: var(--tabGroupBackground);\n}\n\n.tab-search-visible-class-VelST.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: calc(100% - 46px);\n}\n.horizontal-6TCsO.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.wcConfigCloseButton-mkHVY {\n  background-image: 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%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  float: left;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n}\n.vertical-HLAFY .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: -56px;\n  left: 30px;\n}\n\n.portrait-uvNtu .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: 0;\n  margin: 10px;\n}\n\n.portrait-uvNtu.close-right-rv5xk .wcConfigCloseButton-mkHVY {\n  right: 0;\n}\n\n.portrait-uvNtu.close-left-S5bW1 .wcConfigCloseButton-mkHVY {\n  left: -50px;\n}\n\n.wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(197, 197, 197, 0.1);\n}\n\n.wcTabGroupItem-eqGtC:first-child {\n  border-radius: var(--globalBorderRadius) 0 0 var(--globalBorderRadius);\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: var(--globalBorderRadius);\n  height: 100%;\n  border-width: 0px;\n  overflow-x: auto;\n}\n.wcConfigur-xKWej .wcConfiguratorator-steps-Container-FGpNz {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n}\n\n.horizontal-6TCsO.closeButtonHidden-g1FQc .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.portrait-uvNtu .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE and Edge */\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8,\n.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  overflow: auto;\n\n  /* Hide scrollbar for IE, Edge add Firefox */\n\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-Container-Yb9mE {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-Container-Yb9mE {\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "showCloseButtonInMobile", "tabSearchClass"];
+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 TabGroupContainer = function TabGroupContainer(_ref) {
+  var className = _ref.className,
+    showCloseButtonInMobile = _ref.showCloseButtonInMobile,
+    tabSearchClass = _ref.tabSearchClass,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent,
+    isMobile = _useDivaCore$state.dimensions.isMobile;
+  var closeButtonVisible = isFullscreenComponent && showCloseButtonInMobile !== 'none' || viewHandler.tabGroupState.curTabGroupType != 'vertical' && !viewHandler.uiState.ViewConfig.hideCloseButton && viewHandler.eventIsManagedByClient('onWebPlanerClose') && !((!showCloseButtonInMobile || showCloseButtonInMobile == 'none') && viewHandler.getIsInMobileView());
+  var tabSearchVisible = viewHandler.uiState.ViewConfig.tabGroupSearchVisible;
+  var tabGroupScroller = useRef(null);
+  useEffect(function () {
+    if (tabGroupScroller.current) {
+      viewHandler.tabGroupState.setTabGroupScroller(tabGroupScroller.current);
+    }
+    return function () {};
+  }, [tabGroupScroller]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className, wcConfiguratorSteps, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? horizontal : undefined, viewHandler.tabGroupState.curTabGroupType == 'vertical' ? vertical : undefined, !closeButtonVisible ? closeButtonHidden : undefined, tabSearchVisible ? tabSearchVisibleClass : undefined, isMobile ? showCloseButtonInMobile == 'left' ? closeLeft : closeRight : undefined),
+    children: [tabSearchVisible && /*#__PURE__*/jsx(TabSearch, {
+      className: tabSearchClass
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorStepsSplit),
+      ref: tabGroupScroller,
+      children: /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorStepsContainer,
+        children: [viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsx(TabGroupHorizontal, {}), viewHandler.tabGroupState.curTabGroupType == 'vertical' && /*#__PURE__*/jsx(TabGroupVertical, {})]
+      })
+    }), closeButtonVisible && /*#__PURE__*/jsx("div", {
+      className: wcConfigCloseButton,
+      title: t('configurator.ConfigClose'),
+      onClick: viewHandler.onCloseConfigurator
+    })]
+  }));
+};
+var TabGroup = observer(TabGroupContainer);
+
+export { TabGroup as default };

package/build/esm/index-1d3d8894.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-f8f7ef4c.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ProductFooter = function ProductFooter(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductFooter"
+  }));
+};
+
+export { ProductFooter as default };

package/build/esm/index-1f2232df.js

@@ -0,0 +1,100 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f8f7ef4c.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
+import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
+import SettingsHeader from './index-88e28897.js';
+import classnames from 'classnames';
+import Search from './index-42cee02d.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var pdpOverlay = "pdp-overlay-2gWQq";
+var navigationVisible = "navigation-visible-goqGH";
+var pdpBackground = "pdp-background-1tl-9";
+var pdpContainer = "pdp-container-EljBO";
+var isMobileClass = "is-mobile-class-eOYXj";
+var closeButton = "close-button-tHReC";
+var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  position: relative;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n\n.close-button-tHReC {\n  background-image: 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%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n  z-index: 100;\n}\n.close-button-tHReC:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n";
+styleInject(css_248z);
+
+var ProductList = function ProductList(_ref) {
+  var _viewHandler$settings, _viewHandler$getViewC;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore();
+    _useDivaCore.actions.openComponent;
+    var _useDivaCore$state = _useDivaCore.state,
+    HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    height = _useDivaCore$state$di.height,
+    isPortrait = _useDivaCore$state$di.isPortrait,
+    organization = _useDivaCore$state.organization;
+  var _useTranslation = useTranslation();
+    _useTranslation.t;
+  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
+  var currentlyMobile = isMobile && isPortrait || height < 500;
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentProductId = _useState2[0],
+    setCurrentProductId = _useState2[1];
+  var productState = useProductState({
+    parameters: {
+      'customFlags.variantsList.organizations': organization._id
+    },
+    sort: '{-created}',
+    scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
+  });
+  var closePDP = useCallback(function () {
+    setCurrentProductId(undefined);
+  }, []);
+  var openPDP = useCallback(function (_ref2) {
+    var _id = _ref2._id;
+    setCurrentProductId(_id);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item,
+      specialElement1: /*#__PURE__*/jsx(Search, {
+        searchState: productState.search
+      })
+    }), viewHandler.settingsState.settingsScrollerElement && /*#__PURE__*/jsx(ProductsComponent, {
+      productState: productState,
+      onClickFunction: openPDP
+    }), currentProductId && /*#__PURE__*/jsxs("div", {
+      className: classnames(pdpOverlay, currentlyMobile ? isMobileClass : undefined, !!portalHeaderHeight ? navigationVisible : undefined),
+      children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
+        onClick: closePDP,
+        className: pdpBackground
+      }), /*#__PURE__*/jsxs("div", {
+        className: pdpContainer,
+        children: [/*#__PURE__*/jsx("div", {
+          onClick: closePDP,
+          className: closeButton
+        }), /*#__PURE__*/jsx(ProductDetailPageComponent, {
+          settings: (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.productDetailPageConfig,
+          productId: currentProductId
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ProductList);
+
+export { index as default };

package/build/esm/index-1fece4b6.js

@@ -0,0 +1,124 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-f8f7ef4c.js';
+import { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+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/slicedToArray';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wcTextBoxInDialog = "wcTextBoxInDialog-cUykT";
+var wcPopupWindowContainer = "wcPopupWindowContainer-RSZGf";
+var wcClose = "wcClose-X1s6d";
+var wcSubmit = "wcSubmit-Ax0lk";
+var css_248z = ".wcTextBoxInDialog-cUykT {\n  width: 90%;\n  padding: 12px 20px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n  float: left;\n}\n\n.wcPopupWindowContainer-RSZGf {\n  letter-spacing: 0.5px;\n  -webkit-text-stroke: 0.1px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  z-index: 999;\n  width: 40em;\n  max-width: 70%;\n  max-height: 90%;\n  background-color: white;\n  padding: 1em 2em 0.5em 2em;\n  border-radius: 15px;\n  border: 1px solid #cbcbcb;\n  font-size: 14.4px;\n  color: #363636;\n  display: flex;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.wcPopupWindowContainer-RSZGf p {\n  font-size: 16px;\n  -webkit-text-stroke: 0.5px;\n}\n\n.wcPopupWindowContainer-RSZGf ul {\n  padding: 0;\n  margin: 0;\n}\n\n.wcPopupWindowContainer-RSZGf .wctooltext-G-oa5 {\n  width: calc(100% - 65px);\n  float: left;\n  padding: 8px 0 15px 10px;\n}\n\n.wcPopupWindowContainer-RSZGf li {\n  height: 40px;\n  width: 55px;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  float: left;\n  clear: both;\n  margin-bottom: 15px;\n}\n\n.wcClose-X1s6d {\n  border-radius: 20px;\n  position: absolute;\n  font-size: 22pt;\n  font-family: sans-serif;\n  font-weight: 50;\n  top: -20px;\n  right: -20px;\n  width: 40px;\n  height: 40px;\n  background-color: #fff;\n  color: #666;\n  border: 2px solid #666;\n  text-align: center;\n  padding-top: 0px;\n  content: 'X';\n}\n\n.wcClose-X1s6d:hover {\n  background-color: #aaa;\n  color: #000;\n  border: 2px solid #000;\n}\n.wcSubmit-Ax0lk {\n  border: 1px var(--secondaryColor) solid;\n  background-color: var(--secondaryColor);\n  color: #ffffff;\n  height: 41px;\n  width: 8%;\n  margin: 8px 0 7px;\n  float: right;\n  border-radius: var(--globalBorderRadius);\n  background-repeat: no-repeat;\n  background-position: center center;\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 8 13.5%22 style%3D%22enable-background%3Anew 0 0 8 13.5%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M6.5%2C11.7c-0.1%2C0-0.2%2C0-0.3-0.1l-5-4.3C1.1%2C7.2%2C1%2C7.1%2C1%2C7c0-0.1%2C0.1-0.3%2C0.2-0.4l5-4.7c0.2-0.2%2C0.5-0.2%2C0.7%2C0%09%09c0.2%2C0.2%2C0.2%2C0.5%2C0%2C0.7L2.3%2C6.9l4.6%2C3.9C7%2C11%2C7.1%2C11.4%2C6.9%2C11.6C6.8%2C11.7%2C6.7%2C11.7%2C6.5%2C11.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-size: 16px;\n  transform: rotate(180deg);\n}\n";
+styleInject(css_248z);
+
+var Inputbox = function Inputbox(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var inputBox = useRef(null);
+  useEffect(function () {
+    var _viewHandler$settings, _viewHandler$settings2, _inputBox$current;
+    viewHandler.settingsState.setInputBoxValue((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.inputBoxItem) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.freeText) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : '');
+    (_inputBox$current = inputBox.current) === null || _inputBox$current === void 0 || _inputBox$current.focus();
+  }, []);
+  useEffect(function () {
+    var _viewHandler$settings3;
+    if ((_viewHandler$settings3 = viewHandler.settingsState.inputBoxItem) !== null && _viewHandler$settings3 !== void 0 && _viewHandler$settings3.freeText) {
+      viewHandler.settingsState.setInputBoxValue(viewHandler.settingsState.inputBoxItem.freeText);
+    }
+  }, [viewHandler.settingsState.inputBoxItem]);
+  if (!viewHandler.settingsState.inputBoxItem) return /*#__PURE__*/jsx(Fragment, {});
+  var title = viewHandler.settingsState.inputBoxItem.text;
+  if (title.includes(':')) title = title.slice(0, title.lastIndexOf(':'));
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!viewHandler.settingsState.inputBoxItem) {
+              _context.next = 6;
+              break;
+            }
+            viewHandler.settingsState.inputBoxItem.freeText = viewHandler.settingsState.inputBoxValue;
+            _context.next = 4;
+            return viewHandler.paletteViewHandler.clickedOnConfigPalette(viewHandler.settingsState.inputBoxItem, 'inputbox');
+          case 4:
+            viewHandler.settingsState.updateInputBoxValues(false, undefined);
+            viewHandler.uiState.setConfiguratorDisabled(false);
+          case 6:
+            if (viewHandler.settingsState.inputBoxVisible) {
+              viewHandler.uiState.setConfiguratorDisabled(true);
+            } else {
+              viewHandler.uiState.setConfiguratorDisabled(false);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var isNumberBox = !!viewHandler.settingsState.inputBoxItem.measureUnit;
+  var keyDownFunction = function keyDownFunction(e) {
+    if (!viewHandler) return;
+    if (e.key === 'Enter') {
+      onSubmit();
+      e.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxs("div", {
+      className: wcPopupWindowContainer,
+      children: [/*#__PURE__*/jsx("span", {
+        onClick: function onClick() {
+          return viewHandler.settingsState.inputBoxVisible = false;
+        },
+        className: wcClose,
+        children: "\u2716"
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/jsx("p", {
+          style: {
+            marginTop: '2px'
+          },
+          children: title
+        }), /*#__PURE__*/jsx("input", {
+          ref: inputBox,
+          onKeyDown: function onKeyDown(e) {
+            return keyDownFunction(e);
+          },
+          className: wcTextBoxInDialog,
+          type: isNumberBox ? 'number' : 'text',
+          onChange: function onChange(event) {
+            return viewHandler.settingsState.setInputBoxValue(event.target.value);
+          },
+          value: viewHandler.settingsState.inputBoxValue
+        }), /*#__PURE__*/jsx("button", {
+          className: wcSubmit,
+          onClick: onSubmit
+        })]
+      })]
+    })
+  });
+};
+var Inputbox$1 = observer(Inputbox);
+
+export { Inputbox$1 as default };