@crystaldesign/diva-web-planner-react 26.3.0-beta.1 → 26.3.0-beta.11

package/build/esm/{ArticleProperties-48f25dd7.js → ArticleProperties-6d50f848.js}

@@ -1,4 +1,4 @@
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';

package/build/esm/{CatalogProperties-5c979bad.js → CatalogProperties-e54704ae.js}

@@ -1,4 +1,4 @@
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';

package/build/esm/DecisionVizualizer-ed337e22.js

@@ -0,0 +1,284 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-4c9b6676.js';
+import { useRef, useState, useEffect } from 'react';
+import { JsonView, darkStyles } from 'react-json-view-lite';
+import classnames from 'classnames';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var bold = "bold-lbVn7";
+var tableDescription = "tableDescription-HHojU";
+var optionsTable = "optionsTable-duUmy";
+var optionsTableColumn = "optionsTableColumn-3dBDM";
+var decisionsGridContainer = "decisionsGridContainer-fFhrp";
+var gridContainer = "gridContainer-fFYsO";
+var optionValuesGridContainer = "optionValuesGridContainer-VjHHq";
+var optionsTableSelected = "optionsTableSelected-Mcjg3";
+var optionValuesTable = "optionValuesTable-XnJys";
+var optionValueSelected = "optionValueSelected-hlC3t";
+var decisionCell = "decisionCell-boCP6";
+var opvStatusVisible = "opvStatusVisible-Lsme-";
+var opvStatusHidden = "opvStatusHidden-XSrul";
+var opvStatusNewValue = "opvStatusNewValue-Pc5Ty";
+var decisionLink = "decisionLink-MMzgj";
+var closeIcon = "close-icon-oV-p5";
+var scrollable = "scrollable-g4Mgr";
+var header = "header-4-lJa";
+var decision = "decision-d8i43";
+var idmContainer = "idm-container-j98CM";
+var idmTitle = "idm-title-LFQMP";
+var idmSubtitle = "idm-subtitle-jkOPl";
+var idmTable = "idm-table-CZGdO";
+var css_248z = ".table-iqWqM {\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-iqWqM 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-iqWqM th,\n.table-iqWqM td {\n  padding: 10px 14px;\n  text-align: left;\n  border-bottom: 1px solid #e2e8f0;\n}\n\n.table-iqWqM tbody tr:hover {\n  background: #f7fafc;\n}\n\n.column-0LUrX {\n  text-align: left;\n}\n\n.column-0LUrX:first-child {\n  height: 20px;\n}\n\n.bold-lbVn7 {\n  font-weight: bold;\n}\n\n.filter-7DtTa {\n  height: 24px;\n  padding: 4px 10px;\n  font-size: 13px;\n  border: 1px solid #cbd5e0;\n  border-radius: 6px;\n  min-width: 120px;\n}\n\n.filter-7DtTa:focus {\n  outline: none;\n  border-color: var(--primaryColor);\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\n}\n\n/* Layout */\n.tableDescription-HHojU {\n  margin: 8px 0 12px;\n  font-size: 13px;\n  color: #64748b;\n  line-height: 1.4;\n}\n\n.optionsTable-duUmy {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  gap: 16px;\n  margin-top: 16px;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  height: calc(100% - 112px);\n}\n\n.optionsTableColumn-3dBDM {\n  flex: 0 0 auto;\n  align-self: stretch;\n  min-width: 150px;\n  width: 40%;\n}\n\n.optionsTableColumn-3dBDM:first-child {\n  width: 20%;\n  min-width: 200px;\n}\n\n.decisionsGridContainer-fFhrp,\n.gridContainer-fFYsO {\n  width: 100%;\n  min-height: 150px;\n  height: 100%;\n}\n\n.optionValuesGridContainer-VjHHq {\n  width: 100%;\n  min-height: 80px;\n}\n\n.optionsTableSelected-Mcjg3 {\n  background: #ebf8ff !important;\n}\n\n.optionsTableSelected-Mcjg3 {\n  border-left: 3px solid var(--primaryColor);\n}\n\n.optionValuesTable-XnJys {\n  flex: 0 0 auto;\n  align-self: flex-start;\n  padding: 16px;\n  background: #f8fafc;\n  border-radius: 8px;\n  border: 1px solid #e2e8f0;\n  min-width: 200px;\n  width: 30%;\n}\n\n.optionValuesTable-XnJys h4 {\n  margin: 0 0 12px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n}\n\n.optionValueSelected-hlC3t {\n  background: #e6fffa !important;\n}\n\n.optionValueSelected-hlC3t {\n  border-left: 3px solid #38b2ac;\n}\n\n.decisionCell-boCP6 {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.decisionCell-boCP6:hover {\n  background: #edf2f7;\n}\n\n.opvStatusVisible-Lsme- {\n  color: #38a169;\n  font-weight: 500;\n}\n\n.opvStatusHidden-XSrul {\n  color: #e53e3e;\n}\n\n.opvStatusNewValue-Pc5Ty {\n  color: #3182ce;\n  margin-left: 8px;\n}\n\n.decisionLink-MMzgj {\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  color: var(--primaryColor);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.decisionLink-MMzgj:hover {\n  color: color-mix(in srgb, var(--primaryColor) 80%, black);\n}\n\n.close-icon-oV-p5 {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  z-index: 1002;\n  width: -moz-max-content;\n  width: max-content;\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 28%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n.column-0LUrX th {\n  border-bottom: 1px solid;\n  padding-right: 10px;\n  margin-bottom: 1%;\n  font-weight: normal;\n}\n.scrollable-g4Mgr {\n  overflow: auto;\n  width: 100%;\n  padding: 16px;\n  height: 100%;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.header-4-lJa {\n  height: 8%;\n  width: calc(100% - 16px);\n  padding: 8px 16px;\n  text-align: center;\n  background: linear-gradient(135deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 90%, black) 100%);\n  font-size: 18px;\n  color: white;\n  font-weight: 600;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n  border-radius: 0 0 8px 8px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n}\n\n.decision-d8i43 {\n  z-index: 100;\n  position: fixed;\n  top: 60px;\n  right: calc(0px + 36px);\n  right: calc(var(--toolbar-width, 0px) + 36px);\n  z-index: 100000;\n  width: 640px;\n  height: calc(100vh - 60px);\n}\n\n.idm-container-j98CM {\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  pointer-events: all;\n  background-color: #fff;\n  width: 628px;\n  height: 100%;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.idm-container-j98CM h2 {\n  margin: 8px 16px;\n}\n\n.idm-title-LFQMP {\n  font-size: 1.5em;\n  font-weight: bold;\n}\n\n.idm-subtitle-jkOPl {\n  margin-top: 16px;\n  font-size: 1.2em;\n  font-weight: bold;\n}\n\n.idm-table-CZGdO {\n  width: calc(100% - 4px);\n  border-collapse: collapse;\n  margin-top: 8px;\n}\n\n.idm-table-CZGdO th,\n.idm-table-CZGdO td {\n  border: 1px solid #ddd;\n  padding: 8px;\n  text-align: left;\n  line-break: anywhere;\n}\n\n.idm-table-CZGdO th {\n  background-color: #f2f2f2;\n}\n\n/* Dark mode compatibility */\n.darkmode .tableDescription-HHojU,\nbody.darkmode .tableDescription-HHojU {\n  color: #94a3b8;\n}\n\n.darkmode .optionsTableSelected-Mcjg3,\nbody.darkmode .optionsTableSelected-Mcjg3 {\n  background: rgba(56, 178, 172, 0.25) !important;\n}\n\n.darkmode .optionsTableSelected-Mcjg3,\nbody.darkmode .optionsTableSelected-Mcjg3 {\n  border-left-color: #38b2ac;\n}\n\n.darkmode .optionValueSelected-hlC3t,\nbody.darkmode .optionValueSelected-hlC3t {\n  background: rgba(56, 178, 172, 0.25) !important;\n}\n\n.darkmode .optionValueSelected-hlC3t,\nbody.darkmode .optionValueSelected-hlC3t {\n  border-left: 3px solid #38b2ac;\n}\n\n.darkmode .optionValuesTable-XnJys,\nbody.darkmode .optionValuesTable-XnJys {\n  background: rgba(30, 41, 59, 0.6);\n  border-color: rgba(71, 85, 105, 0.8);\n}\n\n.darkmode .optionValuesTable-XnJys h4,\nbody.darkmode .optionValuesTable-XnJys h4 {\n  color: #e2e8f0;\n}\n\n.darkmode .opvStatusVisible-Lsme-,\nbody.darkmode .opvStatusVisible-Lsme- {\n  color: #68d391;\n}\n\n.darkmode .opvStatusHidden-XSrul,\nbody.darkmode .opvStatusHidden-XSrul {\n  color: #fc8181;\n}\n\n.darkmode .opvStatusNewValue-Pc5Ty,\nbody.darkmode .opvStatusNewValue-Pc5Ty {\n  color: #63b3ed;\n}\n\n.darkmode .decisionLink-MMzgj,\nbody.darkmode .decisionLink-MMzgj {\n  color: #63b3ed;\n}\n\n.darkmode .decisionLink-MMzgj:hover,\nbody.darkmode .decisionLink-MMzgj:hover {\n  color: #93c5fd;\n}\n\n.darkmode .decisionCell-boCP6:hover,\nbody.darkmode .decisionCell-boCP6:hover {\n  background: rgba(71, 85, 105, 0.3);\n}\n\n/* DecisionVisualizer / IDM container dark mode */\n.darkmode .idm-container-j98CM,\nbody.darkmode .idm-container-j98CM {\n  background-color: rgba(30, 41, 59, 0.95);\n  border-color: rgba(71, 85, 105, 0.8);\n}\n\n.darkmode .idm-container-j98CM h2,\n.darkmode .idm-container-j98CM .idm-title-LFQMP,\nbody.darkmode .idm-container-j98CM h2,\nbody.darkmode .idm-container-j98CM .idm-title-LFQMP {\n  color: #e2e8f0;\n}\n\n.darkmode .idm-container-j98CM .idm-subtitle-jkOPl,\nbody.darkmode .idm-container-j98CM .idm-subtitle-jkOPl {\n  color: #cbd5e1;\n}\n\n.darkmode .idm-container-j98CM .idm-table-CZGdO th,\n.darkmode .idm-container-j98CM .idm-table-CZGdO td,\nbody.darkmode .idm-container-j98CM .idm-table-CZGdO th,\nbody.darkmode .idm-container-j98CM .idm-table-CZGdO td {\n  border-color: rgba(71, 85, 105, 0.8);\n}\n\n.darkmode .idm-container-j98CM .idm-table-CZGdO th,\nbody.darkmode .idm-container-j98CM .idm-table-CZGdO th {\n  background-color: rgba(51, 65, 85, 0.8);\n  color: #e2e8f0;\n}\n\n.darkmode .idm-container-j98CM .idm-table-CZGdO td,\nbody.darkmode .idm-container-j98CM .idm-table-CZGdO td {\n  color: #e2e8f0;\n}\n\n.darkmode .idm-container-j98CM .scrollable-g4Mgr,\nbody.darkmode .idm-container-j98CM .scrollable-g4Mgr {\n  color: #e2e8f0;\n}\n\n.darkmode .idm-container-j98CM .close-icon-oV-p5,\nbody.darkmode .idm-container-j98CM .close-icon-oV-p5 {\n  filter: invert(1);\n}\n";
+styleInject(css_248z);
+
+var DecisionVisualization = function DecisionVisualization(_ref) {
+  var d = _ref.decision,
+    snapshots = _ref.snapshots,
+    _ref$matchingOptions = _ref.matchingOptions,
+    matchingOptions = _ref$matchingOptions === void 0 ? {} : _ref$matchingOptions,
+    anyData = _ref.anyData,
+    onClose = _ref.onClose;
+  var draggable = useRef(null);
+  // Helper function to check if a value exists
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    snapshotDiff = _useState2[0],
+    setSnapshotDiff = _useState2[1];
+  var renderIfDefined = function renderIfDefined(value, label) {
+    if (value !== undefined && value !== null && value !== '') {
+      return /*#__PURE__*/jsxs("p", {
+        children: [/*#__PURE__*/jsxs("strong", {
+          children: [label, label ? ':' : '']
+        }), Array.isArray(value) ? value.join(', ') : value]
+      });
+    }
+    return null;
+  };
+  useEffect(function () {
+    if (!snapshots) {
+      setSnapshotDiff(undefined);
+      return;
+    }
+    var diff = {};
+    var _loop = function _loop() {
+      var before = snapshots.before[_opt];
+      var after = snapshots.after[_opt];
+      diff[_opt] = {
+        after: after,
+        before: before,
+        removedOpvs: before.visibleOPVs.filter(function (opv) {
+          return !after.visibleOPVs.includes(opv);
+        })
+      };
+    };
+    for (var _opt in snapshots.before) {
+      _loop();
+    }
+    setSnapshotDiff(diff);
+  }, [snapshots]);
+  var isExpanded = function isExpanded(level, value, field) {
+    var key = field;
+    if (field === undefined || ['removedOpvs', 'after', 'before'].includes(field)) return true;
+    if (snapshotDiff && key && snapshotDiff[key] && JSON.stringify(snapshotDiff[key].before) !== JSON.stringify(snapshotDiff[key].after)) {
+      return true;
+    }
+    return false;
+  };
+  if (d.priceFeatureGroupNo !== undefined) {
+    var _priceFeatureGroup$pr, _priceFeatureGroup$fi;
+    var priceFeatureGroup = d;
+    return /*#__PURE__*/jsxs("div", {
+      className: idmContainer,
+      ref: draggable,
+      children: [/*#__PURE__*/jsx("div", {
+        className: closeIcon,
+        onClick: function onClick() {
+          return onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+      }), /*#__PURE__*/jsxs("h2", {
+        className: classnames(idmTitle),
+        children: ["PriceFeatureGroup #", priceFeatureGroup.priceFeatureGroupNo]
+      }), /*#__PURE__*/jsxs("div", {
+        className: scrollable,
+        children: [/*#__PURE__*/jsxs("div", {
+          children: [renderIfDefined(priceFeatureGroup.catalogId, 'Catalog ID'), renderIfDefined(priceFeatureGroup._id, 'priceFeatureGroup ID'), renderIfDefined((_priceFeatureGroup$pr = priceFeatureGroup.priceFeatureGroupText) === null || _priceFeatureGroup$pr === void 0 ? void 0 : _priceFeatureGroup$pr.DE, 'priceFeatureGroupText'), renderIfDefined(priceFeatureGroup.projectPercentageSurcharges, 'projectPercentageSurcharges'), renderIfDefined(priceFeatureGroup.isPercentage, 'isPercentage'), renderIfDefined(priceFeatureGroup.comment, 'comment'), renderIfDefined(priceFeatureGroup.featureNos, 'Feature References'), renderIfDefined(priceFeatureGroup.additionalPrice, 'Additional Price'), renderIfDefined(priceFeatureGroup.activeCombination, 'Active Combination Seqence')]
+        }), /*#__PURE__*/jsx("h3", {
+          className: idmSubtitle,
+          children: "Option Combinations"
+        }), /*#__PURE__*/jsxs("table", {
+          className: idmTable,
+          children: [/*#__PURE__*/jsx("thead", {
+            children: /*#__PURE__*/jsxs("tr", {
+              children: [/*#__PURE__*/jsx("th", {
+                children: "Sequence"
+              }), /*#__PURE__*/jsx("th", {
+                children: "condition"
+              }), /*#__PURE__*/jsx("th", {
+                children: "priceField"
+              })]
+            })
+          }), /*#__PURE__*/jsx("tbody", {
+            children: (_priceFeatureGroup$fi = priceFeatureGroup.finishes) === null || _priceFeatureGroup$fi === void 0 ? void 0 : _priceFeatureGroup$fi.map(function (option) {
+              return /*#__PURE__*/jsxs("tr", {
+                className: classnames(option.sequence === priceFeatureGroup.activeCombination ? bold : undefined),
+                children: [/*#__PURE__*/jsx("td", {
+                  children: option.sequence
+                }), /*#__PURE__*/jsx("td", {
+                  children: JSON.stringify(option.optionsSetRefs)
+                }), /*#__PURE__*/jsxs("td", {
+                  children: ["PRFG", priceFeatureGroup.priceFeatureGroupNo + '_' + option.priceField]
+                })]
+              }, option._id);
+            })
+          })]
+        }), /*#__PURE__*/jsx("br", {}), !!Object.values(matchingOptions).length && /*#__PURE__*/jsxs(Fragment, {
+          children: ["matching conditions", Object.keys(matchingOptions).map(function (opt) {
+            return renderIfDefined(opt + ': ' + matchingOptions[opt], '');
+          }), /*#__PURE__*/jsx("br", {})]
+        }), !!snapshotDiff && /*#__PURE__*/jsxs(Fragment, {
+          children: ["snapshot", /*#__PURE__*/jsx(JsonView, {
+            shouldExpandNode: isExpanded,
+            data: snapshotDiff,
+            style: darkStyles
+          })]
+        }), !!anyData && /*#__PURE__*/jsx(JsonView, {
+          data: anyData,
+          style: darkStyles
+        })]
+      })]
+    });
+  }
+  if (d.Number !== undefined) {
+    var decision = d;
+    return /*#__PURE__*/jsxs("div", {
+      ref: draggable,
+      className: idmContainer,
+      children: [/*#__PURE__*/jsx("div", {
+        className: closeIcon,
+        onClick: function onClick() {
+          return onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+      }), /*#__PURE__*/jsx("h2", {
+        className: classnames(idmTitle),
+        children: "Decision Details"
+      }), /*#__PURE__*/jsxs("div", {
+        className: scrollable,
+        children: [/*#__PURE__*/jsxs("div", {
+          children: [renderIfDefined(decision.Number, 'Number'), renderIfDefined(decision.Type, 'Type'), renderIfDefined(decision.Prio, 'Priority'), renderIfDefined(decision.Options, 'Options'), renderIfDefined(decision.enabled ? 'Yes' : 'No', 'Enabled'), renderIfDefined(decision.Number, 'Decision Number'), renderIfDefined(decision.activeCombination, 'Active Combination Index'), renderIfDefined(decision.disableHistory, 'Disabled History')]
+        }), decision.DOC && decision.DOC.length > 0 && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("h3", {
+            className: idmSubtitle,
+            children: "Decision Option Combinations"
+          }), decision.DOC.map(function (doc, docIndex) {
+            var _doc$Row;
+            return /*#__PURE__*/jsxs("div", {
+              className: "decision-option-combination",
+              children: ['--------------------------------', renderIfDefined(docIndex, 'doc Index'), renderIfDefined(doc.JsFormula, 'Formula'), Object.values((_doc$Row = doc.Row) !== null && _doc$Row !== void 0 ? _doc$Row : {}).map(function (row) {
+                return /*#__PURE__*/jsx(Fragment, {
+                  children: renderIfDefined(row.join(';'), 'Doc Row')
+                });
+              }), doc.DA && doc.DA.length > 0 && /*#__PURE__*/jsxs("div", {
+                children: [/*#__PURE__*/jsx("h6", {
+                  children: "Decision Actions:"
+                }), /*#__PURE__*/jsx("ul", {
+                  children: doc.DA.map(function (action, actionIndex) {
+                    return /*#__PURE__*/jsxs("li", {
+                      children: [renderIfDefined(action.Type, 'Action Type'), renderIfDefined(action.FeatureRef, 'Feature Ref'), renderIfDefined(action.OptionCodex, 'OptionCodex'), renderIfDefined(action.OptionRef, 'OptionRef'), renderIfDefined(action.OptionRefCodex, 'OptionRefCodex'), renderIfDefined(action.OptionValueRefCodex, 'OptionValueRefCodex'), renderIfDefined(action.DecisionNr, 'DecisionNr')]
+                    }, actionIndex);
+                  })
+                })]
+              }), renderIfDefined(doc.ValidOptionValues, 'Valid Option Values'), renderIfDefined(doc.RefLevel, 'RefLevel'), renderIfDefined(doc.ValidOptions, 'Valid Options')]
+            }, docIndex);
+          })]
+        }), renderIfDefined(decision.disableHistory, 'Disabled History'), /*#__PURE__*/jsxs("p", {
+          children: [/*#__PURE__*/jsx("strong", {
+            children: "Is Valid DOC:"
+          }), " ", decision.DOC && decision.DOC.length > 0 ? 'Yes' : 'No']
+        }), !!Object.values(matchingOptions).length && /*#__PURE__*/jsxs(Fragment, {
+          children: ["matching conditions", Object.keys(matchingOptions).map(function (opt) {
+            return renderIfDefined(opt + ': ' + matchingOptions[opt], '');
+          }), /*#__PURE__*/jsx("br", {})]
+        }), !!snapshotDiff && /*#__PURE__*/jsxs(Fragment, {
+          children: ["snapshot", /*#__PURE__*/jsx(JsonView, {
+            shouldExpandNode: isExpanded,
+            data: snapshotDiff,
+            style: darkStyles
+          })]
+        }), !!anyData && /*#__PURE__*/jsx(JsonView, {
+          data: anyData,
+          style: darkStyles
+        })]
+      })]
+    });
+  } else {
+    var _decision$optionCombi;
+    var _decision = d;
+    return /*#__PURE__*/jsxs("div", {
+      ref: draggable,
+      className: idmContainer,
+      children: [/*#__PURE__*/jsx("div", {
+        className: closeIcon,
+        onClick: function onClick() {
+          return onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+      }), /*#__PURE__*/jsxs("h2", {
+        className: classnames(idmTitle),
+        children: ["Decision #", _decision.decisionNo]
+      }), /*#__PURE__*/jsxs("div", {
+        className: scrollable,
+        children: [/*#__PURE__*/jsxs("div", {
+          children: [renderIfDefined(_decision.catalogId, 'Catalog ID'), renderIfDefined(_decision._id, 'Decision ID'), renderIfDefined(_decision.prio, 'Priority'), renderIfDefined(_decision.decisionType, 'Decision Type'), renderIfDefined(_decision.enabled ? 'Enabled' : 'Disabled', 'Status'), renderIfDefined(_decision.deleted ? 'Yes' : 'No', 'Deleted'), renderIfDefined(_decision.featureRefs, 'Feature References'), renderIfDefined(_decision.disableHistory, 'Disable History'), renderIfDefined(_decision.activeCombination, 'Active Combination Seqence')]
+        }), /*#__PURE__*/jsx("h3", {
+          className: idmSubtitle,
+          children: "Option Combinations"
+        }), /*#__PURE__*/jsxs("table", {
+          className: idmTable,
+          children: [/*#__PURE__*/jsx("thead", {
+            children: /*#__PURE__*/jsxs("tr", {
+              children: [/*#__PURE__*/jsx("th", {
+                children: "Sequence"
+              }), /*#__PURE__*/jsx("th", {
+                children: "Actions"
+              }), /*#__PURE__*/jsx("th", {
+                children: "Options Set References"
+              })]
+            })
+          }), /*#__PURE__*/jsx("tbody", {
+            children: (_decision$optionCombi = _decision.optionCombinations) === null || _decision$optionCombi === void 0 ? void 0 : _decision$optionCombi.map(function (option) {
+              return /*#__PURE__*/jsxs("tr", {
+                className: classnames(option.sequence === _decision.activeCombination ? bold : undefined),
+                children: [/*#__PURE__*/jsx("td", {
+                  children: option.sequence
+                }), /*#__PURE__*/jsx("td", {
+                  children: JSON.stringify(option.projectActions)
+                }), /*#__PURE__*/jsx("td", {
+                  children: JSON.stringify(option.optionsSetRefs)
+                })]
+              }, option._id);
+            })
+          })]
+        }), !!Object.values(matchingOptions).length && /*#__PURE__*/jsxs(Fragment, {
+          children: ["matching conditions", Object.keys(matchingOptions).map(function (opt) {
+            return renderIfDefined(opt + ': ' + matchingOptions[opt], '');
+          }), /*#__PURE__*/jsx("br", {})]
+        }), !!snapshotDiff && /*#__PURE__*/jsxs(Fragment, {
+          children: ["snapshot", /*#__PURE__*/jsx(JsonView, {
+            shouldExpandNode: isExpanded,
+            data: snapshotDiff,
+            style: darkStyles
+          })]
+        }), !!anyData && /*#__PURE__*/jsx(JsonView, {
+          data: anyData,
+          style: darkStyles
+        })]
+      })]
+    });
+  }
+};
+
+var DecisionVizualizer = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': DecisionVisualization
+});
+
+export { DecisionVisualization as D, opvStatusHidden as a, opvStatusNewValue as b, optionsTable as c, decisionLink as d, optionsTableColumn as e, decisionsGridContainer as f, decisionCell as g, header as h, gridContainer as i, optionValuesTable as j, optionValuesGridContainer as k, decision as l, optionsTableSelected as m, optionValueSelected as n, opvStatusVisible as o, DecisionVizualizer as p, scrollable as s, tableDescription as t };

package/build/esm/{OptionProperties-557bc494.js → OptionProperties-8fd997cd.js}

@@ -1,4 +1,4 @@
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';

package/build/esm/{OptionValueProperties-ca520443.js → OptionValueProperties-1c6b82dc.js}

@@ -1,4 +1,4 @@
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';

package/build/esm/{Planner2DGrid-ef56ab4b.js → Planner2DGrid-d8b55970.js}

@@ -1,7 +1,7 @@
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import { fabric } from 'fabric';
 import { Vector3, Vector2 } from '@crystaldesign/web-planner-logic';
 import { getLogger, DivaUtils } from '@crystaldesign/diva-core';

package/build/esm/{Planner3DImage-795541d0.js → Planner3DImage-4e854b74.js}

@@ -1,7 +1,7 @@
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import { Vector3, Vector2, Rendering } from '@crystaldesign/web-planner-logic';
 import { getLogger } from '@crystaldesign/diva-core';
 import * as THREE from 'three';

package/build/esm/{index-c48b6a03.js → index-002c35e1.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-74586774.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { createElement } from 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';

package/build/esm/{index-e76b0809.js → index-00665ddf.js}

@@ -1,8 +1,8 @@
-import { s as styleInject, u as useViewHandler } from './index-74586774.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { SwipeableDrawer, Box } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { a as swiperWrapper } from './index.module-297fdc67.js';
+import { a as swiperWrapper } from './index.module-7d48bd47.js';
 import classnames from 'classnames';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDivaCore } from '@crystaldesign/diva-core';

package/build/esm/{index-d7ae4f91.js → index-012b11c7.js}

@@ -1,7 +1,7 @@
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-74586774.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import { useRef, useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';

package/build/esm/{index-32a60d12.js → index-03e0f77b.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-74586774.js';
+import { u as useViewHandler } from './index-4c9b6676.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { a as table, c as column } from './index.module-479db5cd.js';
+import { a as table, c as column } from './index.module-81ca083b.js';
 import Collapsible from 'react-collapsible';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';

package/build/esm/{index-1483665b.js → index-048055dc.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-74586774.js';
+import { s as styleInject } from './index-4c9b6676.js';
 import classnames from 'classnames';
 import 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';

package/build/esm/{index-3b59c14a.js → index-05728fda.js}

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-74586774.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import 'react';
-import BasketAction from './index-066c0070.js';
+import BasketAction from './index-84921bc7.js';
 import { observer } from 'mobx-react-lite';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
@@ -20,8 +20,8 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index.module-ced96e5c.js';
-import './index-2e00d43f.js';
+import './index.module-42ad8abc.js';
+import './index-c4b47014.js';
 import 'react-countup';
 
 var wcCheckoutButtonText = "wcCheckoutButtonText-bETEx";

package/build/esm/{index-687d21e8.js → index-06f2f03f.js}

@@ -1,28 +1,28 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-74586774.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import React, { useState, useRef, useEffect, Suspense, lazy, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
 import sift from 'sift';
-import TextBox from './index-37cc1c62.js';
-import ItemVariant from './index-8ff15f88.js';
-import SettingsPaletteGroup from './index-02477b38.js';
-import ToggleOption from './index-63a4ebb5.js';
-import GroupDropdown from './index-2e9da43b.js';
-import PromotedProducts from './index-2c6e86d8.js';
-import ToggleName from './index-4d6128d4.js';
-import itemPaletteTypeComponentMap from './index-b4774961.js';
+import TextBox from './index-bf8b025c.js';
+import ItemVariant from './index-842ff806.js';
+import SettingsPaletteGroup from './index-6d1505c0.js';
+import ToggleOption from './index-848453a2.js';
+import GroupDropdown from './index-d9f24c87.js';
+import PromotedProducts from './index-18828e39.js';
+import ToggleName from './index-4b79c9f3.js';
+import itemPaletteTypeComponentMap from './index-115a7fc7.js';
 import classnames from 'classnames';
-import StepInfo from './index-1483665b.js';
-import SettingsHeader from './index-a3d552e1.js';
-import ReplaceSwitch from './index-4702bba1.js';
+import StepInfo from './index-048055dc.js';
+import SettingsHeader from './index-167c2e69.js';
+import ReplaceSwitch from './index-4c1fb87e.js';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
-import Slider from './index-b8a69c30.js';
-import MultiToggle from './index-999d8a16.js';
-import Radio from './index-8456ce68.js';
+import Slider from './index-e9af1856.js';
+import MultiToggle from './index-3f80ebae.js';
+import Radio from './index-22520679.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import SummaryOverview from './index-f3f1da2c.js';
+import SummaryOverview from './index-45c4e06a.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 var collapsableInner = "collapsable-inner-YPvJa";
@@ -144,7 +144,7 @@ var index$2 = /*#__PURE__*/Object.freeze({
 function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ConceptFilter = /*#__PURE__*/lazy(function () {
-  return import('./index-8e5e653e.js');
+  return import('./index-3cf2c4ef.js');
 });
 var ItemWrapper = function ItemWrapper(_ref) {
   var _item$conceptFilter;
@@ -266,14 +266,18 @@ var useGridVariables = function useGridVariables(item) {
 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 ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-2cd17934.js');
+  return import('./index-ba72ca09.js');
 });
 var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-cd41a23b.js');
+  return import('./index-a52b14b0.js');
 });
 var ProductList = /*#__PURE__*/React.lazy(function () {
-  return import('./index-e647ae26.js');
+  return import('./index-c68a30b1.js');
 });
+var InspectModeTables = /*#__PURE__*/React.lazy(function () {
+  return import('./index-37a780a6.js');
+});
+var INSPECT_MODE_EXCEPTIONS = ['SHELFPLANNER', 'PLANNER_2.0', 'CHECKOUT', 'PRODUCTS', 'PROMOTED', 'DOOR_PLANNER', 'SUMMARY', 'SUMMARY_OPTIONTREE', 'SUMMARY_ARTICLES', 'VARIANTS'];
 var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
   var _item$groups$;
   var item = _ref.item,
@@ -308,12 +312,16 @@ var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
   var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
   var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
   if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
+  var inspectMode = viewHandler.wysiwygDebugState.wysiwygInspectView;
+  if (inspectMode && !INSPECT_MODE_EXCEPTIONS.includes(item.type)) {
+    return /*#__PURE__*/jsx(Suspense, {
+      fallback: /*#__PURE__*/jsx(Fragment, {}),
+      children: /*#__PURE__*/jsx(InspectModeTables, {
+        item: item
+      })
+    });
+  }
   switch (item.type) {
-    case 'PLANNER_2.0':
-      //is rendered with the articleoverviewwrapper
-      return /*#__PURE__*/jsx(Fragment, {});
-    case 'CHECKOUT':
-      return /*#__PURE__*/jsx(SummaryOverview, {}, item.id);
     case 'TOGGLE':
       return /*#__PURE__*/jsx(ToggleOption, {
         style: variables,
@@ -376,6 +384,11 @@ var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
           style: variables
         }, item.id)
       });
+    case 'PLANNER_2.0':
+      //is rendered with the articleoverviewwrapper
+      return /*#__PURE__*/jsx(Fragment, {});
+    case 'CHECKOUT':
+      return /*#__PURE__*/jsx(SummaryOverview, {}, item.id);
     case 'PRODUCTS':
       return /*#__PURE__*/jsx(ProductList, {
         item: item

package/build/esm/{index-a9b1cceb.js → index-073335da.js}

@@ -1,9 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler } from './index-74586774.js';
+import { u as useViewHandler } from './index-4c9b6676.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';
-import { p as posnrWrapper, s as swiperWrapper, m as mobile, a as swiperSlide, S as SettingsPosNr$1 } from './index-8e147fb2.js';
+import { p as posnrWrapper, s as swiperWrapper, m as mobile, a as swiperSlide, S as SettingsPosNr$1 } from './index-957d1264.js';
 import classnames from 'classnames';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { jsx, Fragment } from 'react/jsx-runtime';
@@ -23,9 +23,9 @@ import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
 import 'react-laag';
-import './index-5392864e.js';
-import './index-a5e33da2.js';
-import './index-2e00d43f.js';
+import './index-50e380f3.js';
+import './index-c09f40c0.js';
+import './index-c4b47014.js';
 import 'react-countup';
 
 var SettingsPosNrContainer = function SettingsPosNrContainer(_ref) {

package/build/esm/{index-8c298b33.js → index-0838f972.js}

@@ -1,4 +1,4 @@
-import './index-74586774.js';
+import './index-4c9b6676.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-816987c0.js → index-0894a853.js}

@@ -1,4 +1,4 @@
-import { u as useViewHandler } from './index-74586774.js';
+import { u as useViewHandler } from './index-4c9b6676.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-e1de2fba.js → index-08aa9543.js}

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

package/build/esm/{index-e285f80b.js → index-0b238e85.js}

@@ -1,16 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-74586774.js';
+import { s as styleInject, u as useViewHandler } from './index-4c9b6676.js';
 import 'react';
-import { w as wholeWrapper, n as notExpanded } from './index.module-b43b8d52.js';
-import TabGroups from './index-809f8e27.js';
-import TabGroupOptions from './index-7de87e0f.js';
+import { w as wholeWrapper, n as notExpanded } from './index.module-ff7952ee.js';
+import TabGroups from './index-75807f2d.js';
+import TabGroupOptions from './index-bb425d22.js';
 import { observer } from 'mobx-react-lite';
-import ProduktDetails from './index-4a16484d.js';
+import ProduktDetails from './index-808ac502.js';
 import Collapsible from 'react-collapsible';
-import Price from './index-e4939d5f.js';
+import Price from './index-ba7fc059.js';
 import classnames from 'classnames';
-import JsonViewer from './index-49486eb0.js';
+import JsonViewer from './index-6fece545.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
@@ -27,11 +27,11 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-d5daa2fa.js';
-import './index-c6d8db42.js';
-import './index.module-18ad9889.js';
+import './index-6184d0c8.js';
+import './index-7d6f3e2e.js';
+import './index.module-728e5fe3.js';
 import 'react-json-view-lite';
-import './react-json-viewer-5407e783.js';
+import './react-json-viewer-a6420aa4.js';
 
 var menuPoint = "menu-point-Bz5zM";
 var collapsibleHeader = "collapsibleHeader-lzT9Y";