@crystaldesign/diva-web-planner-react 26.6.0-beta.8 → 26.6.0-rc.0

package/build/esm/index-f0d421c0.js

@@ -0,0 +1,277 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler, S as SettingsHeader } from './index-ce7786d2.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-30727606.js';
+import SettingsScroller from './index-f176994e.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-e395a092.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-2f29cd96.js';
+import './index-efe936dd.js';
+import './index-8d015f9a.js';
+import './index-5fabb3fe.js';
+import 'sift';
+import './index-5fb783c6.js';
+import './index-96521849.js';
+import './index-c2e4124a.js';
+import './index-f604a958.js';
+import './index.module-4dbcb0eb.js';
+import './index-c8c1b2d3.js';
+import './index-8892e3a2.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-37c47006.js';
+import 'react-dropdown';
+import './index-9cc8f646.js';
+import './index-76eab787.js';
+import './index-1617ff2f.js';
+import './index-d086b59d.js';
+import '@crystaldesign/content-box';
+import './index-9be66e84.js';
+import './index-e1cbd2dc.js';
+import './index-e33b02df.js';
+import './index-9e98fad0.js';
+import 'swiper/modules';
+import './UnlockCard-222a8944.js';
+import './index-236200d8.js';
+import './index-9f4b71c4.js';
+import './index-a8b4fcb6.js';
+import './index-70b718e6.js';
+import './index-2dd49754.js';
+import './index-3e3b497a.js';
+import 'react-laag';
+import './index.module-ef108ede.js';
+import './index-9df32048.js';
+import './index-b751c70c.js';
+import './index-770daac6.js';
+import './index-6efd5d8b.js';
+import './index-54532a8d.js';
+import './index.module-e0ade771.js';
+import './index-04e05d1b.js';
+import './index-2084a9d9.js';
+import './index-339eb4c5.js';
+import './index-b0a6bcc4.js';
+import './index-4ac2625a.js';
+import './index-5cdda2d3.js';
+import './index-ee5d0303.js';
+import './index-3bcdbf59.js';
+import './index-d049e606.js';
+import './index-1f729d08.js';
+import './index-c0811c25.js';
+import './index-00dd7c39.js';
+import './index-2d133033.js';
+import 'rc-slider';
+import './index-c23a0e1d.js';
+import './index-35648366.js';
+import './index-7e6ae98e.js';
+import './index-d4ddd892.js';
+import './index-1edff538.js';
+import 'react-confetti-explosion';
+import './index-d55d4592.js';
+import './index-6c349e03.js';
+import './index-14197d2a.js';
+import 'react-qr-code';
+import './index-277e155d.js';
+import './useCustomDimensions-2f7f6ef6.js';
+import './index-0f14942e.js';
+import './ussIsSticky-2a1d58c0.js';
+import './index-8d585440.js';
+import './index-1e0abde4.js';
+import './index-93975b03.js';
+import './index.module-b2d9f471.js';
+import './index-ffc80576.js';
+import './index-85b44400.js';
+import './index-77b0321d.js';
+import './index-6fc90b32.js';
+import './index-d2c03bce.js';
+import './index-bca01104.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 };

package/build/esm/index-f10ed533.js

@@ -0,0 +1,173 @@
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import { useEffect } from 'react';
+import Settings from './index-76b09b52.js';
+import TabGroup from './index-fa802bac.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-5a501bb4.js';
+import { jsx, Fragment, jsxs } 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-2f29cd96.js';
+import './index-f176994e.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-efe936dd.js';
+import './index-8d015f9a.js';
+import './index-5fabb3fe.js';
+import 'sift';
+import './index-5fb783c6.js';
+import './index-96521849.js';
+import './index-c2e4124a.js';
+import './index-f604a958.js';
+import './index.module-4dbcb0eb.js';
+import './index-c8c1b2d3.js';
+import './index-8892e3a2.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-37c47006.js';
+import 'react-dropdown';
+import './index-9cc8f646.js';
+import './index-76eab787.js';
+import './index-1617ff2f.js';
+import './index-d086b59d.js';
+import '@crystaldesign/content-box';
+import './index-9be66e84.js';
+import './index-e1cbd2dc.js';
+import './index-e33b02df.js';
+import './index-9e98fad0.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-222a8944.js';
+import './index-236200d8.js';
+import './index-9f4b71c4.js';
+import './index-a8b4fcb6.js';
+import './index-70b718e6.js';
+import './index-2dd49754.js';
+import './index-3e3b497a.js';
+import 'react-laag';
+import './index.module-ef108ede.js';
+import './index-9df32048.js';
+import './index-b751c70c.js';
+import './index-770daac6.js';
+import './index-6efd5d8b.js';
+import './index-54532a8d.js';
+import './index.module-e0ade771.js';
+import './index-04e05d1b.js';
+import './index-2084a9d9.js';
+import './index-339eb4c5.js';
+import './index-b0a6bcc4.js';
+import './index-4ac2625a.js';
+import './index-5cdda2d3.js';
+import './index-ee5d0303.js';
+import './index-3bcdbf59.js';
+import './index-d049e606.js';
+import './index-1f729d08.js';
+import './index-c0811c25.js';
+import './index-00dd7c39.js';
+import './index-2d133033.js';
+import 'rc-slider';
+import './index-c23a0e1d.js';
+import './index-35648366.js';
+import './index-7e6ae98e.js';
+import './index-d4ddd892.js';
+import './index-1edff538.js';
+import 'react-confetti-explosion';
+import './index-d55d4592.js';
+import './index-6c349e03.js';
+import './index-14197d2a.js';
+import 'react-qr-code';
+import './index-277e155d.js';
+import './useCustomDimensions-2f7f6ef6.js';
+import './index-0f14942e.js';
+import './ussIsSticky-2a1d58c0.js';
+import './index-8d585440.js';
+import './index-1e0abde4.js';
+import './index-93975b03.js';
+import './index.module-b2d9f471.js';
+import './index-ffc80576.js';
+import './index-85b44400.js';
+import './index-77b0321d.js';
+import './index-6fc90b32.js';
+import './index-d2c03bce.js';
+import './index-bca01104.js';
+import './index.module-30727606.js';
+import './index-f0d421c0.js';
+import './index-e395a092.js';
+import './index-3c87de2c.js';
+import './index-35c83a7a.js';
+import '@mui/material';
+import './index-d80015dc.js';
+import './index-0b112e7d.js';
+import './index-ce9d1ce3.js';
+import './index-4e72998d.js';
+import './index-aa2726cb.js';
+
+var wcConfigurator = "wcConfigurator-IeI91";
+var wcConfiguratorSteps = "wc-configurator-steps-yPThi";
+var wcConfiguratorSettings = "wc-configurator-Settings-3U39-";
+var tabSearchClass = "tab-search-class-qJEaW";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-IeI91 {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n\n  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-IeI91 *,\n.wcConfigurator-IeI91 *::before,\n.wcConfigurator-IeI91 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-yPThi {\n  border-radius: 8px 0 0 8px;\n  overflow: hidden;\n  width: 350px;\n  position: relative;\n}\n\n.wc-configurator-Settings-3U39- {\n  width: calc(100% - 350px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n\n.tab-search-class-qJEaW {\n  background-color: #0d3040;\n  padding: 12px 16px;\n  position: relative;\n  display: flex;\n}\n\n.tab-search-class-qJEaW input {\n  outline: medium none invert !important;\n  outline: initial !important;\n}\n\n.tab-search-class-qJEaW input {\n  color: #fff;\n  width: 100%;\n  background-color: #0d3040;\n  font-size: 14px;\n  border: 0px solid;\n}\n\n.tab-search-class-qJEaW div {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%23eee%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 75%;\n  width: 16px;\n  height: 16px;\n  transition: all 0.15s ease;\n  margin: 0px 3px;\n  border-radius: var(--globalBorderRadius);\n  cursor: pointer;\n}\n\n.tab-search-class-qJEaW div:hover {\n  background-size: 100%;\n}\n";
+styleInject(css_248z);
+
+var Classification = function Classification(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: wcConfigurator,
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps,
+        tabSearchClass: tabSearchClass
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+    })
+  });
+};
+var cssVariables = {
+  '--settingsBackgroundColor': '#f4f4f4',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--primaryColor': '#455864',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--tabGroupBackground': 'var(--primaryColor)',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)'
+};
+var index = observer(Classification);
+
+export { index as default };

package/build/esm/index-f176994e.js

@@ -0,0 +1,165 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import SettingsHeaderContainer from './index-2f29cd96.js';
+import classnames from 'classnames';
+import TotalPrice from './index-efe936dd.js';
+import SettingsItemsWrapper from './index-8d015f9a.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/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-5fabb3fe.js';
+import 'sift';
+import './index-5fb783c6.js';
+import './index-96521849.js';
+import './index-c2e4124a.js';
+import './index-f604a958.js';
+import './index.module-4dbcb0eb.js';
+import './index-c8c1b2d3.js';
+import './index-8892e3a2.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-37c47006.js';
+import 'react-dropdown';
+import './index-9cc8f646.js';
+import './index-76eab787.js';
+import './index-1617ff2f.js';
+import './index-d086b59d.js';
+import '@crystaldesign/content-box';
+import './index-9be66e84.js';
+import './index-e1cbd2dc.js';
+import './index-e33b02df.js';
+import './index-9e98fad0.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-222a8944.js';
+import './index-236200d8.js';
+import './index-9f4b71c4.js';
+import './index-a8b4fcb6.js';
+import './index-70b718e6.js';
+import './index-2dd49754.js';
+import './index-3e3b497a.js';
+import 'react-laag';
+import './index.module-ef108ede.js';
+import './index-9df32048.js';
+import './index-b751c70c.js';
+import './index-770daac6.js';
+import './index-6efd5d8b.js';
+import './index-54532a8d.js';
+import './index.module-e0ade771.js';
+import './index-04e05d1b.js';
+import './index-2084a9d9.js';
+import './index-339eb4c5.js';
+import './index-b0a6bcc4.js';
+import './index-4ac2625a.js';
+import './index-5cdda2d3.js';
+import './index-ee5d0303.js';
+import './index-3bcdbf59.js';
+import './index-d049e606.js';
+import './index-1f729d08.js';
+import './index-c0811c25.js';
+import './index-00dd7c39.js';
+import './index-2d133033.js';
+import 'rc-slider';
+import './index-c23a0e1d.js';
+import './index-35648366.js';
+import './index-7e6ae98e.js';
+import './index-d4ddd892.js';
+import './index-1edff538.js';
+import 'react-confetti-explosion';
+import './index-d55d4592.js';
+import './index-6c349e03.js';
+import './index-14197d2a.js';
+import 'react-qr-code';
+import './index-277e155d.js';
+import './useCustomDimensions-2f7f6ef6.js';
+import './index-0f14942e.js';
+import './ussIsSticky-2a1d58c0.js';
+import './index-8d585440.js';
+import './index-1e0abde4.js';
+import './index-93975b03.js';
+import './index.module-b2d9f471.js';
+import './index-ffc80576.js';
+import './index-85b44400.js';
+import './index-77b0321d.js';
+import './index-6fc90b32.js';
+import './index-d2c03bce.js';
+import './index-bca01104.js';
+
+var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
+var expanded = "expanded-r-uGX";
+var minExpanded = "minExpanded-oyaLK";
+var scrollerFlex = "scrollerFlex-XVfOS";
+var scrollerContentFill = "scrollerContentFill-p1UEK";
+var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n\n/* When in wysiwyg inspect mode: scroller becomes flex so content can fill height */\n.scrollerFlex-XVfOS {\n  display: flex;\n  flex-direction: column;\n}\n\n.scrollerFlex-XVfOS .scrollerContentFill-p1UEK {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n";
+styleInject(css_248z);
+
+var SettingsScroller = function SettingsScroller(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var settingsScrollerElement = useRef(null);
+  var itemPalettesArr = [];
+  useEffect(function () {
+    if (settingsScrollerElement.current) {
+      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
+      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
+    }
+    return function () {};
+  }, [settingsScrollerElement]);
+  var style = {};
+  var snapPoint = viewHandler.uiState.snapPoints[viewHandler.settingsState.activeSnapPointIndex];
+  var mobileHeight;
+  if (isNaN(Number(snapPoint))) {
+    mobileHeight = snapPoint;
+  } else {
+    mobileHeight = snapPoint - 38 + 'px';
+  }
+  if (viewHandler.uiState.isInMobileView) {
+    style.height = mobileHeight;
+  } else {
+    var _viewHandler$settings, _viewHandler$settings2;
+    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
+  }
+  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
+    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
+    if (!itemPalette.isRenderedNotInSettingPalette && itemPalette.visible) itemPalettesArr.push(itemPalette);
+  }
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsMinExpanded) viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MIN_CONFIG_SETTINGS');else viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MAX_CONFIG_SETTINGS');
+  }, [viewHandler.uiState.configSettingsIsExpanded, viewHandler.uiState.configSettingsIsMinExpanded]);
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerFlex),
+    id: "wcConfigurator-settings-scroller",
+    ref: settingsScrollerElement,
+    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__PURE__*/jsx(SettingsHeaderContainer, {
+      isScroller: true
+    }, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsxs("div", {
+      className: classnames(viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerContentFill),
+      children: [/*#__PURE__*/jsx(SettingsItemsWrapper, {
+        itemPalettesArr: itemPalettesArr
+      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
+    })]
+  });
+};
+var SettingsScroller$1 = observer(SettingsScroller);
+
+export { SettingsScroller$1 as default };