@crystaldesign/diva-web-planner-react 25.12.0 → 25.12.1

package/build/esm/index-64c25bda.js

@@ -0,0 +1,106 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-0944ffe7.js';
+import { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import CheckoutFormNew from './index-5f256b26.js';
+import ProductCenter from './index-10eaf3ba.js';
+import ContentItemWrapper from './index-0fcae052.js';
+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/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 './index-7aba8c09.js';
+import 'react-switch';
+import 'react-dropdown';
+import './index-2ca5053a.js';
+import './index-c9a18ff6.js';
+import './index-f6a56dbb.js';
+import './index-58f6b909.js';
+import './index.module-a11bf1fb.js';
+import './index-245e1c06.js';
+import './index-f92ddefd.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-9f816ddf.js';
+import './index-a8ff0f11.js';
+import './index-06714dce.js';
+import './index-bb1b6f14.js';
+import './index-c83b969a.js';
+import './index-26c84ff5.js';
+import 'react-laag';
+import './index-afaa11f3.js';
+import 'react-qr-code';
+import './index-c45f8771.js';
+import './index-06ca78bb.js';
+import './index-c7cbf9df.js';
+import '@crystaldesign/content-item';
+
+var arrow = "arrow-GTKSC";
+var css_248z = ".arrow-GTKSC {\n  bottom: 40px;\n  right: 8px;\n  position: absolute;\n  width: 70px;\n  height: 55px;\n  transform: rotate(90deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 26 10%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%236f6f6f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EElement 1%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_1-2%22 data-name%3D%22Ebene 1%22%3E%3Cpath class%3D%22cls-1%22 d%3D%22M10.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M.5.5l5%2C4.29L.5%2C9.5%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M20.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  z-index: 300;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["contentItemStartPos"];
+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(_ref) {
+  var _viewHandler$configSt2;
+  var contentItemStartPos = _ref.contentItemStartPos,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var ref = useRef(null);
+  var onClick = function onClick() {
+    if (ref.current) {
+      var scrollTo = ref.current.getBoundingClientRect().height;
+      if (ref.current.scrollTop > 100) {
+        scrollTo = 0;
+      }
+      ref.current.scrollTo({
+        top: scrollTo,
+        behavior: 'smooth'
+      });
+    }
+  };
+  useEffect(function () {
+    if (!ref) return;
+    viewHandler.productState.setProductElement(ref.current);
+  }, [ref]);
+  useEffect(function () {
+    var _viewHandler$configSt;
+    if (!viewHandler.uiState.isLoading && (_viewHandler$configSt = viewHandler.configState.paramters) !== null && _viewHandler$configSt !== void 0 && _viewHandler$configSt.checkout) {
+      onClick();
+    }
+  }, [(_viewHandler$configSt2 = viewHandler.configState.paramters) === null || _viewHandler$configSt2 === void 0 ? void 0 : _viewHandler$configSt2.checkout, viewHandler.uiState.isLoading]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    id: "wcConfigurator-product",
+    children: [!viewHandler.uiState.isLoading && /*#__PURE__*/jsx("div", {
+      className: arrow,
+      onClick: onClick
+    }), /*#__PURE__*/jsx(ProductCenter, {
+      style: {
+        height: 'calc(100% - 40px)',
+        width: 'calc(100% - 40px)',
+        top: 0,
+        margin: '20px'
+      }
+    }), !viewHandler.uiState.isLoading && viewHandler.divaWebPlanner.getBasket() !== undefined && /*#__PURE__*/jsx(CheckoutFormNew, {}), /*#__PURE__*/jsx(ContentItemWrapper, {
+      direction: contentItemStartPos
+    })]
+  }));
+};
+var Product$1 = observer(Product);
+
+export { Product$1 as default };

package/build/esm/index-658517dc.js

@@ -0,0 +1,57 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-0944ffe7.js';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import CountUp from 'react-countup';
+import { observer } from 'mobx-react-lite';
+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/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';
+
+var PriceCounter = function PriceCounter(_ref) {
+  var _newPrice$toString$sp, _newPrice$toString$sp2;
+  var price = _ref.price,
+    _formattingFn = _ref.formattingFn,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 0.5 : _ref$duration;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    newPrice = _useState2[0],
+    setNewPrice = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    oldPrice = _useState4[0],
+    setOldPrice = _useState4[1];
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    setNewPrice(price);
+  }, [price]);
+  return /*#__PURE__*/jsx(CountUp, {
+    end: newPrice,
+    duration: duration,
+    decimals: (_newPrice$toString$sp = (_newPrice$toString$sp2 = newPrice.toString().split('.')[1]) === null || _newPrice$toString$sp2 === void 0 ? void 0 : _newPrice$toString$sp2.length) !== null && _newPrice$toString$sp !== void 0 ? _newPrice$toString$sp : 0,
+    start: oldPrice,
+    formattingFn: function formattingFn(n) {
+      return _formattingFn ? _formattingFn(n) : DivaUtils.formatPrice(n, viewHandler.productState.getPriceFormatForCounter(newPrice));
+    },
+    onEnd: function onEnd() {
+      setOldPrice(newPrice);
+    }
+  });
+};
+var PriceCounter$1 = observer(PriceCounter);
+
+export { PriceCounter$1 as default };

package/build/esm/index-65919cb1.js

@@ -0,0 +1,92 @@
+import { s as styleInject, u as useViewHandler, e as evalVisible, _ as _onClickCheckout, I as Icon } from './index-0944ffe7.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { c as checkoutButton } from './index.module-aafd6ee1.js';
+import PriceCounter from './index-658517dc.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 '@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-countup';
+
+var wcConfiguratorAction = "wcConfigurator-action-1kRvz";
+var wcConfiguratorActionButton = "wcConfigurator-action-Button-uCk2M";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-S5Uqm";
+var wcCheckoutButtonText = "wcCheckoutButtonText-AKaeu";
+var bruttoPrice = "brutto-price-yaDwF";
+var canceled = "canceled-J6Faa";
+var hidden = "hidden-sa4Pc";
+var css_248z = ".wcConfigurator-action-1kRvz {\n  background: rgba(242.2, 242.2, 242.2, 0.9);\n  transition: width 0.2s ease-in-out;\n  display: flex;\n}\n\n.wcConfigurator-action-Button-uCk2M {\n  background-color: var(--primaryColor);\n  background-color: var(--saveButton, var(--primaryColor));\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--saveButton, var(--primaryColor)) solid;\n  border-radius: var(--globalBorderRadius);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  line-height: 20.8px;\n  font-weight: var(--fontWeight1);\n  height: calc(100% - 2px);\n  font-size: 14px;\n  color: white;\n  flex-grow: 1;\n  -webkit-text-stroke: 0px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.wcConfigurator-settings-actions-isOnFirstStepDisabled-4PqCh .wcConfigurator-action-Button-uCk2M {\n  pointer-events: none;\n  background-color: #c25353;\n  border-color: #c25353;\n}\n\n.wcConfigurator-action-Button-uCk2M:hover {\n  background-color: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n  cursor: pointer;\n  transition:\n    box-shadow 0.3s ease,\n    background-color 0.3s ease,\n    border-color 0.3s ease;\n\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcCheckoutButtonPrice-S5Uqm {\n  float: right;\n  margin-right: 10%;\n}\n.wcCheckoutButtonIcon-6TJQ5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  width: 50%;\n  height: 50%;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  position: absolute;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz {\n  /*auser In die Zusammenfassung wird ausgeblendet*/\n  display: none;\n}\n.landscape-1LGy8 .wcConfigurator-Settings-hidden-kvVds.wcConfigurator-settings-actions-isOnLastStep-BV9rP .wcConfigurator-action-1kRvz {\n  display: none;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz .wcConfigurator-action-Button-uCk2M {\n  line-height: var(--configuratorActionHeight);\n}\n.wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu,\n.portrait-ySRAg .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.wcCheckoutButtonText-AKaeu {\n  float: left;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n\n.brutto-price-yaDwF {\n  float: right;\n  position: relative;\n  margin-right: 20px;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  min-width: 64px;\n  text-align: right;\n  font-weight: 300;\n}\n\n.brutto-price-yaDwF.canceled-J6Faa {\n  color: #eee;\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.brutto-price-yaDwF.canceled-J6Faa.hidden-sa4Pc {\n  opacity: 0;\n  max-width: 0px;\n}\n\n.brutto-price-yaDwF.canceled-J6Faa:before {\n  position: absolute;\n  content: '';\n  left: -6px;\n  top: 44%;\n  right: 0;\n  border-top: 2px solid;\n  border-color: grey;\n  transform: rotate(-7deg);\n}\n\n.is-mobile-Zx3zd .brutto-price-yaDwF.canceled-J6Faa:before {\n  top: 45%;\n}\n";
+styleInject(css_248z);
+
+var BasketActionStandard = function BasketActionStandard(_ref) {
+  var _viewHandler$uiState$, _viewHandler$productS, _viewHandler$productS2;
+  var _ref$buttonTextClassN = _ref.buttonTextClassName,
+    buttonTextClassName = _ref$buttonTextClassN === void 0 ? wcCheckoutButtonText : _ref$buttonTextClassN,
+    _ref$buttonPriceClass = _ref.buttonPriceClassName,
+    buttonPriceClassName = _ref$buttonPriceClass === void 0 ? wcCheckoutButtonPrice : _ref$buttonPriceClass,
+    containerClassName = _ref.containerClassName,
+    price = _ref.price,
+    showCheckoutButtons = _ref.showCheckoutButtons;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wcConfiguratorAction, containerClassName),
+    children: [showCheckoutButtons && ((_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.filter(function (b) {
+      return evalVisible(b, viewHandler, 'navigator');
+    }).map(function (b) {
+      return /*#__PURE__*/jsx("div", {
+        className: checkoutButton,
+        onClick: function onClick() {
+          return _onClickCheckout(b, viewHandler, b.index, t);
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          checkoutButton: b,
+          size: 32
+        })
+      }, b.index);
+    })), /*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorActionButton,
+      onClick: function onClick() {
+        return viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
+      },
+      id: "wcConfigurator-action-tobasket",
+      children: [/*#__PURE__*/jsx("div", {
+        className: buttonTextClassName,
+        children: t('configurator.ADD_TO_BASKET')
+      }), !hidePrices && price !== undefined && viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(bruttoPrice, canceled, !viewHandler.productState.formatedBruttoPrice ? hidden : undefined),
+          children: /*#__PURE__*/jsx(PriceCounter, {
+            price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: buttonPriceClassName,
+          children: /*#__PURE__*/jsx(PriceCounter, {
+            price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0
+          })
+        })]
+      })]
+    })]
+  });
+};
+var BasketAction = observer(BasketActionStandard);
+
+export { BasketAction as default };

package/build/esm/index-65b79e56.js

@@ -0,0 +1,264 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-0944ffe7.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { s as swiperClass, a as swiperWrapper, b as swiperSlide } from './index.module-2690936a.js';
+import SettingsScroller from './index-e3af8641.js';
+import SettingsHeader from './index-0a668bac.js';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import NavForwardButton from './index-b725f426.js';
+import classnames from 'classnames';
+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/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 './index-3324e4fc.js';
+import './index-a73d6eff.js';
+import 'sift';
+import './index-343c41ab.js';
+import './index-3d8d6499.js';
+import './index-1966cbf3.js';
+import './index-aa22b260.js';
+import './index.module-2ed9d783.js';
+import './index-7aba8c09.js';
+import 'react-switch';
+import './index-85304f95.js';
+import './index-87afde74.js';
+import './index-658517dc.js';
+import 'react-countup';
+import './index-db90f35c.js';
+import 'react-dropdown';
+import './index-7640f50c.js';
+import './index-c6ddfab5.js';
+import './index-93c167a3.js';
+import './index-dbe38679.js';
+import '@crystaldesign/content-box';
+import './index-b62ba27d.js';
+import './index-966b0e89.js';
+import './index-66d5521b.js';
+import './index-25a8ae34.js';
+import './index-46acc96b.js';
+import './index-b9d40dee.js';
+import './index-260dbc06.js';
+import './index-1afd9b61.js';
+import './index-1ad63692.js';
+import 'react-laag';
+import './index.module-f50a7d32.js';
+import './index-d0252207.js';
+import './index-b015abc8.js';
+import './index-67bf5808.js';
+import './index-4be29135.js';
+import './index-d8c9bb45.js';
+import './index-9683d196.js';
+import './index.module-45e24f26.js';
+import './index-526c8578.js';
+import './index-1f18233c.js';
+import './index-7ada3a9c.js';
+import './index-ef078a80.js';
+import './index-f39ba679.js';
+import './index-eb272051.js';
+import './index-48d9e17e.js';
+import './index-969f5866.js';
+import './index-ab78f176.js';
+import './index-daa7f8cc.js';
+import './index-384cfbd9.js';
+import './index-f6e90341.js';
+import 'swiper/modules';
+import './index-a22da661.js';
+import 'rc-slider';
+import './index-05d9a8f2.js';
+import './index-49210818.js';
+import './index-7ef19586.js';
+import './index-1e5c6773.js';
+import 'react-confetti-explosion';
+import './index-014f869d.js';
+import './index-26c84ff5.js';
+import './index-afaa11f3.js';
+import 'react-qr-code';
+import './index-c45f8771.js';
+import './useCustomDimensions-7436e487.js';
+import './index-0761788a.js';
+import './ussIsSticky-cb574753.js';
+import './index-8df13b85.js';
+
+var useSwiperHook = function useSwiperHook(viewHandler) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    swiperRef = _useState2[0],
+    setSwiperRef = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    allSwipes = _useState4[0],
+    setAllSwipes = _useState4[1];
+  useEffect(function () {
+    var allSwipes = Object.keys(viewHandler.tabGroupState.allTabGroups);
+    setAllSwipes(allSwipes);
+    if (viewHandler.tabGroupState.curTabGroup) {
+      if (allSwipes.indexOf(viewHandler.tabGroupState.curTabGroup.key) != (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.activeIndex)) {
+        swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(allSwipes.indexOf(viewHandler.tabGroupState.curTabGroup.key), 400);
+      }
+    }
+  }, [viewHandler.tabGroupState.allTabGroups, viewHandler.tabGroupState.curTabGroup, swiperRef]);
+  var teaseSwipe = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var offset,
+        duration,
+        durationQuarter,
+        currentTranslate,
+        teaseTranslate,
+        _args = arguments;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            offset = _args.length > 0 && _args[0] !== undefined ? _args[0] : 50;
+            duration = _args.length > 1 && _args[1] !== undefined ? _args[1] : 500;
+            if (swiperRef) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            durationQuarter = duration * 0.25;
+            currentTranslate = swiperRef.getTranslate();
+            teaseTranslate = currentTranslate - offset;
+            swiperRef.allowTouchMove = false;
+
+            // Smooth initial movement outward - slower
+            swiperRef.setTransition(durationQuarter * 2); // Increased from 1.5 to 2
+            swiperRef.setTranslate(teaseTranslate);
+            _context.next = 12;
+            return DivaUtils.Sleep(durationQuarter * 2);
+          case 12:
+            // Increased sleep to match transition
+
+            // Gentle bounce back
+            swiperRef.setTransition(durationQuarter);
+            swiperRef.setTranslate(currentTranslate - offset * 0.5);
+            _context.next = 16;
+            return DivaUtils.Sleep(durationQuarter);
+          case 16:
+            // Small outward movement - faster
+            swiperRef.setTransition(durationQuarter * 0.5);
+            swiperRef.setTranslate(teaseTranslate * 0.8);
+            _context.next = 20;
+            return DivaUtils.Sleep(durationQuarter * 0.5);
+          case 20:
+            // Final smooth return
+            swiperRef.setTransition(durationQuarter * 1.75);
+            swiperRef.setTranslate(currentTranslate);
+            swiperRef.allowTouchMove = true;
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function teaseSwipe() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  //  useEffect(() => {
+  //    const timeout = setTimeout(() => {
+  //      teaseSwipe(100, 1000);
+  //    }, 3000);
+  //    return () => clearTimeout(timeout);
+  //  }, [swiperRef]);
+
+  var handleSlideChange = function handleSlideChange(e) {
+    if (viewHandler.tabGroupState.curTabGroup === undefined) return;
+    window.lastNavigationType = 'SETTINGS_SWIPER_SWIPE';
+    var diff = e.activeIndex - allSwipes.indexOf(viewHandler.tabGroupState.curTabGroup.key);
+    if (diff == 1) {
+      viewHandler.actionButtonState.onClickConfiguratorSettingsForth(true);
+    } else if (diff == -1) {
+      viewHandler.actionButtonState.onClickConfiguratorSettingsBack();
+    } else if (diff !== 0) {
+      if (viewHandler.tabGroupState.allTabGroups[allSwipes[e.activeIndex]]) {
+        viewHandler.tabGroupState.navigateToTabgroupByPosNr(viewHandler.tabGroupState.allTabGroups[allSwipes[e.activeIndex]].posNr);
+      }
+    }
+  };
+  var handleSetTransition = function handleSetTransition() {
+    viewHandler.uiState.swiperNavigationActive = true;
+  };
+  var handleTransitionEnd = function handleTransitionEnd() {
+    viewHandler.uiState.swiperNavigationActive = false;
+  };
+  var initialSlide = viewHandler.tabGroupState.curTabGroup ? allSwipes.indexOf(viewHandler.tabGroupState.curTabGroup.key) : 0;
+  return {
+    swiperRef: swiperRef,
+    setSwiperRef: setSwiperRef,
+    allSwipes: allSwipes,
+    handleSlideChange: handleSlideChange,
+    handleSetTransition: handleSetTransition,
+    handleTransitionEnd: handleTransitionEnd,
+    initialSlide: initialSlide,
+    teaseSwipe: teaseSwipe
+  };
+};
+
+var SettingsSwiper = function SettingsSwiper(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useSwiperHook = useSwiperHook(viewHandler),
+    setSwiperRef = _useSwiperHook.setSwiperRef,
+    allSwipes = _useSwiperHook.allSwipes,
+    handleSlideChange = _useSwiperHook.handleSlideChange,
+    handleSetTransition = _useSwiperHook.handleSetTransition,
+    handleTransitionEnd = _useSwiperHook.handleTransitionEnd,
+    initialSlide = _useSwiperHook.initialSlide;
+  var noSwiping = '.no-swiping';
+  if (!viewHandler.tabGroupState.curTabGroup) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx(Swiper, {
+    onSlideChange: handleSlideChange,
+    onSetTransition: handleSetTransition,
+    onTransitionEnd: handleTransitionEnd,
+    initialSlide: initialSlide,
+    onSwiper: setSwiperRef,
+    className: swiperClass,
+    noSwipingSelector: noSwiping,
+    resizeObserver: true,
+    slidesPerView: 1,
+    threshold: 30,
+    wrapperClass: classnames('swiper-wrapper', swiperWrapper),
+    children: allSwipes.map(function (swipe) {
+      var _Object$values, _viewHandler$tabGroup, _viewHandler$tabGroup2;
+      var title = (_Object$values = Object.values((_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.allTabGroups[swipe]) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.options) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : {})) === null || _Object$values === void 0 || (_Object$values = _Object$values[0]) === null || _Object$values === void 0 ? void 0 : _Object$values.title;
+      return /*#__PURE__*/jsx(SwiperSlide, {
+        className: swiperSlide,
+        children: swipe == viewHandler.tabGroupState.curTabGroup.key ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SettingsScroller, {}, swipe), /*#__PURE__*/jsx(NavForwardButton, {})]
+        }) : /*#__PURE__*/jsx("div", {
+          style: {
+            height: '100%',
+            overflow: 'auto',
+            width: 'calc(100% - 20px)',
+            marginLeft: 'var(--settingsScrollerPaddingLeft)'
+          },
+          children: title && /*#__PURE__*/jsx(SettingsHeader, {
+            text: title,
+            isSettingsHeader: false,
+            isInScroller: true
+          })
+        })
+      }, swipe);
+    })
+  });
+};
+var SettingsSwiper$1 = observer(SettingsSwiper);
+
+export { SettingsSwiper$1 as default };

package/build/esm/index-6608791f.js

@@ -0,0 +1,98 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-0944ffe7.js';
+import { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import Draggable from 'react-draggable';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Rotation3DGrid = function Rotation3DGrid(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+  var mouseDownDetected = false;
+  var onStartDragging = function onStartDragging(e) {
+    mouseDownDetected = true;
+    if (e.type == 'mousedown') {
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    } else if (e.type == 'touchstart') {
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    }
+  };
+  var onDragging = function onDragging(e) {
+    if (mouseDownDetected && !isDragging) {
+      var _item$onDragStartFunc;
+      setIsDragging(true);
+      (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+    } else if (isDragging) {
+      var _viewHandler$productS, _viewHandler$productS2;
+      var boundingLeft = (_viewHandler$productS = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS !== void 0 && _viewHandler$productS.getBoundingClientRect().left ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().left : 0;
+      var boundingTop = (_viewHandler$productS2 = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS2 !== void 0 && _viewHandler$productS2.getBoundingClientRect().top ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().top : 0;
+      if (e.type == 'mousemove') {
+        var _item$onDragMoveFunct;
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - boundingLeft, e.clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      } else if (e.type == 'touchmove') {
+        var _item$onDragMoveFunct2;
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - boundingLeft, e.touches[0].clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+    }
+    mouseDownDetected = false;
+  };
+  var onDragEnd = function onDragEnd(e) {
+    if (isDragging) {
+      var _item$onDragEndFuncti;
+      setIsDragging(false);
+      (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+    }
+    mouseDownDetected = false;
+  };
+  return /*#__PURE__*/jsx(Draggable, {
+    nodeRef: draggable,
+    handle: ".handle3DRotation",
+    onStart: function onStart(e) {
+      onStartDragging(e);
+    },
+    onDrag: function onDrag(e) {
+      onDragging(e);
+    },
+    onStop: function onStop(e) {
+      onDragEnd();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      ref: draggable,
+      style: {
+        visibility: isDragging ? 'hidden' : 'visible',
+        left: item.position.x + 'px',
+        top: item.position.y + 'px'
+      },
+      className: classnames('handle3DRotation', plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.rotation.rot3DGrid)
+    })
+  });
+};
+
+export { Rotation3DGrid as default };