@crystaldesign/diva-web-planner-react 26.3.0-beta.10 → 26.3.0-beta.12

package/build/esm/{index-1cc0af77.js → index-a4a5ceec.js}

@@ -3,11 +3,13 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
-import React, { useState, useEffect } from 'react';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
+import React, { useState, useMemo, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
 import { DivaUtils } from '@crystaldesign/diva-core';
+import { ModuleRegistry, AllCommunityModule, themeQuartz, colorSchemeDarkBlue } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -21,18 +23,16 @@ import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
 
-var table = "table-gRvJg";
-var column = "column-bLCew";
 var scrollable = "scrollable-XTWgE";
+var gridContainer = "gridContainer-Ro7Si";
 var tableDescription = "tableDescription--qUD1";
-var optionRow = "optionRow-grqJU";
 var opvStatusVisible = "opvStatusVisible-4YLGY";
 var opvStatusHidden = "opvStatusHidden-5rPCm";
 var visibleHistory = "visibleHistory-CZ7xR";
 var visibleHistoryEntry = "visibleHistoryEntry-LHSfd";
 var visibleHistoryEntryHidden = "visibleHistoryEntryHidden-8Lvmq";
 var visibleHistoryEntryShown = "visibleHistoryEntryShown-jDoFr";
-var css_248z = ".table-gRvJg {\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n  font-family: var(--diva-typography-font-family);\n  font-size: 13px;\n  background: #fff;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.table-gRvJg thead {\n  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.table-gRvJg th,\n.table-gRvJg td {\n  padding: 10px 14px;\n  text-align: left;\n  border-bottom: 1px solid #e2e8f0;\n}\n\n.table-gRvJg tbody tr:hover {\n  background: #f7fafc;\n}\n\n.column-bLCew {\n  text-align: left;\n}\n\n.scrollable-XTWgE {\n  overflow: auto;\n  width: 100%;\n  padding: 16px;\n  height: calc(100% - 60px);\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tableDescription--qUD1 {\n  margin: 8px 0 12px;\n  font-size: 13px;\n  color: #64748b;\n  line-height: 1.4;\n}\n\n.optionRow-grqJU {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.optionRow-grqJU:hover {\n  background: #edf2f7;\n}\n\n.opvStatusVisible-4YLGY {\n  color: #38a169;\n  font-weight: 500;\n}\n\n.opvStatusHidden-5rPCm {\n  color: #e53e3e;\n}\n\n.visibleHistory-CZ7xR {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.visibleHistoryEntry-LHSfd {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.visibleHistoryEntryHidden-8Lvmq {\n  background: #feb2b2;\n  color: #742a2a;\n}\n\n.visibleHistoryEntryShown-jDoFr {\n  background: #9ae6b4;\n  color: #276749;\n}\n";
+var css_248z = ".column-bLCew {\n  text-align: left;\n}\n\n.scrollable-XTWgE {\n  overflow: auto;\n  width: 100%;\n  padding: 16px;\n  height: 100%;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.gridContainer-Ro7Si {\n  width: 100%;\n  min-height: 150px;\n  height: calc(100% - 36px);\n}\n\n.tableDescription--qUD1 {\n  margin: 8px 0 12px;\n  font-size: 13px;\n  color: #64748b;\n  line-height: 1.4;\n}\n\n.optionRow-grqJU {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.optionRow-grqJU:hover {\n  background: #edf2f7;\n}\n\n.opvStatusVisible-4YLGY {\n  color: #38a169;\n  font-weight: 500;\n}\n\n.opvStatusHidden-5rPCm {\n  color: #e53e3e;\n}\n\n.visibleHistory-CZ7xR {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.visibleHistoryEntry-LHSfd {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.visibleHistoryEntryHidden-8Lvmq {\n  background: #feb2b2;\n  color: #742a2a;\n}\n\n.visibleHistoryEntryShown-jDoFr {\n  background: #9ae6b4;\n  color: #276749;\n}\n\n/* Dark mode */\n.darkmode .opvStatusVisible-4YLGY,\nbody.darkmode .opvStatusVisible-4YLGY {\n  color: #68d391;\n}\n.darkmode .opvStatusHidden-5rPCm,\nbody.darkmode .opvStatusHidden-5rPCm {\n  color: #fc8181;\n}\n.darkmode .visibleHistoryEntryHidden-8Lvmq,\nbody.darkmode .visibleHistoryEntryHidden-8Lvmq {\n  background: rgba(254, 178, 178, 0.3);\n  color: #feb2b2;\n}\n.darkmode .visibleHistoryEntryShown-jDoFr,\nbody.darkmode .visibleHistoryEntryShown-jDoFr {\n  background: rgba(154, 230, 180, 0.3);\n  color: #9ae6b4;\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; }
@@ -40,6 +40,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
+ModuleRegistry.registerModules([AllCommunityModule]);
 function groupOptionsByTabGroup(tabGroups, article) {
   var result = [];
   for (var _i = 0, _Object$keys = Object.keys(tabGroups); _i < _Object$keys.length; _i++) {
@@ -89,6 +90,10 @@ var OptionTreeTable = function OptionTreeTable(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inspectRefreshed = _useState2[0],
     setInspectRefreshed = _useState2[1];
+  var darkMode = typeof document !== 'undefined' && document.body.classList.contains('darkmode');
+  var gridTheme = useMemo(function () {
+    return darkMode ? themeQuartz.withPart(colorSchemeDarkBlue) : themeQuartz;
+  }, [darkMode]);
   useEffect(function () {
     var set = viewHandler.divaWebPlanner.actSet();
     if (!set || inspectRefreshed) return;
@@ -144,8 +149,14 @@ var OptionTreeTable = function OptionTreeTable(_ref) {
       };
     });
   }, [tabGroups, article]);
+  var rowData = useMemo(function () {
+    return optionsGrouped.flatMap(function (_ref6) {
+      var options = _ref6.options;
+      return options;
+    });
+  }, [optionsGrouped]);
   var handleOptionClick = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(optionCodex, posNr) {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(optionCodex, posNr) {
       var configStep;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -171,9 +182,95 @@ var OptionTreeTable = function OptionTreeTable(_ref) {
       }, _callee);
     }));
     return function handleOptionClick(_x, _x2) {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
+  var columnDefs = useMemo(function () {
+    return [{
+      field: 'tabGroupTitle',
+      headerName: 'Tab group',
+      flex: 1,
+      minWidth: 100
+    }, {
+      field: 'option.codex',
+      headerName: 'Option',
+      flex: 1,
+      minWidth: 80,
+      valueGetter: function valueGetter(p) {
+        var _p$data;
+        return (_p$data = p.data) === null || _p$data === void 0 || (_p$data = _p$data.option) === null || _p$data === void 0 ? void 0 : _p$data.codex;
+      }
+    }, {
+      field: 'option.title',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 120,
+      valueGetter: function valueGetter(p) {
+        var _p$data2;
+        return (_p$data2 = p.data) === null || _p$data2 === void 0 || (_p$data2 = _p$data2.option) === null || _p$data2 === void 0 ? void 0 : _p$data2.title;
+      }
+    }, {
+      headerName: 'Visible',
+      flex: 1,
+      minWidth: 80,
+      cellRenderer: function cellRenderer(params) {
+        var _params$data;
+        var info = (_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data.inspectInfo;
+        if (info == null) return '-';
+        return info.visible ? /*#__PURE__*/jsx("span", {
+          className: opvStatusVisible,
+          children: "visible"
+        }) : /*#__PURE__*/jsx("span", {
+          className: opvStatusHidden,
+          children: "hidden"
+        });
+      }
+    }, {
+      headerName: 'Hidden since',
+      flex: 1,
+      minWidth: 90,
+      valueGetter: function valueGetter(p) {
+        var _p$data$inspectInfo$h, _p$data3;
+        return (_p$data$inspectInfo$h = (_p$data3 = p.data) === null || _p$data3 === void 0 || (_p$data3 = _p$data3.inspectInfo) === null || _p$data3 === void 0 ? void 0 : _p$data3.hiddenByDecisionNo) !== null && _p$data$inspectInfo$h !== void 0 ? _p$data$inspectInfo$h : '-';
+      }
+    }, {
+      headerName: 'HPVT',
+      flex: 1,
+      minWidth: 60,
+      cellRenderer: function cellRenderer(params) {
+        var _params$data2;
+        var h = (_params$data2 = params.data) === null || _params$data2 === void 0 || (_params$data2 = _params$data2.inspectInfo) === null || _params$data2 === void 0 ? void 0 : _params$data2.headerPosVariationType;
+        if (!h) return '-';
+        return /*#__PURE__*/jsx("span", {
+          title: "Header Pos Variation Type (K=Kopf, P=EinzelPos, V=Vererbung, I=Info, U=Unsichtbar)",
+          children: h
+        });
+      }
+    }, {
+      headerName: 'History',
+      flex: 1,
+      minWidth: 120,
+      cellRenderer: function cellRenderer(params) {
+        var _params$data3;
+        var history = (_params$data3 = params.data) === null || _params$data3 === void 0 || (_params$data3 = _params$data3.inspectInfo) === null || _params$data3 === void 0 ? void 0 : _params$data3.visibleHistory;
+        if (!(history !== null && history !== void 0 && history.length)) return '-';
+        return /*#__PURE__*/jsx("div", {
+          className: visibleHistory,
+          children: history.map(function (entry, i) {
+            return /*#__PURE__*/jsxs("span", {
+              className: classnames(visibleHistoryEntry, entry.visible ? visibleHistoryEntryShown : visibleHistoryEntryHidden),
+              title: entry.visible ? 'Became visible' : 'Became hidden',
+              children: ["#", entry.decisionNo, " \u2192 ", entry.visible ? 'shown' : 'hidden']
+            }, i);
+          })
+        });
+      }
+    }];
+  }, []);
+  var getRowId = function getRowId(params) {
+    var _params$data$option$c, _params$data4;
+    return (_params$data$option$c = (_params$data4 = params.data) === null || _params$data4 === void 0 || (_params$data4 = _params$data4.option) === null || _params$data4 === void 0 ? void 0 : _params$data4.codex) !== null && _params$data$option$c !== void 0 ? _params$data$option$c : '';
+  };
   if (!article) {
     return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
       className: classnames(props.className, scrollable),
@@ -194,81 +291,20 @@ var OptionTreeTable = function OptionTreeTable(_ref) {
     children: [/*#__PURE__*/jsx("p", {
       className: tableDescription,
       children: "All options grouped by tab group. Click any cell to navigate to that option in the configurator."
-    }), /*#__PURE__*/jsxs("table", {
-      className: table,
-      children: [/*#__PURE__*/jsx("thead", {
-        children: /*#__PURE__*/jsxs("tr", {
-          className: column,
-          children: [/*#__PURE__*/jsx("th", {
-            children: "Tab group"
-          }), /*#__PURE__*/jsx("th", {
-            children: "Option"
-          }), /*#__PURE__*/jsx("th", {
-            children: "Name"
-          }), /*#__PURE__*/jsx("th", {
-            children: "Visible"
-          }), /*#__PURE__*/jsx("th", {
-            children: "Hidden since"
-          }), /*#__PURE__*/jsx("th", {
-            children: "HPVT"
-          }), /*#__PURE__*/jsx("th", {
-            children: "History"
-          })]
-        })
-      }), /*#__PURE__*/jsx("tbody", {
-        children: optionsGrouped.map(function (_ref7) {
-          var tabGroupKey = _ref7.tabGroupKey,
-            tabGroupTitle = _ref7.tabGroupTitle,
-            options = _ref7.options;
-          return /*#__PURE__*/jsx(React.Fragment, {
-            children: options.map(function (_ref8) {
-              var _inspectInfo$hiddenBy;
-              var option = _ref8.option,
-                inspectInfo = _ref8.inspectInfo,
-                posNr = _ref8.posNr;
-              return /*#__PURE__*/jsxs("tr", {
-                className: classnames(column, optionRow),
-                onClick: function onClick() {
-                  return handleOptionClick(option.codex, posNr);
-                },
-                children: [/*#__PURE__*/jsx("td", {
-                  children: tabGroupTitle
-                }), /*#__PURE__*/jsx("td", {
-                  children: option.codex
-                }), /*#__PURE__*/jsx("td", {
-                  children: option.title
-                }), /*#__PURE__*/jsx("td", {
-                  children: inspectInfo != null ? inspectInfo.visible ? /*#__PURE__*/jsx("span", {
-                    className: opvStatusVisible,
-                    children: "visible"
-                  }) : /*#__PURE__*/jsx("span", {
-                    className: opvStatusHidden,
-                    children: "hidden"
-                  }) : '-'
-                }), /*#__PURE__*/jsx("td", {
-                  children: (_inspectInfo$hiddenBy = inspectInfo === null || inspectInfo === void 0 ? void 0 : inspectInfo.hiddenByDecisionNo) !== null && _inspectInfo$hiddenBy !== void 0 ? _inspectInfo$hiddenBy : '-'
-                }), /*#__PURE__*/jsx("td", {
-                  children: inspectInfo !== null && inspectInfo !== void 0 && inspectInfo.headerPosVariationType ? /*#__PURE__*/jsx("span", {
-                    title: "Header Pos Variation Type (K=Kopf, P=EinzelPos, V=Vererbung, I=Info, U=Unsichtbar)",
-                    children: inspectInfo.headerPosVariationType
-                  }) : '-'
-                }), /*#__PURE__*/jsx("td", {
-                  children: inspectInfo !== null && inspectInfo !== void 0 && inspectInfo.visibleHistory && inspectInfo.visibleHistory.length > 0 ? /*#__PURE__*/jsx("div", {
-                    className: visibleHistory,
-                    children: inspectInfo.visibleHistory.map(function (entry, i) {
-                      return /*#__PURE__*/jsxs("span", {
-                        className: classnames(visibleHistoryEntry, entry.visible ? visibleHistoryEntryShown : visibleHistoryEntryHidden),
-                        title: entry.visible ? 'Became visible' : 'Became hidden',
-                        children: ["#", entry.decisionNo, " \u2192 ", entry.visible ? 'shown' : 'hidden']
-                      }, i);
-                    })
-                  }) : '-'
-                })]
-              }, option.codex);
-            })
-          }, tabGroupKey);
-        })
-      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: gridContainer,
+      children: /*#__PURE__*/jsx(AgGridReact, {
+        rowData: rowData,
+        columnDefs: columnDefs,
+        theme: gridTheme,
+        getRowId: getRowId,
+        onRowClicked: function onRowClicked(e) {
+          return e.data && handleOptionClick(e.data.option.codex, e.data.posNr);
+        },
+        suppressCellFocus: true,
+        suppressRowClickSelection: true,
+        domLayout: "normal"
+      })
     })]
   }));
 };

package/build/esm/{index-3e24da11.js → index-a52b14b0.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useRef } from 'react';
 import classnames from 'classnames';

package/build/esm/{index-16e6999b.js → index-a62fe2a3.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import ActionNavigation from './index-13fcfa7d.js';
-import PriceSumm from './index-ac8da0b5.js';
+import ActionNavigation from './index-da223109.js';
+import PriceSumm from './index-1afdc485.js';
 import classnames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
@@ -21,8 +21,8 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index.module-ffcce4d0.js';
-import './index-89e866ee.js';
+import './index.module-42ad8abc.js';
+import './index-c4b47014.js';
 import 'react-countup';
 
 var container = "container-jfAym";

package/build/esm/{index-e75cc8cd.js → index-a754d4c7.js}

@@ -1,23 +1,23 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { a as usePlannerUIHandler, u as useViewHandler } from './index-545a32b9.js';
+import { a as usePlannerUIHandler, u as useViewHandler } from './index-4c9b6676.js';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import AVL from './index-85cc659b.js';
-import AVR from './index-5e7761b0.js';
-import Outline from './index-1f1da450.js';
-import RotationClockwise from './index-08bc3f3d.js';
-import RotationCounterClockwise from './index-854ee916.js';
-import Trash from './index-890ea358.js';
-import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-048e04d0.js';
+import AVL from './index-eb2deb75.js';
+import AVR from './index-b402e934.js';
+import Outline from './index-7001c21b.js';
+import RotationClockwise from './index-d590738a.js';
+import RotationCounterClockwise from './index-d526c696.js';
+import Trash from './index-0838f972.js';
+import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-ba47fb46.js';
 import { Vector2 } from '@crystaldesign/web-planner-logic';
-import PosNr from './index-3e1209b4.js';
-import BoxCopy from './index-77d1948a.js';
-import Move3DGrid from './index-a5380036.js';
-import Rotation3DGrid from './index-d2bf338b.js';
+import PosNr from './index-0894a853.js';
+import BoxCopy from './index-f48e0223.js';
+import Move3DGrid from './index-aa61dd0a.js';
+import Rotation3DGrid from './index-623c8c7a.js';
 import { getLogger } from '@crystaldesign/diva-core';
 import { DivaError } from '@crystaldesign/diva-utils';
-import ElementCopy from './index-bbec39f3.js';
-import DistanceToGround from './index-d041e228.js';
+import ElementCopy from './index-54e77760.js';
+import DistanceToGround from './index-137e6879.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -32,7 +32,7 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-d5e12fe5.js';
+import './index-ce87ecd9.js';
 import 'react-draggable';
 
 function usePosNrPositioning(_ref) {

package/build/esm/{index-5f3d177a.js → index-a7ef8800.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-545a32b9.js';
+import './index-4c9b6676.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-32d08d94.js → index-a97d75ea.js}

@@ -1,15 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import MetaData from './index-5f761efe.js';
-import InfoIcon from './index-6d5db0a9.js';
-import PricePreview from './index-ef7dc862.js';
+import MetaData from './index-f64d345a.js';
+import InfoIcon from './index-7366d16f.js';
+import PricePreview from './index-c09f40c0.js';
 import { useHover, useLayer } from 'react-laag';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import GenericToolTip from './index-da1769b8.js';
+import GenericToolTip from './index-50e380f3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -24,7 +24,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-89e866ee.js';
+import './index-c4b47014.js';
 import 'react-countup';
 
 var articleItem = "article-item-eh-j4";

package/build/esm/{index-0c2785e8.js → index-a9d9454e.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';

package/build/esm/{index-a5380036.js → index-aa61dd0a.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-545a32b9.js';
+import { u as useViewHandler } from './index-4c9b6676.js';
 import { useState, useRef } from 'react';
 import classnames from 'classnames';
 import { Vector2 } from '@crystaldesign/web-planner-logic';

package/build/esm/{index-bbe0343a.js → index-abf9ed7d.js}

@@ -1,11 +1,11 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useEffect } from 'react';
-import SettingsHeaderContainer from './index-8ec0f023.js';
+import SettingsHeaderContainer from './index-94e1cca7.js';
 import classnames from 'classnames';
-import TotalPrice from './index-7b1fa760.js';
-import SettingsItemsWrapper from './index-8660a6fa.js';
+import TotalPrice from './index-f1addd75.js';
+import SettingsItemsWrapper from './index-14f9fad8.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
@@ -23,92 +23,94 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-76594e31.js';
-import './index-36114526.js';
+import './index-167c2e69.js';
+import './index-06f2f03f.js';
 import 'sift';
-import './index-dd0f64a5.js';
-import './index-787e3d13.js';
-import './index-2eb3451d.js';
-import './index-094d50a2.js';
-import './index.module-f5f04403.js';
-import './index-a36c5a23.js';
+import './index-bf8b025c.js';
+import './index-842ff806.js';
+import './index-6d1505c0.js';
+import './index-848453a2.js';
+import './index.module-4916636d.js';
+import './index-177537b7.js';
 import 'react-switch';
-import './index-6d5db0a9.js';
-import './index-ef7dc862.js';
-import './index-89e866ee.js';
+import './index-7366d16f.js';
+import './index-c09f40c0.js';
+import './index-c4b47014.js';
 import 'react-countup';
-import './index-173772f8.js';
+import './index-4532dce1.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-afa71e50.js';
+import './index-d9f24c87.js';
 import 'react-dropdown';
-import './index-073d10a1.js';
-import './index-527ad827.js';
-import './index-948218c6.js';
-import './index-7d8c9c2c.js';
+import './index-35edaaa3.js';
+import './index-f00f0f3f.js';
+import './index-4fd79a07.js';
+import './index-f87c66c4.js';
 import '@crystaldesign/content-box';
-import './index-2b1e0d1a.js';
-import './index-2a743ef9.js';
-import './index-bd356d40.js';
-import './index-15a53812.js';
-import './index-cd3d2d65.js';
-import './index-9440c593.js';
-import './index-25d04e8a.js';
-import './index-a182a2b4.js';
-import './index-5bee4e0b.js';
+import './index-6c6bda62.js';
+import './index-862fe09e.js';
+import './index-18828e39.js';
+import './index-4b79c9f3.js';
+import './index-115a7fc7.js';
+import './index-f6d0b5ee.js';
+import './index-e74b07f1.js';
+import './index-8c7231a7.js';
+import './index-0f6ba228.js';
 import 'react-laag';
-import './index.module-77bd5380.js';
-import './index-20cf7e10.js';
-import './index-da1769b8.js';
-import './index-2a44aff1.js';
-import './index-39b15e35.js';
-import './index-4e085b6b.js';
-import './index-9377bfb4.js';
-import './index.module-c5cfe845.js';
-import './index-46cea5fa.js';
-import './index-5b91d7d1.js';
-import './index-307fa726.js';
-import './index-24df4a0c.js';
-import './index-eebc8e3e.js';
-import './index-5f761efe.js';
-import './index-73904008.js';
-import './index-32d08d94.js';
-import './index-4cbd873c.js';
-import './index-a58865ba.js';
-import './index-94569688.js';
-import './index-ce0d1800.js';
+import './index.module-ea18a28c.js';
+import './index-ebcb42d8.js';
+import './index-50e380f3.js';
+import './index-67032cac.js';
+import './index-4e7f18c0.js';
+import './index-467a77c7.js';
+import './index-fc369dd9.js';
+import './index.module-fd30a8cd.js';
+import './index-6d718ec6.js';
+import './index-048055dc.js';
+import './index-2cbe5c03.js';
+import './index-4d42ceca.js';
+import './index-b54c6413.js';
+import './index-f64d345a.js';
+import './index-15f4124e.js';
+import './index-a97d75ea.js';
+import './index-c38fcc2c.js';
+import './index-6c1216e4.js';
+import './index-4520a84f.js';
+import './index-4c1fb87e.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './index-756dde74.js';
+import './index-e9af1856.js';
 import 'rc-slider';
-import './index-3787b639.js';
-import './index-9ae75ee2.js';
-import './index-46b1a81a.js';
-import './index-f044a604.js';
-import './index-060ae141.js';
+import './index-3f80ebae.js';
+import './index-4600e75f.js';
+import './index-22520679.js';
+import './index-45c4e06a.js';
+import './index-dfc7bb96.js';
 import 'react-confetti-explosion';
-import './index-cbeabc19.js';
-import './index-cedf1e97.js';
-import './index-a9e74135.js';
+import './index-3836267c.js';
+import './index-a2471909.js';
+import './index-cbe80540.js';
 import 'react-qr-code';
-import './index-bb3c21a4.js';
-import './useCustomDimensions-2f4020aa.js';
-import './index-eae77a5a.js';
-import './ussIsSticky-333db608.js';
-import './index-97fed7cf.js';
-import './index-eb00ac3f.js';
-import './index-cfca9284.js';
-import './index.module-35d4dfdd.js';
-import './index-944d5596.js';
-import './index-73cac779.js';
-import './index-d8958104.js';
-import './index-24a77d27.js';
-import './index-e5075b3b.js';
+import './index-7434b1ab.js';
+import './useCustomDimensions-4c4561e5.js';
+import './index-f4dcd88a.js';
+import './ussIsSticky-e7451430.js';
+import './index-a286b511.js';
+import './index-c9705602.js';
+import './index-c8e0859e.js';
+import './index.module-f4eb32d8.js';
+import './index-e5f0d381.js';
+import './index-3f8b4c08.js';
+import './index-af577a96.js';
+import './index-e8f05e35.js';
+import './index-1195960a.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  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n";
+var scrollerFlex = "scrollerFlex-XVfOS";
+var scrollerContentFill = "scrollerContentFill-p1UEK";
+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  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n\n/* When in wysiwyg inspect mode: scroller becomes flex so content can fill height */\n.scrollerFlex-XVfOS {\n  display: flex;\n  flex-direction: column;\n}\n\n.scrollerFlex-XVfOS .scrollerContentFill-p1UEK {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n";
 styleInject(css_248z);
 
 var SettingsScroller = function SettingsScroller(_ref) {
@@ -147,12 +149,13 @@ var SettingsScroller = function SettingsScroller(_ref) {
   }, [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),
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerFlex),
     id: "wcConfigurator-settings-scroller",
     ref: settingsScrollerElement,
     children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__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", {
+      className: classnames(viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerContentFill),
       children: [/*#__PURE__*/jsx(SettingsItemsWrapper, {
         itemPalettesArr: itemPalettesArr
       }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]