@crystaldesign/diva-web-planner-react 25.1.0-rc.9 → 25.1.1-rc.0

package/build/esm/index-5f2524ca.js

@@ -0,0 +1,155 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.js';
+import { useState, useEffect } from 'react';
+import { n as notExpanded } from './index.module-9b6acdc1.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import './react-json-viewer-eedf8a3b.js';
+import DecisionVisualization from './DecisionVizualizer-3fe8c304.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var table = "table-iqWqM";
+var column = "column-0LUrX";
+var scrollable = "scrollable-g4Mgr";
+var header = "header-4-lJa";
+var decision = "decision-d8i43";
+var css_248z = ".table-iqWqM {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-color: #ffffff;\n  border-collapse: collapse;\n  border-width: 0px;\n  border-color: #e7eaf8;\n  border-style: solid;\n  color: #000000;\n  font-weight: normal;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  overflow-y: auto;\n  top: 73px;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n.table-iqWqM thead {\n  font-weight: bold !important;\n}\n.table-iqWqM thead {\n  border-bottom: 1px solid;\n  background-color: var(--thirdColor);\n  font-size: 16px;\n  padding-top: 1%;\n  color: white;\n}\n.column-0LUrX {\n  text-align: left;\n}\n.column-0LUrX:first-child {\n  height: 20px;\n}\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  left: 50px;\n}\n.header-4-lJa {\n  height: 8%;\n  width: 100%;\n  padding-top: 0.7%;\n  text-align: center;\n  position: absolute;\n  background-color: var(--primaryColor);\n  font-size: 30px;\n  color: white;\n  font-weight: 600;\n}\n\n.decision-d8i43 {\n  z-index: 100;\n  position: fixed;\n  top: 0;\n  right: 240px;\n  width: 700px;\n  height: 100%;\n  background-color: #fff;\n  overflow: auto;\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DecisionAnalyzer = function DecisionAnalyzer(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  useEffect(function () {
+    var asyncFunct = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return DivaUtils.Sleep(1000);
+            case 2:
+              setRerender(!rerender);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function asyncFunct() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    asyncFunct();
+  }, [viewHandler.tabGroupState.allTabGroups]);
+  var article = Object.values(articles !== null && articles !== void 0 ? articles : {}).find(function (a) {
+    return a.posNr == 1;
+  });
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedDecision = _useState4[0],
+    setSelectedDecision = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    filter = _useState6[0],
+    setFilter = _useState6[1];
+  if (!article) return /*#__PURE__*/jsx(Fragment, {});
+  var longestStack = article.decisionDebugStacks[0].stack.length;
+  var entries = _toConsumableArray(Array(longestStack).keys());
+  var _onClick = function onClick(nr, decision) {
+    if (nr == (selectedDecision === null || selectedDecision === void 0 ? void 0 : selectedDecision.Number)) {
+      setSelectedDecision(undefined);
+    } else setSelectedDecision(decision);
+  };
+  var filteredDecisions = article.decisionDebugStacks.map(function (d) {
+    return d.stack.map(function (d) {
+      var _d$decision$Options, _d$decision$DOC;
+      return _objectSpread(_objectSpread({}, d), {}, {
+        bold: !!((_d$decision$Options = d.decision.Options) !== null && _d$decision$Options !== void 0 && _d$decision$Options.includes('OPT' + filter)) || ((_d$decision$DOC = d.decision.DOC) === null || _d$decision$DOC === void 0 ? void 0 : _d$decision$DOC.find(function (doc) {
+          var _doc$DA;
+          return (_doc$DA = doc.DA) === null || _doc$DA === void 0 ? void 0 : _doc$DA.find(function (da) {
+            return da.OptionCodex == filter;
+          });
+        }))
+      });
+    });
+  });
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsxs("a", {
+      className: header,
+      children: ["Decision history", /*#__PURE__*/jsx("input", {
+        value: filter,
+        onChange: function onChange(e) {
+          return setFilter(e.target.value);
+        },
+        placeholder: "filter option ohne OPT"
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsxs("table", {
+        className: table,
+        children: [/*#__PURE__*/jsx("thead", {
+          children: /*#__PURE__*/jsx("tr", {
+            className: column,
+            children: filteredDecisions.map(function (d, i) {
+              var text = '';
+              for (var key in article.decisionDebugStacks[i].variantValues) {
+                text = text + key + ': ' + article.decisionDebugStacks[i].variantValues[key] + '\n';
+              }
+              return /*#__PURE__*/jsx("th", {
+                children: text
+              }, i);
+            })
+          })
+        }), /*#__PURE__*/jsx("tbody", {
+          children: entries.map(function (x, i) {
+            return /*#__PURE__*/jsx("tr", {
+              className: column,
+              children: filteredDecisions.map(function (d, j) {
+                var _d$i, _d$i2;
+                return /*#__PURE__*/jsx("th", {
+                  onClick: function onClick() {
+                    return _onClick(d[i].nr, d[i].decision);
+                  },
+                  children: d[i].bold ? /*#__PURE__*/jsx("strong", {
+                    children: (_d$i = d[i]) === null || _d$i === void 0 ? void 0 : _d$i.text
+                  }) : (_d$i2 = d[i]) === null || _d$i2 === void 0 ? void 0 : _d$i2.text
+                }, j);
+              })
+            }, i);
+          })
+        })]
+      }), selectedDecision && /*#__PURE__*/jsx("div", {
+        className: decision,
+        children: /*#__PURE__*/jsx(DecisionVisualization, {
+          decision: selectedDecision
+        })
+      })]
+    })]
+  }));
+};
+var DecisionAnalyzer$1 = observer(DecisionAnalyzer);
+
+export { DecisionAnalyzer$1 as default };

package/build/esm/index-5fd8016f.js

@@ -0,0 +1,85 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import TabGroupHorizontal from './index-8b3bdebd.js';
+import TabGroupVertical from './index-46f44d61.js';
+import TabSearch from './index-f9275216.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-d8c0d28a.js';
+import './index-dad8b554.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+var wcConfiguratorSteps = "wcConfigurator-steps-1pUS0";
+var horizontal = "horizontal-6TCsO";
+var wcConfiguratorStepsSplit = "wcConfigurator-steps-split-ATmZ8";
+var portrait = "portrait-uvNtu";
+var closeRight = "close-right-rv5xk";
+var closeLeft = "close-left-S5bW1";
+var vertical = "vertical-HLAFY";
+var tabSearchVisibleClass = "tab-search-visible-class-VelST";
+var landscape = "landscape-O7G0i";
+var wcConfigCloseButton = "wcConfigCloseButton-mkHVY";
+var closeButtonHidden = "closeButtonHidden-g1FQc";
+var wcConfiguratorStepsContainer = "wcConfigurator-steps-Container-Yb9mE";
+var css_248z = ".wcConfigurator-steps-1pUS0 {\n  z-index: 300;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: var(--thirdColor);\n}\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n  background: var(--tabGroupBackground);\n}\n\n.horizontal-6TCsO.portrait-uvNtu.close-right-rv5xk .wcConfigurator-steps-split-ATmZ8 {\n  width: calc(100% - 3.6rem);\n}\n.horizontal-6TCsO.portrait-uvNtu.close-left-S5bW1 .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: 100%;\n  background: var(--tabGroupBackground);\n}\n\n.tab-search-visible-class-VelST.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: calc(100% - 46px);\n}\n.horizontal-6TCsO.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.wcConfigCloseButton-mkHVY {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  float: left;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n}\n.vertical-HLAFY .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: -56px;\n  left: 30px;\n}\n\n.portrait-uvNtu .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: 0;\n  margin: 10px;\n}\n\n.portrait-uvNtu.close-right-rv5xk .wcConfigCloseButton-mkHVY {\n  right: 0;\n}\n\n.portrait-uvNtu.close-left-S5bW1 .wcConfigCloseButton-mkHVY {\n  left: -50px;\n}\n\n.wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(197, 197, 197, 0.1);\n}\n\n.wcTabGroupItem-eqGtC:first-child {\n  border-radius: var(--globalBorderRadius) 0 0 var(--globalBorderRadius);\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: var(--globalBorderRadius);\n  height: 100%;\n  border-width: 0px;\n  overflow-x: auto;\n}\n.wcConfigur-xKWej .wcConfiguratorator-steps-Container-FGpNz {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n}\n\n.horizontal-6TCsO.closeButtonHidden-g1FQc .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.portrait-uvNtu .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE and Edge */\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8,\n.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  overflow: auto;\n\n  /* Hide scrollbar for IE, Edge add Firefox */\n\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-Container-Yb9mE {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-Container-Yb9mE {\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "showCloseButtonInMobile", "tabSearchClass"];
+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 TabGroupContainer = function TabGroupContainer(_ref) {
+  var className = _ref.className,
+    showCloseButtonInMobile = _ref.showCloseButtonInMobile,
+    tabSearchClass = _ref.tabSearchClass,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent,
+    isMobile = _useDivaCore$state.dimensions.isMobile;
+  var closeButtonVisible = isFullscreenComponent && showCloseButtonInMobile !== 'none' || viewHandler.tabGroupState.curTabGroupType != 'vertical' && !viewHandler.uiState.ViewConfig.hideCloseButton && viewHandler.eventIsManagedByClient('onWebPlanerClose') && !((!showCloseButtonInMobile || showCloseButtonInMobile == 'none') && viewHandler.getIsInMobileView());
+  var tabSearchVisible = viewHandler.uiState.ViewConfig.tabGroupSearchVisible;
+  var tabGroupScroller = useRef(null);
+  useEffect(function () {
+    if (tabGroupScroller.current) {
+      viewHandler.tabGroupState.setTabGroupScroller(tabGroupScroller.current);
+    }
+    return function () {};
+  }, [tabGroupScroller]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className, wcConfiguratorSteps, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? horizontal : undefined, viewHandler.tabGroupState.curTabGroupType == 'vertical' ? vertical : undefined, !closeButtonVisible ? closeButtonHidden : undefined, tabSearchVisible ? tabSearchVisibleClass : undefined, isMobile ? showCloseButtonInMobile == 'left' ? closeLeft : closeRight : undefined),
+    children: [tabSearchVisible && /*#__PURE__*/jsx(TabSearch, {
+      className: tabSearchClass
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorStepsSplit),
+      ref: tabGroupScroller,
+      children: /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorStepsContainer,
+        children: [viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsx(TabGroupHorizontal, {}), viewHandler.tabGroupState.curTabGroupType == 'vertical' && /*#__PURE__*/jsx(TabGroupVertical, {})]
+      })
+    }), closeButtonVisible && /*#__PURE__*/jsx("div", {
+      className: wcConfigCloseButton,
+      title: t('configurator.ConfigClose'),
+      onClick: viewHandler.onCloseConfigurator
+    })]
+  }));
+};
+var TabGroup = observer(TabGroupContainer);
+
+export { TabGroup as default };

package/build/esm/index-605d7cbf.js

@@ -0,0 +1,23 @@
+import './index-f3774fc8.js';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var Standard = function Standard(props) {
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+
+export { Standard as default };

package/build/esm/index-66bf4573.js

@@ -0,0 +1,45 @@
+import { u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import NavBar from './index-eb4af90d.js';
+import { g as wcConfigurator3Dimage, h as imageCenterOrbit, j as imageCenterStatic } from './index.module-a8d10089.js';
+import Logo from './index-cdc56232.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+
+var Planner3DImage = function Planner3DImage(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setImage3DElement(_ref);
+    },
+    className: wcConfigurator3Dimage,
+    id: "3DImage-Container",
+    style: {
+      // backgroundImage: viewHandler.productState.RenderImageURL,
+      visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
+    },
+    children: [/*#__PURE__*/jsx(NavBar, {}), /*#__PURE__*/jsx("img", {
+      className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
+      id: "diva3dImg",
+      draggable: "false",
+      src: viewHandler.productState.diva3dImgSrc
+    }), /*#__PURE__*/jsx(Logo, {})]
+  });
+};
+var Planner3DImage$1 = observer(Planner3DImage);
+
+export { Planner3DImage$1 as default };

package/build/esm/index-678f70dd.js

@@ -0,0 +1,101 @@
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var container = "container-bxM6C";
+var hidden = "hidden-X63IT";
+var mobile = "mobile--b4Sq";
+var wrapper = "wrapper-jE0i2";
+var imageItem = "image-item-2MypG";
+var sel = "sel-9mQFl";
+var css_248z = ".container-bxM6C {\n  position: absolute;\n  top: 20%;\n  right: 16px;\n  z-index: 700;\n  -webkit-tap-highlight-color: transparent;\n  width: 50px;\n  height: 100%;\n  transition: opacity 0.5s;\n}\n\n.hidden-X63IT {\n  opacity: 0;\n  z-index: 0;\n}\n\n.mobile--b4Sq.container-bxM6C {\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  bottom: 8px;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 50%;\n  border-radius: 48px;\n  height: 40px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.wrapper-jE0i2 {\n  background-color: #f2f2f2;\n  border-radius: 40px;\n  position: relative;\n  height: -moz-min-content;\n  height: min-content;\n  max-height: 60%;\n  display: flex;\n  padding-left: 7px;\n  padding-right: 7px;\n  overflow: hidden;\n}\n\n.mobile--b4Sq .wrapper-jE0i2 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: 0;\n  padding-left: initial;\n  padding-right: 0;\n  padding-right: initial;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 100%;\n  height: 32px;\n  max-height: none;\n  max-height: initial;\n  display: block;\n}\n\n.image-item-2MypG {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f8f8f8 2px;\n  display: block;\n  cursor: pointer;\n  transition: border-color 200ms ease;\n}\n\n.mobile--b4Sq .image-item-2MypG {\n  width: 28px;\n  height: 28px;\n  margin-top: 0;\n  margin-top: initial;\n  margin-bottom: 0;\n  margin-bottom: initial;\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n.sel-9mQFl.image-item-2MypG {\n  border: 2px solid #4f4f4f;\n}\n\n.image-item-2MypG:hover {\n  cursor: pointer;\n  border: solid #9d9d9d 2px;\n}\n";
+styleInject(css_248z);
+
+var PromotedOpvs = function PromotedOpvs(props) {
+  var _viewHandler$settings, _promotedOpvs$article;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    height = _useDivaCore$state$di.height,
+    width = _useDivaCore$state$di.width;
+  useEffect(function () {
+    if (viewHandler.productState.configChangedByPromoOpvs) {
+      viewHandler.productState.setConfigChangedByPromoOpvs(false);
+    } else {
+      viewHandler.productState.setSelectedPromitionIndex(undefined);
+    }
+  }, [viewHandler.settingsState.configChanged]);
+  var contents = [];
+  var catalogData = viewHandler.divaWebPlanner.getCatalogData();
+  var promotedOpvs = catalogData === null || catalogData === void 0 ? void 0 : catalogData.promotedOpvs;
+  var selectedArticleCodex = (_viewHandler$settings = viewHandler.settingsState.selectedArticles) === null || _viewHandler$settings === void 0 || (_viewHandler$settings = _viewHandler$settings[0]) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.codex;
+  if (viewHandler.uiState.isLoading || !selectedArticleCodex || !promotedOpvs) return /*#__PURE__*/jsx(Fragment, {});
+  if (!viewHandler.productState.promotionVisible || !((_promotedOpvs$article = promotedOpvs.articles[selectedArticleCodex]) !== null && _promotedOpvs$article !== void 0 && _promotedOpvs$article.length)) {
+    if (viewHandler.uiState.configSettingsIsHidden) viewHandler.uiState.onClickHideConfigSettings();
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var _loop = function _loop(i) {
+    var promo = promotedOpvs.articles[selectedArticleCodex][i];
+    var opv = catalogData.getOptionValue(promo.displayOPV);
+    contents.push({
+      swiperSlideStyle: {
+        height: 'auto',
+        width: 'auto'
+      },
+      content: /*#__PURE__*/jsx("span", {
+        onClick: function onClick(e) {
+          return viewHandler.productState.onPromotionClick(promo.variantValues, i);
+        },
+        style: {
+          backgroundImage: 'url(' + (opv !== null && opv !== void 0 && opv.image ? catalogData.getCatImageURL(opv.image, '_gal') : '') + ')'
+        },
+        className: classnames(imageItem, viewHandler.productState.selectedPromotionIndex === i ? sel : undefined)
+      }, i)
+    });
+  };
+  for (var i = 0; i < promotedOpvs.articles[selectedArticleCodex].length; i++) {
+    _loop(i);
+  }
+  var sliderProps = {
+    type: 'SliderContainer',
+    sliderType: viewHandler.uiState.isInMobileView ? 'slideX' : 'slideY',
+    slidesPerView: 'auto',
+    freeMode: true,
+    allowTouchMove: true,
+    contents: contents,
+    scrollToSelectedItem: true,
+    mousewheel: true
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(container, viewHandler.uiState.isInMobileView ? mobile : undefined, !viewHandler.uiState.configSettingsIsHidden ? hidden : undefined),
+    children: /*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: sliderProps
+          }
+        }, +height + width)
+      })
+    })
+  });
+};
+var PromotedOpvs$1 = observer(PromotedOpvs);
+
+export { PromotedOpvs$1 as default };

package/build/esm/index-6c29626a.js

@@ -0,0 +1,68 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-f3774fc8.js';
+import classnames from 'classnames';
+import { useState, useEffect } from 'react';
+import Dropdown from 'react-dropdown';
+import { w as wrapper, d as dropdownRoot, a as dropdownControl } from './index.module-6b73b571.js';
+import Arrow from './index-c9375c92.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var LAYOUTS = ['IMAGE', 'TEXT', 'DROPDOWN_TEXT', 'TOGGLE_NAME', 'TOGGLE', 'DROPDOWN_IMAGE', 'GAL_SMALL_GROUP_DROPDOWN', 'NUMBER', 'GAL_BIG', 'GAL_GROUP_DROPDOWN', 'TEXTBOX', 'GAL_TEXT', 'GAL_BIG_TEXT', 'GAL_SMALL_TEXT'];
+var LayoutSelection = function LayoutSelection(_ref) {
+  var option = _ref.option;
+  var _useState = useState(option.layout),
+    _useState2 = _slicedToArray(_useState, 1),
+    origLayout = _useState2[0];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    option.layout = value !== null && value !== void 0 ? value : origLayout;
+    viewHandler.paletteViewHandler.updateCurPaletteData(true);
+  }, [value]);
+  useEffect(function () {
+    return function () {
+      option.layout = origLayout;
+      viewHandler.paletteViewHandler.updateCurPaletteData(true);
+    };
+  }, []);
+  var ArrowElement = /*#__PURE__*/jsx(Arrow, {
+    onClick: function onClick() {
+      return setValue(undefined);
+    },
+    open: false,
+    iconAsDelete: !!value
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: ["Layout:", /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRoot),
+      controlClassName: dropdownControl,
+      options: LAYOUTS,
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val.value);
+      },
+      placeholder: origLayout,
+      arrowClosed: ArrowElement,
+      arrowOpen: ArrowElement
+    })]
+  });
+};
+
+export { LayoutSelection as default };

package/build/esm/index-6de79b6e.js

@@ -0,0 +1,63 @@
+import { u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import ConfigStep from './index-3e7e8bf4.js';
+import Header from './index-a07d00b2.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+
+var VerticalTabGroupItemClassification = function VerticalTabGroupItemClassification(_ref) {
+  var tabGroup = _ref.tabGroup;
+    _ref.height;
+    _ref.minHeight;
+  var viewHandler = useViewHandler();
+  var tabGroupItemRef = useRef(null);
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var configSteps = Object.values(tabGroup.options).map(function (o) {
+    return Object.values(o.configSteps).map(function (s) {
+      return {
+        configStep: s,
+        option: o
+      };
+    });
+  }).flat();
+  return /*#__PURE__*/jsx("div", {
+    ref: tabGroupItemRef,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      open: true,
+      easing: "ease",
+      trigger: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: false
+      }),
+      triggerWhenOpen: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: true
+      }),
+      children: configSteps.map(function (step) {
+        return /*#__PURE__*/jsx(ConfigStep, {
+          step: step
+        }, step.configStep.key);
+      })
+    })
+  });
+};
+var index = observer(VerticalTabGroupItemClassification);
+
+export { index as default };