@crystaldesign/diva-web-planner-react 26.8.0-beta.3 → 26.8.0-beta.31

package/build/esm/index-24b49ce8.js

@@ -0,0 +1,45 @@
+import { s as styleInject } from './index-3d2bd317.js';
+import classnames from 'classnames';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+var wcStepInfo = "wcStepInfo-IuGTY";
+var error = "error-PdtJS";
+var warning = "warning-fB-89";
+var info = "info-bs86-";
+var css_248z = ".wcStepInfo-IuGTY {\n  margin-top: 10px;\n  margin-left: 5px;\n  font-size: 15px;\n  line-height: 17px;\n}\n\n.error-PdtJS {\n  color: #dc3545;\n}\n\n.warning-fB-89 {\n  color: #ffc107;\n}\n\n.info-bs86- {\n  color: #828282;\n}\n";
+styleInject(css_248z);
+
+var StepInfo = function StepInfo(_ref) {
+  var stepInfo = _ref.stepInfo;
+  if (!stepInfo) return /*#__PURE__*/jsx(Fragment, {});
+  var text = stepInfo.text,
+    type = stepInfo.type;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcStepInfo, type === 'ERROR' ? error : undefined, type === 'INFO' ? info : undefined, type === 'WARNING' ? warning : undefined),
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  });
+};
+
+export { StepInfo as default };

package/build/esm/index-26a976ea.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-3d2bd317.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wcAccCtaMinus = "wcAccCTAMinus-Y6GAJ";
+var css_248z = ".wcAccCTAMinus-Y6GAJ {\n  font-weight: 300;\n  font-size: 18px;\n  height: 22px;\n  width: 22px;\n  float: left;\n  background: #f2f2f2;\n  border-radius: 19.008px;\n  -webkit-text-stroke: 0px;\n  transition: background-color 0.15s ease;\n  text-align: center;\n  float: right;\n  cursor: pointer;\n}\n\n.wcAccCTAMinus-Y6GAJ:hover {\n  background: #d9d9d9;\n  color: #424242;\n}\n\n.wcAccCTAMinus-Y6GAJ {\n  line-height: 21px;\n}\n";
+styleInject(css_248z);
+
+var ShelfDeleteButton = function ShelfDeleteButton(_ref) {
+  var index = _ref.index,
+    grid = _ref.grid;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick(e) {
+      viewHandler.paletteViewHandler.clickDeleteAccessorieOnShelfPlanner(grid, index);
+      e.stopPropagation();
+    },
+    className: wcAccCtaMinus,
+    children: "-"
+  });
+};
+
+export { ShelfDeleteButton as default };

package/build/esm/index-2765d6fa.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-3d2bd317.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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 ProductRoomList = function ProductRoomList(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/RoomListSelection"
+  }));
+};
+
+export { ProductRoomList as default };

package/build/esm/index-282ea11a.js

@@ -0,0 +1,94 @@
+import { u as useViewHandler, T as Toggle } from './index-3d2bd317.js';
+import 'react';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var Varaint = function Varaint(_ref) {
+  var _item$variantValues;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      userSelect: 'unset',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 20,
+      alignItems: 'center',
+      borderBottom: '1px solid grey',
+      justifyContent: 'space-between',
+      padding: 10
+    },
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: item.onClick,
+      children: "konfigurieren"
+    }), /*#__PURE__*/jsx("div", {
+      children: item.index
+    }), (_item$variantValues = item.variantValues) === null || _item$variantValues === void 0 ? void 0 : _item$variantValues.map(function (item) {
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10
+        },
+        children: [item.optionValueImage && /*#__PURE__*/jsx("img", {
+          src: item.optionValueImage,
+          style: {
+            height: 40
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 5,
+            width: '150px'
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            children: item.optionName
+          }), /*#__PURE__*/jsx("div", {
+            children: item.optionValueName
+          })]
+        })]
+      }, item.opt);
+    }), /*#__PURE__*/jsx("div", {
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      children: DivaUtils.formatPrice(item.price)
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        alignSelf: 'flex-end'
+      },
+      children: /*#__PURE__*/jsx(Toggle, {
+        height: 32,
+        handleDiameter: 22,
+        width: 60,
+        onChange: function onChange() {
+          item.onToggle();
+          viewHandler.paletteViewHandler.updateCurPaletteData(true);
+        },
+        state: !item.disabled
+      })
+    })]
+  }, item.hash);
+};
+
+export { Varaint as default };

package/build/esm/index-2903beb7.js

@@ -0,0 +1,162 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-3d2bd317.js';
+import { useState, useEffect } from 'react';
+import OrbitControlElement from 'react-3d-cube-interaction';
+import { observer } from 'mobx-react-lite';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/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 'react-switch';
+import 'react-countup';
+
+var orbitInteractionContainer = "orbit-interaction-container-BHDEA";
+var cubeText = "cubeText-rsimr";
+var mobile = "mobile-YALCk";
+var roomVisible = "room-visible-QNMOE";
+var css_248z = ".orbit-interaction-container-BHDEA {\n  position: absolute;\n  bottom: 16px;\n  right: 20px;\n  z-index: 350;\n}\n\n.cubeText-rsimr {\n  font-size: max(12px, min(2vw, 20px));\n}\n\n.mobile-YALCk.orbit-interaction-container-BHDEA {\n  position: absolute;\n  bottom: 52px;\n  left: 10px;\n  right: auto;\n  right: initial;\n  z-index: 350;\n}\n\n.room-visible-QNMOE {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+var camRotHorizontal_LastFrame = undefined;
+var camRotVertical_LastFrame = undefined;
+var AUTO_HIDE_IN_MS = 2000;
+var timeOut = undefined;
+var OrbitInteractionStandard = function OrbitInteractionStandard(_ref) {
+  var _viewHandler$productS;
+  var _ref$orbitInteraction = _ref.orbitInteractionContainerClass,
+    orbitInteractionContainerClass = _ref$orbitInteraction === void 0 ? orbitInteractionContainer : _ref$orbitInteraction;
+  var viewHandler = useViewHandler();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHidden = _useState2[0],
+    setHidden = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    isModalOpen = _useDivaCore.state.isModalOpen;
+
+  // When modal is open, don't use the SVG as interaction element to fix Safari iPad touch event issue
+  // The SVG's event listeners from react-3d-cube-interaction interfere with Safari's touch handling
+  var interactionElement = isModalOpen ? null : (_viewHandler$productS = viewHandler.productState.planner3DImageSvgArea) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : document.getElementById('diva3dImg');
+  useEffect(function () {
+    if (timeOut) clearTimeout(timeOut);
+    if (isHidden) {
+      timeOut = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              viewHandler.productState.setOrbitIsHidden(true);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      })), AUTO_HIDE_IN_MS);
+    } else {
+      viewHandler.productState.setOrbitIsHidden(false);
+    }
+  }, [isHidden]);
+  if (!viewHandler.productState.doShowRenderImage || viewHandler.productState.doShowAIRoom || viewHandler.productState.plannerRenderingIsStaticBG) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var initParams = viewHandler.viewPlannerHandler.getOrbitCubeInitParams();
+  var onRotationChange = function onRotationChange(p) {
+    if (viewHandler.productState.ignoreUpdateRenderingOnOrbitChanged) {
+      viewHandler.productState.setIgnoreUpdateRenderingOnOrbitChanged(false);
+      return;
+    }
+    if (camRotHorizontal_LastFrame != undefined && camRotVertical_LastFrame != undefined && p.horizontal == camRotHorizontal_LastFrame && p.vertical == camRotVertical_LastFrame) return;
+    var rotHori = p.horizontal;
+    var rotVert = p.vertical;
+    camRotHorizontal_LastFrame = p.horizontal;
+    camRotVertical_LastFrame = p.vertical;
+    viewHandler.viewPlannerHandler.updateOrbitCubeInitParams(p.horizontal, p.vertical);
+    viewHandler.divaWebPlanner.handle3DVisualizationChanged('Nav3DSetVPByVal', {
+      nav3DSetVPByVal: {
+        rotX: rotHori,
+        rotY: rotVert
+      }
+    });
+  };
+
+  /**
+   *
+   * @param p form 10 (max zoom) to -10 (min zoom)
+   */
+  var onZoomChange = function onZoomChange(zoom) {
+    var p = Math.round(zoom.absoluteZoom);
+    viewHandler.divaWebPlanner.handle3DVisualizationChanged('Nav3DZoom', {
+      nav3DZoom: {
+        zoomVal: p
+      }
+    });
+  };
+  if (viewHandler.uiState.isLoading) {
+    camRotHorizontal_LastFrame = undefined;
+    camRotVertical_LastFrame = undefined;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(orbitInteractionContainerClass, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.productState.roomListExpanded ? roomVisible : undefined),
+    children: /*#__PURE__*/jsx(OrbitControlElement, {
+      hiddenState: [isHidden, setHidden],
+      ref: function ref(_ref3) {
+        return viewHandler.productState.setOrbitCubeElement(_ref3);
+      },
+      size: viewHandler.uiState.isInMobileView ? '40px' : '80px',
+      interactionElement: interactionElement,
+      onRotationChange: onRotationChange,
+      onZoomChange: onZoomChange,
+      autoHide: AUTO_HIDE_IN_MS,
+      initialRotation: initParams != undefined ? {
+        horizontal: initParams.rotHorizontal,
+        vertical: initParams.rotVertical
+      } : undefined,
+      zoomFactorResetDelay: 500,
+      minCssScale: 0.5,
+      maxCssScale: 1.5,
+      disableDefaultScrollBehaviour: true,
+      cubeFaceChildren: {
+        back: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.back')
+        }),
+        bottom: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.bottom')
+        }),
+        front: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.front')
+        }),
+        left: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.left')
+        }),
+        right: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.right')
+        }),
+        top: /*#__PURE__*/jsx("div", {
+          className: cubeText,
+          children: t('cube.top')
+        })
+      }
+    })
+  });
+};
+var OrbitInteractionStandard$1 = observer(OrbitInteractionStandard);
+
+export { OrbitInteractionStandard$1 as default };

package/build/esm/index-298a5370.js

@@ -0,0 +1,37 @@
+import { u as useViewHandler } from './index-3d2bd317.js';
+import 'react';
+import { g as wcPlanner3DGrid } from './index.module-e3eeb32c.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var Planner3DGrid = function Planner3DGrid(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setPlanner3DGridElement(_ref);
+    },
+    id: "diva3dImg_3DGrid",
+    className: wcPlanner3DGrid
+  });
+};
+
+export { Planner3DGrid as default };

package/build/esm/index-2aea52d1.js

@@ -0,0 +1,235 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3d2bd317.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import { useTranslation, useDivaCore } 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/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-switch';
+import 'react-countup';
+
+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  transition:\n    fill 0.3s ease,\n    color 0.3s ease;\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(--tabGroupStepVisitedIcon, #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 getIconOfTabGroup = function getIconOfTabGroup(tabGroup, baseCdnUrl, tabGroupObj) {
+  var sirvURL = baseCdnUrl + '/static/images/TabIcons/';
+  if (tabGroupObj) {
+    if (tabGroupObj[tabGroup.toLowerCase()]) return sirvURL + tabGroupObj[tabGroup.toLowerCase()];else if (tabGroupObj[tabGroup]) return sirvURL + tabGroupObj[tabGroup];
+  }
+  switch (tabGroup) {
+    case 'StaticRoomList':
+      return sirvURL + 'room.svg';
+    case 'Planner':
+    case 'PRODUCTS':
+    case 'PROMOTED':
+      return sirvURL + 'planner.svg';
+    case 'Summary':
+      return sirvURL + 'summary.svg';
+    case 'Piede':
+    case 'pieds':
+    case 'Fuss':
+    case 'Fuß':
+    case 'Fu':
+    case 'Fsse':
+      return sirvURL + 'feet.svg';
+    case 'Testiera':
+    case 'tte de lit':
+    case 'Kopfteil':
+    case 'Headboard':
+      return sirvURL + 'bed_headboard.svg';
+    case 'materasso':
+    case 'matelas':
+    case 'Matratze':
+    case 'Matratze Zubehr':
+      return sirvURL + 'mattress.svg';
+    case 'dimensioni':
+    case 'dimension':
+    case 'Grsse':
+      return sirvURL + 'dimensions.svg';
+    case 'Topper':
+    case 'surmatelas':
+      return sirvURL + 'topper.svg';
+    case 'Telaio inferiore':
+    case 'box':
+    case 'Untergestell':
+    case 'Box/Untergestell':
+    case 'BoxUntergestell':
+    case 'Box  Bettrahmen':
+    case 'box  cadre de lit':
+    case 'Box':
+    case 'Box inkl Grsse':
+      return sirvURL + 'bed_underframe.svg';
+    case 'Visualizzazione':
+    case 'visualisation':
+    case 'Visualisierung':
+      return sirvURL + 'bed_visualization.svg';
+    case 'Rivestimento':
+    case 'tissu dco':
+    case 'Bezug':
+    case 'Stoff':
+      return sirvURL + 'upholstery.svg';
+    case 'Sitz':
+    case 'Sitztiefe':
+      return sirvURL + 'seat.svg';
+    case 'Armlehne':
+      return sirvURL + 'armrest.svg';
+    case 'ACCESSOIRES':
+      return sirvURL + 'additionalArticles.svg';
+    case 'Rcken':
+      return sirvURL + 'sofaBackrest.svg';
+    case 'Konfiguration':
+      return sirvURL + 'material_config.svg';
+    case 'Zustand':
+      return sirvURL + 'settings_suggest.svg';
+  }
+  return undefined;
+};
+
+var getShapePoints = function getShapePoints(w, h, first, last) {
+  if (first && last) return [[0, h], [0, 0], [w, 0], [w, h]];
+  if (first) return [[0, h - 8], [0, 0], [w, 0], [w, h - 8], [64, h]];
+  if (last) return [[0, h], [0, 0], [64, 8], [w, 0], [w, h]];
+  return [[0, h - 8], [0, 0], [64, 8], [w, 0], [w, h - 8], [64, h]];
+};
+var getRoundedPath = function getRoundedPath(points, radius) {
+  var n = points.length;
+  var parts = [];
+  for (var i = 0; i < n; i++) {
+    var prev = points[(i - 1 + n) % n];
+    var curr = points[i];
+    var next = points[(i + 1) % n];
+    var dx1 = prev[0] - curr[0],
+      dy1 = prev[1] - curr[1],
+      len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+    var dx2 = next[0] - curr[0],
+      dy2 = next[1] - curr[1],
+      len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+    var r = Math.min(radius, len1 / 2, len2 / 2);
+    var sx = curr[0] + dx1 / len1 * r,
+      sy = curr[1] + dy1 / len1 * r;
+    var ex = curr[0] + dx2 / len2 * r,
+      ey = curr[1] + dy2 / len2 * r;
+    parts.push(i === 0 ? "M".concat(sx, " ").concat(sy) : "L".concat(sx, " ").concat(sy));
+    parts.push("Q".concat(curr[0], " ").concat(curr[1], " ").concat(ex, " ").concat(ey));
+  }
+  parts.push('Z');
+  return parts.join(' ');
+};
+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 _useState = useState(8),
+    _useState2 = _slicedToArray(_useState, 2),
+    borderRadius = _useState2[0],
+    setBorderRadius = _useState2[1];
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  if (height < minHeight) {
+    height = minHeight;
+  }
+  var _useDivaCore = useDivaCore(),
+    baseCdnUrl = _useDivaCore.state.apiConfig.baseCdnUrl;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+    if (tabGroupItemRef.current) {
+      var raw = getComputedStyle(tabGroupItemRef.current).getPropertyValue('--globalBorderRadius').trim();
+      if (raw) {
+        var parsed = parseFloat(raw);
+        if (!isNaN(parsed)) setBorderRadius(parsed);
+      }
+    }
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
+    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 shapePoints = getShapePoints(width, height, !!isFirstItem, !!isLastItem);
+  var pathData = getRoundedPath(shapePoints, borderRadius);
+  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, baseCdnUrl, 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("path", {
+      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+      d: pathData
+    }), /*#__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 };