@crystaldesign/diva-web-planner-react 25.4.1-rc.0 → 25.4.2-rc.0

package/build/esm/index-d8c61fd5.js

@@ -0,0 +1,283 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-86080902.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import Dropdown from 'react-dropdown';
+import RALFilter from './index-7e3091af.js';
+import Searchbar from './index-f2e2855d.js';
+import Arrow from './index-bb3996d1.js';
+import InfoIcon from './index-651e2250.js';
+import PricePreview from './index-601edf12.js';
+import { jsx, jsxs, Fragment } 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 '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-31712ae9.js';
+import './index-bd839ac8.js';
+import '@crystaldesign/content-box';
+import './index-d6d7dff0.js';
+
+var container = "container-sQHMr";
+var dropdownRoot = "Dropdown-root-elxKM";
+var dropdownControl = "Dropdown-control-K74AD";
+var dropdownMenu = "dropdown-menu-Zxk-s";
+var row = "row-qZvF1";
+var colum = "colum-BalsH";
+var dropOption = "dropOption-WucMK";
+var text = "text-cICxb";
+var textWithPrice = "text-with-price-o4SIM";
+var css_248z = ".container-sQHMr {\n  display: inline-block;\n  width: 100%;\n}\n.container-sQHMr .Dropdown-root-elxKM {\n  box-shadow: var(--boxShadowHover);\n}\n\n.container-sQHMr .Dropdown-control-K74AD {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 52px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n.container-sQHMr .dropdown-menu-Zxk-s {\n  max-height: 400px !important;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n}\n\n.row-qZvF1 {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n  justify-content: space-between;\n  align-items: center;\n  --infoIconSize: 24px;\n}\n.colum-BalsH {\n  width: calc(50% - 32px);\n  margin: 3px;\n}\n\n.dropOption-WucMK {\n  width: 100%;\n  position: relative;\n}\n\n.text-cICxb {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.text-with-price-o4SIM {\n  padding-right: 64px;\n}\n";
+styleInject(css_248z);
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var GroupDropdown = function GroupDropdown(_ref) {
+  var _filteredGroups$, _filteredGroups$index, _filteredGroups$index2;
+  var filteredGroups = _ref.filteredGroups,
+    PaletteComponent = _ref.PaletteComponent,
+    id = _ref.id,
+    item = _ref.item,
+    showSearchBar = _ref.showSearchBar,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    actGroup = _useState2[0],
+    setActGroup = _useState2[1];
+  var options = [];
+  var selectedItem;
+  var indexOfSelGroup = -1;
+  var indexOfSelGroupItem = -1;
+  var indexOfActGroup = -1;
+  var displayParentNameInDropDown = false;
+  var actDropdownValue = '---';
+  if (filteredGroups[0] && (_filteredGroups$ = filteredGroups[0]) !== null && _filteredGroups$ !== void 0 && (_filteredGroups$ = _filteredGroups$.items) !== null && _filteredGroups$ !== void 0 && _filteredGroups$[0]) {
+    var _filteredGroups$2;
+    if (((_filteredGroups$2 = filteredGroups[0]) === null || _filteredGroups$2 === void 0 || (_filteredGroups$2 = _filteredGroups$2.items) === null || _filteredGroups$2 === void 0 ? void 0 : _filteredGroups$2[0]).parentName) {
+      displayParentNameInDropDown = true;
+    }
+    var _loop = function _loop() {
+      var filteredGroup = filteredGroups[i];
+      if (!selectedItem) {
+        selectedItem = filteredGroup.items.find(function (item) {
+          return item.sel;
+        });
+        if (selectedItem) {
+          indexOfSelGroup = i;
+        }
+      }
+      var firstOpv = filteredGroup.items[0];
+      if (displayParentNameInDropDown) {
+        var group = options.find(function (option) {
+          return option.key == firstOpv.parentName;
+        });
+        if (!group) {
+          group = {
+            type: 'group',
+            key: firstOpv.parentName,
+            name: /*#__PURE__*/jsxs("div", {
+              className: dropOption,
+              children: [/*#__PURE__*/jsx("div", {
+                className: classnames(text, firstOpv.pricePreviewPromise ? textWithPrice : undefined),
+                dangerouslySetInnerHTML: {
+                  __html: firstOpv.parentName
+                }
+              }), firstOpv.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+                asyncPricePreview: firstOpv.pricePreviewPromise
+              })]
+            }),
+            items: []
+          };
+          options.push(group);
+        }
+        group.items.push({
+          label: /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            children: /*#__PURE__*/jsx("div", {
+              className: classnames(text, firstOpv.pricePreviewPromise ? textWithPrice : undefined),
+              dangerouslySetInnerHTML: {
+                __html: filteredGroup.name
+              }
+            })
+          }),
+          value: filteredGroup.name
+        });
+        if (indexOfSelGroup == i) {
+          indexOfSelGroupItem = group.items.length - 1;
+          indexOfSelGroup = options.findIndex(function (group) {
+            return group.key == firstOpv.parentName;
+          });
+        }
+      } else {
+        options.push({
+          label: /*#__PURE__*/jsxs("div", {
+            className: dropOption,
+            children: [/*#__PURE__*/jsx("div", {
+              className: classnames(text, firstOpv.pricePreviewPromise ? textWithPrice : undefined),
+              dangerouslySetInnerHTML: {
+                __html: filteredGroup.name
+              }
+            }), firstOpv.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+              asyncPricePreview: firstOpv.pricePreviewPromise
+            })]
+          }),
+          value: filteredGroup.name
+        });
+      }
+    };
+    for (var i = 0; i < filteredGroups.length; i++) {
+      _loop();
+    }
+    indexOfActGroup = indexOfSelGroup;
+    if (actGroup) {
+      indexOfActGroup = filteredGroups.findIndex(function (val) {
+        return val.name == actGroup;
+      });
+    }
+    if (item.currentItemsFilter) {
+      actDropdownValue = '---';
+    } else if (actGroup) {
+      actDropdownValue = actGroup;
+    } else {
+      var _options$indexOfSelGr;
+      if ((_options$indexOfSelGr = options[indexOfSelGroup]) !== null && _options$indexOfSelGr !== void 0 && _options$indexOfSelGr.label) {
+        actDropdownValue = {
+          label: /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            children: /*#__PURE__*/jsx("div", {
+              className: text,
+              dangerouslySetInnerHTML: {
+                __html: options[indexOfSelGroup].value
+              }
+            })
+          }),
+          value: options[indexOfSelGroup].value
+        };
+        indexOfActGroup = indexOfSelGroup;
+      } else if (indexOfSelGroup >= 0) {
+        var _options$indexOfSelGr2;
+        var _item = (_options$indexOfSelGr2 = options[indexOfSelGroup]) === null || _options$indexOfSelGr2 === void 0 || (_options$indexOfSelGr2 = _options$indexOfSelGr2.items) === null || _options$indexOfSelGr2 === void 0 ? void 0 : _options$indexOfSelGr2[indexOfSelGroupItem];
+        actDropdownValue = {
+          label: /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            children: /*#__PURE__*/jsx("div", {
+              className: text,
+              dangerouslySetInnerHTML: {
+                __html: _item.value
+              }
+            })
+          }),
+          value: _item.value
+        };
+        var index = indexOfSelGroupItem;
+        for (var _i = 0; _i < options.length && _i < indexOfSelGroup; _i++) {
+          index = index + options[_i].items.length;
+        }
+        indexOfActGroup = index;
+      }
+    }
+  }
+  var onGroupSel = function onGroupSel(val) {
+    var _item$deleteCurFilter;
+    (_item$deleteCurFilter = item.deleteCurFilter) === null || _item$deleteCurFilter === void 0 || _item$deleteCurFilter.call(item);
+    setActGroup(val.value);
+  };
+  var allItems = [];
+  var _iterator = _createForOfIteratorHelper(filteredGroups),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _row = _step.value;
+      var _iterator2 = _createForOfIteratorHelper(_row.items),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var e = _step2.value;
+          allItems.push(e);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var uiItems = item.currentItemsFilter ? allItems : (_filteredGroups$index = filteredGroups[indexOfActGroup]) === null || _filteredGroups$index === void 0 ? void 0 : _filteredGroups$index.items;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [showSearchBar && /*#__PURE__*/jsx(Searchbar, {
+      doShowFilter: true,
+      style: {
+        margin: '6px 2px 6px 0px',
+        width: 'calc(100% - 10px)',
+        maxWidth: 'unset',
+        border: '1px solid lightgrey'
+      },
+      isInScroller: false,
+      item: item
+    }), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: row,
+        children: [/*#__PURE__*/jsx("div", {
+          className: colum,
+          children: /*#__PURE__*/jsx(RALFilter, {
+            id: id,
+            dropdownRootClass: dropdownRoot
+          })
+        }), ((_filteredGroups$index2 = filteredGroups[indexOfActGroup]) === null || _filteredGroups$index2 === void 0 ? void 0 : _filteredGroups$index2.contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+          item: filteredGroups[indexOfActGroup],
+          style: {
+            zIndex: 100,
+            top: 'unset',
+            left: 'unset',
+            position: 'relative'
+          }
+        }, filteredGroups[indexOfActGroup].key), /*#__PURE__*/jsx("div", {
+          className: colum,
+          children: /*#__PURE__*/jsx(Dropdown, {
+            className: classnames(dropdownRoot),
+            controlClassName: dropdownControl,
+            options: options,
+            value: actDropdownValue,
+            onChange: onGroupSel,
+            menuClassName: dropdownMenu,
+            arrowClosed: /*#__PURE__*/jsx(Arrow, {
+              open: false
+            }),
+            arrowOpen: /*#__PURE__*/jsx(Arrow, {
+              open: true
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: contentInnerClassName,
+        children: uiItems === null || uiItems === void 0 ? void 0 : uiItems.map(function (item, i) {
+          return /*#__PURE__*/jsx(PaletteComponent, {
+            paletteId: id,
+            item: item,
+            hidePricePreview: true
+          }, i);
+        })
+      })]
+    })]
+  });
+};
+var GroupDropdown$1 = observer(GroupDropdown);
+
+export { GroupDropdown$1 as default };

package/build/esm/index-d926a467.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-86080902.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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';
+
+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 SettingsItemDefaultTemplate = function SettingsItemDefaultTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Default"
+  }));
+};
+
+export { SettingsItemDefaultTemplate as default };

package/build/esm/index-d9357d56.js

@@ -0,0 +1,154 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-86080902.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import SettingsHeaderContainer from './index-b582ce78.js';
+import { S as SettingsItem } from './index-c6a70c10.js';
+import classnames from 'classnames';
+import TotalPrice from './index-0cccea8d.js';
+import { jsxs, jsx } 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 '@crystaldesign/widget-contact-form';
+import './index-ac507b39.js';
+import './index-97dbc5e2.js';
+import './index-86b5db61.js';
+import './index-1632c01e.js';
+import 'react-laag';
+import './index-b8bd4b38.js';
+import 'sift';
+import './index-b2a8f5dc.js';
+import './index-15c42a32.js';
+import './index-0f9ddc84.js';
+import './index-b9a12d96.js';
+import './index.module-526b75eb.js';
+import './index-6f27ce4c.js';
+import 'react-switch';
+import './index-651e2250.js';
+import './index-601edf12.js';
+import './index-d8c61fd5.js';
+import 'react-dropdown';
+import './index-7e3091af.js';
+import './index-31712ae9.js';
+import './index-bb3996d1.js';
+import './index-bd839ac8.js';
+import '@crystaldesign/content-box';
+import './index-d6d7dff0.js';
+import './index-f2e2855d.js';
+import './index-b00cf8a4.js';
+import './index-6f5c9d3b.js';
+import './index-dcb72d19.js';
+import './index-dae3530f.js';
+import './index-0b2781d4.js';
+import './index-6cdf85c1.js';
+import './index-652e4260.js';
+import './index-8af8142c.js';
+import './index-d64dfc2f.js';
+import './index-2d55655e.js';
+import './index-d926a467.js';
+import './index-1dc9cd61.js';
+import './index-216df66a.js';
+import './index-698f7e58.js';
+import './index.module-fb83b670.js';
+import './index-a46823d9.js';
+import './index-7eb7b86c.js';
+import './index-2b33d563.js';
+import './index-c150032a.js';
+import './index-d0878a15.js';
+import './index-08196339.js';
+import './index-d17569d9.js';
+import './index.module-96a43ee2.js';
+import './index-c92e204c.js';
+import './index-db4ee612.js';
+import './index-705188e7.js';
+import './index-9039fb8e.js';
+import './index.module-0f503474.js';
+import 'react-select';
+import './index-2ae293e1.js';
+import './index-05c81b90.js';
+import './index.module-2090f1f7.js';
+import './index-c9b92675.js';
+import 'qrcode.react';
+import './index-b798f21e.js';
+import './index-1a89cda9.js';
+import './index-63e51b7c.js';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-e035d191.js';
+import './index-3ce0d7ea.js';
+
+var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
+var expanded = "expanded-r-uGX";
+var minExpanded = "minExpanded-oyaLK";
+var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n";
+styleInject(css_248z);
+
+var SettingsScroller = function SettingsScroller(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var settingsScrollerElement = useRef(null);
+  var itemPalettesArr = [];
+  var pairWithOptionsToGroup = {};
+  useEffect(function () {
+    if (settingsScrollerElement.current) {
+      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
+      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
+    }
+    return function () {};
+  }, [settingsScrollerElement]);
+  var style = {};
+  if (viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) {
+    style.height = '100%';
+  } else {
+    var _viewHandler$settings, _viewHandler$settings2;
+    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
+  }
+  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
+    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
+    var paletteId = Number(itemPalette.id);
+    var groupName = itemPalette.pairWithOptionsToGroup;
+    if (groupName && itemPalette.visible) {
+      if (!pairWithOptionsToGroup[groupName]) pairWithOptionsToGroup[groupName] = [];
+      pairWithOptionsToGroup[groupName].push(paletteId);
+    }
+    if (!itemPalette.isRenderedNotInSettingPalette) itemPalettesArr.push([paletteId, itemPalette]);
+  }
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsMinExpanded) viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MIN_CONFIG_SETTINGS');else viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MAX_CONFIG_SETTINGS');
+  }, [viewHandler.uiState.configSettingsIsExpanded, viewHandler.uiState.configSettingsIsMinExpanded]);
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined),
+    id: "wcConfigurator-settings-scroller",
+    ref: settingsScrollerElement,
+    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && /*#__PURE__*/jsx(SettingsHeaderContainer, {
+      isScroller: true
+    }, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsxs("div", {
+      children: [itemPalettesArr.map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          index = _ref3[0],
+          item = _ref3[1];
+        return /*#__PURE__*/jsx(SettingsItem, {
+          item: item,
+          id: index,
+          groupSize: item.pairWithOptionsToGroup ? pairWithOptionsToGroup[item.pairWithOptionsToGroup].length : undefined
+        }, index);
+      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
+    })]
+  });
+};
+var SettingsScroller$1 = observer(SettingsScroller);
+
+export { SettingsScroller$1 as default };

package/build/esm/index-d985f7f2.js

@@ -0,0 +1,150 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-86080902.js';
+import 'react';
+import { w as wholeWrapper, n as notExpanded } from './index.module-1c6231db.js';
+import TabGroups from './index-43b9aadd.js';
+import TabGroupOptions from './index-1e6ccdf0.js';
+import { observer } from 'mobx-react-lite';
+import ProduktDetails from './index-6ea2b29b.js';
+import Collapsible from 'react-collapsible';
+import Price from './index-2bdd9a9a.js';
+import classnames from 'classnames';
+import JsonViewer from './index-344969f5.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 './index.module-2d8323d8.js';
+import 'react-json-view-lite';
+import './react-json-viewer-d95a265a.js';
+
+var menuPoint = "menu-point-Bz5zM";
+var collapsibleHeader = "collapsibleHeader-lzT9Y";
+var tabGroupWrapper = "tab-group-wrapper-mSLB-";
+var css_248z = ".menu-point-Bz5zM {\n  font-size: 22px;\n  padding: 0px 0px;\n  padding: 10px 0;\n  background-color: var(--primaryColor);\n  border-bottom: 1px solid;\n  width: 100%;\n  text-align: center;\n  margin-left: 0px;\n  color: white;\n  font-weight: 600;\n}\n.collapsibleHeader-lzT9Y {\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  text-align: center;\n  background-color: #bbbbbb;\n  color: black;\n  border-radius: 5px;\n  margin: 5% 1% 1% 1%;\n  transition: background-color 0.3s;\n  padding: 1% 0%;\n  cursor: pointer;\n}\n.collapsibleHeader-lzT9Y:hover {\n  background-color: var(--primaryColor);\n  color: white;\n}\n.tab-group-wrapper-mSLB- {\n  width: 90%;\n  margin-left: 4%;\n  background-color: white;\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 OptionTree = function OptionTree(_ref) {
+  var _articles$viewHandler, _hiddenOptions$tabGro, _article$getPlannerCo;
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var configTree = viewHandler.tabGroupState.allTabGroups;
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var hiddenOptions = viewHandler.divaWebPlanner.getHiddenOptions();
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  var tree = Object.values(configTree);
+  var hiddenTree = Object.values((_hiddenOptions$tabGro = hiddenOptions === null || hiddenOptions === void 0 ? void 0 : hiddenOptions.tabGroups) !== null && _hiddenOptions$tabGro !== void 0 ? _hiddenOptions$tabGro : {});
+  var canClick = false;
+  tree = tree.filter(function (item) {
+    return item.type == 'OPTION';
+  });
+  var CollapsibleProps = {
+    open: true,
+    easing: 'ease-in',
+    transitionTime: 200
+  };
+  if (!article) {
+    canClick = true;
+  }
+  var mat3D = article === null || article === void 0 || (_article$getPlannerCo = article.getPlannerConfigData) === null || _article$getPlannerCo === void 0 ? void 0 : _article$getPlannerCo.call(article, {}).config;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(wholeWrapper, notExpanded, props.className),
+    children: [/*#__PURE__*/jsx("a", {
+      className: menuPoint,
+      children: "Options \xDCbersicht"
+    }), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Produktdetails"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: !canClick && /*#__PURE__*/jsx(ProduktDetails, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Preise"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx(Price, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Optionsbaum"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: tree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Versteckte Optionen"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: hiddenTree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "3D MAT"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: mat3D && /*#__PURE__*/jsx(JsonViewer, {
+        isExpanded: true,
+        collapsed: 5,
+        json: mat3D
+      })
+    }))]
+  }));
+};
+var OptionTree$1 = observer(OptionTree);
+
+export { OptionTree$1 as default };