@crystaldesign/diva-web-planner-react 26.3.0-beta.2 → 26.3.0-beta.21

package/build/esm/{ArticleProperties-49592b90.js → ArticleProperties-6d368407.js}

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

package/build/esm/{CatalogProperties-af209421.js → CatalogProperties-c53b246d.js}

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

package/build/esm/DecisionVizualizer-56a1d888.js

@@ -0,0 +1,284 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-beea7e3b.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-1a522185.js → OptionProperties-3659f0c4.js}

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

package/build/esm/{OptionValueProperties-018ca061.js → OptionValueProperties-a57a4928.js}

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

package/build/esm/{Planner2DGrid-fb187f29.js → Planner2DGrid-73c35d01.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-46e88edd.js';
+import './index-beea7e3b.js';
 import { fabric } from 'fabric';
 import { Vector3, Vector2 } from '@crystaldesign/web-planner-logic';
 import { getLogger, DivaUtils } from '@crystaldesign/diva-core';

package/build/esm/{Planner3DImage-ca2b2f60.js → Planner3DImage-6a3a7ef4.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-46e88edd.js';
+import './index-beea7e3b.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-d3c1bc55.js → index-00729065.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';

package/build/esm/{index-b4edf754.js → index-0110a005.js}

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

package/build/esm/{index-5f790040.js → index-0170cea9.js}

@@ -1,9 +1,9 @@
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useEffect } from 'react';
 import Collapsible from 'react-collapsible';
-import ConfigStep from './index-9a49c2cf.js';
-import Header from './index-e1d0f0ef.js';
+import ConfigStep from './index-626787a7.js';
+import Header from './index-426cbc0f.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-33538339.js → index-01c65e09.js}

@@ -1,13 +1,13 @@
-import { s as styleInject, u as useViewHandler } from './index-46e88edd.js';
+import { s as styleInject, u as useViewHandler } from './index-beea7e3b.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import Functions from './index-39cf1df9.js';
+import Functions from './index-968c5fe0.js';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { u as useCustomDimensions } from './useCustomDimensions-c0a7b1c6.js';
+import { u as useCustomDimensions } from './useCustomDimensions-f9400665.js';
 import { ContentItemComponent } from '@crystaldesign/content-item';
-import PriceCounter from './index-922eb980.js';
+import PriceCounter from './index-c702e8f6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-3073cb24.js → index-01feebe7.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-46e88edd.js';
+import { s as styleInject, u as useViewHandler } from './index-beea7e3b.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import { useHover, useLayer } from 'react-laag';
-import MetaData from './index-b5dc4d78.js';
-import GenericToolTip from './index-00169904.js';
-import PricePreview from './index-3c75a86f.js';
-import InfoIcon from './index-b77ed4ff.js';
+import MetaData from './index-5ab582bc.js';
+import GenericToolTip from './index-3405d0c1.js';
+import PricePreview from './index-74593187.js';
+import InfoIcon from './index-dd16f37b.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-922eb980.js';
+import './index-c702e8f6.js';
 import 'react-countup';
 
 var container = "container-08OcY";

package/build/esm/{index-1013f0d0.js → index-02d4627c.js}

@@ -1,13 +1,13 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
-import InfoIcon from './index-b77ed4ff.js';
-import { A as AddElement, a as articleItem, s as small, b as sel, i as imageWrapper, w as wcImage, t as titleWrapper, c as title, d as trashIcon, e as wrapper, m as mobile, f as tablet } from './index-a1f629a0.js';
+import InfoIcon from './index-dd16f37b.js';
+import { A as AddElement, a as articleItem, s as small, b as sel, i as imageWrapper, w as wcImage, t as titleWrapper, c as title, d as trashIcon, e as wrapper, m as mobile, f as tablet } from './index-31203531.js';
 import { useHover, useLayer } from 'react-laag';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import GenericToolTip from './index-00169904.js';
+import GenericToolTip from './index-3405d0c1.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
@@ -24,8 +24,8 @@ import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-3c75a86f.js';
-import './index-922eb980.js';
+import './index-74593187.js';
+import './index-c702e8f6.js';
 import 'react-countup';
 
 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; }

package/build/esm/{index-c0ec27ec.js → index-0357a651.js}

@@ -1,10 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-46e88edd.js';
+import './index-beea7e3b.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
-import ArticleOverview from './index-c3f65807.js';
-import SVGViewer from './index-3693957f.js';
+import ArticleOverview from './index-96c96562.js';
+import SVGViewer from './index-aebad679.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
@@ -22,11 +22,11 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index.module-df51a3b0.js';
-import './index.module-c9e73073.js';
-import './index.module-f4737e56.js';
+import './index.module-f39a010f.js';
+import './index.module-a78fa49d.js';
+import './index.module-9ec3692b.js';
 import 'react-collapsible';
-import './index-0bdf2232.js';
+import './index-a34f5441.js';
 
 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; }

package/build/esm/{index-d2f9c84a.js → index-03624fb1.js}

@@ -1,9 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-46e88edd.js';
+import { s as styleInject, u as useViewHandler } from './index-beea7e3b.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import Slider$1 from 'rc-slider';
-import SettingsHeader from './index-478fd42c.js';
+import SettingsHeader from './index-ec216124.js';
 import classnames from 'classnames';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-c2a7e324.js → index-0608abbc.js}

@@ -1,7 +1,7 @@
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import SettingsHeader from './index-478fd42c.js';
+import SettingsHeader from './index-ec216124.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-2ede644d.js → index-081dae5f.js}

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