@crystaldesign/diva-web-planner-react 24.12.0-beta.16 → 24.12.0-beta.18

package/build/esm/index-9116c402.js

@@ -0,0 +1,127 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-68b33897.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
+import SettingsHeader from './index-31ed6b29.js';
+import classnames from 'classnames';
+import Search from './index-d6d369eb.js';
+import { jsxs, Fragment, 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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var pdpOverlay = "pdp-overlay-2gWQq";
+var navigationVisible = "navigation-visible-goqGH";
+var pdpBackground = "pdp-background-1tl-9";
+var pdpContainer = "pdp-container-EljBO";
+var isMobileClass = "is-mobile-class-eOYXj";
+var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n";
+styleInject(css_248z);
+
+var ProductList = function ProductList(_ref) {
+  var _viewHandler$settings;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    openComponent = _useDivaCore.actions.openComponent,
+    _useDivaCore$state = _useDivaCore.state,
+    HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    height = _useDivaCore$state$di.height,
+    isPortrait = _useDivaCore$state$di.isPortrait,
+    organization = _useDivaCore$state.organization;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
+  var isMobileLandscape = isMobile && !isPortrait && height < 500;
+  var currentlyMobile = isMobile && isPortrait || height < 500;
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentProductId = _useState2[0],
+    setCurrentProductId = _useState2[1];
+  var productState = useProductState({
+    parameters: {
+      'customFlags.variantsList.organizations': organization._id
+    },
+    sort: '{-created}',
+    noFilter: true,
+    scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
+  });
+  var closePDP = useCallback(function () {
+    setCurrentProductId(undefined);
+  }, []);
+  var openPDP = useCallback(function (_ref2) {
+    var _id = _ref2._id;
+    setCurrentProductId(_id);
+  }, []);
+  var cta2 = useCallback(function (id) {
+    openComponent({
+      type: 'DIVA_WEBPLANNER',
+      parameters: {
+        productId: id,
+        checkout: '1',
+        initMode: 'OPENCONFIGTABGROUP',
+        opt: 'SUMMARY'
+      },
+      internal: {
+        forceReload: '1'
+      }
+    });
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item,
+      specialElement1: /*#__PURE__*/jsx(Search, {
+        searchState: productState.search
+      })
+    }), viewHandler.settingsState.settingsScrollerElement && /*#__PURE__*/jsx(ProductsComponent, {
+      productState: productState,
+      onClickFunction: openPDP
+    }), currentProductId && /*#__PURE__*/jsxs("div", {
+      className: classnames(pdpOverlay, currentlyMobile ? isMobileClass : undefined, !!portalHeaderHeight ? navigationVisible : undefined),
+      children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
+        onClick: closePDP,
+        className: pdpBackground
+      }), /*#__PURE__*/jsx("div", {
+        className: pdpContainer,
+        children: /*#__PURE__*/jsx(ContentBoxComponent, {
+          onClose: closePDP,
+          settings: {
+            contentBoxProps: {
+              type: 'CloseButtonContainer',
+              hideCloseIcon: isMobileLandscape,
+              content: {
+                type: 'PDP',
+                cta1Params: cta2,
+                hideCat2: true,
+                productId: currentProductId,
+                cta1Text: t('pdp.add_to_basket'),
+                groupVariantsByField: ['dc_color', 'dc_mainColor'],
+                breadcrumb: false,
+                hideInfoSlider: true,
+                style: 'horizontal'
+              }
+            }
+          }
+        })
+      })]
+    })]
+  });
+};
+var ProductList$1 = observer(ProductList);
+
+export { ProductList$1 as default };

package/build/esm/index-91c0432c.js

@@ -0,0 +1,56 @@
+import './index-68b33897.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Dropdown from 'react-dropdown';
+import { w as wrapper, d as dropdownRoot, a as dropdownControl } from './index.module-3c4f53cf.js';
+import Arrow from './index-f75dc998.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';
+
+var OptionsSelector = function OptionsSelector(_ref) {
+  var options = _ref.options,
+    optionState = _ref.optionState;
+  var ArrowElement = /*#__PURE__*/jsx(Arrow, {
+    onClick: function onClick() {
+      return optionState[1](undefined);
+    },
+    open: false,
+    iconAsDelete: !!optionState[0]
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    children: /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRoot),
+      controlClassName: dropdownControl,
+      options: options.map(function (option) {
+        return {
+          label: option.name,
+          value: option.codex
+        };
+      }),
+      value: optionState[0],
+      onChange: function onChange(val) {
+        return optionState[1](val.value);
+      },
+      placeholder: 'Option',
+      arrowClosed: ArrowElement,
+      arrowOpen: ArrowElement
+    })
+  });
+};
+var OptionSelector = observer(OptionsSelector);
+
+export { OptionSelector as default };

package/build/esm/index-93af67e7.js

@@ -0,0 +1,32 @@
+import { s as styleInject } from './index-68b33897.js';
+import 'react';
+import OrbitInteractionStandard from './index-2ad4db1e.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 'mobx-react-lite';
+import 'react-3d-cube-interaction';
+import 'classnames';
+
+var orbitInteractionContainer = "orbit-interaction-container-jxGAx";
+var css_248z = ".orbit-interaction-container-jxGAx {\n  position: absolute;\n  bottom: 20px;\n  right: 70px;\n  z-index: 350;\n}\n";
+styleInject(css_248z);
+
+var OrbitInteractionFree = function OrbitInteractionFree(props) {
+  return /*#__PURE__*/jsx(OrbitInteractionStandard, {
+    orbitInteractionContainerClass: orbitInteractionContainer
+  });
+};
+
+export { OrbitInteractionFree as default };

package/build/esm/index-9441dbb0.js

@@ -0,0 +1,154 @@
+import { s as styleInject, u as useViewHandler } from './index-68b33897.js';
+import classnames from 'classnames';
+import DockFilter from './index-4c0f0920.js';
+import RALFilter from './index-b19c99c1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import Searchbar from './index-d9a9385f.js';
+import ToggleHeader from './index-0750c361.js';
+import NumberInput from './index-b114e57b.js';
+import InfoButton from './index-8cdff01d.js';
+import PDFButton from './index-70aeec3b.js';
+import SummaryVariantButton from './index-d1dcac30.js';
+import SelectedOpv from './index-3402668f.js';
+import InfoIcon from './index-5607fdc4.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-ca0d7a0c.js';
+import 'react-dropdown';
+import './index-f75dc998.js';
+import './index-43a96e4b.js';
+import '@crystaldesign/content-box';
+import './index-e5e34fee.js';
+import './index-057b6729.js';
+import 'react-switch';
+import './index-a5cb16a5.js';
+import 'react-laag';
+import './index-2cfbfa63.js';
+import './index-ee00d465.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 {\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n\n.header-wrapper-qVEmI {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.wcConfigurator-settings-header-title--CcUK {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: left;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.wcConfigurator-settings-header-price-UmViW {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: right;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK {\n  max-width: calc(100% - 51.2px);\n  margin: 8px 0px;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK.wcFilterIsVisible-S9QKu {\n  max-width: calc(50% - 19.2px);\n}\n\n.wcConfigurator-settings-header-Filters-Container-hi62D {\n  width: 100%;\n  float: left;\n}\n.wcConfigItem-Header-JEANn {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n.wcConfigItem-Header-JEANn {\n  /* width: calc(100% - 32px); */\n  margin-top: 8px;\n  margin-right: 8px;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 40px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.min-expanded-kEE9N.wcConfigItem-Header-JEANn {\n  overflow: hidden;\n}\n\n:not(.scroller-jdhnI).wcConfigItem-Header-JEANn {\n  margin-left: var(--settingsScrollerPaddingLeft);\n  margin-right: var(--settingsScrollerPaddingRight);\n}\n\n.landscape-DHu2r.wcConfigItem-Header-JEANn,\n.portrait-8Z7gh.wcConfigItem-Header-JEANn {\n  min-height: 40px;\n}\n\n.landscape-DHu2r.scroller-jdhnI header,\n.portrait-8Z7gh.scroller-jdhnI header {\n  min-height: 40px;\n}\n\n.quantity-GKJLF {\n  max-width: 200px;\n  float: left;\n  padding-top: 12px;\n  padding-left: 20%;\n}\n\n.icons-container-DbfdO {\n  display: flex;\n  align-items: center;\n  float: right;\n  position: relative;\n  margin-top: 5px;\n  flex-grow: 2;\n  justify-content: flex-end;\n  max-width: 100%;\n}\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-96b59299.js

@@ -0,0 +1,80 @@
+import { s as styleInject, u as useViewHandler } from './index-68b33897.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcConfiguratorProductFooter = "wcConfigurator-product-footer-BQAEt";
+var portrait = "portrait-dDB1V";
+var settingsHidden = "settings-hidden-p8yxj";
+var landscape = "landscape-U5rkX";
+var expanded = "expanded-ENaC6";
+var wcButton = "wcButton-ejK-0";
+var wcFoto = "wcFoto-w00Jj";
+var sel = "sel-BDwTn";
+var wcGrid = "wcGrid-W7T4M";
+var wcAccessorie = "wcAccessorie-pXi-s";
+var wcRtv = "wcRtv-AT3Rr";
+var wcViewAs = "wc_ViewAs-pTwrO";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-BQAEt {\n  text-align: center;\n  z-index: 350;\n}\n\n.wcConfigurator-product-footer-BQAEt {\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.portrait-dDB1V.wcConfigurator-product-footer-BQAEt {\n  display: none;\n}\n\n.portrait-dDB1V.settings-hidden-p8yxj.wcConfigurator-product-footer-BQAEt {\n  position: absolute;\n  display: block;\n  height: 40px;\n}\n\n.portrait-dDB1V.settings-hidden-p8yxj.wcConfigurator-product-footer-BQAEt {\n  bottom: 20px;\n}\n\n.landscape-U5rkX.settings-hidden-p8yxj.wcConfigurator-product-footer-BQAEt {\n  position: absolute;\n  display: block;\n  bottom: 20px;\n  height: 40px;\n}\n\n.expanded-ENaC6.wcConfigurator-product-footer-BQAEt {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0 {\n  width: 60px;\n  height: 60px;\n  border-radius: 50%;\n  background-repeat: no-repeat;\n  min-width: 0;\n  min-width: initial;\n  margin: 0 0.5rem;\n  background-size: contain;\n  background-position: center center;\n  cursor: pointer;\n  transition: background-color 0.4s;\n  background-size: 80%;\n}\n\n.landscape-U5rkX .wcButton-ejK-0 {\n  width: 40px;\n  height: 40px;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0:hover {\n  box-shadow: var(--boxShadowHover);\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2237%22 height%3D%2236%22 viewBox%3D%220 0 37 36%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.14907 22.7265C8.1201 22.474 8.10558 22.2201 8.10557 21.966V14.034C8.09599 12.3106 8.77144 10.654 9.9833 9.42865C11.1952 8.20328 12.8442 7.50952 14.5676 7.5H22.6436C24.367 7.50952 26.016 8.20328 27.2278 9.42865C28.4397 10.654 29.1151 12.3106 29.1056 14.034V21.966C29.1151 23.6894 28.4397 25.346 27.2278 26.5714C26.016 27.7967 24.367 28.4905 22.6436 28.5H14.5676C11.2725 28.4843 8.51236 26.0015 8.14907 22.7265ZM8.14907 22.7265C8.95396 22.005 9.7017 21.2222 10.3856 20.3851C11.3976 19.0159 13.191 18.4778 14.7896 19.0636C18.5756 20.2636 21.9551 24.6721 25.1966 22.3801C26.387 21.4717 27.3084 20.2569 27.8621 18.8656C28.1879 18.1013 28.6054 17.3795 29.1056 16.7161M14.1851 12.8189C14.1851 13.2389 13.8446 13.5794 13.4246 13.5794C13.0046 13.5794 12.6641 13.2389 12.6641 12.8189C12.6641 12.3989 13.0046 12.0584 13.4246 12.0584C13.8446 12.0584 14.1851 12.3989 14.1851 12.8189Z%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2237%22 height%3D%2237%22 viewBox%3D%220 0 37 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.14907 23.0289C8.1201 22.7764 8.10558 22.5225 8.10557 22.2684V14.3364C8.09599 12.613 8.77144 10.9564 9.9833 9.73101C11.1952 8.50565 12.8442 7.81189 14.5676 7.80237H22.6436C24.367 7.81189 26.016 8.50565 27.2278 9.73101C28.4397 10.9564 29.1151 12.613 29.1056 14.3364V22.2684C29.1151 23.9918 28.4397 25.6484 27.2278 26.8737C26.016 28.0991 24.367 28.7928 22.6436 28.8024H14.5676C11.2725 28.7867 8.51236 26.3039 8.14907 23.0289ZM8.14907 23.0289C8.95396 22.3073 9.7017 21.5246 10.3856 20.6874C11.3976 19.3183 13.191 18.7802 14.7896 19.3659C18.5756 20.5659 21.9551 24.9744 25.1966 22.6824C26.387 21.774 27.3084 20.5593 27.8621 19.1679C28.1879 18.4037 28.6054 17.6819 29.1056 17.0184M14.1851 13.1213C14.1851 13.5413 13.8446 13.8818 13.4246 13.8818C13.0046 13.8818 12.6641 13.5413 12.6641 13.1213C12.6641 12.7013 13.0046 12.3608 13.4246 12.3608C13.8446 12.3608 14.1851 12.7013 14.1851 13.1213Z%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-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcFoto-w00Jj.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2237%22 height%3D%2237%22 viewBox%3D%220 0 37 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.14907 23.0289C8.1201 22.7764 8.10558 22.5225 8.10557 22.2684V14.3364C8.09599 12.613 8.77144 10.9564 9.9833 9.73101C11.1952 8.50565 12.8442 7.81189 14.5676 7.80237H22.6436C24.367 7.81189 26.016 8.50565 27.2278 9.73101C28.4397 10.9564 29.1151 12.613 29.1056 14.3364V22.2684C29.1151 23.9918 28.4397 25.6484 27.2278 26.8737C26.016 28.0991 24.367 28.7928 22.6436 28.8024H14.5676C11.2725 28.7867 8.51236 26.3039 8.14907 23.0289ZM8.14907 23.0289C8.95396 22.3073 9.7017 21.5246 10.3856 20.6874C11.3976 19.3183 13.191 18.7802 14.7896 19.3659C18.5756 20.5659 21.9551 24.9744 25.1966 22.6824C26.387 21.774 27.3084 20.5593 27.8621 19.1679C28.1879 18.4037 28.6054 17.6819 29.1056 17.0184M14.1851 13.1213C14.1851 13.5413 13.8446 13.8818 13.4246 13.8818C13.0046 13.8818 12.6641 13.5413 12.6641 13.1213C12.6641 12.7013 13.0046 12.3608 13.4246 12.3608C13.8446 12.3608 14.1851 12.7013 14.1851 13.1213Z%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  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2235%22 height%3D%2218%22 viewBox%3D%220 0 35 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M25.3008 13L17.3008 17L9.30078 13M25.3008 13L17.3008 9M25.3008 13L33.3008 9L25.3008 5M9.30078 13L17.3008 9M9.30078 13L1.30078 9L9.30078 5M17.3008 9L25.3008 5M17.3008 9L9.30078 5M25.3008 5L17.3008 1L9.30078 5%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2235%22 height%3D%2219%22 viewBox%3D%220 0 35 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M25.3008 13.3024L17.3008 17.3024L9.30078 13.3024M25.3008 13.3024L17.3008 9.30237M25.3008 13.3024L33.3008 9.30237L25.3008 5.30237M9.30078 13.3024L17.3008 9.30237M9.30078 13.3024L1.30078 9.30237L9.30078 5.30237M17.3008 9.30237L25.3008 5.30237M17.3008 9.30237L9.30078 5.30237M25.3008 5.30237L17.3008 1.30237L9.30078 5.30237%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-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcGrid-W7T4M.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2235%22 height%3D%2219%22 viewBox%3D%220 0 35 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M25.3008 13.3024L17.3008 17.3024L9.30078 13.3024M25.3008 13.3024L17.3008 9.30237M25.3008 13.3024L33.3008 9.30237L25.3008 5.30237M9.30078 13.3024L17.3008 9.30237M9.30078 13.3024L1.30078 9.30237L9.30078 5.30237M17.3008 9.30237L25.3008 5.30237M17.3008 9.30237L9.30078 5.30237M25.3008 5.30237L17.3008 1.30237L9.30078 5.30237%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  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcAccessorie-pXi-s.wcButton-ejK-0 {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_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%09 viewBox%3D%220 0 55 55%22 style%3D%22enable-background%3Anew 0 0 55 55%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%23F5F5F5%3B%7D%09.st1%7Bfill%3Anone%3B%7D%09.st2%7Benable-background%3Anew    %3B%7D%09.st3%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2227.5%22 cy%3D%2227.5%22 r%3D%2227.5%22%2F%3E%3Crect x%3D%2211.8%22 y%3D%224%22 class%3D%22st1%22 width%3D%2243.5%22 height%3D%2251.5%22%2F%3E%3Cg class%3D%22st2%22%3E%09%3Cpath class%3D%22st3%22 d%3D%22M25.3%2C40V29.6H15v-4.3h10.3V15h4.4v10.3H40v4.3H29.7V40H25.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcAccessorie-pXi-s:hover {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_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%09 viewBox%3D%220 0 55 55%22 style%3D%22enable-background%3Anew 0 0 55 55%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%234B4B4B%3B%7D%09.st1%7Bfill%3Anone%3B%7D%09.st2%7Benable-background%3Anew    %3B%7D%09.st3%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2227.5%22 cy%3D%2227.5%22 r%3D%2227.5%22%2F%3E%3Crect x%3D%2211.9%22 y%3D%224%22 class%3D%22st1%22 width%3D%2243.5%22 height%3D%2251.5%22%2F%3E%3Cg class%3D%22st2%22%3E%09%3Cpath class%3D%22st3%22 d%3D%22M25.3%2C40V29.6H15v-4.3h10.3V15h4.4v10.3H40v4.3H29.7V40H25.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcAccessorie-pXi-s:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcAccessorie-pXi-s.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_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%09 viewBox%3D%220 0 55 55%22 style%3D%22enable-background%3Anew 0 0 55 55%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%234B4B4B%3B%7D%09.st1%7Bfill%3Anone%3B%7D%09.st2%7Benable-background%3Anew    %3B%7D%09.st3%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2227.5%22 cy%3D%2227.5%22 r%3D%2227.5%22%2F%3E%3Crect x%3D%2211.9%22 y%3D%224%22 class%3D%22st1%22 width%3D%2243.5%22 height%3D%2251.5%22%2F%3E%3Cg class%3D%22st2%22%3E%09%3Cpath class%3D%22st3%22 d%3D%22M25.3%2C40V29.6H15v-4.3h10.3V15h4.4v10.3H40v4.3H29.7V40H25.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  border: 1px solid white;\n  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcRtv-AT3Rr.wcButton-ejK-0 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2236%22 height%3D%2236%22 viewBox%3D%220 0 36 36%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M17.5 15.3039V20.413M17.5 15.3039L13.8478 13.9348M17.5 15.3039L21.1522 13.9348M7 11.6526V16.3039M7 11.6526L10.6522 13.0217M7 11.6526L9.39674 10.7395M28 16.3039V11.6526M28 11.6526L24.3478 13.0217M28 11.6526L25.0326 10.5221M17.5 8V11.6522M17.5 8L13.8478 9.39148M17.5 8L21.1522 9.39148M28 24.4789V20M28 24.4789L24.3478 22.7994M28 24.4789L25.6033 25.599M7 20V24.4789M7 24.4789L10.6522 22.7994M7 24.4789L9.96739 25.8657M17.5 28.9594V24.4794M17.5 28.9594L21.1522 27.2525M17.5 28.9594L13.8478 27.2525%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #c0c0c0;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcRtv-AT3Rr:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2236%22 height%3D%2237%22 viewBox%3D%220 0 36 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M17.5 15.6063V20.7154M17.5 15.6063L13.8478 14.2372M17.5 15.6063L21.1522 14.2372M7 11.955V16.6063M7 11.955L10.6522 13.3241M7 11.955L9.39674 11.0418M28 16.6063V11.955M28 11.955L24.3478 13.3241M28 11.955L25.0326 10.8244M17.5 8.30237V11.9545M17.5 8.30237L13.8478 9.69385M17.5 8.30237L21.1522 9.69385M28 24.7812V20.3023M28 24.7812L24.3478 23.1018M28 24.7812L25.6033 25.9014M7 20.3023V24.7812M7 24.7812L10.6522 23.1018M7 24.7812L9.96739 26.1681M17.5 29.2618V24.7818M17.5 29.2618L21.1522 27.5549M17.5 29.2618L13.8478 27.5549%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-color: #7b7b7b;\n  border: 1px solid #7b7b7b;\n}\n\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcRtv-AT3Rr:active,\n.wcConfigurator-product-footer-BQAEt .wcButton-ejK-0.wcRtv-AT3Rr.sel-BDwTn {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2236%22 height%3D%2237%22 viewBox%3D%220 0 36 37%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M17.5 15.6063V20.7154M17.5 15.6063L13.8478 14.2372M17.5 15.6063L21.1522 14.2372M7 11.955V16.6063M7 11.955L10.6522 13.3241M7 11.955L9.39674 11.0418M28 16.6063V11.955M28 11.955L24.3478 13.3241M28 11.955L25.0326 10.8244M17.5 8.30237V11.9545M17.5 8.30237L13.8478 9.69385M17.5 8.30237L21.1522 9.69385M28 24.7812V20.3023M28 24.7812L24.3478 23.1018M28 24.7812L25.6033 25.9014M7 20.3023V24.7812M7 24.7812L10.6522 23.1018M7 24.7812L9.96739 26.1681M17.5 29.2618V24.7818M17.5 29.2618L21.1522 27.5549M17.5 29.2618L13.8478 27.5549%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  border: 1px solid #4f4f4f;\n  background-color: #4f4f4f;\n}\n/* ViewAs  */\n.wc_ViewAs-pTwrO {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  margin-bottom: 16px;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  display: inline-flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n}\n\n.wc_ViewAs-pTwrO li {\n  display: block;\n  float: left;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  if (viewHandler.uiState.ViewConfig.roomListInProduct && viewHandler.productState.roomListExpanded && viewHandler.settingsState.roomListInitialized) return /*#__PURE__*/jsx(Fragment, {});
+  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, wcFoto, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        }
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, wcFoto, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          }
+        }), ((_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, wcAccessorie, 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);
+            }
+          });
+        })]
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, wcGrid, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        }
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, wcRtv, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        }
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };

package/build/esm/index-970c0489.js

@@ -0,0 +1,121 @@
+import { s as styleInject, u as useViewHandler } from './index-68b33897.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-709cd954.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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var verticalItem = "verticalItem-NmQDx";
+var wcSpan = "wcSpan-0wnmJ";
+var verticalItemPoligon = "verticalItemPoligon-M44lA";
+var wcActiveStep = "wcActiveStep-ykv3D";
+var wcVisitedStep = "wcVisitedStep-qDdfW";
+var wcStepIcon = "wcStepIcon-7hz1S";
+var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedFont, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
+styleInject(css_248z);
+
+var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
+  var _getIconOfTabGroup;
+  var tabGroup = _ref.tabGroup,
+    height = _ref.height,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
+    isFirstItem = _ref.isFirstItem,
+    isLastItem = _ref.isLastItem,
+    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
+    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
+    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
+    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
+    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
+    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
+    _ref$wcStepIconClass = _ref.wcStepIconClass,
+    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
+    lastItemDiv = _ref.lastItemDiv;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var width = 128;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  if (height < minHeight) {
+    height = minHeight;
+  }
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
+  var polygonPoints;
+  if (isFirstItem && isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
+  } else if (isFirstItem) {
+    polygonPoints = '0 ' + (height - 9) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', ' + '64 ' + (height - 1);
+  } else if (isLastItem) {
+    polygonPoints = '0 ' + (height - 1) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 1);
+  } else {
+    polygonPoints = '0 ' + (height - 9) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', 64 ' + (height - 1);
+  }
+  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
+  var div = /*#__PURE__*/jsxs("div", {
+    "data-test-id": "tabGroupItem",
+    children: [/*#__PURE__*/jsx("div", {
+      className: wcStepIconClass,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    }), /*#__PURE__*/jsx("span", {
+      "data-test-id": "tabGroupItemTitle",
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    })]
+  });
+  if (isLastItem && lastItemDiv) {
+    div = lastItemDiv;
+  }
+  return /*#__PURE__*/jsxs("svg", {
+    "data-test-id": "tabGroupItemSvg",
+    viewBox: '0 0 ' + width + ' ' + height,
+    ref: tabGroupItemRef,
+    style: {
+      height: height + 'px',
+      minHeight: minHeight
+    },
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+    children: [/*#__PURE__*/jsx("polygon", {
+      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+      points: polygonPoints
+    }), /*#__PURE__*/jsx("foreignObject", {
+      width: "100%",
+      height: "100%",
+      style: {
+        pointerEvents: 'none'
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+        children: div
+      })
+    })]
+  });
+};
+var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
+
+export { VerticalTabGroupItemStandard$1 as default };