@crystaldesign/diva-web-planner-react 25.2.0-beta.8 → 25.2.0-rc.1

package/build/esm/index-7475f386.js

@@ -0,0 +1,140 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+import { s as styleInject } from './index-33475a0e.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import 'react';
+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/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 'mobx-react-lite';
+
+var shareOption = "share-option-tqy8P";
+var shareText = "share-text-grps7";
+var loader = "loader-KG6ip";
+var facebookIcon = "facebook-icon-1-Vop";
+var emailIcon = "email-icon-AWH8x";
+var whatsappIcon = "whatsapp-icon-I2GLz";
+var telegramIcon = "telegram-icon-0jmu8";
+var css_248z = ".share-option-tqy8P {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  border: solid 0.1px;\n  border-radius: 5px;\n  margin-top: 1%;\n}\n\n.share-text-grps7 {\n  align-self: center;\n  margin: auto;\n}\n\n.loader-KG6ip {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 8px solid #b6b6b6;\n  border-radius: 50%;\n  animation: spin-FpWtQ 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #b6b6b6 transparent transparent transparent;\n}\n\n/* Safari */\n\n@keyframes spin-FpWtQ {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.share-option-tqy8P:hover {\n  color: black;\n}\n\n.facebook-icon-1-Vop {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Uploaded to%3A SVG Repo%2C www.svgrepo.com%2C Generator%3A SVG Repo Mixer Tools --%3E%3Csvg fill%3D%22%23000000%22 width%3D%22800px%22 height%3D%22800px%22 viewBox%3D%220 0 512 512%22 id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M480%2C257.35c0-123.7-100.3-224-224-224s-224%2C100.3-224%2C224c0%2C111.8%2C81.9%2C204.47%2C189%2C221.29V322.12H164.11V257.35H221V208c0-56.13%2C33.45-87.16%2C84.61-87.16%2C24.51%2C0%2C50.15%2C4.38%2C50.15%2C4.38v55.13H327.5c-27.81%2C0-36.51%2C17.26-36.51%2C35v42h62.12l-9.92%2C64.77H291V478.66C398.1%2C461.85%2C480%2C369.18%2C480%2C257.35Z%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.email-icon-AWH8x {\n  margin-left: 1%;\n  background-position-y: -1px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M174.461-180q-31.417 0-53.606-22.189-22.188-22.188-22.188-53.606v-448.41q0-31.418 22.188-53.606Q143.044-780 174.461-780h611.078q31.417 0 53.606 22.189 22.188 22.188 22.188 53.606v448.41q0 31.418-22.188 53.606Q816.956-180 785.539-180H174.461ZM480-467.359l330.154-215.359-12.308-46.103-317.846 208-317.846-208-12.308 46.103L480-467.359Z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.whatsapp-icon-I2GLz {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox%3D%220 0 20 20%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22m0 0h20v20h-20z%22 fill%3D%22none%22%2F%3E%3Cpath d%3D%22m16.8 5.7c-2.4-3.7-7.3-4.8-11.1-2.5-3.7 2.3-4.9 7.3-2.5 11l.2.3-.8 3 3-.8.3.2c1.3.7 2.7 1.1 4.1 1.1 1.5 0 3-.4 4.3-1.2 3.7-2.4 4.8-7.3 2.5-11.1zm-2.1 7.7c-.4.6-.9 1-1.6 1.1-.4 0-.9.2-2.9-.6-1.7-.8-3.1-2.1-4.1-3.6-.6-.7-.9-1.6-1-2.5 0-.8.3-1.5.8-2 .2-.2.4-.3.6-.3h.5c.2 0 .4 0 .5.4.2.5.7 1.7.7 1.8.1.1.1.3 0 .4.1.2 0 .4-.1.5s-.2.3-.3.4c-.2.1-.3.3-.2.5.4.6.9 1.2 1.4 1.7.6.5 1.2.9 1.9 1.2.2.1.4.1.5-.1s.6-.7.8-.9.3-.2.5-.1l1.6.8c.2.1.4.2.5.3.1.3.1.7-.1 1z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.telegram-icon-0jmu8 {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3Csvg height%3D%2232%22 viewBox%3D%220 0 32 32%22 width%3D%2232%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22m16 .5c-8.563 0-15.5 6.938-15.5 15.5s6.938 15.5 15.5 15.5c8.563 0 15.5-6.938 15.5-15.5s-6.938-15.5-15.5-15.5zm7.613 10.619-2.544 11.988c-.188.85-.694 1.056-1.4.656l-3.875-2.856-1.869 1.8c-.206.206-.381.381-.781.381l.275-3.944 7.181-6.488c.313-.275-.069-.431-.482-.156l-8.875 5.587-3.825-1.194c-.831-.262-.85-.831.175-1.231l14.944-5.763c.694-.25 1.3.169 1.075 1.219z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n";
+styleInject(css_248z);
+
+var Share = (function (props) {
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.isMobile;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    language = _useTranslation.i18n.language;
+  if (_typeof(props.url) == 'object') props.url = props.url[language];
+  var url = props.url.replace('{{DivaNr}}', props.divaNr);
+  url = url;
+  var text = t('configurator.sharemessage');
+  function onShare(type) {
+    switch (type) {
+      case 'facebook':
+        window.open("https://www.facebook.com/sharer/sharer.php?u=".concat(encodeURIComponent(url)), '_blank');
+        break;
+      case 'email':
+        window.open("mailto:?body=".concat(encodeURIComponent(text + ' ' + url)), '_blank');
+        break;
+      case 'telegram':
+        window.open("https://telegram.me/share/url?url=".concat(encodeURIComponent(url), "&text=").concat(encodeURIComponent(text)), '_blank');
+        break;
+      case 'whatsapp':
+        window.open("https://api.whatsapp.com/send?text=".concat(encodeURIComponent(text + ' ' + url)), '_blank');
+        break;
+    }
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [props.loading && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: 100
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: loader
+        })
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          position: 'absolute',
+          bottom: 0
+        },
+        children: t('configurator.shareloadinginfo')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        visibility: props.loading ? 'hidden' : 'visible'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: t('configurator.sharedescription')
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: shareOption,
+        onClick: function onClick() {
+          return onShare('email');
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: emailIcon
+        }), /*#__PURE__*/jsx("div", {
+          className: shareText,
+          children: t('configurator.shareemail')
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: shareOption,
+        onClick: function onClick() {
+          return onShare('facebook');
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: facebookIcon
+        }), /*#__PURE__*/jsx("div", {
+          className: shareText,
+          children: t('configurator.sharefacebook')
+        })]
+      }), isMobile && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: shareOption,
+          onClick: function onClick() {
+            return onShare('whatsapp');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: whatsappIcon
+          }), /*#__PURE__*/jsx("div", {
+            className: shareText,
+            children: t('configurator.sharewhatsapp')
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: shareOption,
+          onClick: function onClick() {
+            return onShare('telegram');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: telegramIcon
+          }), /*#__PURE__*/jsx("div", {
+            className: shareText,
+            children: t('configurator.sharetelegram')
+          })]
+        })]
+      })]
+    })]
+  });
+});
+
+export { Share as default };

package/build/esm/index-74f4f387.js

@@ -0,0 +1,64 @@
+import { u as useViewHandler } from './index-33475a0e.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import ConfigStep from './index-6edac140.js';
+import Header from './index-4a9d807e.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 '@crystaldesign/widget-contact-form';
+import 'classnames';
+
+var VerticalTabGroupItemClassification = function VerticalTabGroupItemClassification(_ref) {
+  var tabGroup = _ref.tabGroup;
+    _ref.height;
+    _ref.minHeight;
+  var viewHandler = useViewHandler();
+  var tabGroupItemRef = useRef(null);
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var configSteps = Object.values(tabGroup.options).map(function (o) {
+    return Object.values(o.configSteps).map(function (s) {
+      return {
+        configStep: s,
+        option: o
+      };
+    });
+  }).flat();
+  return /*#__PURE__*/jsx("div", {
+    ref: tabGroupItemRef,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      open: true,
+      easing: "ease",
+      trigger: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: false
+      }),
+      triggerWhenOpen: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: true
+      }),
+      children: configSteps.map(function (step) {
+        return /*#__PURE__*/jsx(ConfigStep, {
+          step: step
+        }, step.configStep.key);
+      })
+    })
+  });
+};
+var index = observer(VerticalTabGroupItemClassification);
+
+export { index as default };

package/build/esm/index-756a9918.js

@@ -0,0 +1,102 @@
+import { u as useViewHandler } from './index-33475a0e.js';
+import 'react';
+import classnames from 'classnames';
+import { r as row, c as colum, t as title, a as toggle } from './index.module-a22cc527.js';
+import Toggle from './index-02a14dba.js';
+import { observer } from 'mobx-react-lite';
+import { getLogger } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import InfoIcon from './index-f417a8af.js';
+import PricePreview from './index-82e69b7e.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 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'react-switch';
+
+var LOG = getLogger('Planner', 'ToggleOption');
+var ToggleOption = function ToggleOption(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var items = item.groups[0].items;
+  var yesItem;
+  var noItem;
+  if (!items) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  for (var i = 0; i < items.length; i++) {
+    var _items$i$codex, _items$i$codex2;
+    if ((_items$i$codex = items[i].codex) !== null && _items$i$codex !== void 0 && _items$i$codex.startsWith('OPVNEIN')) {
+      noItem = items[i];
+    }
+    if ((_items$i$codex2 = items[i].codex) !== null && _items$i$codex2 !== void 0 && _items$i$codex2.startsWith('OPVJA')) {
+      yesItem = items[i];
+    }
+  }
+  if (!noItem || !yesItem) {
+    if (items.length == 2) {
+      noItem = items[0];
+      yesItem = items[1];
+    }
+    if (!noItem || !yesItem) {
+      LOG.error(new DivaError('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', {
+        code: 'WC_0011'
+      }));
+      item.isVisited = true;
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  }
+  var contentItem = (_item$selectedElement = item.selectedElements) !== null && _item$selectedElement !== void 0 && _item$selectedElement[0].contentItemId ? item.selectedElements[0] : item.optionContentItemId ? {
+    contentItemId: item.optionContentItemId,
+    codex: item.configStepKey
+  } : undefined;
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(colum, title),
+      children: item.name
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(colum, toggle),
+      children: [noItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: noItem.pricePreviewPromise,
+        pos: "left"
+      }), /*#__PURE__*/jsx(Toggle, {
+        onChange: function onChange() {
+          viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, paletteId);
+        },
+        val: item,
+        state: noItem.sel == false,
+        off: noItem.text,
+        on: yesItem.text
+      }), yesItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: yesItem.pricePreviewPromise,
+        pos: "right"
+      })]
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        bottom: 'calc(50% - 10px)',
+        right: '20px'
+      }
+    })]
+  });
+};
+var ToggleOption$1 = observer(ToggleOption);
+
+export { ToggleOption$1 as default };

package/build/esm/index-773a0040.js

@@ -0,0 +1,53 @@
+import { s as styleInject, u as useViewHandler } from './index-33475a0e.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+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 wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };

package/build/esm/index-775b3efa.js

@@ -0,0 +1,158 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-33475a0e.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import StepInfo from './index-e8e5b484.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/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 'classnames';
+
+var paletteItem = "PaletteItem-hu6tC";
+var wcTextBox = "wcTextBox-lKT8X";
+var headerTitle = "headerTitle-RuXs-";
+var css_248z = ".PaletteItem-hu6tC {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.PaletteItem-hu6tC > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.PaletteItem-hu6tC input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.PaletteItem-hu6tC input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
+styleInject(css_248z);
+
+var NumberBox = function NumberBox(_ref) {
+  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId,
+    groupSize = _ref.groupSize;
+  var item = itemP;
+  var throttleRef = useRef(null);
+  var viewHandler = useViewHandler();
+  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    userInFocus = _useState2[0],
+    setUserInFocus = _useState2[1];
+  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var isDefined = true;
+  if (itemPalette) {
+    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
+    if (step) isDefined = step.configStep.isDefined;
+  }
+  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target$value;
+      var value;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
+            if (!e.target.value.endsWith('.')) {
+              _context.next = 4;
+              break;
+            }
+            setValue(e.target.value);
+            return _context.abrupt("return");
+          case 4:
+            value = value.replace(/[^0-9.,]/g, '');
+            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');
+
+            //delay logic update for 500ms
+            if (throttleRef.current) clearTimeout(throttleRef.current);
+            throttleRef.current = setTimeout(function () {
+              return updateLogic(value);
+            }, 500);
+            setValue(value);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var updateLogic = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!itemPalette) {
+              _context2.next = 3;
+              break;
+            }
+            _context2.next = 3;
+            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateLogic(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var _itemPalette$selected2, _itemPalette$selected3;
+    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
+  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      if (itemPalette) itemPalette.htmlRef = _ref4;
+    },
+    style: {
+      display: 'block',
+      width: groupSize ? 100 / groupSize + '%' : undefined,
+      "float": groupSize ? 'left' : undefined
+    },
+    children: [itemPalette && /*#__PURE__*/jsx("div", {
+      className: headerTitle,
+      children: itemPalette.name
+    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
+      stepInfo: itemPalette.info
+    }), /*#__PURE__*/jsx("div", {
+      className: paletteItem,
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          margin: '5px'
+        },
+        children: /*#__PURE__*/jsx("input", {
+          onBlur: function onBlur() {
+            setUserInFocus(false);
+          },
+          onFocus: function onFocus() {
+            var _itemPalette$info2;
+            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
+          },
+          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
+          lang: "en-150",
+          className: wcTextBox,
+          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
+          onChange: handleChange,
+          step: "0.01",
+          onKeyDown: function onKeyDown(e) {
+            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
+              e.preventDefault();
+            }
+          },
+          value: value,
+          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
+        })
+      })
+    })]
+  });
+};
+var NumberBox$1 = observer(NumberBox);
+
+export { NumberBox$1 as default };

package/build/esm/index-77ef5aab.js

@@ -0,0 +1,83 @@
+import { s as styleInject } from './index-33475a0e.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, jsxs, 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 row = "row-aKbIG";
+var rowPaddingTop = "row-padding-top-SRH2s";
+var rowPaddingTopArticle = "row-padding-top-article-Iwelk";
+var columnLeft = "column-left-jSCha";
+var columnRight = "column-right-rkkBn";
+var columnRightRed = "column-right-red-Lmt65";
+var columnOption = "column-option-2v7Hm";
+var columnPartlist = "column-partlist-0LS9Z";
+var codexes = "codexes--r2fL";
+var tabGroup = "tab-group-an6TP";
+var css_248z = ".row-aKbIG {\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  font-weight: 300;\n  padding-right: 0.9375rem;\n  padding-left: 0.9375rem;\n  display: flow-root;\n  color: #404040;\n}\n.row-padding-top-SRH2s {\n  padding-top: 8px;\n}\n\n.row-padding-top-article-Iwelk {\n  padding-top: 1rem;\n}\n\n.column-left-jSCha {\n  float: left;\n}\n.column-left-jSCha a {\n  color: var(--primaryColor);\n}\n.column-right-rkkBn {\n  float: right;\n  text-align: right;\n}\n\n.column-right-red-Lmt65 {\n  color: var(--primaryColor);\n}\n.column-option-2v7Hm {\n  font-size: 0.8125rem;\n  font-weight: normal;\n  line-height: 1.1;\n}\n.column-partlist-0LS9Z {\n  max-width: 70%;\n}\n\n.codexes--r2fL {\n  font-style: italic;\n}\n\n.tab-group-an6TP {\n  border-bottom: 1px solid var(--primaryColor);\n  font-size: 1.125rem;\n  margin: 1.5rem 0 0 0;\n  color: var(--primaryColor);\n  padding: 0;\n  text-align: left;\n  text-transform: capitalize;\n  font-weight: 300;\n}\n";
+styleInject(css_248z);
+
+var OptiontreeSerious = function OptiontreeSerious(_ref) {
+  var itemP = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var item = itemP;
+  if (item.isTabGroup) {
+    return /*#__PURE__*/jsx("div", {
+      className: tabGroup,
+      children: item.title
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [item.isPartlistArticle && /*#__PURE__*/jsxs("div", {
+      className: classnames(row, rowPaddingTopArticle),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(columnPartlist, columnLeft),
+        dangerouslySetInnerHTML: {
+          __html: item.title
+        }
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnRight),
+        children: (item.quantity && item.quantity > 1 ? '(x' + item.quantity + ') ' : '') + (!hidePrices && item.price ? DivaUtils.formatPrice(item.price) : '')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(row, item.isPartlistArticle ? rowPaddingTop : undefined),
+      children: [/*#__PURE__*/jsxs("span", {
+        className: classnames(columnOption, columnLeft),
+        children: [item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            children: item.size && item.size !== '' ? t('configurator.size') : item.description
+          }), ": ", item.size]
+        }), !item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            dangerouslySetInnerHTML: {
+              __html: item.title
+            }
+          }), item.description && ': ' + item.description]
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnOption, columnRight, columnRightRed, codexes),
+        children: item.codex
+      })]
+    })]
+  });
+};
+var index = observer(OptiontreeSerious);
+
+export { index as default };

package/build/esm/index-785ebef5.js

@@ -0,0 +1,38 @@
+import './index-33475a0e.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 };