@crystaldesign/diva-web-planner-react 25.3.0-beta.4 → 25.3.0-beta.43

package/build/esm/index-727be0c4.js

@@ -0,0 +1,138 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-22bc52cc.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var paletteItem = "PaletteItem-PvQNo";
+var slider = "slider-KB5gQ";
+var wcSliderButton = "wcSliderButton-OSCAA";
+var wcSliderButtonLeft = "wcSliderButtonLeft-AUWb0";
+var wcSliderButtonRight = "wcSliderButtonRight-wCBtH";
+var css_248z = ".PaletteItem-PvQNo {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n  transition: all 0.15s ease;\n}\n\n.PaletteItem-PvQNo:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-PvQNo:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.slider-KB5gQ {\n  -webkit-appearance: none;\n  width: calc(100% - 3rem - 4px);\n  height: 25px;\n  background: #d3d3d3;\n  outline: none;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n  border-radius: 12.5px;\n  position: absolute;\n  left: 1.5rem;\n}\n\n.slider-KB5gQ:hover {\n  opacity: 1;\n}\n\n.slider-KB5gQ::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 25px;\n  height: 25px;\n  border-radius: 12.5px;\n  background: var(--primaryColor);\n  cursor: pointer;\n}\n\n.slider-KB5gQ::-moz-range-thumb {\n  width: 25px;\n  height: 25px;\n  border-radius: 5px;\n  background: var(--primaryColor);\n  cursor: pointer;\n}\n\n.wcSliderButton-OSCAA {\n  width: 1.5rem;\n  height: 1.5rem;\n  top: 1.92rem;\n  position: absolute;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2213%22 height%3D%2238%22 viewBox%3D%220 0 13 38%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1L0.999998 19.1818L12 37%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center center;\n}\n.wcSliderButtonLeft-AUWb0 {\n  left: 0.15rem;\n}\n.wcSliderButtonRight-wCBtH {\n  transform: rotate(180deg);\n  right: 0.15rem;\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Range = function Range(_ref) {
+  var _palette$selectedElem;
+  var paletteId = _ref.paletteId,
+    itemP = _ref.item;
+  var item = itemP;
+  var _useState = useState(Number(item.freeText)),
+    _useState2 = _slicedToArray(_useState, 2),
+    curValue = _useState2[0],
+    setCurValue = _useState2[1];
+  var viewHandler = useViewHandler();
+  var palette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState3 = useState(palette === null || palette === void 0 || (_palette$selectedElem = palette.selectedElements) === null || _palette$selectedElem === void 0 || (_palette$selectedElem = _palette$selectedElem[0]) === null || _palette$selectedElem === void 0 ? void 0 : _palette$selectedElem.codex),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOPV = _useState4[0],
+    setSelectedOPV = _useState4[1];
+  useEffect(function () {
+    if (palette) {
+      viewHandler.settingsState.itemPalettes.set(paletteId, _objectSpread(_objectSpread({}, palette), {}, {
+        numberInput: curValue,
+        measureUnit: item.measureUnit
+      }));
+    }
+  }, [curValue]);
+  useEffect(function () {
+    if (palette) {
+      var _palette$selectedElem2;
+      var codex = palette === null || palette === void 0 || (_palette$selectedElem2 = palette.selectedElements) === null || _palette$selectedElem2 === void 0 || (_palette$selectedElem2 = _palette$selectedElem2[0]) === null || _palette$selectedElem2 === void 0 ? void 0 : _palette$selectedElem2.codex;
+      if (codex && selectedOPV !== codex) {
+        setSelectedOPV(codex);
+        setCurValue(Number(item.measureMinimum));
+      } else if (palette.numberInput && palette.numberInput != curValue) {
+        setCurValue(palette.numberInput);
+      }
+    }
+  }, [palette]);
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    style: {
+      display: 'block',
+      width: '99%'
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      style: {
+        margin: '10px'
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        style: {
+          width: '100%',
+          height: '1.2rem'
+        },
+        children: [/*#__PURE__*/jsx("a", {
+          style: {
+            position: 'absolute',
+            left: '10px'
+          },
+          children: item.measureMinimum + ' ' + item.measureUnit
+        }), /*#__PURE__*/jsx("a", {
+          style: {
+            position: 'absolute',
+            right: '10px'
+          },
+          children: item.measureMaximum + ' ' + item.measureUnit
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          width: '100%',
+          height: '2rem'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcSliderButton, wcSliderButtonLeft),
+          onClick: function onClick() {
+            var newVal = Number(curValue) - Number(item.measureStep);
+            if (newVal < Number(item.measureMinimum)) return;
+            setCurValue(newVal);
+            viewHandler.paletteViewHandler.onRangeClickChange(palette, item, newVal.toString(), true);
+          }
+        }), /*#__PURE__*/jsx("input", {
+          type: "range",
+          min: item.measureMinimum,
+          max: item.measureMaximum,
+          step: item.measureStep,
+          value: curValue,
+          className: slider,
+          onChange: function onChange(event) {
+            return setCurValue(Number(event.target.value));
+          },
+          onMouseUp: function onMouseUp(event) {
+            return viewHandler.paletteViewHandler.onRangeClickChange(palette, item, event.target.value);
+          },
+          onTouchEnd: function onTouchEnd(event) {
+            return viewHandler.paletteViewHandler.onRangeClickChange(palette, item, event.target.value);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(wcSliderButton, wcSliderButtonRight),
+          onClick: function onClick() {
+            var newVal = Number(curValue) + Number(item.measureStep);
+            if (newVal > Number(item.measureMaximum)) return;
+            setCurValue(newVal);
+            viewHandler.paletteViewHandler.onRangeClickChange(palette, item, newVal.toString());
+          }
+        })]
+      })]
+    })
+  });
+};
+var Range$1 = observer(Range);
+
+export { Range$1 as default };

package/build/esm/index-72d9b81f.js

@@ -0,0 +1,84 @@
+import { u as useViewHandler } from './index-22bc52cc.js';
+import { observer } from 'mobx-react-lite';
+import React, { Suspense } from 'react';
+import Planner2DGrid from './index-8b7fb2bc.js';
+import Planner3DImage from './index-62e2d1ea.js';
+import { w as wcConfiguratorProductCenter, p as portrait, l as landscape, s as settingsHidden, i as inGridVisible, f as fullscreen, a as wcConfiguratorArticleImage, c as center, b as foldback, d as foldbackLeft, e as foldup } from './index.module-c64a3dd3.js';
+import classnames from 'classnames';
+import Planner3DGrid from './index-cdd76307.js';
+import PlannerMsgContainer from './index-190de965.js';
+import PlannerUIVariant from './index-36eda094.js';
+import RotateInfo from './index-040726ad.js';
+import PromotedOpvs from './index-9978e7ed.js';
+import OrbitInteraction from './index-78307876.js';
+import MobileNavIcons from './index-520da226.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import './index-1ed82481.js';
+import './index-e90a6b89.js';
+import '@crystaldesign/content-box';
+import './index-db7af6b9.js';
+import 'react-laag';
+import './index-d06ca0dc.js';
+import 'react-qr-code';
+import './index-5e2a184c.js';
+
+var Planner3D = /*#__PURE__*/React.lazy(function () {
+  return import('./index-b157c250.js');
+});
+var PlannerRTV = /*#__PURE__*/React.lazy(function () {
+  return import('./index-65164a99.js');
+});
+var ProductCenter = function ProductCenter(_ref) {
+  var style = _ref.style,
+    _ref$folderPosition = _ref.folderPosition,
+    folderPosition = _ref$folderPosition === void 0 ? 'right' : _ref$folderPosition;
+  var viewHandler = useViewHandler();
+  var showFolderButton = !viewHandler.uiState.ViewConfig.hideMobileFolder || viewHandler.uiState.ViewConfig.showSettingsFolder && viewHandler.productState.promotionVisible;
+  var showFoldup = !viewHandler.uiState.ViewConfig.hideMobileFolder && !viewHandler.uiState.configSettingsIsFoldedUp && !viewHandler.uiState.configSettingsIsHidden && viewHandler.uiState.isMobilePortrait && !viewHandler.productState.roomListExpanded;
+  var showFoldDown = viewHandler.uiState.configSettingsIsHidden && viewHandler.uiState.isInMobileView || viewHandler.uiState.ViewConfig.showSettingsFolder && viewHandler.productState.promotionVisible;
+  var showOrbitCube = viewHandler.productState.doShowRenderImage && (!viewHandler.uiState.ViewConfig.dontShowOrbitInMobile || !viewHandler.getIsInMobileView()) && viewHandler.viewPlannerHandler.getCurPlannerViewMode() == '3DImage' && viewHandler.productState.doShowRenderImage && !viewHandler.productState.plannerRenderingIsStaticBG;
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorProductCenter, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.productState.doShowGrid ? inGridVisible : undefined, fullscreen),
+    children: [/*#__PURE__*/jsx(PlannerMsgContainer, {}), /*#__PURE__*/jsx(Planner3DImage, {}), viewHandler.productState.allow3DComb && viewHandler.isParentViewVisible && /*#__PURE__*/jsx(Suspense, {
+      fallback: /*#__PURE__*/jsx(Fragment, {}),
+      children: /*#__PURE__*/jsx(Planner3D, {})
+    }), /*#__PURE__*/jsx(Planner3DGrid, {}), (viewHandler.productState.allowRTV || viewHandler.productState.allowQRCodeAR) && viewHandler.isParentViewVisible && /*#__PURE__*/jsx(Suspense, {
+      fallback: /*#__PURE__*/jsx(Fragment, {}),
+      children: /*#__PURE__*/jsx(PlannerRTV, {})
+    }), showOrbitCube && /*#__PURE__*/jsx(OrbitInteraction, {}), /*#__PURE__*/jsx(Planner2DGrid, {}), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(MobileNavIcons, {}), /*#__PURE__*/jsx(RotateInfo, {}), /*#__PURE__*/jsx(PromotedOpvs, {}), !viewHandler.productState.hidePlannerUiIcons && !(viewHandler.productState.doShowRTV || viewHandler.productState.doShow3DComb) && /*#__PURE__*/jsx(PlannerUIVariant, {}), viewHandler.productState.plannerMode == 'No' && /*#__PURE__*/jsx("div", {
+      className: wcConfiguratorArticleImage,
+      children: viewHandler.productState.articleImage && /*#__PURE__*/jsx("img", {
+        src: viewHandler.productState.articleImage,
+        className: center
+      })
+    }), showFolderButton && /*#__PURE__*/jsxs(Fragment, {
+      children: [showFoldDown && /*#__PURE__*/jsx("div", {
+        className: classnames(foldback, folderPosition === 'left' ? foldbackLeft : undefined),
+        onClick: viewHandler.uiState.onClickHideConfigSettings,
+        id: "btnFoldDown"
+      }), showFoldup && /*#__PURE__*/jsx("div", {
+        id: "btnFoldUp",
+        className: classnames(foldup),
+        onClick: viewHandler.uiState.onClickFoldupConfigSettings
+      })]
+    })]
+  });
+};
+var ProductCenter$1 = observer(ProductCenter);
+
+export { ProductCenter$1 as default };

package/build/esm/index-73a847f7.js

@@ -0,0 +1,112 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-22bc52cc.js';
+import { useRef, useEffect } from 'react';
+import ProductHeader from './index-ad9af0ac.js';
+import ContentItemWrapper from './index-b2798cc3.js';
+import ProductSettings from './index-82409908.js';
+import ProductCenter from './index-72d9b81f.js';
+import ProductFooter from './index-e18b994e.js';
+import ProductInfo from './index-97afc269.js';
+import { observer } from 'mobx-react-lite';
+import { jsxs, jsx } 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 '@crystaldesign/widget-contact-form';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+import 'classnames';
+import './index-7d7379af.js';
+import 'sift';
+import './index-56fc45a7.js';
+import './index-89afcb5f.js';
+import './index-5362af9c.js';
+import './index-48995011.js';
+import './index-77207bcb.js';
+import './index.module-cf51beb9.js';
+import './index-0afc4e14.js';
+import 'react-switch';
+import './index-be8e99ba.js';
+import './index-f0d4c465.js';
+import './index-c7c485a4.js';
+import 'react-dropdown';
+import './index-9776ff9f.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-ec1feb6e.js';
+import './index-d83850f6.js';
+import './index-71baa7c6.js';
+import '@crystaldesign/content-box';
+import './index-70b4f016.js';
+import './index-6b8c31d0.js';
+import './index-91a6bf34.js';
+import './index-cd62723f.js';
+import './index-5e4726f3.js';
+import './index-d0e33396.js';
+import 'react-laag';
+import './index-270e3f10.js';
+import './index-c2b8c69b.js';
+import './index-205247ad.js';
+import './index-65c4075d.js';
+import './index-852ea39a.js';
+import './index-19857af7.js';
+import './index-dc360187.js';
+import './index-727be0c4.js';
+import './index-51c5bb3e.js';
+import './index-4814a351.js';
+import './index.module-a2212266.js';
+import './index-fd7d7ff6.js';
+import './index-bf38f282.js';
+import './index-55bc4981.js';
+import './index-36a28bd6.js';
+import './index-b0392766.js';
+import './index-e95638a7.js';
+import './index-b49ecb16.js';
+import './index.module-6f3cceb3.js';
+import './index-e2902403.js';
+import './index-7657d66f.js';
+import './index-8b7fb2bc.js';
+import './index-62e2d1ea.js';
+import './index-1ed82481.js';
+import './index.module-c64a3dd3.js';
+import './index-e90a6b89.js';
+import './index-cdd76307.js';
+import './index-190de965.js';
+import './index-36eda094.js';
+import './index-040726ad.js';
+import './index-9978e7ed.js';
+import './index-78307876.js';
+import './index-520da226.js';
+import './index-db7af6b9.js';
+import './index-d06ca0dc.js';
+import 'react-qr-code';
+import './index-5e2a184c.js';
+
+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 Product = function Product(props) {
+  var viewHandler = useViewHandler();
+  var productElement = useRef(null);
+  useEffect(function () {
+    if (!productElement) return;
+    viewHandler.productState.setProductElement(productElement.current);
+  }, [productElement]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: productElement,
+    children: [/*#__PURE__*/jsx(ProductHeader, {}), /*#__PURE__*/jsx(ProductCenter, {}), viewHandler.productState.footerVisible.length > 1 && /*#__PURE__*/jsx(ProductFooter, {}), /*#__PURE__*/jsx(ProductInfo, {}), /*#__PURE__*/jsx(ProductSettings, {}), viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId && /*#__PURE__*/jsx(ContentItemWrapper, {
+      id: viewHandler.settingsState.contentItemId,
+      startPos: "right"
+    })]
+  }));
+};
+var Product$1 = observer(Product);
+
+export { Product$1 as default };

package/build/esm/index-73b1ffff.js

@@ -0,0 +1,47 @@
+import { a as usePlannerUIHandler } from './index-22bc52cc.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+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 '@crystaldesign/widget-contact-form';
+
+var DPACC = function DPACC(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, item.dockToElementId);
+    },
+    style: {
+      left: item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, item.plannerMode == '2D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDocking : undefined, item.plannerMode == '2D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDockingSel : undefined : undefined, item.plannerMode == '3D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDocking : undefined, item.plannerMode == '3D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDockingSel : undefined : undefined),
+    children: item.posNr
+  });
+};
+var DPACC$1 = observer(DPACC);
+
+export { DPACC$1 as default };

package/build/esm/index-7531aa20.js

@@ -0,0 +1,97 @@
+import { u as useViewHandler } from './index-22bc52cc.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { w as wcFunctionsToolbar, p as plannerConfigArrow, m as maxExpanded, e as expanded, l as landscape, a as portrait, b as wcFunctionsContainer, c as wcHelp, d as wcIcon, f as wcHelpIcon, g as wcFunctionsText, h as wcPrint, i as wcPrintIcon, j as wcShareIcon, k as wcReset, n as wcResetIcon, o as wcSave, q as wcSaveIcon, r as wcConfigCloseButton } from './index.module-58b4c04c.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 '@crystaldesign/widget-contact-form';
+
+var Functions = function Functions(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    initializing = _useDivaCore.state.initializing;
+  if (initializing) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("ul", {
+    className: classnames(wcFunctionsToolbar, viewHandler.uiState.ItemsPaletteInProductVisible && viewHandler.getIsInMobileView() ? plannerConfigArrow : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined),
+    children: [!viewHandler.uiState.isMobileLandscape && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("li", {
+        onClick: function onClick() {
+          return viewHandler.productState.onClickHelp();
+        },
+        className: classnames(wcFunctionsContainer, wcHelp),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcIcon, wcHelpIcon)
+        }), /*#__PURE__*/jsx("div", {
+          className: wcFunctionsText,
+          children: t('configurator.ConfigHelp')
+        })]
+      }), /*#__PURE__*/jsxs("li", {
+        onClick: function onClick() {
+          return viewHandler.productState.onClickPrint();
+        },
+        className: classnames(wcFunctionsContainer, wcPrint),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcIcon, wcPrintIcon)
+        }), /*#__PURE__*/jsx("div", {
+          className: wcFunctionsText,
+          children: t('configurator.ConfigPrint')
+        })]
+      }), /*#__PURE__*/jsxs("li", {
+        onClick: function onClick() {
+          return viewHandler.productState.onClickShare();
+        },
+        className: classnames(wcFunctionsContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcIcon, wcShareIcon)
+        }), /*#__PURE__*/jsx("div", {
+          className: wcFunctionsText,
+          children: t('configurator.ConfigShare')
+        })]
+      }), /*#__PURE__*/jsxs("li", {
+        onClick: function onClick() {
+          return viewHandler.productState.onClickReset();
+        },
+        className: classnames(wcFunctionsContainer, wcReset),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcIcon, wcResetIcon)
+        }), /*#__PURE__*/jsx("div", {
+          className: wcFunctionsText,
+          children: t('configurator.ConfigReset')
+        })]
+      }), viewHandler.productState.doShowUserSaveButton && /*#__PURE__*/jsxs("li", {
+        onClick: function onClick() {
+          return viewHandler.productState.onClickSave();
+        },
+        className: classnames(wcFunctionsContainer, wcSave),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcIcon, wcSaveIcon)
+        }), /*#__PURE__*/jsx("div", {
+          className: wcFunctionsText,
+          children: t('configurator.ConfigSave')
+        })]
+      })]
+    }), (!viewHandler.eventIsManagedByClient('onWebPlanerClose') || viewHandler.uiState.isMobileLandscape || viewHandler.uiState.isMobilePortrait) && /*#__PURE__*/jsx("li", {
+      className: wcConfigCloseButton,
+      title: t('configurator.ConfigClose'),
+      onClick: viewHandler.onCloseConfigurator
+    })]
+  });
+};
+var index = observer(Functions);
+
+export { index as default };

package/build/esm/index-75f4030f.js

@@ -0,0 +1,66 @@
+import { s as styleInject, u as useViewHandler } from './index-22bc52cc.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-6e651f92.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';
+import '@crystaldesign/widget-contact-form';
+
+var wcTabGroupItem = "wcTabGroupItem-RxTRT";
+var landscape = "landscape-XFSPQ";
+var wcActiveStep = "wcActiveStep-W687q";
+var wcVisitedStep = "wcVisitedStep-IGlR4";
+var wcTabGroupItemMobile = "wcTabGroupItemMobile-tMZbr";
+var secondaryColorDiv = "secondaryColorDiv-fx0Cm";
+var wcStepIcon = "wcStepIcon-JtMDZ";
+var css_248z = ".wcTabGroupItem-RxTRT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: background-color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n}\n\n.landscape-XFSPQ.wcTabGroupItem-RxTRT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q,\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q.wcTabGroupItem-RxTRT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcTabGroupItem-RxTRT.wcVisitedStep-IGlR4 {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-IGlR4.wcTabGroupItem-RxTRT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-RxTRT.wcTabGroupItem-RxTRT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q {\n  color: white;\n}\n\n.wcTabGroupItemMobile-tMZbr {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: width 0.4s ease;\n  line-height: 56px;\n  padding: 0 6px 0 13px;\n  color: var(--secondaryColor);\n  font-size: 10px;\n  font-weight: 600;\n  position: relative;\n}\n\n.secondaryColorDiv-fx0Cm {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n  background-color: var(--secondaryColor);\n}\n\n.wcTabGroupItemMobile-tMZbr.wcActiveStep-W687q {\n  background-color: var(--thirdColor);\n}\n\n.wcStepIcon-JtMDZ {\n  display: block;\n  background-color: var(--secondaryColor);\n  background-position: center center;\n  width: 30px;\n  height: 50px;\n  margin: auto;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center center;\n  float: right;\n}\n.wcActiveStep-W687q .wcStepIcon-JtMDZ {\n  margin-left: 5px;\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var active = tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var icon = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(!viewHandler.uiState.isInMobileView ? wcTabGroupItem : wcTabGroupItemMobile, viewHandler.uiState.isMobileLandscape ? landscape : undefined, active ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !active ? wcVisitedStep : undefined),
+    children: [(active || !icon) && t('configurator.' + tabGroup.title, tabGroup.title), active && /*#__PURE__*/jsx("div", {
+      className: secondaryColorDiv
+    }), icon && /*#__PURE__*/jsx("div", {
+      className: wcStepIcon,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    })]
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };

package/build/esm/index-7657d66f.js

@@ -0,0 +1,53 @@
+import { s as styleInject, u as useViewHandler } from './index-22bc52cc.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+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';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };