@crystaldesign/diva-web-planner-react 25.8.0-rc.9 → 25.8.0

package/build/esm/index-d2983d08.js

@@ -0,0 +1,124 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-42d6c87b.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } 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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var info = "info-N3LzD";
+var selected = "selected-P-U1U";
+var notSel = "not-sel-AFJoQ";
+var background = "background-gCmWP";
+var isOpen = "is-open-0Kj4f";
+var text = "text-m4AQC";
+var hidden = "hidden-R5A8Y";
+var css_248z = ".info-N3LzD {\n  position: absolute;\n  bottom: 0px;\n  right: 0px;\n  cursor: pointer;\n}\n.selected-P-U1U,\n.not-sel-AFJoQ {\n  position: absolute;\n  opacity: 1;\n  transition: 0.3s opacity ease;\n  z-index: 20;\n}\n.selected-P-U1U rect,\n.not-sel-AFJoQ rect,\n.selected-P-U1U path,\n.not-sel-AFJoQ path {\n  transition: 0.3s fill ease;\n}\n\n.info-N3LzD svg {\n  transition: 0.3s filter ease;\n}\n\n.info-N3LzD,\n.info-N3LzD svg {\n  width: 20px;\n  width: var(--infoIconSize, 20px);\n  height: 20px;\n  height: var(--infoIconSize, 20px);\n}\n\n.selected-P-U1U:hover .background-gCmWP,\n.is-open-0Kj4f .background-gCmWP {\n  fill: var(--diva-theme-palette-primary-main);\n}\n.selected-P-U1U:hover .text-m4AQC,\n.is-open-0Kj4f .text-m4AQC {\n  fill: transparent;\n}\n\n.selected-P-U1U:hover svg,\n.not-sel-AFJoQ:hover svg {\n  filter: drop-shadow(3px 3px 3px #bbb);\n}\n\n.not-sel-AFJoQ:hover path {\n  fill: var(--diva-theme-palette-primary-main);\n}\n.hidden-R5A8Y {\n  opacity: 0;\n  z-index: 10;\n}\n";
+styleInject(css_248z);
+
+var InfoIcon = function InfoIcon(_ref) {
+  var _ref2, _ref3, _codex;
+  var item = _ref.item,
+    style = _ref.style;
+  var _useDivaCore = useDivaCore();
+    _useDivaCore.state.theme.palette;
+  var viewHandler = useViewHandler();
+  var contentItemId = item.contentItemId;
+  var clickedFrom = (_ref2 = (_ref3 = (_codex = item.codex) !== null && _codex !== void 0 ? _codex : item.articleCodex) !== null && _ref3 !== void 0 ? _ref3 : item.title) !== null && _ref2 !== void 0 ? _ref2 : item.key;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    clicked = _useState2[0],
+    setClicked = _useState2[1];
+  var itemSelected = item.sel || clicked;
+  useEffect(function () {
+    var select = viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId == contentItemId && clickedFrom == viewHandler.settingsState.clickedFrom;
+    if (!select && clicked) {
+      setClicked(false);
+    }
+    if (select && !clicked) {
+      setClicked(true);
+    }
+  }, [viewHandler.settingsState.contentItemVisible, viewHandler.settingsState.contentItemId, viewHandler.settingsState.clickedFrom]);
+  if (!item) throw new Error('item for infoIcon not defined');
+  var showIcon = function showIcon() {
+    var _viewHandler$uiState$;
+    if (item.op && (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.infoIconSettings) !== null && _viewHandler$uiState$ !== void 0 && _viewHandler$uiState$.onlyShowSelectedOPV) {
+      return itemSelected;
+    }
+    return true;
+  };
+  if (!showIcon()) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: info,
+    onClick: function onClick(e) {
+      viewHandler.settingsState.onClickContentItemId(contentItemId, clickedFrom);
+      setClicked(viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId == contentItemId);
+      e.stopPropagation();
+    },
+    style: style,
+    children: /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(selected, !itemSelected ? hidden : undefined, clicked ? isOpen : undefined),
+        children: /*#__PURE__*/jsxs("svg", {
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [/*#__PURE__*/jsx("rect", {
+            x: "1",
+            y: "1",
+            width: "18",
+            height: "18",
+            rx: "9",
+            fill: "#fff"
+          }), /*#__PURE__*/jsx("path", {
+            className: background,
+            d: "M10.0003 14.75C10.2129 14.75 10.391 14.6781 10.5345 14.5343C10.6782 14.3906 10.75 14.2125 10.75 14V9.75C10.75 9.5375 10.6781 9.35933 10.5343 9.2155C10.3904 9.07183 10.2122 9 9.99975 9C9.78708 9 9.609 9.07183 9.4655 9.2155C9.32183 9.35933 9.25 9.5375 9.25 9.75V14C9.25 14.2125 9.32192 14.3906 9.46575 14.5343C9.60958 14.6781 9.78775 14.75 10.0003 14.75ZM10 7.2885C10.2288 7.2885 10.4207 7.21108 10.5755 7.05625C10.7303 6.90142 10.8077 6.70958 10.8077 6.48075C10.8077 6.25192 10.7303 6.06008 10.5755 5.90525C10.4207 5.75058 10.2288 5.67325 10 5.67325C9.77117 5.67325 9.57933 5.75058 9.4245 5.90525C9.26967 6.06008 9.19225 6.25192 9.19225 6.48075C9.19225 6.70958 9.26967 6.90142 9.4245 7.05625C9.57933 7.21108 9.77117 7.2885 10 7.2885ZM10.0017 19.5C8.68775 19.5 7.45267 19.2507 6.2965 18.752C5.14033 18.2533 4.13467 17.5766 3.2795 16.7218C2.42433 15.8669 1.74725 14.8617 1.24825 13.706C0.749417 12.5503 0.5 11.3156 0.5 10.0017C0.5 8.68775 0.749333 7.45267 1.248 6.2965C1.74667 5.14033 2.42342 4.13467 3.27825 3.2795C4.13308 2.42433 5.13833 1.74725 6.294 1.24825C7.44967 0.749417 8.68442 0.5 9.99825 0.5C11.3123 0.5 12.5473 0.749333 13.7035 1.248C14.8597 1.74667 15.8653 2.42342 16.7205 3.27825C17.5757 4.13308 18.2528 5.13833 18.7518 6.294C19.2506 7.44967 19.5 8.68442 19.5 9.99825C19.5 11.3123 19.2507 12.5473 18.752 13.7035C18.2533 14.8597 17.5766 15.8653 16.7218 16.7205C15.8669 17.5757 14.8617 18.2528 13.706 18.7518C12.5503 19.2506 11.3156 19.5 10.0017 19.5Z",
+            fill: "#fff"
+          }), /*#__PURE__*/jsx("path", {
+            className: text,
+            d: "M10.0003 14.75C10.2129 14.75 10.391 14.6781 10.5345 14.5343C10.6782 14.3906 10.75 14.2125 10.75 14V9.75C10.75 9.5375 10.6781 9.35933 10.5343 9.2155C10.3904 9.07183 10.2122 9 9.99975 9C9.78708 9 9.609 9.07183 9.4655 9.2155C9.32183 9.35933 9.25 9.5375 9.25 9.75V14C9.25 14.2125 9.32192 14.3906 9.46575 14.5343C9.60958 14.6781 9.78775 14.75 10.0003 14.75ZM10 7.2885C10.2288 7.2885 10.4207 7.21108 10.5755 7.05625C10.7303 6.90142 10.8077 6.70958 10.8077 6.48075C10.8077 6.25192 10.7303 6.06008 10.5755 5.90525C10.4207 5.75058 10.2288 5.67325 10 5.67325C9.77117 5.67325 9.57933 5.75058 9.4245 5.90525C9.26967 6.06008 9.19225 6.25192 9.19225 6.48075C9.19225 6.70958 9.26967 6.90142 9.4245 7.05625C9.57933 7.21108 9.77117 7.2885 10 7.2885ZM10.0017 19.5C8.68775 19.5 7.45267 19.2507 6.2965 18.752C5.14033 18.2533 4.13467 17.5766 3.2795 16.7218C2.42433 15.8669 1.74725 14.8617 1.24825 13.706C0.749417 12.5503 0.5 11.3156 0.5 10.0017C0.5 8.68775 0.749333 7.45267 1.248 6.2965C1.74667 5.14033 2.42342 4.13467 3.27825 3.2795C4.13308 2.42433 5.13833 1.74725 6.294 1.24825C7.44967 0.749417 8.68442 0.5 9.99825 0.5C11.3123 0.5 12.5473 0.749333 13.7035 1.248C14.8597 1.74667 15.8653 2.42342 16.7205 3.27825C17.5757 4.13308 18.2528 5.13833 18.7518 6.294C19.2506 7.44967 19.5 8.68442 19.5 9.99825C19.5 11.3123 19.2507 12.5473 18.752 13.7035C18.2533 14.8597 17.5766 15.8653 16.7218 16.7205C15.8669 17.5757 14.8617 18.2528 13.706 18.7518C12.5503 19.2506 11.3156 19.5 10.0017 19.5ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z",
+            fill: "#4F4F4F"
+          })]
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames(notSel, itemSelected ? hidden : undefined),
+        children: /*#__PURE__*/jsxs("svg", {
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [/*#__PURE__*/jsx("rect", {
+            x: "1",
+            y: "1",
+            width: "18",
+            height: "18",
+            rx: "9",
+            fill: "#fff"
+          }), /*#__PURE__*/jsx("path", {
+            d: "M10.0003 14.75C10.2129 14.75 10.391 14.6781 10.5345 14.5343C10.6782 14.3906 10.75 14.2125 10.75 14V9.75C10.75 9.5375 10.6781 9.35933 10.5343 9.2155C10.3904 9.07183 10.2122 9 9.99975 9C9.78708 9 9.609 9.07183 9.4655 9.2155C9.32183 9.35933 9.25 9.5375 9.25 9.75V14C9.25 14.2125 9.32192 14.3906 9.46575 14.5343C9.60958 14.6781 9.78775 14.75 10.0003 14.75ZM10 7.2885C10.2288 7.2885 10.4207 7.21108 10.5755 7.05625C10.7303 6.90142 10.8077 6.70958 10.8077 6.48075C10.8077 6.25192 10.7303 6.06008 10.5755 5.90525C10.4207 5.75058 10.2288 5.67325 10 5.67325C9.77117 5.67325 9.57933 5.75058 9.4245 5.90525C9.26967 6.06008 9.19225 6.25192 9.19225 6.48075C9.19225 6.70958 9.26967 6.90142 9.4245 7.05625C9.57933 7.21108 9.77117 7.2885 10 7.2885ZM10.0017 19.5C8.68775 19.5 7.45267 19.2507 6.2965 18.752C5.14033 18.2533 4.13467 17.5766 3.2795 16.7218C2.42433 15.8669 1.74725 14.8617 1.24825 13.706C0.749417 12.5503 0.5 11.3156 0.5 10.0017C0.5 8.68775 0.749333 7.45267 1.248 6.2965C1.74667 5.14033 2.42342 4.13467 3.27825 3.2795C4.13308 2.42433 5.13833 1.74725 6.294 1.24825C7.44967 0.749417 8.68442 0.5 9.99825 0.5C11.3123 0.5 12.5473 0.749333 13.7035 1.248C14.8597 1.74667 15.8653 2.42342 16.7205 3.27825C17.5757 4.13308 18.2528 5.13833 18.7518 6.294C19.2506 7.44967 19.5 8.68442 19.5 9.99825C19.5 11.3123 19.2507 12.5473 18.752 13.7035C18.2533 14.8597 17.5766 15.8653 16.7218 16.7205C15.8669 17.5757 14.8617 18.2528 13.706 18.7518C12.5503 19.2506 11.3156 19.5 10.0017 19.5ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z",
+            fill: "#4F4F4F"
+          })]
+        })
+      })]
+    })
+  });
+};
+var InfoIcon$1 = observer(InfoIcon);
+
+export { InfoIcon$1 as default };

package/build/esm/index-d2fae467.js

@@ -0,0 +1,234 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, C as Checkout } from './index-42d6c87b.js';
+import React, { useState, useEffect, Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import sift from 'sift';
+import TextBox from './index-958ccefe.js';
+import ItemVariant from './index-7ab45a16.js';
+import SettingsPaletteGroup from './index-301ea0d8.js';
+import ToggleOption from './index-b04b264a.js';
+import GroupDropdown from './index-b5c24ad3.js';
+import PromotedProducts from './index-eddbc858.js';
+import ToggleName from './index-dbb0d63c.js';
+import itemPaletteTypeComponentMap from './index-59280600.js';
+import ItemWrapper from './index-49435e8a.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var collapsableInner = "collapsable-inner-YPvJa";
+var css_248z = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\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 ShelfPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-216f9a43.js');
+});
+var DoorPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-47feb245.js');
+});
+var ProductList = /*#__PURE__*/React.lazy(function () {
+  return import('./index-f30cfb37.js');
+});
+var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
+  var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
+  var item = _ref.item,
+    groupSize = _ref.groupSize;
+  var viewHandler = useViewHandler();
+  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
+  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredGroups = _useState2[0],
+    setFilteredGroups = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredGroupsWithEmptyGroups = _useState4[0],
+    setFilteredGroupsWithEmptyGroups = _useState4[1];
+  useEffect(function () {
+    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
+      return _objectSpread(_objectSpread({}, group), {}, {
+        items: item.currentItemsFilter && item.type !== 'PLANNERSWITCH' ? group.items.filter(sift(item.currentItemsFilter)) : group.items
+      });
+    });
+    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
+      return group.items.length > 0;
+    });
+    if (filteredGroups.length > 0) {
+      filteredGroupsWithEmptyGroups = filteredGroups;
+    }
+    setFilteredGroups(filteredGroups);
+    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
+  }, [item, viewHandler.settingsState.itemPalettes]);
+  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
+  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
+
+  //this code now sets a css variable within a specific palette to define the grid items size and gird gap
+  //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
+  //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
+  var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
+  var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
+  var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
+  var infoIconSize = undefined;
+  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
+    gridSize = '240px';
+  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
+    gridSize = 'calc(100% - 20px)';
+  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
+    gridSize = '100px';
+  } else if (item.type == 'ACC') {
+    if (settingsSizes.sizeAccessoires) {
+      gridSize = settingsSizes.sizeAccessoires;
+    }
+  } else if (item.type == 'ACC_CONFIG') {
+    gridSize = '100%';
+  } else if (item.type.startsWith('GAL_SMALL')) {
+    gridSize = '60px';
+  } else if (item.type == 'RANGE') {
+    gridSize = '100%';
+  } else if (item.type == 'GAL') {
+    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
+    gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
+    gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
+  } else if (item.type === 'PLANNERSWITCH') {
+    gridSize = '170px';
+  } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
+    //for the usecase of schlaraffia in mobile
+    //TODO for refactorig this should be done nicer
+    gridSize = '120px';
+  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
+    gridSize = '120px';
+  } else if (item.type === 'VERY_SMALL') {
+    gridSize = '48%';
+  } else if (item.type === 'GAL_TEXT') {
+    gridSize = '100px';
+  } else if (item.type === 'GAL_BIG_TEXT') {
+    gridSize = '120px';
+  } else if (item.type === 'GAL_SMALL_TEXT') {
+    gridSize = '70px';
+  }
+  if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
+    infoIconSize = '20px';
+  }
+  var variables = _objectSpread({
+    '--gridSize': gridSize,
+    '--gridGap': gridGap
+  }, infoIconSize ? {
+    '--infoIconSize': infoIconSize
+  } : {});
+  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
+  switch (item.type) {
+    case 'CHECKOUT':
+      return /*#__PURE__*/jsx(Checkout, {
+        viewHandler: viewHandler
+      });
+    case 'TOGGLE':
+      return /*#__PURE__*/jsx(ToggleOption, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'TOGGLE_NAME':
+      return /*#__PURE__*/jsx(ToggleName, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'TEXTBOX':
+      return /*#__PURE__*/jsx(TextBox, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'DROPDOWN_TEXT':
+    case 'DROPDOWN_IMAGE':
+      return /*#__PURE__*/jsx(ItemVariant, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'NUMBER':
+      return /*#__PURE__*/jsx(PaletteComponent, {
+        paletteId: item.id,
+        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
+        groupSize: groupSize
+      }, item.id + item.configStepKey);
+    case 'SHELFPLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(ShelfPlanner, {
+          filteredGroups: filteredGroups,
+          item: item,
+          id: item.id,
+          style: variables
+        }, item.id)
+      });
+    case 'PRODUCTS':
+      return /*#__PURE__*/jsx(ProductList, {
+        item: item
+      });
+    case 'PROMOTED':
+      return /*#__PURE__*/jsx(PromotedProducts, {
+        item: item
+      });
+    case 'DOOR_PLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(DoorPlanner, {
+          item: item
+        })
+      });
+    case 'GAL_GROUP_DROPDOWN':
+    case 'GAL_SMALL_GROUP_DROPDOWN':
+      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
+        item: item,
+        PaletteComponent: PaletteComponent,
+        filteredGroups: filteredGroupsWithEmptyGroups,
+        id: item.id,
+        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
+        contentInnerClassName: innerGridClass
+      }, item.configStepKey);
+      return /*#__PURE__*/jsx(ItemWrapper, {
+        style: variables,
+        item: item,
+        children: childGroup
+      });
+    default:
+      var children;
+      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
+        className: innerGridClass,
+        children: filteredGroups.map(function (group) {
+          return group.items.map(function (paletteItem, i) {
+            return /*#__PURE__*/jsx(PaletteComponent, {
+              paletteType: item.type,
+              paletteId: item.id,
+              item: paletteItem
+            }, getKey(paletteItem));
+          });
+        })
+      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
+        groups: filteredGroups,
+        contentInnerClassName: innerGridClass,
+        itemPalette: item,
+        PaletteComponent: PaletteComponent
+      });
+      return /*#__PURE__*/jsx(ItemWrapper, {
+        style: variables,
+        item: item,
+        children: children
+      });
+  }
+};
+var getKey = function getKey(item) {
+  var _ref2, _ref3, _item$codex;
+  return (_ref2 = (_ref3 = (_item$codex = item.codex) !== null && _item$codex !== void 0 ? _item$codex : item.key) !== null && _ref3 !== void 0 ? _ref3 : item.articleCodex) !== null && _ref2 !== void 0 ? _ref2 : item.title;
+};
+var SettingsItem = observer(SettingsPaletteItem);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getKey: getKey,
+  'default': SettingsItem
+});
+
+export { SettingsItem as S, collapsableInner as c, getKey as g, index as i };

package/build/esm/index-d33ce376.js

@@ -0,0 +1,84 @@
+import { s as styleInject, u as useViewHandler, _ as _onClickCheckout, I as Icon } from './index-42d6c87b.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { c as checkoutButton } from './index.module-ed4c6aee.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfiguratorAction = "wcConfigurator-action-1kRvz";
+var wcConfiguratorActionButton = "wcConfigurator-action-Button-uCk2M";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-S5Uqm";
+var wcCheckoutButtonText = "wcCheckoutButtonText-AKaeu";
+var css_248z = ".wcConfigurator-action-1kRvz {\n  background: rgba(242.2, 242.2, 242.2, 0.9);\n  transition: width 0.2s ease-in-out;\n  display: flex;\n}\n\n.wcConfigurator-action-Button-uCk2M {\n  background-color: var(--primaryColor);\n  background-color: var(--saveButton, var(--primaryColor));\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--saveButton, var(--primaryColor)) solid;\n  border-radius: var(--globalBorderRadius);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  line-height: var(--lineHeight1);\n  font-weight: var(--fontWeight1);\n  height: calc(100% - 2px);\n  font-size: 14px;\n  color: white;\n  flex-grow: 1;\n  -webkit-text-stroke: 0px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.wcConfigurator-settings-actions-isOnFirstStepDisabled-4PqCh .wcConfigurator-action-Button-uCk2M {\n  pointer-events: none;\n  background-color: #c25353;\n  border-color: #c25353;\n}\n\n.wcConfigurator-action-Button-uCk2M:hover {\n  background-color: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n  cursor: pointer;\n  transition:\n    box-shadow 0.3s ease,\n    background-color 0.3s ease,\n    border-color 0.3s ease;\n\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcCheckoutButtonPrice-S5Uqm {\n  float: right;\n  margin-right: 10%;\n}\n.wcCheckoutButtonIcon-6TJQ5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  width: 50%;\n  height: 50%;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  position: absolute;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz {\n  /*auser In die Zusammenfassung wird ausgeblendet*/\n  display: none;\n}\n.landscape-1LGy8 .wcConfigurator-Settings-hidden-kvVds.wcConfigurator-settings-actions-isOnLastStep-BV9rP .wcConfigurator-action-1kRvz {\n  display: none;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz .wcConfigurator-action-Button-uCk2M {\n  line-height: var(--configuratorActionHeight);\n}\n.wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu,\n.portrait-ySRAg .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.wcCheckoutButtonText-AKaeu {\n  float: left;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+var BasketActionStandard = function BasketActionStandard(_ref) {
+  var _viewHandler$uiState$;
+  var _ref$buttonTextClassN = _ref.buttonTextClassName,
+    buttonTextClassName = _ref$buttonTextClassN === void 0 ? wcCheckoutButtonText : _ref$buttonTextClassN,
+    _ref$buttonPriceClass = _ref.buttonPriceClassName,
+    buttonPriceClassName = _ref$buttonPriceClass === void 0 ? wcCheckoutButtonPrice : _ref$buttonPriceClass,
+    containerClassName = _ref.containerClassName,
+    price = _ref.price,
+    showCheckoutButtons = _ref.showCheckoutButtons;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wcConfiguratorAction, containerClassName),
+    children: [showCheckoutButtons && ((_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.map(function (b, index) {
+      if (!evalVisible(b, viewHandler)) return /*#__PURE__*/jsx(Fragment, {});
+      return /*#__PURE__*/jsx("div", {
+        className: checkoutButton,
+        onClick: function onClick() {
+          return _onClickCheckout(b, viewHandler, index, t);
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          checkoutButton: b,
+          size: 32
+        })
+      }, index);
+    })), /*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorActionButton,
+      onClick: function onClick() {
+        return viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
+      },
+      id: "wcConfigurator-action-tobasket",
+      children: [/*#__PURE__*/jsx("div", {
+        className: buttonTextClassName,
+        children: t('configurator.ADD_TO_BASKET')
+      }), !hidePrices && viewHandler.tabGroupState.curTabGroupType == 'horizontal' && price && /*#__PURE__*/jsx("div", {
+        className: buttonPriceClassName,
+        children: price
+      })]
+    })]
+  });
+};
+var BasketActionStandard$1 = observer(BasketActionStandard);
+var evalVisible = function evalVisible(button, viewHandler) {
+  var rule = button.visibleNavigatorFunction; //button.visibleNavigatorFunction;
+  if (button.visibleRule && !eval(button.visibleRule)) return false;
+  if (rule === false || rule === undefined) return false;
+  return rule === true || viewHandler.uiState.isMobileLandscape && rule.includes('MOBILE_L') || viewHandler.uiState.isMobilePortrait && rule.includes('MOBILE_P') || !viewHandler.getIsInMobileView() && rule.includes('DESKTOP');
+};
+
+export { BasketActionStandard$1 as default };

package/build/esm/index-d362a222.js

@@ -0,0 +1,207 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+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 { u as useViewHandler } from './index-42d6c87b.js';
+import { useState, useEffect } from 'react';
+import { n as notExpanded } from './index.module-35bbb54b.js';
+import { s as scrollable, h as header, f as filter, t as table, c as column, d as decision, D as DecisionVisualization } from './DecisionVizualizer-31f033a6.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import './react-json-viewer-9d75ec90.js';
+import ArticleSelector from './index-16f2270a.js';
+import { jsxs, jsx } 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';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import 'react-json-view-lite';
+import 'react-draggable';
+import 'react-select';
+
+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 _article$decisionDebu;
+  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]);
+  useEffect(function () {
+    var set = viewHandler.divaWebPlanner.actSet();
+    if (set && !set.logDecisions) set.logDecisions = true;
+    return function () {
+      var set = viewHandler.divaWebPlanner.actSet();
+      if (set) set.logDecisions = false;
+    };
+  }, [viewHandler.uiState.isLoading]);
+  var _useState3 = useState(Object.values(articles !== null && articles !== void 0 ? articles : {}).find(function (a) {
+      return a.posNr == 1;
+    })),
+    _useState4 = _slicedToArray(_useState3, 2),
+    article = _useState4[0],
+    setArticle = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedRow = _useState6[0],
+    setSelectedRow = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    filter$1 = _useState8[0],
+    setFilter = _useState8[1];
+  if (!article) return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      children: "Decision analyzer - plann article"
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle]
+    })]
+  }));
+  var isIDMFormat = article.CatalogData.isIDMFormat;
+  var longestStack = (_article$decisionDebu = article.decisionDebugStacks) === null || _article$decisionDebu === void 0 || (_article$decisionDebu = _article$decisionDebu[0]) === null || _article$decisionDebu === void 0 || (_article$decisionDebu = _article$decisionDebu.stack) === null || _article$decisionDebu === void 0 ? void 0 : _article$decisionDebu.length;
+  if (!longestStack) return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      children: "Decision analyzer - change config"
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle]
+    })]
+  }));
+  var entries = _toConsumableArray(Array(longestStack).keys());
+  var _onClick = function onClick(nr, row) {
+    var _selectedRow$decision, _selectedRow$decision2;
+    if (nr == ((selectedRow === null || selectedRow === void 0 || (_selectedRow$decision = selectedRow.decision) === null || _selectedRow$decision === void 0 ? void 0 : _selectedRow$decision.Number) || (selectedRow === null || selectedRow === void 0 || (_selectedRow$decision2 = selectedRow.decision) === null || _selectedRow$decision2 === void 0 ? void 0 : _selectedRow$decision2.decisionNo))) {
+      setSelectedRow(undefined);
+    } else setSelectedRow(row);
+  };
+  var filteredDecisions = [];
+  if (isIDMFormat) {
+    filteredDecisions = article.decisionDebugStacks.map(function (d) {
+      return d.stack.map(function (d) {
+        var _featureRefs;
+        return _objectSpread(_objectSpread({}, d), {}, {
+          bold: !!(filter$1 !== undefined && (_featureRefs = d.decision.featureRefs) !== null && _featureRefs !== void 0 && _featureRefs.includes(filter$1)
+          //!!(d.decision as IDMDecision).optionCombinations?.find((o) => Object.values(o.projectActions)?.find((da) => (da) == filter || da == filter)))
+          )
+        });
+      });
+    });
+  } else {
+    filteredDecisions = article.decisionDebugStacks.map(function (d) {
+      return d.stack.map(function (d) {
+        var _DOC, _Options;
+        return _objectSpread(_objectSpread({}, d), {}, {
+          bold: !!(filter$1 !== undefined && (!!((_DOC = d.decision.DOC) !== null && _DOC !== void 0 && _DOC.find(function (doc) {
+            var _doc$DA, _doc$JsFormula;
+            return ((_doc$DA = doc.DA) === null || _doc$DA === void 0 ? void 0 : _doc$DA.find(function (da) {
+              return da.OptionCodex == filter$1 || da.DecisionNr == filter$1;
+            })) || ((_doc$JsFormula = doc.JsFormula) === null || _doc$JsFormula === void 0 ? void 0 : _doc$JsFormula.includes("'OPT" + filter$1 + "'"));
+          })) || !!((_Options = d.decision.Options) !== null && _Options !== void 0 && _Options.includes('OPT' + filter$1))))
+        });
+      });
+    });
+  }
+  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$1,
+        onChange: function onChange(e) {
+          return setFilter(e.target.value);
+        },
+        placeholder: "filter option ohne OPT",
+        className: filter
+      })]
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle]
+    }), /*#__PURE__*/jsxs("table", {
+      className: table,
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsx("tr", {
+          className: column,
+          children: filteredDecisions.map(function (d, i) {
+            return /*#__PURE__*/jsx("th", {
+              children: i
+            }, 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]);
+                },
+                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);
+        })
+      })]
+    }), selectedRow && /*#__PURE__*/jsx("div", {
+      className: decision,
+      children: /*#__PURE__*/jsx(DecisionVisualization, {
+        decision: selectedRow.decision,
+        snapshots: selectedRow.snapshots,
+        onClose: function onClose() {
+          return setSelectedRow(undefined);
+        }
+      })
+    })]
+  }));
+};
+var DecisionAnalyzer$1 = observer(DecisionAnalyzer);
+
+export { DecisionAnalyzer$1 as default };