@crystaldesign/diva-web-planner-react 25.14.0-beta.3 → 25.14.0-beta.30

package/build/esm/index-fcafaccf.js

@@ -0,0 +1,118 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-1282ca9e.js';
+import 'react';
+import InfoIcon from './index-b73b0671.js';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import SummaryOptionTree from './index-24c4fef4.js';
+import classnames from 'classnames';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tabgroupWrapper = "tabgroup-wrapper-4aobO";
+var mobile = "mobile-WRdEu";
+var tablet = "tablet-hQxkY";
+var tabgroupTitle = "tabgroup-title-1R284";
+var optionWrapper = "option-wrapper-pmVYq";
+var optionItem = "option-item-zmiHX";
+var subItemsWrapper = "sub-items-wrapper-B8kl2";
+var imageWrapper = "image-wrapper-egqGk";
+var image = "image-jeC--";
+var imagePlaceholder = "image-placeholder-gM-z9";
+var isDefined = "is-defined-d2h6S";
+var optionContent = "option-content-j3aZy";
+var optionTitleWrapper = "option-title-wrapper-9zVs5";
+var posNrClass = "pos-nr-class-Cbb-Q";
+var big = "big-zXYUG";
+var posNrWrapper = "pos-nr-wrapper-h63sR";
+var optionTitle = "option-title-ErJ-u";
+var optionDescription = "option-description-WL9GJ";
+var optionButton = "option-button-0C2Fa";
+var priceWrapper = "price-wrapper-mlLK5";
+var css_248z = ".tabgroup-wrapper-4aobO {\n  display: flex;\n  flex-direction: column;\n  border-radius: calc(var(--globalBorderRadius) * 4);\n  padding: 8px;\n  margin-bottom: 10px;\n  color: var(--secondaryColor);\n  border: 1px solid rgb(230, 230, 230);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY).tabgroup-wrapper-4aobO {\n  gap: 6px;\n  padding: 6px;\n  margin-bottom: 8px;\n}\n\n.tabgroup-title-1R284 {\n  font-weight: 300;\n  font-size: 14px;\n  margin-left: 6px;\n}\n\n.option-wrapper-pmVYq {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.option-item-zmiHX {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 8px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-item-zmiHX {\n  gap: 12px;\n  padding: 6px;\n}\n\n.sub-items-wrapper-B8kl2 {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border: 1px solid #e5e7eb;\n  border-radius: calc(var(--globalBorderRadius) * 2);\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .sub-items-wrapper-B8kl2 {\n  gap: 8px;\n}\n\n.sub-items-wrapper-B8kl2 .sub-items-wrapper-B8kl2 {\n  padding: 8px;\n  border-radius: calc(var(--globalBorderRadius));\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .sub-items-wrapper-B8kl2 .sub-items-wrapper-B8kl2 {\n  padding: 6px;\n}\n\n.sub-items-wrapper-B8kl2 .tabgroup-wrapper-4aobO {\n  margin-bottom: 0px;\n  border: 0px solid transparent;\n  padding-top: 0px;\n}\n\n.image-wrapper-egqGk {\n  width: 48px;\n  height: 48px;\n  position: relative;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .image-wrapper-egqGk {\n  width: 40px;\n  height: 40px;\n}\n\n.image-jeC-- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  border-radius: var(--globalBorderRadius);\n}\n\n.image-placeholder-gM-z9 {\n  width: 100%;\n  height: 100%;\n  background-color: #f3f4f6;\n  border-radius: var(--globalBorderRadius);\n}\n\n.is-defined-d2h6S {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Ccircle cx%3D%226%22 cy%3D%226%22 r%3D%226%22 fill%3D%22%2310B981%22%2F%3E  %3Cpath d%3D%22M3.5 6L5 7.5L8.5 4%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: 14px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  bottom: -5px;\n  right: -8px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .is-defined-d2h6S {\n  width: 12px;\n  height: 12px;\n  background-size: 12px;\n  bottom: -4px;\n  right: -7px;\n}\n\n.option-content-j3aZy {\n  flex: 1;\n}\n\n.option-title-wrapper-9zVs5 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 6px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-title-wrapper-9zVs5 {\n  gap: 4px;\n  margin-bottom: 4px;\n}\n\n.pos-nr-class-Cbb-Q {\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 16px;\n  border: 1px solid var(--primaryColor);\n  color: var(--secondaryColor);\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--primaryColor);\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .pos-nr-class-Cbb-Q {\n  font-size: 8px;\n  width: 12px;\n  height: 12px;\n}\n\n.pos-nr-class-Cbb-Q.big-zXYUG {\n  width: 24px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .pos-nr-class-Cbb-Q.big-zXYUG {\n  width: 20px;\n}\n\n.pos-nr-wrapper-h63sR {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .pos-nr-class-Cbb-Q {\n  gap: 2px;\n}\n\n.option-title-ErJ-u {\n  font-weight: 300;\n  font-size: 14px;\n}\n\n.option-description-WL9GJ {\n  color: #6b7280;\n  font-size: 14px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-title-ErJ-u,\n.mobile-WRdEu:not(.tablet-hQxkY) .option-description-WL9GJ {\n  font-size: 12px;\n}\n\n.option-button-0C2Fa {\n  padding: 6px;\n  border-radius: 6px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2217%22 height%3D%2218%22 viewBox%3D%220 0 17 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.043 2.6653L14.9536 1.5645C14.0535 0.654099 12.5866 0.654099 11.6856 1.5645L1.88323 11.4709C1.82148 11.5333 1.77635 11.6101 1.7526 11.6949L0.300686 16.8317C0.249228 17.0133 0.299895 17.2077 0.431311 17.3413C0.529478 17.4405 0.660103 17.4933 0.794686 17.4933C0.842186 17.4933 0.889686 17.4869 0.935603 17.4733L6.0189 16.0053C6.10281 15.9813 6.1796 15.9357 6.24135 15.8733L16.043 5.9677C16.48 5.5269 16.7199 4.9405 16.7199 4.3165C16.7199 3.6925 16.48 3.1061 16.043 2.6653ZM5.60802 15.0453L1.54123 16.2189L2.70339 12.1101L10.5971 4.1333L13.5017 7.0685L5.60802 15.0453ZM15.317 5.2341L14.2277 6.3349L11.3231 3.3997L12.4124 2.2989C12.9127 1.7933 13.7274 1.7941 14.2285 2.2989L15.3178 3.3997C15.5609 3.6445 15.6939 3.9709 15.6939 4.3173C15.6931 4.6629 15.5593 4.9885 15.317 5.2341Z%22 fill%3D%22%236F6F6F%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: 16px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n  width: 16px;\n  height: 16px;\n  transition: border 0.2s ease-in-out;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-button-0C2Fa {\n  padding: 4px;\n  border-radius: 4px;\n  width: 14px;\n  height: 14px;\n}\n\n.option-button-0C2Fa:hover {\n  border: 1px solid #e5e7eb;\n}\n\n.price-wrapper-mlLK5 {\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .price-wrapper-mlLK5 {\n  font-size: 10px;\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var OptionItem = function OptionItem(_ref) {
+  var _option$summaryItems, _option$targetArticle;
+  var option = _ref.option;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var subItems = Object.values((_option$summaryItems = option.summaryItems) !== null && _option$summaryItems !== void 0 ? _option$summaryItems : {});
+  return /*#__PURE__*/jsxs("div", {
+    className: subItemsWrapper,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(optionItem),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: imageWrapper,
+        children: [option.image ? /*#__PURE__*/jsx("img", {
+          src: option.image,
+          alt: option.title,
+          className: image
+        }) : /*#__PURE__*/jsx("div", {
+          className: imagePlaceholder
+        }), option.isDefined && /*#__PURE__*/jsx("div", {
+          className: isDefined
+        }), (option.contentItemId || option.optionContentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+          style: {
+            position: 'absolute',
+            top: -7,
+            right: -7,
+            '--infoIconSize': '14px'
+          },
+          item: _objectSpread(_objectSpread({}, option), {}, {
+            contentItemId: option.contentItemId || option.optionContentItemId
+          })
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: optionContent,
+        children: [/*#__PURE__*/jsx("div", {
+          className: optionTitleWrapper,
+          children: /*#__PURE__*/jsx("div", {
+            className: optionTitle,
+            dangerouslySetInnerHTML: {
+              __html: (option.quantity ? option.quantity + 'x ' : '') + option.title
+            }
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: optionDescription,
+          dangerouslySetInnerHTML: {
+            __html: option.description
+          }
+        }), !!option.price && !hidePrices && /*#__PURE__*/jsx("div", {
+          className: priceWrapper,
+          children: /*#__PURE__*/jsx("div", {
+            children: DivaUtils.formatPrice(option.price, viewHandler.productState.priceFormat)
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: posNrWrapper,
+        children: !!((_option$targetArticle = option.targetArticlePosNrs) !== null && _option$targetArticle !== void 0 && _option$targetArticle.length) && !option.includesAllPosNrs && option.targetArticlePosNrs.map(function (posNr) {
+          return /*#__PURE__*/jsx("div", {
+            className: classnames(posNrClass, posNr.toString().length >= 2 && big),
+            children: posNr
+          });
+        })
+      }), /*#__PURE__*/jsx("button", {
+        className: optionButton,
+        onClick: function onClick() {
+          window.lastNavigationType = 'SUMMARY_PALETTE';
+          viewHandler.paletteViewHandler.clickedOnSummaryPalette(option);
+        }
+      })]
+    }), !!subItems.length && subItems.map(function (item, index) {
+      return /*#__PURE__*/jsx(SummaryOptionTree, {
+        item: item
+      }, index);
+    })]
+  });
+};
+var OptionItem$1 = observer(OptionItem);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': OptionItem$1
+});
+
+export { OptionItem$1 as O, tablet as a, tabgroupTitle as b, index as i, mobile as m, optionWrapper as o, tabgroupWrapper as t };

package/build/esm/index-fd2d1231.js

@@ -0,0 +1,50 @@
+import { a as usePlannerUIHandler } from './index-1282ca9e.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+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 '@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';
+
+var AVL = function AVL(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  var rotation = (item.rotOfElement ? item.rotOfElement : 0) + (item.iconRotDeg ? item.iconRotDeg : 0);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, undefined);
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px',
+      transform: 'rotate(' + rotation + 'deg)'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.dockingPoint.AVL.avl, iconIsSelected ? plannerUIProps.classes.dockingPoint.AVL.avlSel : undefined)
+  });
+};
+var AVL$1 = observer(AVL);
+
+export { AVL$1 as default };

package/build/esm/index-fe0a4c8a.js

@@ -0,0 +1,96 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-1282ca9e.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import MultiToggleSwitch from './index-d28b9365.js';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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';
+
+var row = "row-F7HtB";
+var colum = "colum-t-N58";
+var title = "title-d5AfW";
+var toggle = "toggle-oIMCS";
+var css_248z = ".wrapper-Ec98j {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-bottom: 24px;\n}\n.multi-toggle-wrapper-RNQU4 {\n  width: calc(100% - 64px);\n  padding: 8px 32px;\n}\n\n.row-F7HtB {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 4px;\n  margin-bottom: 10px;\n  gap: 12px;\n}\n.colum-t-N58 {\n  width: 70%;\n}\n.colum-t-N58:first-child {\n  width: 30%;\n  margin: 10px 0px;\n  position: relative;\n}\n\n.colum-toggle-name-AfLOD {\n  flex-grow: 1;\n  height: 58px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  min-width: 33%;\n}\n\n.title-d5AfW {\n  text-align: left;\n  margin-left: 0;\n  margin-left: initial;\n  cursor: pointer;\n}\n\n.toggle-oIMCS {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
+styleInject(css_248z);
+
+var SliderComponent = function SliderComponent(_ref) {
+  var item = _ref.item,
+    style = _ref.style,
+    round = _ref.round,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggleValues = _useState4[0],
+    setToggleValues = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    curIndex = _useState6[0],
+    setCurIndex = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    allEndWithCM = _useState8[0],
+    setAllEndWithCM = _useState8[1];
+  useEffect(function () {
+    var itemList = item.groups.flatMap(function (group) {
+      return group.items;
+    });
+    var allEndWithCM = itemList.every(function (i) {
+      return i.text.endsWith('cm');
+    });
+    setItems(itemList);
+    setAllEndWithCM(allEndWithCM);
+    setToggleValues(itemList.map(function (i) {
+      return allEndWithCM ? i.text.replace('cm', '') : i.text;
+    }));
+    setCurIndex(itemList.findIndex(function (i) {
+      return i.sel;
+    }));
+  }, [item]);
+  var onChangeValue = function onChangeValue(index) {
+    setCurIndex(index);
+    var item = items[index];
+    if (item) viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
+  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 + (allEndWithCM ? ' (cm)' : '')
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(colum, toggle),
+      children: /*#__PURE__*/jsx(MultiToggleSwitch, {
+        values: toggleValues,
+        state: [curIndex, onChangeValue],
+        round: round
+      })
+    })]
+  });
+};
+var MultiToggle = observer(SliderComponent);
+
+export { MultiToggle as default };

package/build/esm/index-feefeb84.js

@@ -0,0 +1,233 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-1282ca9e.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-1003a25d.js';
+import Product from './index-d0f64e46.js';
+import Settings from './index-b42a1d73.js';
+import TabGroup from './index-ee5f7bec.js';
+import NavigationButtons from './index-73084fca.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import BasketAction from './index-4ee7152f.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-afed0e54.js';
+import ProgressBar from './index-c6f1c06e.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 '@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 './index-dadfe6e7.js';
+import './index-7160e3e5.js';
+import './index-6cd0f976.js';
+import './index-d84532f7.js';
+import 'sift';
+import './index-2de11734.js';
+import './index-ff579656.js';
+import './index-8313d46c.js';
+import './index-45dc04b5.js';
+import './index.module-8746e900.js';
+import './index-e66799e7.js';
+import 'react-switch';
+import './index-b73b0671.js';
+import './index-38bcbd09.js';
+import './index-b9c9122a.js';
+import 'react-countup';
+import './index-99560938.js';
+import 'react-dropdown';
+import './index-68e87a3b.js';
+import './index-0f885305.js';
+import './index-bfc347b1.js';
+import './index-70b64c17.js';
+import '@crystaldesign/content-box';
+import './index-67b27c74.js';
+import './index-22a3fcec.js';
+import './index-38609004.js';
+import './index-c29c856d.js';
+import './index-263b4946.js';
+import './index-24c4fef4.js';
+import './index-596416b8.js';
+import './index-ca91aa4e.js';
+import './index-2dadb690.js';
+import 'react-laag';
+import './index.module-6d4cae45.js';
+import './index-0bd524e1.js';
+import './index-57a58fe6.js';
+import './index-7c187ae4.js';
+import './index-167764bb.js';
+import './index-c21c3724.js';
+import './index-22ff8e10.js';
+import './index.module-40c7cce3.js';
+import './index-d77686fa.js';
+import './index-e1033b11.js';
+import './index-bdb8c0db.js';
+import './index-b55b7324.js';
+import './index-4316ef65.js';
+import './index-901ed0ee.js';
+import './index-e8897322.js';
+import './index-b42e3803.js';
+import './index-405885b0.js';
+import './index-c73f12dc.js';
+import './index-aa6c7eb4.js';
+import './index-df34ac79.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-dc9ac41b.js';
+import 'rc-slider';
+import './index-fe0a4c8a.js';
+import './index-d28b9365.js';
+import './index-2d7442cc.js';
+import './index-d21a5388.js';
+import 'react-confetti-explosion';
+import './index-c8eba202.js';
+import './index-da1bd7c9.js';
+import './index-429aa728.js';
+import 'react-qr-code';
+import './index-2d40c0c9.js';
+import './useCustomDimensions-2f176227.js';
+import './index-293cc74b.js';
+import './ussIsSticky-d75ebbd7.js';
+import './index-b2bdff57.js';
+import './index-5ae2531e.js';
+import './index-28aff909.js';
+import './index.module-08105ec3.js';
+import './index-6270f27d.js';
+import './index-bc2b95a4.js';
+import './index-3b91b4df.js';
+import './index-2228de6d.js';
+import './index.module-8e36a379.js';
+import './index-5eac269f.js';
+import './index-5e9bdeb9.js';
+import './index-2154fb42.js';
+import './index-9ab2ad6a.js';
+import '@mui/material';
+import './index-94b3af54.js';
+import './index-083e35b5.js';
+import './index-ba5e9df4.js';
+import './index-b8360e1b.js';
+import './index-a2b49ad0.js';
+import './index.module-358354fa.js';
+
+var wcConfigurator = "wcConfigurator-YOuy8";
+var landscape = "landscape-EyFBs";
+var portrait = "portrait-XiOPl";
+var wcConfiguratorProduct = "wcConfigurator-product-Ovdqk";
+var minExpanded = "min-expanded-aFvtw";
+var wcConfiguratorSettingsWrapper = "wc-configurator-settings-wrapper-ymkif";
+var expanded = "expanded-LXnio";
+var maxExpanded = "max-expanded-Q2hOy";
+var wcConfiguratorSettings = "wcConfigurator-settings-OLzdK";
+var wcConfiguratorSteps = "wcConfigurator-steps-1--dZ";
+var closeButtonVisible = "close-button-visible-y3GY8";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-xqcr5";
+var wcConfiguratorAction = "wcConfigurator-action-ycd5b";
+var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-mgMRu";
+var tablet = "tablet-W9NOW";
+var css_248z = ".wcConfigurator-YOuy8 {\n  position: relative;\n\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\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  overscroll-behavior-y: contain;\n}\n\n.wcConfigurator-YOuy8 *,\n.wcConfigurator-YOuy8 *::before,\n.wcConfigurator-YOuy8 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-YOuy8.landscape-EyFBs {\n  height: 100%;\n  width: 100%;\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl {\n  height: 100%;\n  width: 100%;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-Ovdqk {\n  position: absolute;\n  width: 63%;\n  max-width: calc(100% - 564px);\n  left: 0px;\n  top: 0;\n  height: 100%;\n}\n.min-expanded-aFvtw .wcConfigurator-product-Ovdqk {\n  width: calc(100% - 128px - 16px);\n  max-width: none;\n  max-width: initial;\n}\n\n.wc-configurator-settings-wrapper-ymkif {\n  position: absolute;\n  z-index: 600;\n  height: calc(100% - 32px);\n  width: calc(37% - 16px);\n  min-width: 550px;\n  right: 0;\n  padding: 16px 16px 16px 0;\n  background-color: var(--settingsBackgroundColor);\n  transition: width 0.45s;\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\n}\n\n.expanded-LXnio .wc-configurator-settings-wrapper-ymkif {\n  width: 70%;\n}\n\n.min-expanded-aFvtw .wc-configurator-settings-wrapper-ymkif {\n  width: calc(128px);\n  min-width: 0;\n  min-width: initial;\n}\n.max-expanded-Q2hOy .wc-configurator-settings-wrapper-ymkif {\n  width: calc(100% - 16px);\n  z-index: 801;\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-OLzdK {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n\n  overflow-y: hidden;\n  overflow-x: hidden;\n  overflow: visible;\n  z-index: 100;\n  right: calc(128px + 4px + 16px);\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-1--dZ {\n  position: absolute;\n  z-index: 300;\n  right: 16px;\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n  width: 128px;\n}\n.close-button-visible-y3GY8 .wcConfigurator-steps-1--dZ {\n  top: 80px;\n  height: calc(100% - 32px - 4px - 50px - 64px);\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-xqcr5 {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n  height: 50px;\n  right: calc(128px + 4px + 16px);\n  bottom: 16px;\n  z-index: 200;\n}\n\n.min-expanded-aFvtw .wcConfigurator-settings-actions-xqcr5 {\n  overflow: hidden;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-ycd5b {\n  position: absolute;\n  width: 128px;\n  height: 50px;\n  right: 16px;\n  bottom: 16px;\n  z-index: 200;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-LXnio .wcConfigurator-settings-OLzdK,\n.max-expanded-Q2hOy .wcConfigurator-settings-OLzdK,\n.expanded-LXnio .wcConfigurator-settings-actions-xqcr5,\n.max-expanded-Q2hOy .wcConfigurator-settings-actions-xqcr5 {\n  width: calc(100% - 128px - 16px - 4px);\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl,\n.landscape-EyFBs.wcConfigurator-YOuy8 {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-EyFBs .wcConfigurator-product-Ovdqk {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-EyFBs .wcConfigurator-settings-OLzdK {\n  display: none;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\n} */\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-EyFBs .wcConfigurator-steps-1--dZ {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-EyFBs .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-EyFBs .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-XiOPl .wcConfigurator-product-Ovdqk {\n  top: 0px;\n  left: 0px;\n  height: var(--configuratorProductHeight);\n  transition: height 0.2s ease-out;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\n  left: 0px;\n  top: auto;\n  top: initial;\n  transition: height 0.2s ease-out;\n  bottom: 0px;\n  width: 100%;\n  z-index: 1000;\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\n  position: relative;\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  transition: none 0s ease 0s;\n  transition: initial;\n  flex-grow: 10;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-XiOPl .wcConfigurator-action-ycd5b,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-mgMRu {\n  position: relative;\n  transition: bottom 0.2s ease-out;\n  width: 50px;\n  height: var(--configuratorTabGroupHeight);\n  background: no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 600;\n}\n\n.landscape-EyFBs,\n.portrait-XiOPl {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-W9NOW {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\n}\n\n.mobile-settings-wrapper-YbBMz {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.wcConfigurator-YOuy8 ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
+styleInject(css_248z);
+
+var Standard = function Standard(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("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.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        id: "wcConfigurator-wrapper",
+        ref: function ref(wrapperRef) {
+          return viewHandler.uiState.setWrapperRef(wrapperRef);
+        },
+        style: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          bottom: 0,
+          left: 0
+        },
+        children: [/*#__PURE__*/jsx(Product, {
+          className: wcConfiguratorProduct
+        }), viewHandler.uiState.isInMobileView ? /*#__PURE__*/jsx(Settings, {
+          tabgroupElement: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(TabGroup, {
+              className: wcConfiguratorSteps,
+              showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+            }), /*#__PURE__*/jsx(BasketMobile, {
+              className: mobileActionAfterTabgroups
+            }), /*#__PURE__*/jsx(ProgressBar, {})]
+          })
+        }) : /*#__PURE__*/jsxs("div", {
+          className: wcConfiguratorSettingsWrapper,
+          children: [/*#__PURE__*/jsx(TabGroup, {
+            className: wcConfiguratorSteps
+          }), /*#__PURE__*/jsx(Settings, {
+            className: wcConfiguratorSettings
+          }), /*#__PURE__*/jsx(NavigationButtons, {
+            className: wcConfiguratorSettingsActions,
+            showCheckoutButtons: true
+          }), /*#__PURE__*/jsx(BasketAction, {
+            containerClassName: wcConfiguratorAction,
+            showCheckoutButtons: false
+          })]
+        })]
+      })
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#d60084',
+  '--secondaryColor': '#4b4b4b',
+  '--thirdColor': '#e5e5e5e5',
+  '--articlePosNrRadius': '50%',
+  '--articlePosNrSize': '1.5rem',
+  '--galleryItemRadius': '50%',
+  '--galleryItemRowCount': '5',
+  '--galleryItemMargin': '0.5%',
+  '--galleryItemRowCountSmall': '6',
+  '--galleryItemMarginSmall': '0.3%',
+  '--galleryItemBorder': '0px',
+  '--galleryItemBorderColor': '#e8e9ed',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--fontWeight1': '300',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--tabGroupBackground': 'unset',
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.9)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '12px',
+  '--settingsScrollerPaddingLeft': '12px',
+  '--configuratorActionHeight': '50px',
+  '--configuratorActionForthWidth': 'calc(100% - 56px)',
+  '--configuratorActionBackWidth': '50px',
+  '--globalBorderRadius': '3px',
+  '--mobile-tabgroup-drawer-border-radius': '12px',
+  '--buttons-border-radius': '8px'
+};
+var index = observer(Standard);
+
+export { index as default };

package/build/esm/index-ff0e0b1f.js

@@ -0,0 +1,130 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-1282ca9e.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import { getLogger, useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+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 LOG = getLogger('Planner', 'InfoBox');
+var ContentItemWrapper = function ContentItemWrapper(_ref) {
+  var direction = _ref.direction,
+    mountElement = _ref.mountElement,
+    drawerStyle = _ref.drawerStyle;
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$actions = _useDivaCore.actions,
+    openDrawerMenu = _useDivaCore$actions.openDrawerMenu,
+    closeDrawerMenu = _useDivaCore$actions.closeDrawerMenu;
+  useEffect(function () {
+    if (viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId) {
+      setOpen(true);
+      var isMobile = viewHandler.getIsInMobileView();
+      var onClose = function onClose() {
+        closeDrawerMenu('content-item', true);
+        viewHandler.settingsState.setContentItemId();
+      };
+      var content = /*#__PURE__*/jsx(ContentItemComponent, {
+        onClose: onClose,
+        contentItemId: viewHandler.settingsState.contentItemId,
+        wrapperStyle: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        headerWrapperStyle: {
+          borderTopRightRadius: '8px',
+          borderTopLeftRadius: '8px'
+        },
+        onContentItemLoaded: function onContentItemLoaded(title) {
+          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+            id: viewHandler.settingsState.contentItemId,
+            title: title !== null && title !== void 0 ? title : undefined
+          });
+        }
+      });
+      if (isMobile) {
+        var _viewHandler$uiState$;
+        openDrawerMenu({
+          id: 'content-item',
+          content: content,
+          onClose: onClose,
+          open: true,
+          hideCloseButton: true,
+          showOverlay: true,
+          noModal: false,
+          direction: 'bottom',
+          mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
+          handleInternScroll: true
+        });
+      } else {
+        var _ref2;
+        openDrawerMenu({
+          id: 'content-item',
+          content: content,
+          onClose: onClose,
+          open: true,
+          hideCloseButton: true,
+          showOverlay: false,
+          noModal: true,
+          direction: direction,
+          mountElement: (_ref2 = mountElement !== null && mountElement !== void 0 ? mountElement : viewHandler.productState.productElement) !== null && _ref2 !== void 0 ? _ref2 : undefined,
+          handleInternScroll: true,
+          drawerStyle: _objectSpread(_objectSpread({
+            position: 'absolute',
+            zIndex: 550,
+            maxHeight: 600,
+            top: 0,
+            bottom: 'unset',
+            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
+          }, direction === 'right' ? {
+            borderTopLeftRadius: '16px',
+            borderBottomLeftRadius: '16px'
+          } : {
+            borderTopRightRadius: '16px',
+            borderBottomRightRadius: '16px'
+          }), drawerStyle),
+          wrapperStyle: _objectSpread({
+            zIndex: 550,
+            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
+          }, direction === 'right' ? {
+            borderTopLeftRadius: '16px',
+            borderBottomLeftRadius: '16px'
+          } : {
+            borderTopRightRadius: '16px',
+            borderBottomRightRadius: '16px'
+          })
+        });
+      }
+    } else if (open) {
+      closeDrawerMenu('content-item');
+      setTimeout(function () {
+        setOpen(false);
+      }, 400);
+    }
+  }, [viewHandler.settingsState.contentItemVisible, viewHandler.settingsState.contentItemId]);
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+var ContentItemWrapper$1 = observer(ContentItemWrapper);
+
+export { ContentItemWrapper$1 as default };