@crystaldesign/diva-web-planner-react 24.12.0 → 24.12.1

package/build/esm/index-6354667a.js

@@ -0,0 +1,148 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import 'react';
+import { w as wholeWrapper, n as notExpanded } from './index.module-94a16855.js';
+import TabGroups from './index-97b5d76e.js';
+import TabGroupOptions from './index-ffd95766.js';
+import { observer } from 'mobx-react-lite';
+import ProduktDetails from './index-ce994a26.js';
+import Collapsible from 'react-collapsible';
+import Price from './index-985b34d0.js';
+import classnames from 'classnames';
+import JsonViewer from './index-26fd5353.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+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 './index.module-03df1a8f.js';
+import 'react-json-view';
+
+var menuPoint = "menu-point-Bz5zM";
+var collapsibleHeader = "collapsibleHeader-lzT9Y";
+var tabGroupWrapper = "tab-group-wrapper-mSLB-";
+var css_248z = ".menu-point-Bz5zM {\r\n  font-size: 22px;\r\n  padding: 0px 0px;\r\n  padding: 10px 0;\r\n  background-color: var(--primaryColor);\r\n  border-bottom: 1px solid;\r\n  width: 100%;\r\n  text-align: center;\r\n  margin-left: 0px;\r\n  color: white;\r\n  font-weight: 600;\r\n}\r\n.collapsibleHeader-lzT9Y {\r\n  font-family: var(--diva-typography-font-family);\r\n  font-weight: 100;\r\n  text-align: center;\r\n  background-color: #bbbbbb;\r\n  color: black;\r\n  border-radius: 5px;\r\n  margin: 5% 1% 1% 1%;\r\n  transition: background-color 0.3s;\r\n  padding: 1% 0%;\r\n  cursor: pointer;\r\n}\r\n.collapsibleHeader-lzT9Y:hover {\r\n  background-color: var(--primaryColor);\r\n  color: white;\r\n}\r\n.tab-group-wrapper-mSLB- {\r\n  width: 90%;\r\n  margin-left: 4%;\r\n  background-color: white;\r\n}\r\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 OptionTree = function OptionTree(_ref) {
+  var _articles$viewHandler, _hiddenOptions$tabGro, _articles$Object$keys, _articles$Object$keys2;
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var configTree = viewHandler.tabGroupState.allTabGroups;
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var hiddenOptions = viewHandler.divaWebPlanner.getHiddenOptions();
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  var tree = Object.values(configTree);
+  var hiddenTree = Object.values((_hiddenOptions$tabGro = hiddenOptions === null || hiddenOptions === void 0 ? void 0 : hiddenOptions.tabGroups) !== null && _hiddenOptions$tabGro !== void 0 ? _hiddenOptions$tabGro : {});
+  var canClick = false;
+  tree = tree.filter(function (item) {
+    return item.type == 'OPTION';
+  });
+  var CollapsibleProps = {
+    open: true,
+    easing: 'ease-in',
+    transitionTime: 200
+  };
+  if (!article) {
+    canClick = true;
+  }
+  var mat3D = (_articles$Object$keys = articles[Object.keys(articles)[0]]) === null || _articles$Object$keys === void 0 || (_articles$Object$keys2 = _articles$Object$keys.getPlannerConfigData) === null || _articles$Object$keys2 === void 0 ? void 0 : _articles$Object$keys2.call(_articles$Object$keys, {}).config;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(wholeWrapper, notExpanded, props.className),
+    children: [/*#__PURE__*/jsx("a", {
+      className: menuPoint,
+      children: "Options \xDCbersicht"
+    }), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Produktdetails"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: !canClick && /*#__PURE__*/jsx(ProduktDetails, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Preise"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx(Price, {})
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Optionsbaum"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: tree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "Versteckte Optionen"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: /*#__PURE__*/jsx("div", {
+        className: tabGroupWrapper,
+        children: hiddenTree.map(function (tabGroup) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(TabGroups, {
+              tabGroup: tabGroup
+            }), /*#__PURE__*/jsx("div", {
+              children: Object.values(tabGroup.options).map(function (options) {
+                return /*#__PURE__*/jsx(TabGroupOptions, {
+                  tabGroupOption: options,
+                  basketId: article.basketId
+                }, options.codex);
+              })
+            })]
+          }, tabGroup.key);
+        })
+      })
+    })), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
+      trigger: /*#__PURE__*/jsx("div", {
+        className: collapsibleHeader,
+        children: "3D MAT"
+      })
+    }, CollapsibleProps), {}, {
+      triggerDisabled: canClick,
+      children: mat3D && /*#__PURE__*/jsx(JsonViewer, {
+        isExpanded: true,
+        collapsed: 5,
+        json: mat3D
+      })
+    }))]
+  }));
+};
+var OptionTree$1 = observer(OptionTree);
+
+export { OptionTree$1 as default };

package/build/esm/index-6362a92e.js

@@ -0,0 +1,154 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import classnames from 'classnames';
+import DockFilter from './index-6d4449eb.js';
+import RALFilter from './index-7dbf560b.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import Searchbar from './index-972a9fb1.js';
+import ToggleHeader from './index-7345e4e6.js';
+import NumberInput from './index-7d506eed.js';
+import InfoButton from './index-7447a73f.js';
+import PDFButton from './index-bdb5faba.js';
+import SummaryVariantButton from './index-1f4d58c4.js';
+import SelectedOpv from './index-0ed992e6.js';
+import InfoIcon from './index-55f945c0.js';
+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/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 '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-abcc0f82.js';
+import 'react-dropdown';
+import './index-b34188dc.js';
+import './index-63cce023.js';
+import '@crystaldesign/content-box';
+import './index-2f1a0e04.js';
+import './index-caa33034.js';
+import 'react-switch';
+import './index-0953e946.js';
+import 'react-laag';
+import './index-2b309493.js';
+import './index-e4dd8413.js';
+
+var headerWrapper = "header-wrapper-qVEmI";
+var wcConfiguratorSettingsHeaderTitle = "wcConfigurator-settings-header-title--CcUK";
+var wcConfiguratorSettingsHeaderPrice = "wcConfigurator-settings-header-price-UmViW";
+var scroller = "scroller-jdhnI";
+var wcConfigItemHeader = "wcConfigItem-Header-JEANn";
+var minExpanded = "min-expanded-kEE9N";
+var landscape = "landscape-DHu2r";
+var portrait = "portrait-8Z7gh";
+var quantity = "quantity-GKJLF";
+var iconsContainer = "icons-container-DbfdO";
+var css_248z = ".wcConfigurator-settings-header--UZPU {\r\n  height: 100%;\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n.header-wrapper-qVEmI {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n}\r\n\r\n.wcConfigurator-settings-header-title--CcUK {\r\n  width: auto;\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  line-height: 24px;\r\n  color: var(--secondaryColor);\r\n  margin-top: 10px;\r\n  float: left;\r\n  user-select: none;\r\n  -moz-user-select: none;\r\n  -webkit-user-drag: none;\r\n  -webkit-user-select: none;\r\n  -ms-user-select: none;\r\n}\r\n\r\n.wcConfigurator-settings-header-price-UmViW {\r\n  width: auto;\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  line-height: 24px;\r\n  color: var(--secondaryColor);\r\n  margin-top: 10px;\r\n  float: right;\r\n}\r\n\r\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK {\r\n  max-width: calc(100% - 51.2px);\r\n  margin: 8px 0px;\r\n}\r\n\r\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK.wcFilterIsVisible-S9QKu {\r\n  max-width: calc(50% - 19.2px);\r\n}\r\n\r\n.wcConfigurator-settings-header-Filters-Container-hi62D {\r\n  width: 100%;\r\n  float: left;\r\n}\r\n.wcConfigItem-Header-JEANn {\r\n  border-radius: 0 !important;\r\n  border-radius: initial !important;\r\n}\r\n.wcConfigItem-Header-JEANn {\r\n  /* width: calc(100% - 32px); */\r\n  margin-top: 8px;\r\n  margin-right: 8px;\r\n  height: -moz-fit-content;\r\n  height: fit-content;\r\n  min-height: 40px;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.min-expanded-kEE9N.wcConfigItem-Header-JEANn {\r\n  overflow: hidden;\r\n}\r\n\r\n:not(.scroller-jdhnI).wcConfigItem-Header-JEANn {\r\n  margin-left: var(--settingsScrollerPaddingLeft);\r\n  margin-right: var(--settingsScrollerPaddingRight);\r\n}\r\n\r\n.landscape-DHu2r.wcConfigItem-Header-JEANn,\r\n.portrait-8Z7gh.wcConfigItem-Header-JEANn {\r\n  min-height: 40px;\r\n}\r\n\r\n.landscape-DHu2r.scroller-jdhnI header,\r\n.portrait-8Z7gh.scroller-jdhnI header {\r\n  min-height: 40px;\r\n}\r\n\r\n.quantity-GKJLF {\r\n  max-width: 200px;\r\n  float: left;\r\n  padding-top: 12px;\r\n  padding-left: 20%;\r\n}\r\n\r\n.icons-container-DbfdO {\r\n  display: flex;\r\n  align-items: center;\r\n  float: right;\r\n  position: relative;\r\n  margin-top: 5px;\r\n  flex-grow: 2;\r\n  justify-content: flex-end;\r\n  max-width: 100%;\r\n}\r\n";
+styleInject(css_248z);
+
+var SettingsItemHeader = function SettingsItemHeader(_ref) {
+  var _viewHandler$getViewC, _item$selectedElement, _item$selectedElement2, _item$selectedElement3;
+  var isSettingsHeader = _ref.isSettingsHeader,
+    specialElement1 = _ref.specialElement1,
+    specialElement2 = _ref.specialElement2,
+    item = _ref.item,
+    isInScroller = _ref.isInScroller,
+    _ref$titleClass = _ref.titleClass,
+    titleClass = _ref$titleClass === void 0 ? wcConfiguratorSettingsHeaderTitle : _ref$titleClass,
+    _ref$containerClass = _ref.containerClass,
+    containerClass = _ref$containerClass === void 0 ? wcConfigItemHeader : _ref$containerClass;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var FilterTypeComponentMap = {
+    DockFilter: !viewHandler.settingsState.plannerReplaceMode ? DockFilter : function () {
+      return /*#__PURE__*/jsx(Fragment, {});
+    },
+    RAL: !viewHandler.uiState.ViewConfig.hideRalColorFilter ? RALFilter : function () {
+      return /*#__PURE__*/jsx(Fragment, {});
+    },
+    None: function None() {
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  };
+  var PaletteComponent = FilterTypeComponentMap[item.filterComponent ? item.filterComponent : 'None'];
+  var doShowSearchbar = item.searchVisible && !isSettingsHeader && !viewHandler.uiState.ViewConfig.hideSearchBar && !item.isRenderedNotInSettingPalette;
+  var doShowFilter = item.filterVisible && !isSettingsHeader && item.filterComponent;
+  var title = isSettingsHeader || item.type == 'TOGGLE' ? t('configurator.' + viewHandler.settingsState.paletteHeaderStepName, viewHandler.settingsState.paletteHeaderStepName) : t('configurator.' + item.name, item.name);
+  if (item.isMultiselect) {
+    title = title + ' (' + t('configurator.isMultiselect') + ')';
+  }
+  if ((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.showOptionCodexInOptionHeader) title = title + (item.optionCodex ? ' (' + item.optionCodex + ')' : '');
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(containerClass, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, isInScroller ? scroller : undefined),
+    children: /*#__PURE__*/jsxs("div", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      className: headerWrapper,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: titleClass,
+        children: [/*#__PURE__*/jsx("span", {
+          "data-test-id": "settingsItemHeaderTitle",
+          children: title
+        }), !isSettingsHeader && item.measureUnit && /*#__PURE__*/jsx(NumberInput, {
+          item: item
+        })]
+      }), item.quantity !== undefined && !isSettingsHeader && /*#__PURE__*/jsxs("div", {
+        className: classnames(quantity),
+        children: [" ", t('configurator.quantity', 'Anzahl') + ': ' + item.quantity, "x"]
+      }), !hidePrices && !isSettingsHeader && item.price !== undefined && /*#__PURE__*/jsx("div", {
+        className: wcConfiguratorSettingsHeaderPrice,
+        children: item.price
+      }), /*#__PURE__*/jsxs("div", {
+        className: iconsContainer,
+        children: [specialElement1, item.type == 'TOGGLE_HEADER' && /*#__PURE__*/jsx(ToggleHeader, {
+          item: item
+        }), doShowSearchbar && /*#__PURE__*/jsx(Searchbar, {
+          isInScroller: isInScroller,
+          item: item,
+          doShowFilter: !!doShowFilter
+        }, item.configStepKey), doShowFilter && /*#__PURE__*/jsx(PaletteComponent, {
+          id: item.id
+        }), /*#__PURE__*/jsx(SummaryVariantButton, {
+          item: item
+        }), !isSettingsHeader && (item === null || item === void 0 || (_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 || (_item$selectedElement = _item$selectedElement[0]) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement.pdfUrl) && /*#__PURE__*/jsx(PDFButton, {
+          pdfUrl: item.selectedElements[0].pdfUrl
+        }), !isSettingsHeader && /*#__PURE__*/jsx(Fragment, {
+          children: (_item$selectedElement2 = item.selectedElements) !== null && _item$selectedElement2 !== void 0 && (_item$selectedElement2 = _item$selectedElement2[0]) !== null && _item$selectedElement2 !== void 0 && _item$selectedElement2.url ? /*#__PURE__*/jsx(InfoButton, {
+            id: item.id,
+            selectedElement: item.selectedElements[0],
+            openUrl: true
+          }) : item.optionContentItemId ? /*#__PURE__*/jsx(InfoIcon, {
+            item: {
+              contentItemId: item.optionContentItemId,
+              codex: item.configStepKey
+            },
+            style: {
+              bottom: 'calc(50% - 10px)'
+            },
+            size: 24
+          }) : !isSettingsHeader && viewHandler.uiState.isInMobileView && (item === null || item === void 0 || (_item$selectedElement3 = item.selectedElements) === null || _item$selectedElement3 === void 0 ? void 0 : _item$selectedElement3.length) && viewHandler.getViewConfig().infoButton && /*#__PURE__*/jsx(InfoButton, {
+            id: item.id,
+            selectedElement: item.selectedElements[0]
+          })
+        }), specialElement2]
+      }), item.selectedElements && item.isMultiselect && /*#__PURE__*/jsx(SelectedOpv, {
+        item: item,
+        selectedElements: item.selectedElements
+      })]
+    })
+  });
+};
+var SettingsItemHeader$1 = observer(SettingsItemHeader);
+
+export { SettingsItemHeader$1 as default };

package/build/esm/index-63bb26d8.js

@@ -0,0 +1,82 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs, 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 wcConfiguratorProductFooter = "wcConfigurator-product-footer-ygF4L";
+var portrait = "portrait-FCw3Q";
+var settingsHidden = "settings-hidden-PBWln";
+var landscape = "landscape-KhTSA";
+var expanded = "expanded-pQR-c";
+var wcButton = "wcButton-s5DtR";
+var sel = "sel-1Qm3v";
+var wcViewAs = "wc_ViewAs-y1Kh8";
+var css_248z = "/* footer */\r\n\r\n.wcConfigurator-product-footer-ygF4L {\r\n  text-align: center;\r\n  z-index: 350;\r\n}\r\n\r\n.wcConfigurator-product-footer-ygF4L {\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 50%;\r\n  transform: translate(-50%, 0);\r\n}\r\n\r\n.portrait-FCw3Q.wcConfigurator-product-footer-ygF4L {\r\n  display: none;\r\n}\r\n\r\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\r\n  position: absolute;\r\n  display: block;\r\n  height: 40px;\r\n}\r\n\r\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\r\n  bottom: 0px;\r\n}\r\n\r\n.landscape-KhTSA.wcConfigurator-product-footer-ygF4L {\r\n  display: none;\r\n}\r\n\r\n.landscape-KhTSA.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\r\n  position: absolute;\r\n  display: block;\r\n  bottom: 0;\r\n  height: 40px;\r\n}\r\n\r\n.expanded-pQR-c.wcConfigurator-product-footer-ygF4L {\r\n  left: 20%;\r\n  transform: translate(-40%, 0);\r\n}\r\n\r\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v,\r\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:hover {\r\n  background: var(--secondaryColor);\r\n  color: white;\r\n}\r\n\r\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:active,\r\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:active {\r\n  background: #616161;\r\n  color: white;\r\n}\r\n\r\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR {\r\n  background: white;\r\n  border: 1px solid var(--secondaryColor);\r\n\r\n  box-sizing: border-box;\r\n  -webkit-text-stroke: 0.6px;\r\n  min-width: 160px;\r\n  width: auto;\r\n  height: 38.4px;\r\n  line-height: 35.8px;\r\n  color: var(--secondaryColor);\r\n  border-right: 0px;\r\n  border-radius: 0px 0px 0px 0px;\r\n}\r\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:hover {\r\n  color: var(--secondaryColor);\r\n  background: white;\r\n  box-shadow: var(--boxShadowHover);\r\n}\r\n\r\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:last-child {\r\n  border-top-right-radius: var(--globalBorderRadius);\r\n  border-bottom-right-radius: var(--globalBorderRadius);\r\n  border-right: 1px solid var(--secondaryColor);\r\n}\r\n\r\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:first-child {\r\n  border-top-left-radius: var(--globalBorderRadius);\r\n  border-bottom-left-radius: var(--globalBorderRadius);\r\n}\r\n\r\n/* ViewAs  */\r\n.wc_ViewAs-y1Kh8 {\r\n  text-align: center;\r\n  z-index: 10;\r\n  margin: 0;\r\n  padding: 0;\r\n  border-width: 0;\r\n  list-style: none;\r\n  white-space: nowrap;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  vertical-align: middle;\r\n  position: relative;\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.wc_ViewAs-y1Kh8 li {\r\n  display: block;\r\n  float: left;\r\n}\r\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorProductFooter, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        },
+        children: t('configurator.Foto')
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          },
+          children: t('configurator.Foto')
+        }), ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'SUMMARY' && renderings.map(function (rendering) {
+          var _viewHandler$productS;
+          return /*#__PURE__*/jsx("li", {
+            className: classnames(wcButton, viewHandler.productState.doShowRenderImage && ((_viewHandler$productS = viewHandler.productState.curAlternateRendering) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.imageCodex) === rendering.imageCodex ? sel : undefined),
+            onClick: function onClick() {
+              return viewHandler.productState.onChangePlannerView('3D', rendering);
+            },
+            children: rendering.title
+          });
+        })]
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        },
+        children: t('configurator.Grundriss')
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        },
+        children: t('configurator.RTV')
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };

package/build/esm/index-63c5453a.js

@@ -0,0 +1,62 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var header = "header-88iFZ";
+var wrapper = "wrapper-zFPaP";
+var title = "title-Mime-";
+var sel = "sel--F5X-";
+var collapseArrow = "collapseArrow-iq67x";
+var open = "open-t8G5n";
+var mobile = "mobile-Ksq3e";
+var css_248z = ".header-88iFZ {\r\n  height: 48px;\r\n  position: relative;\r\n  background-color: #f8f8f8;\r\n  border-bottom: 2px solid #f0f0f0;\r\n}\r\n\r\n.wrapper-zFPaP {\r\n  margin-left: 16px;\r\n  margin-right: 16px;\r\n  display: flex;\r\n}\r\n.title-Mime- {\r\n  padding: 11px;\r\n  font-weight: 100;\r\n  font-size: 18px;\r\n  position: relative;\r\n}\r\n\r\ntitle:hover,\r\n.sel--F5X- {\r\n  border: none;\r\n  color: var(--diva-theme-palette-primary-main);\r\n}\r\n\r\n.title-Mime-::after {\r\n  content: '';\r\n  position: absolute;\r\n  width: 0px;\r\n  height: 3px;\r\n  left: 50%;\r\n  bottom: 0;\r\n  background-color: var(--diva-theme-palette-primary-main);\r\n  transition: all ease-in-out 0.2s;\r\n}\r\n.title-Mime-:hover::after,\r\n.sel--F5X-::after {\r\n  width: 100%;\r\n  left: 0;\r\n}\r\n\r\n.collapseArrow-iq67x {\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  background-size: contain;\r\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%0D%3C!-- Generator%3A Adobe Illustrator 16.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%0D%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%3Csvg version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%0D%09 width%3D%22960px%22 height%3D%22560px%22 viewBox%3D%220 0 960 560%22 enable-background%3D%22new 0 0 960 560%22 xml%3Aspace%3D%22preserve%22%3E%0D%3Cg id%3D%22Rounded_Rectangle_33_copy_4_1_%22%3E%0D%09%3Cpath d%3D%22M480%2C344.181L268.869%2C131.889c-15.756-15.859-41.3-15.859-57.054%2C0c-15.754%2C15.857-15.754%2C41.57%2C0%2C57.431l237.632%2C238.937%0D%09%09c8.395%2C8.451%2C19.562%2C12.254%2C30.553%2C11.698c10.993%2C0.556%2C22.159-3.247%2C30.555-11.698l237.631-238.937%0D%09%09c15.756-15.86%2C15.756-41.571%2C0-57.431s-41.299-15.859-57.051%2C0L480%2C344.181z%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");\r\n  transform: rotate(90deg);\r\n  transition: all 0.35s ease;\r\n  width: 40px;\r\n  height: 40px;\r\n  position: absolute;\r\n  right: 8px;\r\n  top: 5px;\r\n}\r\n.open-t8G5n .collapseArrow-iq67x {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.header-88iFZ.mobile-Ksq3e {\r\n  height: 38px;\r\n}\r\n\r\n.mobile-Ksq3e .title-Mime- {\r\n  padding: 8px;\r\n  font-weight: 300;\r\n  font-size: 14px;\r\n}\r\n\r\n.mobile-Ksq3e .collapseArrow-iq67x {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  right: 8px;\r\n  top: 0px;\r\n}\r\n";
+styleInject(css_248z);
+
+var SubTabGroupHeader = function SubTabGroupHeader(_ref) {
+  var openState = _ref.openState,
+    curState = _ref.curState,
+    tabs = _ref.tabs;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    onClick: function onClick() {
+      return openState[1](!openState[0]);
+    },
+    className: classnames(header, openState[0] ? open : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: tabs.map(function (b, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: classnames(title, curState[0] === b && openState[0] ? sel : undefined),
+          onClick: function onClick(e) {
+            curState[1](b);
+            if (!openState[0]) openState[1](true);
+            e.stopPropagation();
+          },
+          children: [b === 'ALL' && tabs.length !== 1 && t('configurator.config_all'), tabs.length === 1 && t('configurator.config_accessoire'), tabs.length > 1 && b !== 'ALL' && index + '.']
+        }, b);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(collapseArrow)
+    })]
+  });
+};
+var SubTabGroupHeader$1 = observer(SubTabGroupHeader);
+
+export { SubTabGroupHeader$1 as default };

package/build/esm/index-63cce023.js

@@ -0,0 +1,86 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import 'react';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { observer } from 'mobx-react-lite';
+import FilterItem from './index-2f1a0e04.js';
+import { jsx, 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/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 colorFilterIcon = "data:image/jpeg;base64,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";
+
+var container = "container-UEbzL";
+var colorFilter = "colorFilter-CK-4p";
+var deselectColor = "deselectColor-vefuo";
+var css_248z = ".container-UEbzL {\r\n  position: relative;\r\n}\r\n\r\n.colorFilter-CK-4p {\r\n  border-radius: 50%;\r\n  border: solid 2px var(--secondaryColor);\r\n  width: 26px;\r\n  height: 26px;\r\n  cursor: pointer;\r\n}\r\n\r\n.deselectColor-vefuo {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  cursor: pointer;\r\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%226%22 height%3D%226%22 viewBox%3D%220 0 6 6%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M5 1L3 3M3 3L5 5M3 3L1 5M3 3L1 1%22 stroke%3D%22white%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\");\r\n  background-color: var(--secondaryColor);\r\n  border-radius: 50%;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  background-size: 70%;\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n";
+styleInject(css_248z);
+
+var SlideFilter = function SlideFilter(_ref) {
+  var _viewHandler$settings;
+  var visibleColorItems = _ref.visibleColorItems,
+    id = _ref.id,
+    deleteCurValue = _ref.deleteCurValue;
+  var viewHandler = useViewHandler();
+  var contents = visibleColorItems.map(function (item) {
+    return {
+      swiperSlideStyle: {
+        backgroundColor: 'transparent',
+        width: 60
+      },
+      content: /*#__PURE__*/jsx(FilterItem, {
+        id: id,
+        item: item
+      })
+    };
+  });
+  var jsXFilter = /*#__PURE__*/jsx(ContentBoxComponent, {
+    settings: {
+      contentBoxProps: {
+        type: 'SliderContainer',
+        sliderType: 'slideX',
+        resistanceRatio: 0,
+        height: 'auto',
+        slidesPerView: 7,
+        contents: contents,
+        centeredSlides: true
+
+        // autoPlay: 3,
+      }
+    }
+  });
+  var onClick = function onClick() {
+    var boxContent = viewHandler.settingsState.infoBoxContent;
+    if (boxContent && boxContent.id === id && boxContent.type === 'filter') viewHandler.settingsState.updateInfoBox();else viewHandler.settingsState.updateInfoBox({
+      type: 'filter',
+      id: id,
+      content: jsXFilter
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    "data-test-id": "slide-filter",
+    children: [((_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue) && /*#__PURE__*/jsx("div", {
+      className: deselectColor,
+      onClick: deleteCurValue
+    }), /*#__PURE__*/jsx("img", {
+      className: colorFilter,
+      src: colorFilterIcon,
+      onClick: onClick
+    })]
+  });
+};
+var SlideFilter$1 = observer(SlideFilter);
+
+export { SlideFilter$1 as default };

package/build/esm/index-68797320.js

@@ -0,0 +1,25 @@
+import './index-945074f1.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+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 PlannerUIVariant = function PlannerUIVariant() {
+  return /*#__PURE__*/jsx(DynamicMultiRender, {
+    componentName: "Product/ProductCenter/PlannerUI/PlannerUIVariants"
+  });
+};
+
+export { PlannerUIVariant as default };

package/build/esm/index-6891af5f.js

@@ -0,0 +1,75 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var container = "container-GW5iG";
+var mobile = "mobile-PkDVb";
+var image = "image-afs5h";
+var textContainer = "textContainer-eYs6D";
+var expanded = "expanded-0VaOS";
+var articleName = "articleName-YT5oo";
+var posNrContainer = "posNrContainer-sis0e";
+var posNrHeightFitter = "posNrHeightFitter-LVv74";
+var quantity = "quantity-nayMq";
+var price = "price-ZyMfu";
+var css_248z = ".container-GW5iG {\r\n  position: relative;\r\n  border-top: 1px solid #c6c6c6;\r\n  margin: 0 16px;\r\n  padding: 16px 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n}\r\n\r\n.container-GW5iG.mobile-PkDVb {\r\n  margin: 0;\r\n}\r\n\r\n.image-afs5h {\r\n  max-height: 5rem;\r\n  max-width: 30%;\r\n  -o-object-fit: contain;\r\n     object-fit: contain;\r\n}\r\n\r\n.textContainer-eYs6D {\r\n  position: relative;\r\n  height: 80px;\r\n  width: calc(70% - 80px);\r\n  overflow: auto;\r\n  margin-left: 16px;\r\n}\r\n.mobile-PkDVb .textContainer-eYs6D {\r\n  word-break: break-word;\r\n}\r\n.expanded-0VaOS .textContainer-eYs6D {\r\n  width: calc(50% - 80px);\r\n}\r\n\r\n.articleName-YT5oo {\r\n  font-weight: 300;\r\n}\r\n\r\n.posNrContainer-sis0e {\r\n  margin-left: 16px;\r\n  text-align: center;\r\n  height: 5rem;\r\n  width: calc(20% - 16px);\r\n  position: relative;\r\n}\r\n.posNrHeightFitter-LVv74 {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 100%;\r\n}\r\n\r\n.posNrContainer-sis0e span {\r\n  background: var(--thirdColor);\r\n  border-radius: var(--articlePosNrRadius);\r\n  color: var(--secondaryColor);\r\n  font-size: 16px;\r\n  line-height: 1.27rem;\r\n  min-width: 1.27rem;\r\n  width: 2rem;\r\n  width: -moz-fit-content;\r\n  width: fit-content;\r\n  text-align: center;\r\n  display: inline-block;\r\n  padding: 0 1px;\r\n  -webkit-text-stroke: 0.5px;\r\n  margin-bottom: 0.2rem;\r\n}\r\n\r\n.quantity-nayMq {\r\n  margin-left: 16px;\r\n  width: calc(10% - 16px);\r\n  height: 5rem;\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  text-align: center;\r\n  line-height: 5rem;\r\n}\r\n.price-ZyMfu {\r\n  margin-left: 16px;\r\n  width: calc(20% - 16px);\r\n  height: 5rem;\r\n  font-weight: 600;\r\n  line-height: 5rem;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n}\r\n";
+styleInject(css_248z);
+
+var Articles = function Articles(_ref) {
+  var _item$targetArticlePo;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var isExpanded = viewHandler.uiState.configSettingsIsExpanded || viewHandler.uiState.configSettingsIsMaxExpanded;
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, isExpanded ? expanded : undefined, isMobile ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("img", {
+      className: classnames(image),
+      src: item.image
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(textContainer),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(articleName),
+        children: item.title
+      }), item.description && /*#__PURE__*/jsx("span", {
+        children: item.description
+      })]
+    }), isExpanded && !isMobile && /*#__PURE__*/jsx("div", {
+      className: classnames(posNrContainer),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(posNrHeightFitter),
+        children: (_item$targetArticlePo = item.targetArticlePosNrs) === null || _item$targetArticlePo === void 0 ? void 0 : _item$targetArticlePo.map(function (posNr, key) {
+          return /*#__PURE__*/jsx("span", {
+            children: posNr
+          }, key);
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(quantity),
+      children: item.quantity + 'x'
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(price),
+      children: DivaUtils.formatPrice(item.price)
+    })]
+  });
+};
+var SummaryArticles = observer(Articles);
+
+export { SummaryArticles as default };