@crystaldesign/diva-web-planner-react 25.8.0-rc.9 → 25.8.0

package/build/esm/index-aef7d76f.js

@@ -0,0 +1,198 @@
+import { s as styleInject, u as useViewHandler } from './index-42d6c87b.js';
+import { useEffect } from 'react';
+import Inputbox from './index-32a6e2e0.js';
+import Settings from './index-512a5b8e.js';
+import TabGroup from './index-9816c823.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import Toolbar from './index-4a3a19b8.js';
+import NavigationButtons from './index-12b9a74b.js';
+import ContentItemWrapper from './index-c764571f.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-f4215879.js';
+import './index-dd90a983.js';
+import './index-b5b560d6.js';
+import './index-3d136406.js';
+import './index-a5dcafec.js';
+import 'react-laag';
+import './index-27a0e0be.js';
+import './index-355a9c91.js';
+import './index-d2fae467.js';
+import 'sift';
+import './index-958ccefe.js';
+import './index-7ab45a16.js';
+import './index-301ea0d8.js';
+import './index-b04b264a.js';
+import './index.module-818804d7.js';
+import './index-68fc9341.js';
+import 'react-switch';
+import './index-d2983d08.js';
+import './index-d6c8da3b.js';
+import './index-b5c24ad3.js';
+import 'react-dropdown';
+import './index-1410e4a2.js';
+import './index-c1e05986.js';
+import './index-081b6a3e.js';
+import './index-87e0a844.js';
+import '@crystaldesign/content-box';
+import './index-5b5122a6.js';
+import './index-8be3f6a9.js';
+import './index-eddbc858.js';
+import './index-dbb0d63c.js';
+import './index-59280600.js';
+import './index-6ba4e065.js';
+import './index-e2935023.js';
+import './index-ee1f9988.js';
+import './index-61c34e1e.js';
+import './index-82a21dc5.js';
+import './index-6324ef18.js';
+import './index-4c43ee05.js';
+import './index-26f08b41.js';
+import './index-07c6f48a.js';
+import './index-2e46c69a.js';
+import './index-64f7f3b5.js';
+import './index.module-d5bf456d.js';
+import './index-bf25a8ba.js';
+import './index-2b88a07a.js';
+import './index-b1b32e48.js';
+import './index-3e364cf1.js';
+import './index-8abd7b5d.js';
+import './index-d662e484.js';
+import './index-2b2381c4.js';
+import './index.module-05a53255.js';
+import './index-49435e8a.js';
+import './index-5603d4c9.js';
+import './index-b67e41d8.js';
+import './index-723a426a.js';
+import './index-a8921ba2.js';
+import './index-96c499ad.js';
+import './index-e5ba9851.js';
+import './index-7452be83.js';
+import './index-33bbd656.js';
+import './index-24566104.js';
+import './index.module-35bbb54b.js';
+import './index-0a3a7e93.js';
+import './index-f25addc3.js';
+import './index-f2db1ed0.js';
+import 'react-collapsible';
+import './index-ff7282dc.js';
+import './index-9725055a.js';
+import './index.module-83cc9254.js';
+import 'react-json-view-lite';
+import './react-json-viewer-9d75ec90.js';
+import './index-92a76231.js';
+import './index.module-ad9b3725.js';
+import './DecisionVizualizer-31f033a6.js';
+import 'react-draggable';
+import './index-9e74432b.js';
+import './index-38634232.js';
+import './index-087e7444.js';
+import 'jsoneditor';
+import './index-a36001f5.js';
+import './index-c54c478f.js';
+import './index-d215cc47.js';
+import './index-db939a75.js';
+import './index-fd34b9ad.js';
+import './index-9879e695.js';
+import './index-8c6be48f.js';
+import './index-30b7f33c.js';
+import './index.module-a9ff8ba4.js';
+import './index-8fccfc70.js';
+import './index-d362a222.js';
+import './index-16f2270a.js';
+import 'react-select';
+import './index-1530678c.js';
+import './index-e488fd24.js';
+import './index-852390ed.js';
+import './index-1326c6ed.js';
+import './index-a5e79868.js';
+import './index-e62d23eb.js';
+import './CatalogProperties-e7158bd6.js';
+import './ArticleProperties-d335ab75.js';
+import './OptionProperties-de0474f9.js';
+import './OptionValueProperties-9493fa6e.js';
+import '@crystaldesign/content-item';
+
+var wcConfigurator = "wcConfigurator-XqlAg";
+var wcConfiguratorSteps = "wc-configurator-steps-KdP9s";
+var mobile = "mobile-PPTgR";
+var wcConfiguratorSettings = "wc-configurator-Settings-dVmBR";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-yVOyu";
+var css_248z = ".wcConfigurator-XqlAg {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n\n  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.wcConfigurator-XqlAg *,\n.wcConfigurator-XqlAg *::before,\n.wcConfigurator-XqlAg *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-KdP9s {\n  height: 56px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin: 0 8px;\n}\n.mobile-PPTgR .wc-configurator-steps-KdP9s {\n  height: 40px;\n}\n\n.wc-configurator-Settings-dVmBR {\n  height: calc(100% - 56px - 42px - 40px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n.mobile-PPTgR .wc-configurator-Settings-dVmBR {\n  height: calc(100% - 40px - 42px - 40px);\n}\n\n.wcConfigurator-settings-actions-yVOyu {\n  height: 40px;\n  z-index: 1001;\n}\n";
+styleInject(css_248z);
+
+var Wysiwyg = function Wysiwyg(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.getIsInMobileView() ? mobile : undefined),
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), /*#__PURE__*/jsx(NavigationButtons, {
+        className: wcConfiguratorSettingsActions,
+        showBackButtonText: true,
+        showCheckoutButtons: false
+      }), /*#__PURE__*/jsx(Toolbar, {}), viewHandler.settingsState.contentItemId && /*#__PURE__*/jsx(ContentItemWrapper, {
+        id: viewHandler.settingsState.contentItemId,
+        startPos: "right"
+      })]
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#df2927',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#fefefe',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--thirdColor)',
+  '--foldArrowMarginRight': '16px',
+  '--configuratorActionForthWidth': 'calc(50% - 3px)',
+  '--configuratorActionBackWidth': 'calc(50% - 3px)',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)'
+};
+var index = observer(Wysiwyg);
+
+export { cssVariables, index as default };

package/build/esm/index-b03b6a87.js

@@ -0,0 +1,43 @@
+import { s as styleInject } from './index-42d6c87b.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var pdfButton = "pdfButton-4l4zL";
+var css_248z = ".pdfButton-4l4zL {\n  border-radius: 50%;\n  border: solid 2px var(--primaryColor);\n  width: 26px;\n  height: 26px;\n  cursor: pointer;\n  margin-left: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pdfButton-4l4zL img {\n  width: 80%;\n}\n";
+styleInject(css_248z);
+
+var pdfIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20%202H8c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm0%2014H8V4h12v12zM4%206H2v14c0%201.1.9%202%202%202h14v-2H4V6zm12%206V9c0-.55-.45-1-1-1h-2v5h2c.55%200%201-.45%201-1zm-2-3h1v3h-1V9zm4%202h1v-1h-1V9h1V8h-2v5h1zm-8%200h1c.55%200%201-.45%201-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z%22%2F%3E%3C%2Fsvg%3E";
+
+var PDFButton = function PDFButton(_ref) {
+  var pdfUrl = _ref.pdfUrl;
+  return /*#__PURE__*/jsx("div", {
+    className: pdfButton,
+    onClick: function onClick() {
+      return window.open(pdfUrl, '_blank');
+    },
+    children: /*#__PURE__*/jsx("img", {
+      src: pdfIcon
+    })
+  });
+};
+
+export { PDFButton as default };

package/build/esm/index-b04b264a.js

@@ -0,0 +1,107 @@
+import { u as useViewHandler } from './index-42d6c87b.js';
+import 'react';
+import classnames from 'classnames';
+import { r as row, c as colum, t as title, a as toggle } from './index.module-818804d7.js';
+import Toggle from './index-68fc9341.js';
+import { observer } from 'mobx-react-lite';
+import { getLogger } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import InfoIcon from './index-d2983d08.js';
+import PricePreview from './index-d6c8da3b.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+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,
+        sel: noItem.sel,
+        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,
+        sel: yesItem.sel,
+        pos: "right"
+      })]
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        bottom: 'calc(50% - 10px)',
+        right: '20px'
+      }
+    }, item.configStepKey)]
+  });
+};
+var ToggleOption$1 = observer(ToggleOption);
+
+export { ToggleOption$1 as default };

package/build/esm/index-b06dd1ed.js

@@ -0,0 +1,127 @@
+import { s as styleInject, u as useViewHandler } from './index-42d6c87b.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-0cbc4bc4.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var verticalItem = "verticalItem-NmQDx";
+var wcSpan = "wcSpan-0wnmJ";
+var verticalItemPoligon = "verticalItemPoligon-M44lA";
+var wcActiveStep = "wcActiveStep-ykv3D";
+var wcVisitedStep = "wcVisitedStep-qDdfW";
+var wcStepIcon = "wcStepIcon-7hz1S";
+var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n  transition:\n    fill 0.3s ease,\n    color 0.3s ease;\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedFont, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
+styleInject(css_248z);
+
+var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
+  var _getIconOfTabGroup;
+  var tabGroup = _ref.tabGroup,
+    height = _ref.height,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
+    isFirstItem = _ref.isFirstItem,
+    isLastItem = _ref.isLastItem,
+    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
+    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
+    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
+    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
+    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
+    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
+    _ref$wcStepIconClass = _ref.wcStepIconClass,
+    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
+    lastItemDiv = _ref.lastItemDiv;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var width = 128;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  if (height < minHeight) {
+    height = minHeight;
+  }
+  var _useDivaCore = useDivaCore(),
+    baseCdnUrl = _useDivaCore.state.apiConfig.baseCdnUrl;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
+  var polygonPoints;
+  if (isFirstItem && isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
+  } else if (isFirstItem) {
+    polygonPoints = '0 ' + (height - 8) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 8) + ', ' + '64 ' + height;
+  } else if (isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + height;
+  } else {
+    polygonPoints = '0 ' + (height - 8) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 8) + ', 64 ' + height;
+  }
+  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, baseCdnUrl, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
+  var div = /*#__PURE__*/jsxs("div", {
+    "data-test-id": "tabGroupItem",
+    children: [/*#__PURE__*/jsx("div", {
+      className: wcStepIconClass,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    }), /*#__PURE__*/jsx("span", {
+      "data-test-id": "tabGroupItemTitle",
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    })]
+  });
+  if (isLastItem && lastItemDiv) {
+    div = lastItemDiv;
+  }
+  return /*#__PURE__*/jsxs("svg", {
+    "data-test-id": "tabGroupItemSvg",
+    viewBox: '0 0 ' + width + ' ' + height,
+    ref: tabGroupItemRef,
+    style: {
+      height: height + 'px',
+      minHeight: minHeight
+    },
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+    children: [/*#__PURE__*/jsx("polygon", {
+      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+      points: polygonPoints
+    }), /*#__PURE__*/jsx("foreignObject", {
+      width: "100%",
+      height: "100%",
+      style: {
+        pointerEvents: 'none'
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+        children: div
+      })
+    })]
+  });
+};
+var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
+
+export { VerticalTabGroupItemStandard$1 as default };

package/build/esm/index-b1b32e48.js

@@ -0,0 +1,44 @@
+import { s as styleInject } from './index-42d6c87b.js';
+import classnames from 'classnames';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wcStepInfo = "wcStepInfo-IuGTY";
+var error = "error-PdtJS";
+var warning = "warning-fB-89";
+var info = "info-bs86-";
+var css_248z = ".wcStepInfo-IuGTY {\n  margin-top: 10px;\n  margin-left: 5px;\n  font-size: 15px;\n  line-height: 17px;\n}\n\n.error-PdtJS {\n  color: #dc3545;\n}\n\n.warning-fB-89 {\n  color: #ffc107;\n}\n\n.info-bs86- {\n  color: #828282;\n}\n";
+styleInject(css_248z);
+
+var StepInfo = function StepInfo(_ref) {
+  var stepInfo = _ref.stepInfo;
+  if (!stepInfo) return /*#__PURE__*/jsx(Fragment, {});
+  var text = stepInfo.text,
+    type = stepInfo.type;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcStepInfo, type === 'ERROR' ? error : undefined, type === 'INFO' ? info : undefined, type === 'WARNING' ? warning : undefined),
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  });
+};
+
+export { StepInfo as default };

package/build/esm/index-b2d44a3c.js

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

package/build/esm/index-b3a47eaa.js

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