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

package/build/esm/index-cc196600.js

@@ -0,0 +1,64 @@
+import { s as styleInject, u as useViewHandler } from './index-3d2bd317.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 wcTabGroupItem = "wcTabGroupItem-TP7vT";
+var portrait = "portrait-3cTAf";
+var tablet = "tablet-JA0TU";
+var wcActiveStep = "wcActiveStep-y3S9Y";
+var wcVisitedStep = "wcVisitedStep-yDCqq";
+var wcStepNum = "wcStepNum-6FgQh";
+var css_248z = ".wcTabGroupItem-TP7vT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition:\n    background-color 0.3s ease-out,\n    color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.portrait-3cTAf.wcTabGroupItem-TP7vT {\n  line-height: calc(var(--configuratorTabGroupHeight) - 3px);\n}\n\n.portrait-3cTAf:not(.tablet-JA0TU).wcTabGroupItem-TP7vT {\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 300;\n  padding: 0 10px;\n}\n\n.wcTabGroupItem-TP7vT.wcActiveStep-y3S9Y {\n  color: white;\n  background-color: var(--primaryColor);\n}\n\n.wcActiveStep-y3S9Y.wcTabGroupItem-TP7vT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcVisitedStep-yDCqq {\n  background-color: #d8d8d8;\n}\n\n.wcTabGroupItem-TP7vT:hover {\n  background-color: #dcdcdc;\n}\n.wcVisitedStep-yDCqq.wcTabGroupItem-TP7vT:hover {\n  background-color: #cacaca;\n}\n\n.wcStepNum-6FgQh {\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  border: 1px solid white;\n  background-color: white;\n  border-radius: 10px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: #6f6f6f;\n}\n\n.portrait-3cTAf:not(.tablet-JA0TU) .wcStepNum-6FgQh {\n  height: 14px;\n  width: 14px;\n  line-height: 14px;\n  font-size: 10px;\n}\n\n.wcActiveStep-y3S9Y .wcStepNum-6FgQh {\n  color: var(--primaryColor);\n  font-weight: 700;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%229%22 viewBox%3D%220 0 12 9%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.44531 3.49126L5.625 8.09375L10.75 0.953613%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  color: transparent;\n}\n\n.portrait-3cTAf:not(.tablet-JA0TU).wcVisitedStep-yDCqq .wcStepNum-6FgQh {\n  background-size: 8px;\n}\n\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh:empty:before {\n  content: '\\200b';\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontalGold = function TabGroupItemHorizontalGold(_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) {
+    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onTabGroupClick(tabGroup);
+    },
+    className: classnames(wcTabGroupItem, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive) ? wcVisitedStep : undefined),
+    children: [viewHandler.uiState.isMobilePortrait ? /*#__PURE__*/jsx(Fragment, {}) : /*#__PURE__*/jsx("span", {
+      className: classnames(wcStepNum),
+      children: tabGroup.posNr
+    }), t('configurator.' + tabGroup.title, tabGroup.title)]
+  });
+};
+var index = observer(TabGroupItemHorizontalGold);
+
+export { index as default };

package/build/esm/index-ce6d42f7.js

@@ -0,0 +1,88 @@
+import { s as styleInject, u as useViewHandler } from './index-3d2bd317.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 wcConfiguratorProductFooter = "wcConfigurator-product-footer-SQUKh";
+var portrait = "portrait-begxM";
+var landscape = "landscape-m3RkP";
+var expanded = "expanded-D5PIt";
+var wcButton = "wcButton-2kxBv";
+var sel = "sel-4wfuc";
+var wcViewAs = "wc_ViewAs-QJyAI";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-SQUKh {\n  text-align: center;\n  z-index: 350;\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n  display: flex;\n  gap: 10px;\n}\n\n.portrait-begxM.wcConfigurator-product-footer-SQUKh {\n  display: none;\n}\n\n.landscape-m3RkP.wcConfigurator-product-footer-SQUKh {\n  display: none;\n}\n\n.expanded-D5PIt.wcConfigurator-product-footer-SQUKh {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc,\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc:hover {\n  background: #262626;\n  color: white;\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv:active,\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc:active {\n  background: #262626;\n  color: white;\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv {\n  background: white;\n  box-sizing: border-box;\n  -webkit-text-stroke: 0.6px;\n  min-width: 150px;\n  width: auto;\n  height: 38.4px;\n  line-height: 35.8px;\n  color: var(--secondaryColor);\n  border-radius: var(--globalBorderRadius);\n  border: 1px solid #262626;\n}\n\n.portrait-begxM.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv {\n  min-width: 140px;\n}\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv:hover {\n  color: var(--secondaryColor);\n  background: white;\n  box-shadow: var(--boxShadowHover);\n}\n\n/* ViewAs  */\n.wc_ViewAs-QJyAI {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  list-style: none;\n  white-space: nowrap;\n  display: flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.wc_ViewAs-QJyAI li {\n  display: block;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  if (viewHandler.productState.footerVisible.length <= 1 && (((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) != 'SUMMARY' || !renderings.length)) return /*#__PURE__*/jsx(Fragment, {});
+  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.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        },
+        children: t('configurator.Foto')
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        },
+        children: t('configurator.Grundriss')
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          },
+          children: t('configurator.Foto')
+        }), ((_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.type) == 'SUMMARY' && renderings.map(function (rendering) {
+          var _viewHandler$productS;
+          return /*#__PURE__*/jsx("li", {
+            className: classnames(wcButton, viewHandler.productState.doShowRenderImage && ((_viewHandler$productS = viewHandler.productState.curAlternateRendering) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.imageCodex) === rendering.imageCodex ? sel : undefined),
+            onClick: function onClick() {
+              return viewHandler.productState.onChangePlannerView('3D', rendering);
+            },
+            children: rendering.title
+          });
+        })]
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        },
+        children: t('configurator.RTV')
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };

package/build/esm/index-ceaff7ca.js

@@ -0,0 +1,108 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-3d2bd317.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import ConfettiExplosion from 'react-confetti-explosion';
+import { jsx, Fragment } from 'react/jsx-runtime';
+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 '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 bigExplodeProps = {
+  force: 0.6,
+  duration: 5000,
+  particleCount: 200,
+  floorHeight: 1600,
+  floorWidth: 1600
+};
+var ConfettiInSummary = function ConfettiInSummary(props) {
+  var _theme$palette$primar, _theme$palette, _theme$palette$primar2, _theme$palette2, _theme$palette$primar3, _theme$palette3;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    theme = _useDivaCore.state.theme;
+  var delay = viewHandler.getViewConfig().navigateMobileSwiper && viewHandler.getIsInMobileView();
+  var _useState = useState(!delay),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  useEffect(function () {
+    if (!delay) return;
+    setTimeout(function () {
+      setVisible(true);
+    }, 300);
+  }, []);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldShowConfetti = _useState4[0],
+    setShouldShowConfetti = _useState4[1];
+  useEffect(function () {
+    var _viewHandler$uiState$, _viewHandler$uiState$2;
+    var confettiCooldownInHours = (_viewHandler$uiState$ = (_viewHandler$uiState$2 = viewHandler.uiState.ViewConfig.showConfettiInSummary) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.confettiCooldownInHours) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : 0;
+
+    //handeling strict mode
+    if (localStorage.getItem('lastConfettiSessionId') === DivaUtils.SessionId && localStorage.getItem('lastConfettiChange') == viewHandler.settingsState.configChanged.toString()) return;
+    if (confettiCooldownInHours > 0) {
+      var lastConfettiTime = localStorage.getItem('lastConfettiTime');
+      if (lastConfettiTime) {
+        var diff = Date.now() - Number(lastConfettiTime);
+        if (diff < confettiCooldownInHours * 60 * 60 * 1000) {
+          setShouldShowConfetti(false);
+          return;
+        }
+      }
+      // Set the timestamp only when we're actually going to show confetti
+      localStorage.setItem('lastConfettiTime', Date.now().toString());
+      localStorage.setItem('lastConfettiChange', viewHandler.settingsState.configChanged.toString());
+      setShouldShowConfetti(true);
+      return;
+    }
+
+    // Session-based logic (confettiCooldownInHours == 0)
+
+    if (localStorage.getItem('lastConfettiSessionId') === DivaUtils.SessionId) {
+      setShouldShowConfetti(false);
+      return;
+    }
+    // Set the session ID only when we're actually going to show confetti
+    localStorage.setItem('lastConfettiSessionId', DivaUtils.SessionId);
+    localStorage.setItem('lastConfettiChange', viewHandler.settingsState.configChanged.toString());
+    setShouldShowConfetti(true);
+  }, []);
+  if (!viewHandler.uiState.ViewConfig.showConfettiInSummary) return /*#__PURE__*/jsx(Fragment, {});
+  if (!shouldShowConfetti) return /*#__PURE__*/jsx(Fragment, {});
+  if (!viewHandler.isParentViewVisible) return /*#__PURE__*/jsx(Fragment, {});
+  var confettiProps = viewHandler.uiState.ViewConfig.showConfettiInSummary.confettiProps;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%'
+    },
+    children: visible && /*#__PURE__*/jsx(ConfettiExplosion, _objectSpread(_objectSpread(_objectSpread({
+      zIndex: 1000001
+    }, bigExplodeProps), confettiProps !== null && confettiProps !== void 0 ? confettiProps : {}), {}, {
+      colors: [(_theme$palette$primar = (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.primary) === null || _theme$palette === void 0 ? void 0 : _theme$palette.main) !== null && _theme$palette$primar !== void 0 ? _theme$palette$primar : '', (_theme$palette$primar2 = (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 || (_theme$palette2 = _theme$palette2.primary) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.dark) !== null && _theme$palette$primar2 !== void 0 ? _theme$palette$primar2 : '', (_theme$palette$primar3 = (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.primary) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.light) !== null && _theme$palette$primar3 !== void 0 ? _theme$palette$primar3 : '']
+    }))
+  });
+};
+var ConfettiInSummary$1 = observer(ConfettiInSummary);
+
+export { ConfettiInSummary$1 as default };

package/build/esm/index-cf556293.js

@@ -0,0 +1,41 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler, w as wcPlannerMsgContainerParent, d as expanded, m as mobile, f as PlannerMsgItem } from './index-3d2bd317.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 '@crystaldesign/diva-core';
+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 PlannerMsgContainer = function PlannerMsgContainer(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcPlannerMsgContainerParent, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: viewHandler.productState.plannerMessagesArr.map(function (item) {
+      return /*#__PURE__*/jsx(PlannerMsgItem, {
+        item: item[1],
+        codex: item[0]
+      }, item[0]);
+    })
+  });
+};
+var PlannerMsgContainer$1 = observer(PlannerMsgContainer);
+
+export { PlannerMsgContainer$1 as default };

package/build/esm/index-d14c9ceb.js

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

package/build/esm/index-d189a056.js

@@ -0,0 +1,72 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-3d2bd317.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { p as posnrWrapper, s as swiperWrapper, m as mobile, a as swiperSlide, S as SettingsPosNr$1 } from './index-f58f4579.js';
+import classnames from 'classnames';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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';
+import 'react-laag';
+
+var SettingsPosNrContainer = function SettingsPosNrContainer(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    swiperRef = _useState2[0],
+    setSwiperRef = _useState2[1];
+  var keys = Object.keys(viewHandler.settingsState.articleInfos).map(function (key) {
+    return Number(key);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+  useEffect(function () {
+    if (swiperRef) {
+      var index = Object.keys(viewHandler.settingsState.articleInfos).findIndex(function (key) {
+        return viewHandler.settingsState.articleInfos[key].isActive;
+      });
+      if (index !== -1) {
+        swiperRef.slideTo(index !== 0 ? index - 1 : index);
+      }
+    }
+  }, [viewHandler.settingsState.articleInfos, swiperRef]);
+  if (viewHandler.settingsState.posNrAreHidden) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(posnrWrapper, swiperWrapper, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: /*#__PURE__*/jsx(Swiper, {
+      onSwiper: setSwiperRef,
+      spaceBetween: 3,
+      slidesPerView: 'auto',
+      className: 'no-swiping',
+      children: keys.map(function (key) {
+        return /*#__PURE__*/jsx(SwiperSlide, {
+          className: swiperSlide,
+          children: /*#__PURE__*/jsx(SettingsPosNr$1, {
+            id: key.toString()
+          })
+        }, key);
+      })
+    })
+  });
+};
+var SettingsPosNr = observer(SettingsPosNrContainer);
+
+export { SettingsPosNr as default };

package/build/esm/index-d256baa2.js

@@ -0,0 +1,57 @@
+import { s as styleInject, u as useViewHandler } from './index-3d2bd317.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/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 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 };

package/build/esm/index-d2f612c7.js

@@ -0,0 +1,66 @@
+import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-3d2bd317.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 sumWrapper = "sum-wrapper-gnJDJ";
+var isMobile = "is-mobile-MyAw2";
+var priceWrapper = "price-wrapper-OEjmk";
+var price = "price-JPhUm";
+var betterPrice = "better-price-q5J8D";
+var canceled = "canceled-sYf8-";
+var hidden = "hidden-et6vJ";
+var css_248z = ".sum-wrapper-gnJDJ {\n  height: 40px;\n  line-height: 30px;\n  display: flex;\n  justify-content: space-between;\n  font-weight: 700;\n  font-size: 16px;\n  flex-grow: 1;\n}\n\n.is-mobile-MyAw2.sum-wrapper-gnJDJ {\n  line-height: 38px;\n  font-size: 18px;\n  justify-content: flex-end;\n  flex-wrap: nowrap;\n  gap: 12px;\n}\n\n.price-wrapper-OEjmk {\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n}\n\n.price-JPhUm {\n  position: relative;\n  color: #262626;\n  text-wrap: nowrap;\n}\n\n.is-mobile-MyAw2 .price-JPhUm {\n  font-size: 15px;\n}\n\n.better-price-q5J8D {\n  color: #b1223f;\n  margin-right: 12px;\n}\n\n.price-JPhUm.canceled-sYf8- {\n  color: #bfbfbf;\n  opacity: 1;\n  transition:\n    opacity 0.3s ease-in-out,\n    max-width 0.3s ease-in-out;\n  max-width: 110px;\n}\n.price-JPhUm.canceled-sYf8-.hidden-et6vJ {\n  opacity: 0;\n  max-width: 0px;\n}\n\n.price-JPhUm.canceled-sYf8-:before {\n  position: absolute;\n  content: '';\n  left: 0;\n  top: 42%;\n  right: 0;\n  border-top: 2px solid;\n  border-color: #b1223f;\n  transform: rotate(-7deg);\n}\n\n.is-mobile-MyAw2 .price-JPhUm.canceled-sYf8-:before {\n  top: 45%;\n}\n";
+styleInject(css_248z);
+
+var PriceSumm = function PriceSumm(props) {
+  var _viewHandler$productS, _viewHandler$productS2;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(sumWrapper, viewHandler.getIsInMobileView() ? isMobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      children: t('configurator.Sum', 'Summe')
+    }), /*#__PURE__*/jsx("div", {
+      className: priceWrapper,
+      children: !hidePrices && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(price, viewHandler.productState.formatedBruttoPrice ? betterPrice : undefined),
+          children: /*#__PURE__*/jsx(PriceCounter, {
+            price: (_viewHandler$productS = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(price, canceled, !viewHandler.productState.formatedBruttoPrice ? hidden : undefined),
+          children: [' ', /*#__PURE__*/jsx(PriceCounter, {
+            price: (_viewHandler$productS2 = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0
+          })]
+        })]
+      })
+    })]
+  });
+};
+var PriceSumm$1 = observer(PriceSumm);
+
+export { PriceSumm$1 as default };