@crystaldesign/diva-web-planner-react 26.3.0-beta.44 → 26.3.0-beta.45

package/build/esm/index-535ae3e9.js

@@ -0,0 +1,64 @@
+import { s as styleInject, u as useViewHandler } from './index-a1c6fe2f.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/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+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-5444bc20.js

@@ -0,0 +1,83 @@
+import { s as styleInject, u as useViewHandler, C as Checkout } from './index-a1c6fe2f.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ConfettiInSummary from './index-585dc109.js';
+import ArticleOverview from './index-c66f4950.js';
+import SummaryHeader from './index-03e5a2dd.js';
+import { u as useStickyScroll } from './ussIsSticky-5182770c.js';
+import classnames from 'classnames';
+import AiRoomsSelection from './index-2c88681f.js';
+import AppointmentPreview from './index-1d1987f6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-confetti-explosion';
+import './index-6aec69d9.js';
+import 'react-laag';
+import './index-e461054a.js';
+import 'react-qr-code';
+import './index-3ce15374.js';
+import './useCustomDimensions-98aa9d82.js';
+import './index-39759a4f.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-055d495f.js';
+import './index.module-d516a330.js';
+import './index-40c759d4.js';
+import './index-3b7886a9.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-017ac69b.js';
+import './index-dd8cdf98.js';
+
+var checkoutWrapper = "checkout-wrapper-jKxxm";
+var checkoutWrapperSticky = "checkout-wrapper-sticky-dE4al";
+var css_248z = ".checkout-wrapper-jKxxm {\n  padding-top: 8px;\n  padding-bottom: 8px;\n  z-index: 100;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper {\n  transition: max-height 0.4s ease;\n  max-height: 200px;\n}\n\n.checkout-wrapper-sticky-dE4al {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  padding: 8px 16px;\n  width: calc(100% - 32px);\n  transition: opacity 0.2s ease;\n  background-color: rgba(244, 244, 244, 0.8);\n}\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper {\n  flex-wrap: nowrap;\n  max-height: 60px; /* fits one row */\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button {\n  transition:\n    font-size 0.4s ease,\n    height 0.4s ease;\n  white-space: nowrap;\n  overflow: hidden; /* optional if text might overflow */\n  display: none;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button:nth-child(1),\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button:nth-child(2),\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button:nth-child(3) {\n  display: flex;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button {\n  font-size: 14px;\n  height: 36px;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper {\n  width: 100%;\n  transition: width 0.4s ease;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper:not(.no-primary-buttons) {\n  grid-template-columns: repeat(auto-fit, minmax(calc(30% - 4px), 1fr)) !important;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper:not(.no-primary-buttons) {\n  width: 40%;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper:empty {\n  display: none;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper > button div:nth-child(2) {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+var SummaryOverview = function SummaryOverview(props) {
+  var _viewHandler$settings;
+  var viewHandler = useViewHandler();
+  var _useStickyScroll = useStickyScroll(-50, (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : null),
+    stickyRef = _useStickyScroll.stickyRef,
+    isSticky = _useStickyScroll.isSticky;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ConfettiInSummary, {}), /*#__PURE__*/jsx(SummaryHeader, {}), /*#__PURE__*/jsx("div", {
+      ref: stickyRef,
+      className: checkoutWrapper,
+      style: {
+        opacity: isSticky ? '0' : '1'
+      },
+      children: /*#__PURE__*/jsx(Checkout, {
+        viewHandler: viewHandler
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(checkoutWrapper, checkoutWrapperSticky),
+      style: {
+        opacity: isSticky ? '1' : '0',
+        pointerEvents: isSticky ? 'auto' : 'none'
+      },
+      children: /*#__PURE__*/jsx(Checkout, {
+        viewHandler: viewHandler
+      })
+    }), viewHandler.uiState.ViewConfig.showAppointmentPreview && /*#__PURE__*/jsx(AppointmentPreview, {}), viewHandler.productState.diva3dImgSrc && /*#__PURE__*/jsx(AiRoomsSelection, {}), /*#__PURE__*/jsx(ArticleOverview, {})]
+  });
+};
+var SummaryOverview$1 = observer(SummaryOverview);
+
+export { SummaryOverview$1 as default };

package/build/esm/index-55e98f29.js

@@ -0,0 +1,156 @@
+import { s as styleInject, u as useViewHandler } from './index-a1c6fe2f.js';
+import 'react';
+import { S as SettingsItem } from './index-9a815710.js';
+import ContentItemTeaser from './index-08f30bb5.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'sift';
+import './index-020907df.js';
+import './index-e00cec9e.js';
+import './index-38ec7222.js';
+import './index-6df14676.js';
+import './index.module-53a7d456.js';
+import './index-40c759d4.js';
+import './index-50a706fe.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-d5f500b4.js';
+import 'react-dropdown';
+import './index-9a4bd8c6.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-c9bff677.js';
+import './index-1f2bf239.js';
+import './index-e2bde67e.js';
+import '@crystaldesign/content-box';
+import './index-bc82089d.js';
+import './index-ccc294af.js';
+import './index-a797c0b7.js';
+import './index-92427107.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-5e3cbf89.js';
+import './index-f4ca11fc.js';
+import './index-847c33f9.js';
+import './index-33d12375.js';
+import './index-e24fd930.js';
+import './index-35399b33.js';
+import './index-2dd7dad1.js';
+import 'react-laag';
+import './index.module-a889ba64.js';
+import './index-da18d537.js';
+import './index-706b0102.js';
+import './index-b5b2a519.js';
+import './index-28be3d4c.js';
+import './index-6e42a6da.js';
+import './index.module-4350ee3c.js';
+import './index-4a1d7f04.js';
+import './index-0083c380.js';
+import './index-5ab232c5.js';
+import './index-9ae8bb90.js';
+import './index-2dd644d4.js';
+import './index-6fe49871.js';
+import './index-c188fcfc.js';
+import './index-cea1d508.js';
+import './index-18fdd471.js';
+import './index-d611e907.js';
+import './index-2a11de44.js';
+import './index-b033b3a8.js';
+import './index-70d607ed.js';
+import 'rc-slider';
+import './index-78053b41.js';
+import './index-09f7356c.js';
+import './index-b564b4d4.js';
+import './index-5444bc20.js';
+import './index-585dc109.js';
+import 'react-confetti-explosion';
+import './index-c66f4950.js';
+import './index-6aec69d9.js';
+import './index-e461054a.js';
+import 'react-qr-code';
+import './index-3ce15374.js';
+import './useCustomDimensions-98aa9d82.js';
+import './index-03e5a2dd.js';
+import './ussIsSticky-5182770c.js';
+import './index-2c88681f.js';
+import './index-39759a4f.js';
+import './index-055d495f.js';
+import './index.module-d516a330.js';
+import './index-3b7886a9.js';
+import './index-017ac69b.js';
+import './index-dd8cdf98.js';
+import './index-1d1987f6.js';
+
+var wrapper = "wrapper-u-Jk1";
+var left = "left-T5gs2";
+var right = "right-VMURD";
+var verticalSeparator = "verticalSeparator-StcmY";
+var css_248z = ".wrapper-u-Jk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 24px;\n}\n\n.mobile .wrapper-u-Jk1 {\n  gap: 8px;\n}\n\n.left-T5gs2 {\n  flex: 1;\n}\n\n.right-VMURD {\n  flex: 1;\n}\n\n.verticalSeparator-StcmY {\n  width: 1px;\n  align-self: stretch;\n  background-color: #ccc;\n}";
+styleInject(css_248z);
+
+var SettingsItemsGroup = function SettingsItemsGroup(_ref) {
+  var group = _ref.group;
+  useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      className: left,
+      children: group.left.map(function (id) {
+        var _item$contentItemTeas, _item$optionCodex, _item$contentItemTeas2;
+        var item = group.palettes.find(function (p) {
+          return p.id === id;
+        });
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [((_item$contentItemTeas = item.contentItemTeaser) === null || _item$contentItemTeas === void 0 ? void 0 : _item$contentItemTeas.position) === 'TOP' ? /*#__PURE__*/jsx(ContentItemTeaser, {
+            item: item.contentItemTeaser
+          }) : /*#__PURE__*/jsx(Fragment, {}), /*#__PURE__*/jsx(SettingsItem, {
+            item: item,
+            id: Number(item.id)
+          }, (_item$optionCodex = item.optionCodex) !== null && _item$optionCodex !== void 0 ? _item$optionCodex : item.configStepKey + item.id), ((_item$contentItemTeas2 = item.contentItemTeaser) === null || _item$contentItemTeas2 === void 0 ? void 0 : _item$contentItemTeas2.position) === 'BOTTOM' ? /*#__PURE__*/jsx(ContentItemTeaser, {
+            item: item.contentItemTeaser
+          }) : /*#__PURE__*/jsx(Fragment, {})]
+        });
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: verticalSeparator
+    }), /*#__PURE__*/jsx("div", {
+      className: right,
+      children: group.right.map(function (id) {
+        var _item$contentItemTeas3, _item$optionCodex2, _item$contentItemTeas4;
+        var item = group.palettes.find(function (p) {
+          return p.id === id;
+        });
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [((_item$contentItemTeas3 = item.contentItemTeaser) === null || _item$contentItemTeas3 === void 0 ? void 0 : _item$contentItemTeas3.position) === 'TOP' ? /*#__PURE__*/jsx(ContentItemTeaser, {
+            item: item.contentItemTeaser
+          }) : /*#__PURE__*/jsx(Fragment, {}), /*#__PURE__*/jsx(SettingsItem, {
+            item: item,
+            id: Number(item.id)
+          }, (_item$optionCodex2 = item.optionCodex) !== null && _item$optionCodex2 !== void 0 ? _item$optionCodex2 : item.configStepKey + item.id), ((_item$contentItemTeas4 = item.contentItemTeaser) === null || _item$contentItemTeas4 === void 0 ? void 0 : _item$contentItemTeas4.position) === 'BOTTOM' ? /*#__PURE__*/jsx(ContentItemTeaser, {
+            item: item.contentItemTeaser
+          }) : /*#__PURE__*/jsx(Fragment, {})]
+        });
+      })
+    })]
+  });
+};
+
+export { SettingsItemsGroup as default };

package/build/esm/index-5702a95c.js

@@ -0,0 +1,50 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-a1c6fe2f.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-a54eb927.js';
+import PriceSumm from './index-65451d76.js';
+import classnames from 'classnames';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index.module-4e7e3ac6.js';
+
+var container = "container-jfAym";
+var backOverwrite = "back-overwrite--AJgH";
+var forthOverwrite = "forth-overwrite-l0e3R";
+var actionNavigationClass = "action-navigation-class-jX4Hl";
+var css_248z = ".container-jfAym .back-overwrite--AJgH,\n.container-jfAym .forth-overwrite-l0e3R {\n  border: 1px #262626 solid !important;\n  background-color: var(--thirdColor) !important;\n  color: #262626 !important;\n  font-weight: 700 !important;\n}\n\n.container-jfAym .back-overwrite--AJgH,\n.container-jfAym .forth-overwrite-l0e3R {\n  cursor: pointer;\n  width: 50%;\n  flex-grow: 1;\n}\n\n.action-navigation-class-jX4Hl {\n  height: 100%;\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 ActionNavigationRalph = function ActionNavigationRalph(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [!viewHandler.getIsInMobileView() && /*#__PURE__*/jsx(PriceSumm, {}), /*#__PURE__*/jsx(ActionNavigation, {
+      className: classnames(viewHandler.getIsInMobileView() ? actionNavigationClass : undefined, container),
+      showBackButtonText: true,
+      forthOverwrite: forthOverwrite,
+      backOverwrite: backOverwrite
+    })]
+  }));
+};
+var index = observer(ActionNavigationRalph);
+
+export { index as default };

package/build/esm/index-585dc109.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-a1c6fe2f.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/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+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-596b76d7.js

@@ -0,0 +1,51 @@
+import { c as usePlannerUIHandler } from './index-a1c6fe2f.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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-5ab232c5.js

@@ -0,0 +1,62 @@
+import { s as styleInject, u as useViewHandler } from './index-a1c6fe2f.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import IsActive from './index-da18d537.js';
+import InfoIcon from './index-40c759d4.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var articleItem = "article-item-560hu";
+var wcSize = "wcSize-NqLig";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Tn0PY";
+var wcImage = "wcImage-ui7-N";
+var css_248z = "/*Planner*/\n\n.article-item-560hu {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  float: left;\n}\n\n.article-item-560hu:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n.article-item-560hu:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.article-item-560hu:hover {\n  z-index: 200;\n}\n\n.article-item-560hu .wcSize-NqLig {\n  width: 100%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.article-item-560hu .wcConfigurator-settings-title-Tn0PY {\n  float: left;\n  margin-top: 11.2px;\n  margin-left: 11.2px;\n  max-width: calc(100% - 72px);\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.article-item-560hu .wcImage-ui7-N {\n  width: 60px;\n  height: 60px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.article-item-560hu .wcConfigurator-settings-title-Tn0PY:hover {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  background: #fff;\n}\n";
+styleInject(css_248z);
+
+var PlannerSwitch = function PlannerSwitch(_ref) {
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(articleItem),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickOnPlannerElementSwitch(item);
+    },
+    children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+      item: item
+    }, item.articleCodex), /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        },
+        title: item.title
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorSettingsTitle),
+        children: item.title
+      })]
+    })]
+  });
+};
+var PlannerSwitch$1 = observer(PlannerSwitch);
+
+export { PlannerSwitch$1 as default };