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

package/build/esm/{ArticleProperties-d60f2cf2.js → ArticleProperties-94d354bd.js}

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

package/build/esm/{CatalogProperties-71f4dd19.js → CatalogProperties-7fa832db.js}

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

package/build/esm/DecisionVizualizer-fa7431ce.js

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

@@ -1,4 +1,4 @@
-import './index-1f4ff73d.js';
+import './index-0c4af2cf.js';
 import 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
@@ -207,7 +207,7 @@ var properties = [{
   catalogKey: 'contentItemTeaser',
   codex: 'CONTENT_ITEM_TEASER',
   desc: /*#__PURE__*/jsx(Fragment, {
-    children: "JSON object welches ein Content Item Teaser hinterlegt. \"id\" (contentItemId), \"title\", \"description\", \"buttonText\", \"position\""
+    children: "JSON object welches ein Content Item Teaser hinterlegt. \"id\" (contentItemId), \"title\", \"description\", \"buttonText\", \"position\" \"BOTTOM\" | \"TOP\", \"emoji\""
   }),
   type: 'complicated'
 }, {

package/build/esm/{OptionValueProperties-5ae2ead1.js → OptionValueProperties-a8945f59.js}

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

package/build/esm/{Planner2DGrid-861d3b0a.js → Planner2DGrid-92c8f5bc.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-1f4ff73d.js';
+import './index-0c4af2cf.js';
 import { fabric } from 'fabric';
 import { Vector3, Vector2 } from '@crystaldesign/web-planner-logic';
 import { getLogger, DivaUtils } from '@crystaldesign/diva-core';
@@ -289,6 +289,20 @@ var Planner2DGrid = /*#__PURE__*/function () {
       });
     }
 
+    /**
+     * Returns the world corner to use for positioning UI elements.
+     * @param plannerElement
+     * @param useOltCorner  When true: OLT corner (for outline/draggable bbox with OLT dimensions).
+     *                      When false: corner aligned with displayed shape (OLF when HasOLFPolygon, for posNr/trash/DPs).
+     */
+  }, {
+    key: "getWorldCorner",
+    value: function getWorldCorner(plannerElement, useOltCorner) {
+      if (useOltCorner && plannerElement.HasOLFPolygon) return plannerElement.WorldPosCornerIgnoreOLF;
+      if (!useOltCorner && plannerElement.HasOLFPolygon) return plannerElement.getWorldPosCornerOLF();
+      return plannerElement.getWorldPosCorner();
+    }
+
     /**
      * This function adds a full transparent outline div Element over the fabric elements.
      * The function distinguishes between the outline of the current selected element and the rest.
@@ -300,8 +314,11 @@ var Planner2DGrid = /*#__PURE__*/function () {
     key: "addElemOutline",
     value: function addElemOutline(plannerUIHandler, plannerElement, isSelected, isSelectable) {
       if (plannerElement.getIsDockedAccessoire() && this.getConfiguratorState() !== 'ACC_PLANNER') return;
-      var screenPosElem = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x, plannerElement.getWorldPosCorner().z));
-      plannerUIHandler.addElemOutlineUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getRotDeg(), screenPosElem, new Vector2(Math.round(plannerElement.getWidth() * this.currZoomFactor), Math.round(plannerElement.getDepth() * this.currZoomFactor)), this.getIconState(isSelected, isSelectable), this.onDragStarted, this.onDragMove, this.onDragEnd, '2D');
+      var cornerO = this.getWorldCorner(plannerElement, true);
+      var outlineW = plannerElement.getWidth();
+      var outlineD = plannerElement.getDepth();
+      var screenPosElem = this.worldPosToScreenPos(new Vector2(cornerO.x, cornerO.z));
+      plannerUIHandler.addElemOutlineUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getRotDeg(), screenPosElem, new Vector2(Math.round(outlineW * this.currZoomFactor), Math.round(outlineD * this.currZoomFactor)), this.getIconState(isSelected, isSelectable), this.onDragStarted, this.onDragMove, this.onDragEnd, '2D');
     }
   }, {
     key: "getIconState",
@@ -325,7 +342,8 @@ var Planner2DGrid = /*#__PURE__*/function () {
       var configuration = this.getPlannerViewConfig();
       var screenPosElem = new Vector2(0, 0, 'pixel');
       if (configuration.posNumIcon == 'TOP_LEFT_BACK') {
-        screenPosElem = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x, plannerElement.getWorldPosCorner().z));
+        var cornerP = this.getWorldCorner(plannerElement, false);
+        screenPosElem = this.worldPosToScreenPos(new Vector2(cornerP.x, cornerP.z));
       }
       viewPlannerUI.addPosNrUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getIsDockedAccessoire(), screenPosElem, plannerElement.getRotDeg(), this.currZoomFactor, (_viewPlannerUI$getPos = viewPlannerUI.getPosNrByBasketId(plannerElement.getBasketId())) === null || _viewPlannerUI$getPos === void 0 ? void 0 : _viewPlannerUI$getPos.toString(), this.getIconState(elementIsSelected, elementIsSelectable), '2D');
     }
@@ -340,7 +358,8 @@ var Planner2DGrid = /*#__PURE__*/function () {
     value: function addDelIcon(plannerUIHandler, plannerElement) {
       if (plannerElement.getIsDockedAccessoire() && this.getConfiguratorState() != 'ACC_PLANNER') return;
       var screenPos = new Vector2(0, 0);
-      var screenPosElem = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x, plannerElement.getWorldPosCorner().z));
+      var cornerD = this.getWorldCorner(plannerElement, false);
+      var screenPosElem = this.worldPosToScreenPos(new Vector2(cornerD.x, cornerD.z));
       switch (this.getPlannerViewConfig().posTrashRotIcon) {
         case 'POSNUM_TOP':
           screenPos = screenPosElem;
@@ -382,19 +401,17 @@ var Planner2DGrid = /*#__PURE__*/function () {
         var _this$plannerPaletteV;
         var dp = allFreeDPs[i];
         if ((_this$plannerPaletteV = this.plannerPaletteViewInfo) !== null && _this$plannerPaletteV !== void 0 && (_this$plannerPaletteV = _this$plannerPaletteV.plannerConfiguration.hideAVButtons) !== null && _this$plannerPaletteV !== void 0 && _this$plannerPaletteV.includes(dp.Type)) continue;
-        if (this.currZoomFactor < 1) {
-          this.currZoomFactor <= 0.6 ? 0.6 : this.currZoomFactor;
-        }
         if (!dp.IsDocking && (dp.Type == 'AVR' || dp.Type == 'AVL')) {
-          //Setup Position
-          var screenPosDP = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x + dp.LocalWorldPos.x, plannerElement.getWorldPosCorner().z + dp.LocalWorldPos.z));
-          var rotCenter = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x, plannerElement.getWorldPosCorner().z));
+          var corner = this.getWorldCorner(plannerElement, false);
+          var screenPosDP = this.worldPosToScreenPos(new Vector2(corner.x + dp.LocalWorldPos.x, corner.z + dp.LocalWorldPos.z));
+          var rotCenter = this.worldPosToScreenPos(new Vector2(corner.x, corner.z));
           screenPosDP = Vector2.rotateAround(screenPosDP, rotCenter, plannerElement.getRotDeg());
           plannerUIHandler.addDP(plannerElement.getSetId(), plannerElement.getElementId(), dp.DpId, dp.Type, 'NOT_DOCKING', undefined, plannerElement.getRotDeg(), dp.RotDeg, screenPosDP, '2D');
         } else if ((dp.Type == 'AVO' || dp.Type == 'AVU' || dp.Type == 'AVC' || dp.Type == 'AVN' || dp.Type == 'AVS') && (!dp.IsDocking || !plannerElement.getIsDockedAccessoire())) {
           if (!['PLANNER', 'PRODUCTS', 'PROMOTED', 'PLANNER_2.0'].includes(this.getConfiguratorState())) continue;
-          var _screenPosDP = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x + dp.LocalWorldPos.x, plannerElement.getWorldPosCorner().z + dp.LocalWorldPos.z));
-          var _rotCenter = this.worldPosToScreenPos(new Vector2(plannerElement.getWorldPosCorner().x, plannerElement.getWorldPosCorner().z));
+          var cornerAcc = this.getWorldCorner(plannerElement, false);
+          var _screenPosDP = this.worldPosToScreenPos(new Vector2(cornerAcc.x + dp.LocalWorldPos.x, cornerAcc.z + dp.LocalWorldPos.z));
+          var _rotCenter = this.worldPosToScreenPos(new Vector2(cornerAcc.x, cornerAcc.z));
           _screenPosDP = Vector2.rotateAround(_screenPosDP, _rotCenter, plannerElement.getRotDeg());
           plannerUIHandler.addDP(plannerElement.getSetId(), plannerElement.getElementId(), dp.DpId, 'ACC', dp.IsDocking ? 'DOCKING' : 'NOT_DOCKING', dp.OnElementId, plannerElement.getRotDeg(), dp.RotDeg, _screenPosDP, '2D');
         }
@@ -592,6 +609,7 @@ var Planner2DGrid = /*#__PURE__*/function () {
   }, {
     key: "updatePlannerView",
     value: function updatePlannerView(plannerUIHandler, plannerElementsDict, boundingBox) {
+      var _this3 = this;
       LOG.debug('UpdatePlanner2DGrid', 'Planner2DGrid');
       this.clearView();
       var curCanvasSize = plannerUIHandler.getCanvas2DGridSize();
@@ -605,8 +623,9 @@ var Planner2DGrid = /*#__PURE__*/function () {
             var svgShape2D = plannerElements[i].getSVGShapeOLF2D();
             svgShape2D.scaleX = 1 / DivaUtils.UnitRecalc;
             svgShape2D.scaleY = 1 / DivaUtils.UnitRecalc;
-            svgShape2D.left = plannerElements[i].getWorldPosCorner().x - boundingBox.worldPos.x;
-            svgShape2D.top = plannerElements[i].getWorldPosCorner().z - boundingBox.worldPos.y;
+            var corner = _this3.getWorldCorner(plannerElements[i], false);
+            svgShape2D.left = corner.x - boundingBox.worldPos.x;
+            svgShape2D.top = corner.z - boundingBox.worldPos.y;
             svgShape2D.angle = plannerElements[i].getRotDeg();
             allplannerSVGs.push(svgShape2D);
           }

package/build/esm/{Planner3DImage-7fd865bb.js → Planner3DImage-62a617a3.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-1f4ff73d.js';
+import './index-0c4af2cf.js';
 import { Vector3, Vector2, Rendering } from '@crystaldesign/web-planner-logic';
 import { getLogger } from '@crystaldesign/diva-core';
 import * as THREE from 'three';