@crystaldesign/diva-core 25.11.0-beta.2 → 25.11.0-beta.20

package/build/esm/{ModalsWrapper-273061c8.js → ModalsWrapper-328a2b1d.js}

@@ -1,4 +1,4 @@
-import { i as styleInject, u as useDivaCoreContext } from './index-35f77a39.js';
+import { i as styleInject, u as useDivaCoreContext } from './index-836ab23e.js';
 import { useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import Button from '@mui/material/Button';
@@ -42,7 +42,8 @@ import '@crystaldesign/basket-model';
 import 'lodash/debounce';
 import 'axios';
 import '@crystaldesign/product-handler';
-import 'react-swipeable';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import 'vaul';
 import '@crystaldesign/content-box';
 import '@crystaldesign/diva-core';
 import 'react-qr-code';

package/build/esm/{index-35f77a39.js → index-836ab23e.js}

@@ -35,7 +35,8 @@ import '@crystaldesign/basket-model';
 import debounce from 'lodash/debounce';
 import axios from 'axios';
 import { ProductHandlerAbstract } from '@crystaldesign/product-handler';
-import { useSwipeable } from 'react-swipeable';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { Drawer } from 'vaul';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
 import { Button as Button$1, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
 import { useTranslation as useTranslation$1, useDivaCore as useDivaCore$1 } from '@crystaldesign/diva-core';
@@ -47,7 +48,7 @@ import { actions } from '@storybook/addon-actions';
 import * as Styles from '@mui/styles';
 
 (function() {
-    const env = {"STAGE":"production","VERSION":"25.11.0-beta.2"};
+    const env = {"STAGE":"production","VERSION":"25.11.0-beta.20"};
     try {
         if (process) {
             process.env = Object.assign({}, process.env);
@@ -2127,10 +2128,9 @@ var ContentStore = /*#__PURE__*/function () {
     _defineProperty(this, "_snackBars", []);
     _defineProperty(this, "_banner", undefined);
     _defineProperty(this, "_fullscreen", undefined);
-    _defineProperty(this, "_sideMenu", undefined);
-    _defineProperty(this, "_headerInfos", {
-      visible: false
-    });
+    _defineProperty(this, "_drawerMenu", undefined);
+    _defineProperty(this, "_sideMenuOpen", false);
+    _defineProperty(this, "_headerInfos", {});
     _defineProperty(this, "visible", undefined);
     _defineProperty(this, "customLogoMap", new Map());
     _defineProperty(this, "customHeaderComponentMap", new Map());
@@ -2184,6 +2184,17 @@ var ContentStore = /*#__PURE__*/function () {
           return 'Undefined';
       }
     });
+    /**
+     * Resets the modal state
+     */
+    _defineProperty(this, "closeDrawerMenu", function (id, destroy) {
+      if (_this._drawerMenu) {
+        if (id && _this._drawerMenu.id !== id) return;
+        _this._drawerMenu = destroy ? undefined : _objectSpread$a(_objectSpread$a({}, _this._drawerMenu), {}, {
+          open: false
+        });
+      }
+    });
     this.root = root;
     this.configuration = components;
     if (window.customElements.get('model-viewer')) this._modelViewerHasLoaded = true;
@@ -2204,7 +2215,7 @@ var ContentStore = /*#__PURE__*/function () {
       ref: observable.ref,
       _fullscreen: observable.ref,
       _banner: observable.ref,
-      _sideMenu: observable.ref,
+      _drawerMenu: observable.ref,
       resizeObserver: false,
       _currentlyRendered: false,
       openComponent: flow,
@@ -2588,6 +2599,16 @@ var ContentStore = /*#__PURE__*/function () {
     value: function getSubConfiguration(type) {
       return this.findSubComponent(type, this.currentComponent);
     }
+  }, {
+    key: "openSideMenu",
+    value: function openSideMenu() {
+      this._sideMenuOpen = true;
+    }
+  }, {
+    key: "closeSideMenu",
+    value: function closeSideMenu() {
+      this._sideMenuOpen = false;
+    }
   }, {
     key: "findSubComponent",
     value: function findSubComponent(type, component) {
@@ -3049,39 +3070,30 @@ var ContentStore = /*#__PURE__*/function () {
     }
 
     /**
-     * Open sideMenu screen modal
-     * @param sideMenu the settings for the sideMenu
+     * Open drawerMenu screen modal
+     * @param drawerMenu the settings for the drawerMenu
      */
   }, {
-    key: "openSideMenu",
-    value: function openSideMenu(_ref3) {
-      var _this$_sideMenu$open, _this$_sideMenu;
+    key: "openDrawerMenu",
+    value: function openDrawerMenu(_ref3) {
+      var _this$_drawerMenu, _this$_drawerMenu2, _this$_drawerMenu$onC, _this$_drawerMenu3, _this$_drawerMenu$ope, _this$_drawerMenu4;
       var _ref3$onClose = _ref3.onClose,
-        onClose = _ref3$onClose === void 0 ? this.closeSideMenu.bind(this) : _ref3$onClose,
-        sideMenu = _objectWithoutProperties(_ref3, _excluded2$1);
-      if (sideMenu.open === undefined) sideMenu.open = (_this$_sideMenu$open = (_this$_sideMenu = this._sideMenu) === null || _this$_sideMenu === void 0 ? void 0 : _this$_sideMenu.open) !== null && _this$_sideMenu$open !== void 0 ? _this$_sideMenu$open : false;
-      this._sideMenu = _objectSpread$a(_objectSpread$a({}, sideMenu), {}, {
+        onClose = _ref3$onClose === void 0 ? this.closeDrawerMenu.bind(this) : _ref3$onClose,
+        drawerMenu = _objectWithoutProperties(_ref3, _excluded2$1);
+      if ((_this$_drawerMenu = this._drawerMenu) !== null && _this$_drawerMenu !== void 0 && _this$_drawerMenu.id && drawerMenu !== null && drawerMenu !== void 0 && drawerMenu.id && drawerMenu.id !== ((_this$_drawerMenu2 = this._drawerMenu) === null || _this$_drawerMenu2 === void 0 ? void 0 : _this$_drawerMenu2.id)) (_this$_drawerMenu$onC = (_this$_drawerMenu3 = this._drawerMenu).onClose) === null || _this$_drawerMenu$onC === void 0 || _this$_drawerMenu$onC.call(_this$_drawerMenu3);
+      if (drawerMenu.open === undefined) drawerMenu.open = (_this$_drawerMenu$ope = (_this$_drawerMenu4 = this._drawerMenu) === null || _this$_drawerMenu4 === void 0 ? void 0 : _this$_drawerMenu4.open) !== null && _this$_drawerMenu$ope !== void 0 ? _this$_drawerMenu$ope : false;
+      this._drawerMenu = _objectSpread$a(_objectSpread$a({}, drawerMenu), {}, {
         onClose: onClose
       });
     }
-
-    /**
-     * Resets the modal state
-     */
   }, {
-    key: "closeSideMenu",
-    value: function closeSideMenu(destroy) {
-      if (this._sideMenu) this._sideMenu = destroy ? undefined : _objectSpread$a(_objectSpread$a({}, this._sideMenu), {}, {
-        open: false
-      });
-    }
-
+    key: "updateHeaderInfos",
+    value:
     /**
      * Updates HeaderInfos so other component know the state of the header
      */
-  }, {
-    key: "updateHeaderInfos",
-    value: function updateHeaderInfos(headerInfos) {
+
+    function updateHeaderInfos(headerInfos) {
       this._headerInfos = headerInfos;
     }
   }, {
@@ -3091,12 +3103,17 @@ var ContentStore = /*#__PURE__*/function () {
     }
 
     /**
-     * The settings of the sideMenu, if one should be opened
+     * The settings of the drawerMenu, if one should be opened.
      */
   }, {
-    key: "sideMenu",
+    key: "drawerMenu",
+    get: function get() {
+      return this._drawerMenu;
+    }
+  }, {
+    key: "sideMenuOpen",
     get: function get() {
-      return this._sideMenu;
+      return this._sideMenuOpen;
     }
 
     /**
@@ -9154,8 +9171,8 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
         userHasPermission: store.dataStore.userHasPermission.bind(store.dataStore),
         openFullscreen: store.contentStore.openFullscreen.bind(store.contentStore),
         closeFullscreen: store.contentStore.closeFullscreen.bind(store.contentStore),
-        openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
-        closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore),
+        openDrawerMenu: store.contentStore.openDrawerMenu.bind(store.contentStore),
+        closeDrawerMenu: store.contentStore.closeDrawerMenu.bind(store.contentStore),
         openBarrier: store.contentStore.openBarrier.bind(store.contentStore),
         updateHeaderInfos: store.contentStore.updateHeaderInfos.bind(store.contentStore),
         openBanner: store.contentStore.openBanner.bind(store.contentStore),
@@ -9163,7 +9180,9 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
         resolveComponent: store.contentStore.resolveComponent.bind(store.contentStore),
         openSnackBar: store.contentStore.openSnackBar.bind(store.contentStore),
         fetchConfiguration: store.configurationStore.fetchConfiguration.bind(store.configurationStore),
-        getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore)
+        getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore),
+        openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
+        closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore)
       },
       state: toJS({
         isMobile: store.dataStore.isMobile,
@@ -9201,7 +9220,8 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
         googleMapsConfig: store.configurationStore.googleMapsconfig,
         cometChatConfig: store.configurationStore.cometchatConfig,
         defaultComponent: store.configurationStore.defaultComponent,
-        currentComponent: store.contentStore.currentComponent
+        currentComponent: store.contentStore.currentComponent,
+        sideMenuOpen: store.contentStore.sideMenuOpen
       }),
       handler: {
         productHandler: store.productHandler,
@@ -9253,8 +9273,8 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           userHasPermission: store.dataStore.userHasPermission.bind(store.dataStore),
           openFullscreen: store.contentStore.openFullscreen.bind(store.contentStore),
           closeFullscreen: store.contentStore.closeFullscreen.bind(store.contentStore),
-          openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
-          closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore),
+          openDrawerMenu: store.contentStore.openDrawerMenu.bind(store.contentStore),
+          closeDrawerMenu: store.contentStore.closeDrawerMenu.bind(store.contentStore),
           openBarrier: store.contentStore.openBarrier.bind(store.contentStore),
           updateHeaderInfos: store.contentStore.updateHeaderInfos.bind(store.contentStore),
           openBanner: store.contentStore.openBanner.bind(store.contentStore),
@@ -9262,7 +9282,9 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           resolveComponent: store.contentStore.resolveComponent.bind(store.contentStore),
           openSnackBar: store.contentStore.openSnackBar.bind(store.contentStore),
           fetchConfiguration: store.configurationStore.fetchConfiguration.bind(store.configurationStore),
-          getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore)
+          getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore),
+          openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
+          closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore)
         },
         state: toJS({
           availableComponents: store.contentStore.availableComponentList,
@@ -9300,7 +9322,8 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           isFullscreenComponent: store.contentStore.isFullscreenComponentDefined,
           enableSupport: !!store.configurationStore.enableSupport,
           defaultComponent: store.configurationStore.defaultComponent,
-          currentComponent: store.contentStore.currentComponent
+          currentComponent: store.contentStore.currentComponent,
+          sideMenuOpen: store.contentStore.sideMenuOpen
         }),
         handler: {
           productHandler: store.productHandler,
@@ -9432,7 +9455,7 @@ var useDivaCore = function useDivaCore() {
   return context.context;
 };
 
-var overlay$1 = "overlay-X3zhH";
+var overlay$2 = "overlay-X3zhH";
 var loading = "loading-kAuhm";
 var css_248z$5 = ".overlay-X3zhH {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: rgba(255, 255, 255, 0.6);\n  z-index: 1000;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.loading-kAuhm {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.loading-kAuhm div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 8px solid #b6b6b6;\n  border-radius: 50%;\n  animation: loading-kAuhm 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #b6b6b6 transparent transparent transparent;\n}\n.loading-kAuhm div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.loading-kAuhm div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.loading-kAuhm div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes loading-kAuhm {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z$5);
@@ -9542,7 +9565,7 @@ function Spinner() {
     return /*#__PURE__*/jsx(Fragment, {});
   }
   return /*#__PURE__*/jsx("div", {
-    className: overlay$1,
+    className: overlay$2,
     id: "diva-loader",
     children: /*#__PURE__*/jsxs("div", {
       className: className,
@@ -9552,102 +9575,169 @@ function Spinner() {
 }
 var Spinner$1 = observer(Spinner);
 
-var overlay = "overlay-34l68";
+var overlay$1 = "overlay-34l68";
 var absoluteOverlay = "absolute-overlay-cG7uO";
-var closeIcon$1 = "close-icon-1kDyU";
+var closeIcon = "close-icon-1kDyU";
 var css_248z$4 = ".overlay-34l68 {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: #fff;\n  z-index: 999;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.absolute-overlay-cG7uO {\n  height: 100% !important;\n}\n\n.absolute-overlay-cG7uO {\n  background-color: #fff;\n  position: fixed;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n  overflow: hidden;\n  z-index: 1000000;\n  display: block;\n  width: 100vw;\n}\n\n.diva-pseudo-fullscreen body {\n  height: auto !important;\n}\n.diva-pseudo-fullscreen, .diva-pseudo-fullscreen body {\n  overflow: hidden !important;\n}\n\n.close-icon-1kDyU {\n  position: absolute;\n  right: 32px;\n  top: 32px;\n  width: 50px;\n  height: 40px;\n  opacity: 0.3;\n  z-index: 700;\n  cursor: pointer;\n}\n\n.close-icon-1kDyU:before {\n  transform: rotate(45deg);\n}\n\n.close-icon-1kDyU:after {\n  transform: rotate(-45deg);\n}\n\n.close-icon-1kDyU:before,\n.close-icon-1kDyU:after {\n  position: absolute;\n  left: 23px;\n  top: 5px;\n  content: ' ';\n  height: 33px;\n  width: 3px;\n  background-color: #4b4b4b;\n}\n\n.close-icon-1kDyU:hover {\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n}\n";
 styleInject(css_248z$4);
 
-var sideMenu = "side-menu-2Fgdm";
-var leftSideMenu = "left-side-menu-L42L3";
-var rightSideMenu = "right-side-menu-Akk-Y";
-var wrapper$1 = "wrapper-jJaXo";
-var scroller = "scroller-ZnoJy";
-var title$1 = "title-WOjYJ";
-var hideLeft = "hide-left-4bzTL";
-var hideRight = "hide-right-IOmlC";
-var show = "show-Z8M2h";
-var closeIcon = "close-icon-NJkeP";
-var mobileBcGroup = "mobile-bc-group-6v8wI";
-var css_248z$3 = ".side-menu-2Fgdm {\n  width: 100%;\n  max-width: 400px;\n  height: 100%;\n  background-color: #f2f2f2;\n  position: absolute;\n  bottom: 0;\n  transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1);\n  box-sizing: border-box;\n}\n\n.left-side-menu-L42L3 {\n  left: 0px;\n}\n\n.right-side-menu-Akk-Y {\n  right: 0px;\n}\n\n.wrapper-jJaXo {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.scroller-ZnoJy {\n  height: 100%;\n}\n\n.title-WOjYJ {\n  font-size: 22px;\n  margin: 20px;\n}\n\n.hide-left-4bzTL {\n  transform: translate(-960px, 0);\n}\n.hide-right-IOmlC {\n  transform: translate(960px, 0);\n}\n\n.show-Z8M2h {\n  transform: translate(0, 0);\n  overflow: hidden;\n}\n\n.close-icon-NJkeP {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  opacity: 0.3;\n  width: 32px;\n  height: 32px;\n  z-index: 300;\n  width: 50px;\n  height: 40px;\n  cursor: pointer;\n}\n\n.close-icon-NJkeP:before {\n  transform: rotate(45deg);\n}\n\n.close-icon-NJkeP:after {\n  transform: rotate(-45deg);\n}\n\n.close-icon-NJkeP:before,\n.close-icon-NJkeP:after {\n  position: absolute;\n  right: 15px;\n  content: ' ';\n  height: 33px;\n  width: 3px;\n  background-color: #4b4b4b;\n}\n\n.close-icon-NJkeP:hover {\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.mobile-bc-group-6v8wI {\n  display: flex;\n  border-top: 0.8px solid #b6b6b7;\n  padding: 12px 16px;\n  border-bottom: 0.8px solid #b6b6b7;\n  margin-top: 40px;\n  overflow: auto;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.mobile-bc-group-6v8wI::-webkit-scrollbar {\n  display: none;\n}\n";
+var drawerWrapper = "drawer-wrapper-QY9a7";
+var handle = "handle-5tzN-";
+var overlay = "overlay-vhpU9";
+var drawerHandleLine = "drawer-handle-line-65wJw";
+var drawerHandle = "drawer-handle-zhmPW";
+var drawer = "drawer-P-5-0";
+var drawerHeader = "drawer-header-FOHFa";
+var scrollWrapper = "scroll-wrapper-f27j2";
+var closeButton = "close-button-Tg2c5";
+var bottom = "bottom-VZZjn";
+var left = "left-SicAa";
+var right = "right-p1mpA";
+var top = "top-o1Wjp";
+var bottomSpacer = "bottom-spacer-kdhiH";
+var onSide = "on-side-JUQWn";
+var css_248z$3 = ".drawer-wrapper-QY9a7 {\n  outline: medium none invert;\n  outline: initial;\n  position: fixed;\n  width: 100%;\n  z-index: 14000;\n  pointer-events: auto;\n}\n\ndiv.handle-5tzN- {\n  background: transparent;\n}\n\n.overlay-vhpU9 {\n  background-color: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  animation: fadeIn-W2rJo 0.3s ease-in forwards;\n  z-index: 10000;\n}\n\n@keyframes fadeIn-W2rJo {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.drawer-handle-line-65wJw {\n  width: calc(36px);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.drawer-handle-zhmPW {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -10px);\n  width: 40px;\n  height: 40px;\n  touch-action: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.drawer-P-5-0 {\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border: 0px solid #e4e4e7;\n  border-bottom: none;\n  border-top-width: 1px;\n  z-index: 2000000;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  background-color: rgba(255, 255, 255, 0.95);\n}\n\n.drawer-header-FOHFa {\n  padding: 8px 32px;\n}\n\n.drawer-open #Diva-content-wrapper {\n  overflow: visible !important;\n}\n\n.scroll-wrapper-f27j2 {\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n}\n\n.close-button-Tg2c5 {\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  width: 32px;\n  height: 32px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23ccc%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 70%;\n  transition:\n    border-color 0.2s ease-in,\n    background-image 0.2s ease-in;\n  cursor: pointer;\n  z-index: 500;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  padding: 0px;\n}\n\n.close-button-Tg2c5:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23aaa%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #aaa;\n}\n\n.bottom-VZZjn {\n  bottom: 0;\n  right: 0;\n  left: 0;\n}\n\n.left-SicAa,\n.right-p1mpA {\n  bottom: 0;\n}\n.right-p1mpA {\n  right: 0;\n}\n\n.top-o1Wjp {\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\nhtml body[data-scroll-locked] {\n  position: static !important;\n}\n\n.bottom-spacer-kdhiH {\n  min-height: 12px;\n}\n\n.on-side-JUQWn {\n  width: 100%;\n}\n";
 styleInject(css_248z$3);
 
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SideMenu = function SideMenu() {
-  var _contentStore$sideMen, _contentStore$sideMen5, _contentStore$sideMen6, _contentStore$headerI, _contentStore$headerI2, _contentStore$sideMen7, _contentStore$sideMen8, _contentStore$sideMen9, _contentStore$sideMen10;
+var MobileDrawer = function MobileDrawer(_ref) {
+  var _contentStore$drawerM, _contentStore$drawerM2;
+  _objectDestructuringEmpty(_ref);
   var _useDivaCoreContext = useDivaCoreContext(),
     contentStore = _useDivaCoreContext.contentStore;
-  var _useState = useState(!((_contentStore$sideMen = contentStore.sideMenu) !== null && _contentStore$sideMen !== void 0 && _contentStore$sideMen.open)),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    hiddenDelayed = _useState2[0],
-    setHiddenDelayed = _useState2[1];
+    activeSnapPoint = _useState2[0],
+    _setActiveSnapPoint = _useState2[1];
+  var useMove = useMemo(function () {
+    return function (ev) {
+      return ev.preventDefault();
+    };
+  }, []);
+  var closeDrawerMenu = contentStore.closeDrawerMenu;
+  var _ref2 = (_contentStore$drawerM = contentStore.drawerMenu) !== null && _contentStore$drawerM !== void 0 ? _contentStore$drawerM : {},
+    showOverlay = _ref2.showOverlay,
+    _ref2$mountElementId = _ref2.mountElementId,
+    mountElementId = _ref2$mountElementId === void 0 ? 'DivaCore' : _ref2$mountElementId,
+    onClose = _ref2.onClose,
+    open = _ref2.open,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'bottom' : _ref2$direction,
+    title = _ref2.title,
+    snapPoints = _ref2.snapPoints,
+    noModal = _ref2.noModal,
+    handleInternScroll = _ref2.handleInternScroll,
+    hideCloseButton = _ref2.hideCloseButton,
+    content = _ref2.content,
+    backgroundColor = _ref2.backgroundColor,
+    drawerStyle = _ref2.drawerStyle,
+    wrapperStyle = _ref2.wrapperStyle;
   useEffect(function () {
-    var _contentStore$sideMen2;
-    if (!((_contentStore$sideMen2 = contentStore.sideMenu) !== null && _contentStore$sideMen2 !== void 0 && _contentStore$sideMen2.open)) {
-      setTimeout(function () {
-        var _contentStore$sideMen3;
-        return setHiddenDelayed(!((_contentStore$sideMen3 = contentStore.sideMenu) !== null && _contentStore$sideMen3 !== void 0 && _contentStore$sideMen3.open));
-      }, 500);
+    //when drawer is open, prevent swipe to refresh the page on android
+    if (open) {
+      window.addEventListener('touchmove', useMove, {
+        passive: false
+      });
+      if (!noModal) document.body.classList.add('drawer-open');
     } else {
-      var _contentStore$sideMen4;
-      setHiddenDelayed(!((_contentStore$sideMen4 = contentStore.sideMenu) !== null && _contentStore$sideMen4 !== void 0 && _contentStore$sideMen4.open));
-    }
-  }, [(_contentStore$sideMen5 = contentStore.sideMenu) === null || _contentStore$sideMen5 === void 0 ? void 0 : _contentStore$sideMen5.open]);
-  var swipeHandler = useSwipeable({
-    onSwipedLeft: function onSwipedLeft(e) {
-      var _e$event$path;
-      // do not swipe if the event is triggered withing the breadcrumbs
-
-      var allElements = [];
-      _getAllParents(e.event.target, allElements);
-      if (contentStore.sideMenu && contentStore.sideMenu.swipeable != false && !((_e$event$path = e.event.path) !== null && _e$event$path !== void 0 && _e$event$path.find(function (p) {
-        return p.className == mobileBcGroup || p.className == 'diva-stop-swipe-detection';
-      })) && !allElements.find(function (e) {
-        return e.className == mobileBcGroup || e.className == 'diva-stop-swipe-detection';
-      })) contentStore.closeSideMenu();
-    },
-    trackMouse: true
-  });
-  var _getAllParents = function getAllParents(element, allElements) {
-    if (element.parentElement && element.nodeName != 'BODY') {
-      allElements.push(element.parentElement);
-      _getAllParents(element.parentElement, allElements);
+      window.removeEventListener('touchmove', useMove);
+      if (!noModal) document.body.classList.remove('drawer-open');
     }
+    return function () {
+      window.removeEventListener('touchmove', useMove);
+      if (!noModal) document.body.classList.remove('drawer-open');
+    };
+  }, [(_contentStore$drawerM2 = contentStore.drawerMenu) === null || _contentStore$drawerM2 === void 0 ? void 0 : _contentStore$drawerM2.open]);
+  if (!contentStore.drawerMenu) return /*#__PURE__*/jsx(Fragment, {});
+  var mountElement = mountElementId ? document.getElementById(mountElementId) : undefined;
+  if (!mountElement) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var close = function close() {
+    closeDrawerMenu();
+    //delay the state changes so the animation of the drawer is not interrupted
+    setTimeout(function () {
+      onClose === null || onClose === void 0 || onClose();
+    }, 400);
   };
-  var hide = ((_contentStore$sideMen6 = contentStore.sideMenu) === null || _contentStore$sideMen6 === void 0 ? void 0 : _contentStore$sideMen6.side) == 'right' ? hideRight : hideLeft;
-  if (!contentStore.sideMenu) return /*#__PURE__*/jsx(Fragment, {});
-  var height = (_contentStore$headerI = (_contentStore$headerI2 = contentStore.headerInfos.HeaderElement) === null || _contentStore$headerI2 === void 0 ? void 0 : _contentStore$headerI2.getBoundingClientRect().height) !== null && _contentStore$headerI !== void 0 ? _contentStore$headerI : 0;
-  return /*#__PURE__*/jsxs("div", _objectSpread$5(_objectSpread$5({}, swipeHandler), {}, {
-    style: _objectSpread$5(_objectSpread$5({}, contentStore.sideMenu.style), {}, {
-      width: hiddenDelayed ? '0px' : undefined,
-      backgroundColor: contentStore.sideMenu.backgroundColor,
-      height: (_contentStore$sideMen7 = contentStore.sideMenu) !== null && _contentStore$sideMen7 !== void 0 && _contentStore$sideMen7.showCoreHeader ? 'calc(100% - ' + height + 'px)' : undefined,
-      zIndex: 2000000,
-      position: contentStore.isAbsoluteFullscreenComponent ? 'fixed' : contentStore === null || contentStore === void 0 || (_contentStore$sideMen8 = contentStore.sideMenu) === null || _contentStore$sideMen8 === void 0 || (_contentStore$sideMen8 = _contentStore$sideMen8.style) === null || _contentStore$sideMen8 === void 0 ? void 0 : _contentStore$sideMen8.position
-    }),
-    className: classnames(sideMenu, contentStore.sideMenu.side == 'right' ? rightSideMenu : leftSideMenu, (_contentStore$sideMen9 = contentStore.sideMenu) !== null && _contentStore$sideMen9 !== void 0 && _contentStore$sideMen9.open ? show : hide),
-    children: [/*#__PURE__*/jsx("div", {
-      className: closeIcon,
-      onClick: (_contentStore$sideMen10 = contentStore.sideMenu) === null || _contentStore$sideMen10 === void 0 ? void 0 : _contentStore$sideMen10.onClose
-    }), /*#__PURE__*/jsxs("div", {
-      className: wrapper$1,
-      children: [!!contentStore.sideMenu.title && /*#__PURE__*/jsx("div", {
-        className: title$1,
-        children: contentStore.sideMenu.title
-      }), contentStore.sideMenu.content && /*#__PURE__*/jsx("div", {
-        className: scroller,
-        children: contentStore.sideMenu.content
+  var contentHeight = '100%';
+  if (['bottom', 'top'].includes(direction)) {
+    if (snapPoints) {
+      if (snapPoints[activeSnapPoint] > 1) {
+        contentHeight = snapPoints[activeSnapPoint] + 'px';
+      } else contentHeight = (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[activeSnapPoint]) * 100 + '%';
+    } else {
+      contentHeight = 'fit-content';
+    }
+  }
+  var maxHeight = contentHeight === 'fit-content' && mountElement ? mountElement === null || mountElement === void 0 ? void 0 : mountElement.getBoundingClientRect().height : undefined;
+  var maxWidth = ['left', 'right'].includes(direction) ? 400 : undefined;
+  return /*#__PURE__*/jsx(Drawer.Root, {
+    container: mountElement,
+    open: !!open,
+    direction: direction,
+    onClose: close,
+    activeSnapPoint: snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[activeSnapPoint],
+    setActiveSnapPoint: function setActiveSnapPoint(s) {
+      var _snapPoints$indexOf;
+      return _setActiveSnapPoint((_snapPoints$indexOf = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.indexOf(s)) !== null && _snapPoints$indexOf !== void 0 ? _snapPoints$indexOf : 0);
+    },
+    snapPoints: snapPoints,
+    closeThreshold: 0.8,
+    modal: !noModal,
+    children: /*#__PURE__*/jsxs(Drawer.Portal, {
+      children: [showOverlay && /*#__PURE__*/jsx(Drawer.Overlay, {
+        className: overlay
+      }), /*#__PURE__*/jsxs(Drawer.Content, {
+        className: classnames(drawerWrapper, direction === 'bottom' ? bottom : direction === 'left' ? left : direction === 'right' ? right : direction === 'top' ? top : undefined),
+        style: _objectSpread$5({
+          height: contentHeight,
+          maxWidth: maxWidth,
+          maxHeight: maxHeight ? maxHeight + 'px' : undefined
+        }, drawerStyle),
+        children: [['bottom', 'top'].includes(direction) && /*#__PURE__*/jsx(Drawer.Handle, {
+          className: handle,
+          children: /*#__PURE__*/jsx("div", {
+            className: drawerHandle,
+            children: /*#__PURE__*/jsx("div", {
+              className: drawerHandleLine
+            })
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(drawer, ['left', 'right'].includes(direction) ? onSide : undefined),
+          onTouchMove: function onTouchMove(e) {
+            return e.stopPropagation();
+          },
+          style: _objectSpread$5({
+            height: contentHeight,
+            maxWidth: maxWidth,
+            maxHeight: maxHeight ? maxHeight - 22 + 'px' : undefined,
+            backgroundColor: backgroundColor
+          }, wrapperStyle),
+          children: [!hideCloseButton && /*#__PURE__*/jsx("button", {
+            className: closeButton,
+            onClick: close
+          }), title !== undefined && /*#__PURE__*/jsx("div", {
+            className: classnames(drawerHeader),
+            children: title
+          }), !handleInternScroll ? /*#__PURE__*/jsxs("div", {
+            className: classnames(scrollWrapper),
+            children: [content, /*#__PURE__*/jsx("div", {
+              className: bottomSpacer
+            })]
+          }) : content]
+        })]
       })]
-    })]
-  }));
+    })
+  });
 };
-var SideMenu$1 = observer(SideMenu);
+var DrawerMenu = observer(MobileDrawer);
 
 function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LazyModals$1 = /*#__PURE__*/React.lazy(function () {
-  return import('./ModalsWrapper-273061c8.js');
+  return import('./ModalsWrapper-328a2b1d.js');
 });
 function Fullscreen(_ref) {
   var inAbsoluteFullscreen = _ref.inAbsoluteFullscreen;
@@ -9739,11 +9829,11 @@ function Fullscreen(_ref) {
     var C = c.component;
     return /*#__PURE__*/jsxs("div", {
       id: "DivaCore",
-      className: classnames('diva-fullscreen', c.state.absoluteFullscreen ? absoluteOverlay : overlay),
+      className: classnames('diva-fullscreen', c.state.absoluteFullscreen ? absoluteOverlay : overlay$1),
       style: isMobile ? (_c$state$absoluteFull = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull === void 0 ? void 0 : _c$state$absoluteFull.mobile : (_c$state$absoluteFull2 = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull2 === void 0 ? void 0 : _c$state$absoluteFull2.desktop,
       children: [/*#__PURE__*/jsx(Fullscreen, {
         inAbsoluteFullscreen: true
-      }), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(SideMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
+      }), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
         fallback: /*#__PURE__*/jsx(Fallback, {}),
         children: /*#__PURE__*/jsx(C, _objectSpread$4({}, c.state))
       })]
@@ -9751,13 +9841,13 @@ function Fullscreen(_ref) {
   }
   if (!contentStore.fullscreen) return /*#__PURE__*/jsx(Fragment, {});
   return /*#__PURE__*/jsxs("div", {
-    className: classnames('diva-fullscreen', contentStore.fullscreen.absoluteFullscreen ? absoluteOverlay : overlay),
+    className: classnames('diva-fullscreen', contentStore.fullscreen.absoluteFullscreen ? absoluteOverlay : overlay$1),
     "data-test-id": "plannerFullscreen",
     style: {
       zIndex: contentStore.fullscreen.overwrittenZIndex
     },
-    children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(SideMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
-      className: closeIcon$1,
+    children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
+      className: closeIcon,
       onClick: onClose,
       "data-test-id": "closeFullscreenBtn",
       style: {
@@ -10105,10 +10195,10 @@ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$2 = getLogger('Framework', 'Root');
 var LazyAuth = /*#__PURE__*/React.lazy(function () {
-  return import('./index-4225392e.js');
+  return import('./index-d999f3d8.js');
 });
 var LazyModals = /*#__PURE__*/React.lazy(function () {
-  return import('./ModalsWrapper-273061c8.js');
+  return import('./ModalsWrapper-328a2b1d.js');
 });
 function ContentComponent() {
   var context = useDivaCoreContext();
@@ -10119,7 +10209,7 @@ function ContentComponent() {
     children: [/*#__PURE__*/jsxs(Suspense, {
       fallback: /*#__PURE__*/jsx(Fragment, {}),
       children: [context.configurationStore.hasAuthentication && /*#__PURE__*/jsx(LazyAuth, {}), context.configurationStore.enableModals && !context.contentStore.fullscreen && !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(LazyModals, {})]
-    }), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(SideMenu$1, {}), /*#__PURE__*/jsxs("div", {
+    }), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(DrawerMenu, {}), /*#__PURE__*/jsxs("div", {
       style: {
         position: 'relative',
         width: '100%',
@@ -10383,7 +10473,7 @@ function HelpButton(_ref) {
 
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var actionFunctions = ['openComponent', 'closeComponentInFullscreen', 'setAbsoluteFullScreen', 'updateBreadcrumbs', 'openModal', 'closeModal', 'sendEmail', 'updateCustomLogo', 'updateCustomHeaderElement', 'toggleHidePrices', 'toggleHideConfigPricePreview', 'toggleLoading', 'changeLanguage', 'changeLoginMode', 'onEvent', 'subscribeEvents', 'unSubscribeEvents', 'setOrganization', 'getSessionGuid', 'getApi2AuthLoginData', 'logout', 'showLoginWindow', 'userHasPermission', 'openFullscreen', 'closeFullscreen', 'openSideMenu', 'closeSideMenu', 'openBarrier', 'updateHeaderInfos', 'openBanner', 'closeBanner', 'resolveComponent', 'openSnackBar', 'setComponentChange'];
+var actionFunctions = ['openComponent', 'closeComponentInFullscreen', 'setAbsoluteFullScreen', 'updateBreadcrumbs', 'openModal', 'closeModal', 'sendEmail', 'updateCustomLogo', 'updateCustomHeaderElement', 'toggleHidePrices', 'toggleHideConfigPricePreview', 'toggleLoading', 'changeLanguage', 'changeLoginMode', 'onEvent', 'subscribeEvents', 'unSubscribeEvents', 'setOrganization', 'getSessionGuid', 'getApi2AuthLoginData', 'logout', 'showLoginWindow', 'userHasPermission', 'openFullscreen', 'closeFullscreen', 'openDrawerMenu', 'closeDrawerMenu', 'openBarrier', 'updateHeaderInfos', 'openBanner', 'closeBanner', 'resolveComponent', 'openSnackBar', 'setComponentChange'];
 function getRender(C) {
   return function (args) {
     return /*#__PURE__*/jsx(DivaMockProvider, {
@@ -10751,9 +10841,7 @@ var MockedRootStore = /*#__PURE__*/function () {
     key: "headerInfos",
     get: function get() {
       var _this$data$headerInfo;
-      return (_this$data$headerInfo = this.data.headerInfos) !== null && _this$data$headerInfo !== void 0 ? _this$data$headerInfo : {
-        visible: false
-      };
+      return (_this$data$headerInfo = this.data.headerInfos) !== null && _this$data$headerInfo !== void 0 ? _this$data$headerInfo : {};
     }
   }, {
     key: "theme",
@@ -10793,9 +10881,12 @@ var MockedRootStore = /*#__PURE__*/function () {
         _this$data$hideConfig,
         _this$data$applicatio,
         _this$data$isFullscre,
-        _this$data$enableSupp;
+        _this$data$enableSupp,
+        _this$data$sideMenuOp;
       return {
         actions: {
+          openSideMenu: function openSideMenu() {},
+          closeSideMenu: function closeSideMenu() {},
           changeLanguage: this.changeLanguage.bind(this),
           changeLoginMode: this.changeLoginMode.bind(this),
           subscribeEvents: this.subscribeEvents.bind(this),
@@ -10949,16 +11040,16 @@ var MockedRootStore = /*#__PURE__*/function () {
               throw new Error('Method not implemented.');
             }
           },
-          openSideMenu: function openSideMenu(sideMenu) {
-            if (_this2.actions.openSideMenu) {
-              _this2.actions.openSideMenu(sideMenu);
+          openDrawerMenu: function openDrawerMenu(drawerMenu) {
+            if (_this2.actions.openDrawerMenu) {
+              _this2.actions.openDrawerMenu(drawerMenu);
             } else {
               throw new Error('Method not implemented.');
             }
           },
-          closeSideMenu: function closeSideMenu() {
-            if (_this2.actions.closeSideMenu) {
-              _this2.actions.closeSideMenu();
+          closeDrawerMenu: function closeDrawerMenu(id, destroy) {
+            if (_this2.actions.closeDrawerMenu) {
+              _this2.actions.closeDrawerMenu();
             } else {
               throw new Error('Method not implemented.');
             }
@@ -11056,7 +11147,8 @@ var MockedRootStore = /*#__PURE__*/function () {
           theme: this.theme,
           applicationEnvironment: (_this$data$applicatio = this.data.applicationEnvironment) !== null && _this$data$applicatio !== void 0 ? _this$data$applicatio : 'WEB',
           isFullscreenComponent: (_this$data$isFullscre = this.data.isFullscreenComponent) !== null && _this$data$isFullscre !== void 0 ? _this$data$isFullscre : false,
-          enableSupport: (_this$data$enableSupp = this.data.enableSupport) !== null && _this$data$enableSupp !== void 0 ? _this$data$enableSupp : false
+          enableSupport: (_this$data$enableSupp = this.data.enableSupport) !== null && _this$data$enableSupp !== void 0 ? _this$data$enableSupp : false,
+          sideMenuOpen: (_this$data$sideMenuOp = this.data.sideMenuOpen) !== null && _this$data$sideMenuOp !== void 0 ? _this$data$sideMenuOp : false
         }),
         handler: this.handlers
       };