@crystaldesign/diva-web-planner-react 26.6.0-beta.17 → 26.6.0-beta.22

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

@@ -0,0 +1,202 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-39f9bdae.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef, useEffect } from 'react';
+import { useLayer } from 'react-laag';
+import Tooltip from './index-01cfe01c.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import FullscreenAr, { FullscreenArHeader } from './index-ddacb48d.js';
+import QRCode from 'react-qr-code';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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 _excluded = ["Button", "dontOpenModal"];
+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 ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
+  var Button = _ref.Button,
+    dontOpenModal = _ref.dontOpenModal,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    openDrawerMenu = _useDivaCore.actions.openDrawerMenu,
+    _useDivaCore$state = _useDivaCore.state,
+    isMobile = _useDivaCore$state.isMobile,
+    isTablet = _useDivaCore$state.dimensions.isTablet;
+  //tooltip is going to close itself by timer
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoClose = _useState2[0],
+    setAutoClose = _useState2[1];
+  var autoCloseTimeout = useRef();
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openDrawer = _useState4[0],
+    setOpenDrawer = _useState4[1];
+  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
+  var openAr = isMobile || isTablet;
+  //if the viewer is in an iframe (pfister) we dont want to open the modal for the arcombi
+  var shouldOpenModal = openAr && !viewHandler.productState.allow3DComb && !viewHandler.productState.allowRTV;
+
+  //for fade animation
+  var _useState5 = useState(viewHandler.productState.arCodeWasVisibleOnce),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tooltipVisible = _useState6[0],
+    setTooltipVisible = _useState6[1];
+  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible && !dontOpenModal;
+  var _useLayer = useLayer({
+      isOpen: showTooltip,
+      auto: true,
+      placement: 'right-end',
+      triggerOffset: 16
+    }),
+    triggerProps = _useLayer.triggerProps,
+    layerProps = _useLayer.layerProps,
+    renderLayer = _useLayer.renderLayer,
+    arrowProps = _useLayer.arrowProps;
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    url = _useState8[0],
+    setUrl = _useState8[1];
+  useEffect(function () {
+    var _viewHandler$uiState$;
+    if (viewHandler.uiState.AllConfig.arViewerIframe) return;
+    openDrawerMenu({
+      id: 'ar-qr-code',
+      mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
+      handleInternScroll: true,
+      showOverlay: true,
+      direction: 'bottom',
+      onClose: function onClose() {
+        setOpenDrawer(false);
+        viewHandler.productState.loadRTVForAr = false;
+        viewHandler.productState.setDoShowARQRCode(false);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
+      },
+      title: /*#__PURE__*/jsx(FullscreenArHeader, {}),
+      content: /*#__PURE__*/jsx(FullscreenAr, {
+        url: url,
+        isArCompatible: viewHandler.productState.isArCompatible,
+        broswerSupportAR: viewHandler.productState.browserSupportAR,
+        activateAR: viewHandler.productState.activateAR,
+        hqRenderScript: viewHandler.hqRenderScript,
+        isTablet: isTablet
+      }),
+      open: openDrawer
+    });
+  }, [openDrawer, viewHandler.productState.activateAR]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode == true) {
+      viewHandler.openARObserverConnection(function () {
+        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
+      } // request hqr onreceivehqr triggers update
+      ).then(function (url) {
+        return setUrl(url);
+      });
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode && shouldOpenModal) {
+      setOpenDrawer(true);
+    }
+  }, [viewHandler.productState.activateAR, url]);
+  useEffect(function () {
+    //start timeout for auto open the tooltip
+    if (dontOpenModal) return;
+    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
+      var _arQrCodeConfig$timeU;
+      autoCloseTimeout.current = setTimeout(function () {
+        viewHandler.productState.setArCodeWasVisibleOnce();
+        setAutoClose(true);
+        viewHandler.productState.setDoShowARQRCode(true);
+      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
+    }
+    if (!viewHandler.productState.doShowARQRCode && autoClose) {
+      setAutoClose(false);
+    }
+    //delay the state of visible so we animate the fade out
+    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
+      setTimeout(function () {
+        setTooltipVisible(viewHandler.productState.doShowARQRCode);
+      }, 200);
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  var onClick = function onClick() {
+    viewHandler.productState.setDoShowARQRCode(true);
+    var curPlannerMode = viewHandler.viewPlannerHandler.getCurPlannerViewMode();
+    if (shouldOpenModal) {
+      if (!viewHandler.productState.doShowRTV && !(curPlannerMode == 'RTViewer' || curPlannerMode == '3DCOMB')) {
+        viewHandler.setHQRenderScript(undefined);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
+      }
+      setOpenDrawer(true);
+      viewHandler.productState.loadRTVForAr = true;
+    } else if (openAr && (curPlannerMode == 'RTViewer' || curPlannerMode == '3DCOMB')) {
+      viewHandler.productState.loadRTVForAr = true;
+      setOpenDrawer(true);
+    }
+  };
+  if (url && !openAr && dontOpenModal) {
+    return /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/jsx(QRCode, {
+        value: url,
+        size: 96,
+        onClick: function onClick() {
+          return url && window.open(url, '_blank');
+        }
+      }), ";"]
+    });
+  }
+  if (Button) {
+    return /*#__PURE__*/jsx(Button, {
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
+      id: "ar-icon"
+    }, props), {}, {
+      className: classnames(props.className),
+      onClick: onClick,
+      title: t('configurator.ar_qr_title')
+    }, triggerProps), {}, {
+      style: {
+        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV || viewHandler.productState.doShowAIRoom ? 'visible' : 'hidden'
+      }
+    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
+      arrowProps: arrowProps,
+      layerProps: layerProps,
+      autoClose: autoClose,
+      fadeIn: tooltipVisible,
+      fadeout: !viewHandler.productState.doShowARQRCode,
+      url: url
+    }))]
+  });
+};
+var ArQrCodeIcon = observer(ArQrCodeTooltip);
+
+export { ArQrCodeIcon as default };

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

@@ -0,0 +1,89 @@
+import { s as styleInject } from './index-39f9bdae.js';
+import { useTranslation, useDivaCore, getLogger } from '@crystaldesign/diva-core';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+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';
+
+var affiliateContainer = "affiliate-container-bOZvB";
+var affiliateMain = "affiliate-main-ipOJf";
+var affiliateMainMobile = "affiliate-main-mobile-VQW52";
+var affiliateProduct = "affiliate-product-ich3t";
+var affiliateProductDescription = "affiliate-product-description-ujnXk";
+var affiliatePartnerList = "affiliate-partner-list-wXqwE";
+var affiliatePartner = "affiliate-partner-Z5vLB";
+var affiliatePartnerImage = "affiliate-partner-image-WSYog";
+var affiliateParnterButton = "affiliate-parnter-button-myx7O";
+var css_248z = ".affiliate-container-bOZvB {\n  max-width: 750px;\n}\n\n.affiliate-container-bOZvB > h2 {\n  margin-top: 0;\n}\n\n.affiliate-main-ipOJf {\n  display: flex;\n  margin-top: 20px;\n  flex-wrap: wrap;\n  gap: 50px;\n}\n.affiliate-main-mobile-VQW52 {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin-top: 10px;\n  gap: 10px;\n}\n\n.affiliate-product-ich3t {\n  display: flex;\n  flex-direction: column;\n}\n\n.affiliate-product-ich3t > img {\n  width: 276px;\n  max-width: 100%;\n}\n\n.affiliate-product-description-ujnXk {\n  line-height: 30px;\n  margin-top: 10px;\n  flex: 1 1 20px;\n}\n\n.affiliate-partner-list-wXqwE {\n  flex: 1 1 200px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.affiliate-partner-Z5vLB {\n  display: flex;\n  justify-content: space-between;\n  flex: 1 1 100px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  position: relative;\n}\n\n.affiliate-partner-image-WSYog {\n  cursor: pointer;\n  flex: 1 1 120px;\n  background-color: #fff;\n  background-repeat: no-repeat;\n  background-position: center;\n  width: 204px;\n  max-width: 100%;\n  height: 98px;\n  border: 1px solid #aaa;\n}\n\n.affiliate-parnter-button-myx7O {\n  cursor: pointer;\n  height: 35px;\n  width: 100px;\n  background: var(--secondaryColor);\n  border-radius: 3px;\n  color: #fff;\n  text-align: center;\n  line-height: 35px;\n  flex: 1 1 25px;\n  padding: 0 5px;\n}\n";
+styleInject(css_248z);
+
+getLogger('Planner', 'Affiliate');
+function Affiliate(_ref) {
+  var _product$affiliate;
+  var product = _ref.product;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  return /*#__PURE__*/jsxs("div", {
+    className: affiliateContainer,
+    children: [/*#__PURE__*/jsx("h2", {
+      children: t('affiliatemodal.title')
+    }), /*#__PURE__*/jsx("div", {
+      children: t('affiliatemodal.text')
+    }), /*#__PURE__*/jsxs("div", {
+      className: isMobile ? affiliateMainMobile : affiliateMain,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: affiliateProduct,
+        children: [!isMobile && /*#__PURE__*/jsx("img", {
+          src: product.image
+        }), /*#__PURE__*/jsx("div", {
+          className: affiliateProductDescription,
+          children: product.shortDescription
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: affiliatePartnerList,
+        children: (_product$affiliate = product.affiliate) === null || _product$affiliate === void 0 ? void 0 : _product$affiliate.map(function (partner) {
+          return /*#__PURE__*/jsxs("div", {
+            className: affiliatePartner,
+            children: [/*#__PURE__*/jsx("button", {
+              "data-test-id": "affiliate-button",
+              className: affiliatePartnerImage,
+              style: {
+                backgroundImage: 'url(' + partner.logoUrl + ')'
+              },
+              onClick: function onClick() {
+                window.open(partner.link, '_blank');
+              }
+            }), /*#__PURE__*/jsx("div", {
+              className: affiliateParnterButton,
+              onClick: function onClick() {
+                window.open(partner.link, '_blank');
+              },
+              children: t('affiliatemodal.button')
+            })]
+          }, partner.id);
+        })
+      })]
+    })]
+  });
+}
+
+export { Affiliate as default };

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

@@ -0,0 +1,46 @@
+import { u as useViewHandler } from './index-39f9bdae.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { c as wcConfiguratorSettingsExpander, h as hidden, d as wcConfiguratorSettingsMaxExpander, f as wcConfiguratorSettingsMinExpander } from './index.module-4400b13e.js';
+import classnames from 'classnames';
+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/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var SettingsExpanderButtons = function SettingsExpanderButtons(props) {
+  var viewHandler = useViewHandler();
+  var hide = viewHandler.settingsState.contentItemId && viewHandler.settingsState.contentItemVisible;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [viewHandler.uiState.doShowConfSettingsExpander && !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorSettingsExpander, hide ? hidden : undefined),
+      onClick: viewHandler.uiState.onClickExpandConfigSettings
+    }), !viewHandler.uiState.isInMobileView && viewHandler.uiState.doShowConfSettingsMaxMinExpander && /*#__PURE__*/jsxs(Fragment, {
+      children: [!viewHandler.uiState.configSettingsIsMaxExpanded && /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorSettingsMaxExpander, hide ? hidden : undefined),
+        onClick: viewHandler.uiState.onClickExpandMaxConfigSettings
+      }), !viewHandler.uiState.configSettingsIsMinExpanded && /*#__PURE__*/jsx("div", {
+        className: wcConfiguratorSettingsMinExpander,
+        onClick: viewHandler.uiState.onClickExpandMinConfigSettings
+      })]
+    })]
+  });
+};
+var SettingsExpanderButtons$1 = observer(SettingsExpanderButtons);
+
+export { SettingsExpanderButtons$1 as default };

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

@@ -0,0 +1,277 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler, S as SettingsHeader } from './index-39f9bdae.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-4400b13e.js';
+import SettingsScroller from './index-582a0b60.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-61686c92.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 'react-switch';
+import 'react-countup';
+import './index-a5e4369f.js';
+import './index-a935f9f6.js';
+import './index-33be8ebe.js';
+import './index-128132dd.js';
+import 'sift';
+import './index-5daae634.js';
+import './index-3c496658.js';
+import './index-b5a82bb3.js';
+import './index-7a38a97e.js';
+import './index.module-8d8e97da.js';
+import './index-7d44446e.js';
+import './index-357eb123.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-d9c0d8a1.js';
+import 'react-dropdown';
+import './index-b02eecbc.js';
+import './index-afe45e7c.js';
+import './index-2657ab85.js';
+import './index-762d60bb.js';
+import '@crystaldesign/content-box';
+import './index-6ba2e245.js';
+import './index-ad2277a3.js';
+import './index-6617415d.js';
+import './index-7e71773c.js';
+import 'swiper/modules';
+import './UnlockCard-c7962b84.js';
+import './index-329eb4ec.js';
+import './index-5b38d05b.js';
+import './index-8acf708a.js';
+import './index-8f9121c8.js';
+import './index-3086d3d7.js';
+import './index-eafda2ac.js';
+import 'react-laag';
+import './index.module-90822cf6.js';
+import './index-e3fcca34.js';
+import './index-c7aae5f6.js';
+import './index-b59504a1.js';
+import './index-19069574.js';
+import './index-11113e5a.js';
+import './index.module-d623cc7b.js';
+import './index-3f939527.js';
+import './index-f6eccce1.js';
+import './index-84b2d339.js';
+import './index-d851c785.js';
+import './index-f0c39353.js';
+import './index-994aa858.js';
+import './index-fcea3b73.js';
+import './index-2ea16d4e.js';
+import './index-7a90efdf.js';
+import './index-263d1063.js';
+import './index-0d020e6f.js';
+import './index-c27d5945.js';
+import './index-22a2b088.js';
+import 'rc-slider';
+import './index-15aee1d2.js';
+import './index-440d475a.js';
+import './index-21960744.js';
+import './index-c453a412.js';
+import './index-f5eeb2e5.js';
+import 'react-confetti-explosion';
+import './index-59e1a95f.js';
+import './index-2b156682.js';
+import './index-01cfe01c.js';
+import 'react-qr-code';
+import './index-ddacb48d.js';
+import './useCustomDimensions-1641ad17.js';
+import './index-36aa5cfb.js';
+import './ussIsSticky-7e7f16f7.js';
+import './index-ab1830ae.js';
+import './index-148ba04e.js';
+import './index-3edf467e.js';
+import './index.module-46105d1a.js';
+import './index-89d4c068.js';
+import './index-9214260d.js';
+import './index-3fbc1ab7.js';
+import './index-884cdc2e.js';
+import './index-95c8026c.js';
+import './index-e0f5e159.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, 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 || !(allSwipes !== null && allSwipes !== void 0 && allSwipes.length)) 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 _Array$from$;
+      var tabGroup = viewHandler.tabGroupState.allTabGroups[swipe];
+      var title = tabGroup ? (_Array$from$ = Array.from(tabGroup.options.values())[0]) === null || _Array$from$ === void 0 ? void 0 : _Array$from$.title : undefined;
+      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 };