@crystaldesign/diva-web-planner-react 25.13.0-beta.21 → 25.13.0-beta.23

package/build/esm/index-3df8c625.js

@@ -0,0 +1,194 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import { useState, useEffect } from 'react';
+import OptionTree from './index-c7fff3f3.js';
+import PartListTable from './index-e1a739f5.js';
+import MaskEditor from './index-d4a3c583.js';
+import ArticleOverview from './index-22ef9cfa.js';
+import SVGAnalyzer from './index-7dab6d88.js';
+import EkTextViewer from './index-615996cb.js';
+import CatalogMakeup from './index-16f4dfc9.js';
+import DecisionAnalyzer from './index-b0b4e1cb.js';
+import RTVAnalyzer from './index-1711b6ae.js';
+import J3DEditor from './index-5783cba1.js';
+import PriceAnalyzer from './index-95870c9a.js';
+import PropertiesEditor from './index-045fd928.js';
+import GridOverview from './index-9eb7af94.js';
+import { jsx } from 'react/jsx-runtime';
+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 './index.module-db0872b4.js';
+import './index-b211aa34.js';
+import './index-71e05b99.js';
+import './index-3e488351.js';
+import './index-bbcecf10.js';
+import 'react-collapsible';
+import './index-2618249d.js';
+import './index-8484623e.js';
+import './index.module-a4479263.js';
+import 'react-json-view-lite';
+import './react-json-viewer-f32f8026.js';
+import './index.module-95ecc4f2.js';
+import './DecisionVizualizer-38b8f8f0.js';
+import 'react-draggable';
+import './index-75641c70.js';
+import 'react-switch';
+import './index-df466f28.js';
+import './index-7c996a84.js';
+import 'jsoneditor';
+import './index-30448bed.js';
+import './index-93acc7f6.js';
+import './index-fce51011.js';
+import './index-76251fc1.js';
+import './index.module-9749d6df.js';
+import 'react-select';
+import './index-b301e704.js';
+import './index-47460762.js';
+import './index-9489887f.js';
+import './index-2f6fd663.js';
+import './CatalogProperties-ee67eb3c.js';
+import './ArticleProperties-f95025af.js';
+import './OptionProperties-ae058f58.js';
+import './OptionValueProperties-a516eb35.js';
+
+var wrapper = "wrapper-eIL6V";
+var css_248z = ".wrapper-eIL6V {\n  width: 100%;\n  position: absolute;\n  bottom: 82px;\n  z-index: 1000;\n  background-color: rgba(200, 200, 200, 0.9);\n  overflow: auto;\n}\n\n.draghandle-4ydUz {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, 50%);\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 ToolContainer = function ToolContainer(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var _useState = useState(436),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var viewHandler = useViewHandler();
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mouseDown = _useState4[0],
+    setMouseDown = _useState4[1];
+  var handler = function handler(mouseDownEvent) {
+    var startHeight = height;
+    var startPosition = {
+      x: mouseDownEvent.pageX,
+      y: mouseDownEvent.pageY
+    };
+    setMouseDown(true);
+    function onMouseMove(mouseMoveEvent) {
+      setHeight(startHeight + startPosition.y - mouseMoveEvent.pageY);
+    }
+    var onMouseUp = function onMouseUp() {
+      setMouseDown(false);
+      document.body.removeEventListener('mousemove', onMouseMove);
+    };
+    document.body.addEventListener('mousemove', onMouseMove);
+    document.body.addEventListener('mouseup', onMouseUp, {
+      once: true
+    });
+  };
+  useEffect(function () {
+    if (height < 140 && !mouseDown) {
+      viewHandler.uiState.setActiveCatalogSection('3D/2D');
+    }
+  }, [height, mouseDown]);
+  var activeWindow = undefined;
+  var props = {
+    onMouseDown: handler
+  };
+  var classname = '';
+  switch (viewHandler.uiState.activeCatalogSection) {
+    case 'Options':
+      activeWindow = /*#__PURE__*/jsx(OptionTree, _objectSpread(_objectSpread({}, props), {}, {
+        style: {
+          zIndex: 700
+        }
+      }));
+      break;
+    case 'PartList':
+      activeWindow = /*#__PURE__*/jsx(PartListTable, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'DecisionAnalyzer':
+      activeWindow = /*#__PURE__*/jsx(DecisionAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'PriceAnalyzer':
+      activeWindow = /*#__PURE__*/jsx(PriceAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'Artikelübersicht':
+      activeWindow = /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'SVGübersicht':
+      activeWindow = /*#__PURE__*/jsx(SVGAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'ekText':
+      activeWindow = /*#__PURE__*/jsx(EkTextViewer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'CatalogMakeup':
+      activeWindow = /*#__PURE__*/jsx(CatalogMakeup, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'RTVAnalyzer':
+      activeWindow = /*#__PURE__*/jsx(RTVAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'J3DEditor':
+      activeWindow = /*#__PURE__*/jsx(J3DEditor, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'PropertiesEditor':
+      activeWindow = /*#__PURE__*/jsx(PropertiesEditor, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'MaskEditor':
+      activeWindow = /*#__PURE__*/jsx(MaskEditor, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'GridOverview':
+      activeWindow = /*#__PURE__*/jsx(GridOverview, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    style: {
+      height: height
+    },
+    children: activeWindow
+  });
+};
+
+export { ToolContainer as default };

package/build/esm/index-3e488351.js

@@ -0,0 +1,43 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-f895d7dd.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import Article from './index-bbcecf10.js';
+import { 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 '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+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-collapsible';
+
+var ProduktDetails = function ProduktDetails(_ref) {
+  var _articles$viewHandler;
+  Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  return /*#__PURE__*/jsx(Fragment, {
+    children: [article].concat(_toConsumableArray(Object.values(article.partlistArticles))).map(function (a, index) {
+      return /*#__PURE__*/jsx(Article, {
+        article: a
+      }, index);
+    })
+  });
+};
+var ProduktDetails$1 = observer(ProduktDetails);
+
+export { ProduktDetails$1 as default };

package/build/esm/index-401794f3.js

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

package/build/esm/index-439308ca.js

@@ -0,0 +1,96 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import MultiToggleSwitch from './index-69d84c10.js';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+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';
+
+var row = "row-F7HtB";
+var colum = "colum-t-N58";
+var title = "title-d5AfW";
+var toggle = "toggle-oIMCS";
+var css_248z = ".wrapper-Ec98j {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-bottom: 24px;\n}\n.multi-toggle-wrapper-RNQU4 {\n  width: calc(100% - 64px);\n  padding: 8px 32px;\n}\n\n.row-F7HtB {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 4px;\n  margin-bottom: 10px;\n  gap: 12px;\n}\n.colum-t-N58 {\n  width: 70%;\n}\n.colum-t-N58:first-child {\n  width: 30%;\n  margin: 10px 0px;\n  position: relative;\n}\n\n.colum-toggle-name-AfLOD {\n  flex-grow: 1;\n  height: 58px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  min-width: 33%;\n}\n\n.title-d5AfW {\n  text-align: left;\n  margin-left: 0;\n  margin-left: initial;\n  cursor: pointer;\n}\n\n.toggle-oIMCS {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
+styleInject(css_248z);
+
+var SliderComponent = function SliderComponent(_ref) {
+  var item = _ref.item,
+    style = _ref.style,
+    round = _ref.round,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggleValues = _useState4[0],
+    setToggleValues = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    curIndex = _useState6[0],
+    setCurIndex = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    allEndWithCM = _useState8[0],
+    setAllEndWithCM = _useState8[1];
+  useEffect(function () {
+    var itemList = item.groups.flatMap(function (group) {
+      return group.items;
+    });
+    var allEndWithCM = itemList.every(function (i) {
+      return i.text.endsWith('cm');
+    });
+    setItems(itemList);
+    setAllEndWithCM(allEndWithCM);
+    setToggleValues(itemList.map(function (i) {
+      return allEndWithCM ? i.text.replace('cm', '') : i.text;
+    }));
+    setCurIndex(itemList.findIndex(function (i) {
+      return i.sel;
+    }));
+  }, [item]);
+  var onChangeValue = function onChangeValue(index) {
+    setCurIndex(index);
+    var item = items[index];
+    if (item) viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(colum, title),
+      children: item.name + (allEndWithCM ? ' (cm)' : '')
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(colum, toggle),
+      children: /*#__PURE__*/jsx(MultiToggleSwitch, {
+        values: toggleValues,
+        state: [curIndex, onChangeValue],
+        round: round
+      })
+    })]
+  });
+};
+var MultiToggle = observer(SliderComponent);
+
+export { MultiToggle as default };

package/build/esm/index-45188c11.js

@@ -0,0 +1,31 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-f895d7dd.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+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 SettingsItemRoomTemplate = function SettingsItemRoomTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Room/RoomItem"
+  }));
+};
+
+export { SettingsItemRoomTemplate as default };

package/build/esm/index-46386e0d.js

@@ -0,0 +1,184 @@
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import { useState, useEffect, useMemo } from 'react';
+import { Drawer } from 'vaul';
+import { observer } from 'mobx-react-lite';
+import { a as swiperWrapper } from './index.module-58c406b6.js';
+import classnames from 'classnames';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/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';
+
+var drawerContent = "drawer-content-JVadm";
+var tabGroups = "tab-groups-5A6NV";
+var swiperWrapper1 = "swiper-wrapper1-n9OSK";
+var drawerHandle = "drawer-handle-QJB1W";
+var drawerHandleLine = "drawer-handle-line-HgJne";
+var wcConfiguratorStepsMobile = "wcConfiguratorStepsMobile-KM8rA";
+var css_248z = ".drawer-content-JVadm {\n  transition:\n    opacity 0.3s ease,\n    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;\n}\n\n.drawer-content-JVadm {\n  outline: medium none invert;\n  outline: initial;\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  left: 0;\n  right: 0;\n  opacity: 1;\n}\n\n.diva-fullscreen .drawer-content-JVadm {\n  position: fixed;\n}\n\n.drawer-content-JVadm.vaul-dragging {\n  transition: opacity 0.3s ease !important;\n  height: calc(100% - 36px) !important;\n}\n\ndiv.tab-groups-5A6NV {\n  width: 100%;\n  opacity: 1;\n  height: var(--configuratorTabGroupHeight);\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  background: initial;\n  border-radius: 0px;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n}\n\n.swiper-wrapper1-n9OSK {\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - 38px);\n  overflow: hidden;\n  background-color: var(--settingsBackgroundColor);\n}\n\n.tab-groups-5A6NV > span {\n  transform: none;\n  transform: initial;\n  left: auto;\n  left: initial;\n  top: auto;\n  top: initial;\n}\n\n.drawer-handle-QJB1W {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -32px);\n  width: 40px;\n  height: 40px;\n  touch-action: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n}\n\n.drawer-handle-line-HgJne {\n  width: var(--configuratorTabGroupHeight);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.wcConfiguratorStepsMobile-KM8rA {\n  position: relative;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n  display: flex;\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  overflow: hidden;\n}\n\n/* to be removed after new vaul release https://github.com/emilkowalski/vaul/pull/580 */\nbody {\n  pointer-events: all !important;\n}\n";
+styleInject(css_248z);
+
+function useDrawerHook() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    startY = _useState2[0],
+    setStartY = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    startX = _useState4[0],
+    setStartX = _useState4[1];
+  var viewHandler = useViewHandler();
+  var _useState5 = useState(viewHandler.uiState.isMobilePortrait),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = useState(viewHandler.uiState.snapPoints),
+    _useState8 = _slicedToArray(_useState7, 2),
+    snapPoints = _useState8[0],
+    setSnapPoints = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    snapPointsTimeout = _useState10[0],
+    setSnapPointsTimeout = _useState10[1];
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    width = _useDivaCore$state$di.width,
+    height = _useDivaCore$state$di.height,
+    initializing = _useDivaCore$state.initializing;
+  useEffect(function () {
+    _trySetSnapPoints();
+  }, [width, height, initializing]);
+  var _trySetSnapPoints = function trySetSnapPoints() {
+    var snapPoints = viewHandler.uiState.snapPoints;
+    if (snapPointsTimeout) clearTimeout(snapPointsTimeout);
+    if (!(snapPoints !== null && snapPoints !== void 0 && snapPoints.length)) {
+      setSnapPointsTimeout(setTimeout(function () {
+        return _trySetSnapPoints();
+      }, 100));
+    } else setSnapPoints(snapPoints);
+  };
+  useEffect(function () {
+    setOpen(viewHandler.uiState.isMobilePortrait);
+  }, [viewHandler.uiState.isInMobileView, viewHandler.uiState.isMobileLandscape, viewHandler.uiState.isTablet, width, height]);
+  var handleTouchStart = function handleTouchStart(e) {
+    setStartY(e.touches[0].clientY);
+    setStartX(e.touches[0].pageX);
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    var currentY = e.touches[0].clientY;
+    var currentX = e.touches[0].pageX;
+    var deltaY = Math.abs(currentY - startY);
+    var deltaX = Math.abs(currentX - startX);
+    var threshold = 1;
+
+    // Only preventDefault when swipe vertical is detected to prevent page refresh on android
+    if (deltaY >= threshold && deltaY > deltaX * 2) {
+      window.addEventListener('touchmove', useMove, {
+        passive: false
+      });
+    }
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    window.removeEventListener('touchmove', useMove);
+  };
+  var useMove = useMemo(function () {
+    return function (ev) {
+      return ev.preventDefault();
+    };
+  }, []);
+  return {
+    handleTouchStart: handleTouchStart,
+    handleTouchMove: handleTouchMove,
+    handleTouchEnd: handleTouchEnd,
+    snapPoints: snapPoints,
+    open: open
+  };
+}
+
+var SettingsBottomDrawer = function SettingsBottomDrawer(_ref) {
+  var draggerElement = _ref.draggerElement,
+    children = _ref.children;
+  var viewHandler = useViewHandler();
+  var _useDrawerHook = useDrawerHook(),
+    handleTouchStart = _useDrawerHook.handleTouchStart,
+    handleTouchMove = _useDrawerHook.handleTouchMove,
+    handleTouchEnd = _useDrawerHook.handleTouchEnd,
+    open = _useDrawerHook.open,
+    snapPoints = _useDrawerHook.snapPoints;
+  var container = document.getElementById('wcConfigurator');
+  if (!container) return /*#__PURE__*/jsx(Fragment, {});
+  if (!(snapPoints !== null && snapPoints !== void 0 && snapPoints.length)) return /*#__PURE__*/jsx(Fragment, {});
+  var contentHeight;
+  var snapPoint = viewHandler.uiState.snapPoints[viewHandler.settingsState.activeSnapPointIndex];
+  if (typeof snapPoint == 'string') {
+    contentHeight = snapPoint;
+  } else contentHeight = 'calc(' + snapPoint * 100 + '%' + (viewHandler.settingsState.activeSnapPointIndex == 3 ? ')' : ' -  36px)');
+  return /*#__PURE__*/jsx(Drawer.Root, {
+    open: open,
+    modal: false,
+    autoFocus: true,
+    handleOnly: true,
+    dismissible: true,
+    defaultOpen: false,
+    repositionInputs: false,
+    snapPoints: snapPoints,
+    container: container,
+    onClose: function onClose() {
+      return viewHandler.settingsState.setActiveSnapPointIndex(2);
+    },
+    closeThreshold: viewHandler.settingsState.activeSnapPointIndex == 0 ? 0.1 : 1,
+    activeSnapPoint: snapPoints[viewHandler.settingsState.activeSnapPointIndex],
+    setActiveSnapPoint: function setActiveSnapPoint(snapPoint) {
+      return viewHandler.settingsState.setActiveSnapPointIndex(snapPoints.indexOf(snapPoint));
+    },
+    children: /*#__PURE__*/jsx(Drawer.Portal, {
+      children: /*#__PURE__*/jsxs(Drawer.Content, {
+        className: drawerContent,
+        style: {
+          height: contentHeight,
+          opacity: viewHandler.uiState.isMobileLandscape ? '0' : undefined
+        },
+        children: [/*#__PURE__*/jsx(Drawer.Title, {
+          style: {
+            display: 'none'
+          },
+          children: "Settings Drawer"
+        }), /*#__PURE__*/jsxs(Drawer.Handle, {
+          className: classnames(tabGroups),
+          onTouchStart: handleTouchStart,
+          onTouchMove: handleTouchMove,
+          onTouchEnd: handleTouchEnd,
+          children: [/*#__PURE__*/jsx("div", {
+            className: drawerHandle,
+            children: /*#__PURE__*/jsx("div", {
+              className: drawerHandleLine
+            })
+          }), /*#__PURE__*/jsx("div", {
+            className: wcConfiguratorStepsMobile,
+            children: draggerElement
+          })]
+        }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+          className: classnames(swiperWrapper, swiperWrapper1),
+          children: children
+        })]
+      })
+    })
+  });
+};
+var SettingsBottomDrawer$1 = observer(SettingsBottomDrawer);
+
+export { SettingsBottomDrawer$1 as default };