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

package/build/esm/index-a2bddc82.js

@@ -0,0 +1,196 @@
+import { s as styleInject, u as useViewHandler } from './index-034e1c95.js';
+import { useEffect } from 'react';
+import Inputbox from './index-6dcc6591.js';
+import Settings from './index-ce6f2a71.js';
+import TabGroup from './index-55d6d6c8.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import Toolbar from './index-b954e13c.js';
+import NavigationButtons from './index-635bbbd6.js';
+import ContentItemWrapper from './index-6532ca7f.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-e9113204.js';
+import './index-f843752a.js';
+import './index-b5dc9b75.js';
+import './index-083cd35f.js';
+import './index-591525db.js';
+import 'react-laag';
+import './index-8c0bd0f8.js';
+import './index-21649d28.js';
+import './index-78e7c005.js';
+import 'sift';
+import './index-d6d94fd5.js';
+import './index-2a4765d2.js';
+import './index-df518346.js';
+import './index-b4ac4fbd.js';
+import './index.module-6cc345c7.js';
+import './index-d9976c89.js';
+import 'react-switch';
+import './index-f00f3588.js';
+import './index-78fde959.js';
+import './index-da83e692.js';
+import 'react-dropdown';
+import './index-d2c16770.js';
+import './index-cd5a122c.js';
+import './index-b62e4807.js';
+import './index-c7b37e31.js';
+import '@crystaldesign/content-box';
+import './index-7c196a2c.js';
+import './index-a60d93e3.js';
+import './index-60b4528e.js';
+import './index-52036c1d.js';
+import './index-2cb945e9.js';
+import '@crystaldesign/product-detail-page';
+import '@crystaldesign/products-component';
+import './index-9d7499cf.js';
+import './index-b3193210.js';
+import './index-697b001e.js';
+import './index-b54038c8.js';
+import './index-a0a3b3e7.js';
+import './index-131b17c0.js';
+import './index-4daa4876.js';
+import './index-4021bc0c.js';
+import './index-3e0b95d4.js';
+import './index-191e3a36.js';
+import './index-d11881ef.js';
+import './index-a041f4fc.js';
+import './index-c3107a1d.js';
+import './index.module-56d7f9de.js';
+import './index-d8ea3e57.js';
+import './index-ade970bb.js';
+import './index-8c1e7d1d.js';
+import './index-d6903ea9.js';
+import './index-2bb9a7b4.js';
+import './index-c6123a23.js';
+import './index-a852177b.js';
+import './index.module-f6689f40.js';
+import './index-558ead5f.js';
+import './index-a46ec6f7.js';
+import './index-96bc4dbf.js';
+import './index-7c5e7f31.js';
+import './index-644b96d9.js';
+import './index-5b9373c9.js';
+import './index-e793b547.js';
+import './index-f0baeef3.js';
+import './index-5eeb09fe.js';
+import './index-4fb08f0c.js';
+import './index.module-58e2424c.js';
+import './index-695a8238.js';
+import './index-540291b0.js';
+import './index-40caf916.js';
+import 'react-collapsible';
+import './index-c211ffb9.js';
+import './index-07aa0742.js';
+import './index.module-2f0be46a.js';
+import 'react-json-view-lite';
+import './react-json-viewer-4752da8c.js';
+import './index-ff705013.js';
+import './index.module-7a70ad42.js';
+import './index-9cbeb21b.js';
+import 'jsoneditor';
+import './index-daaf0da0.js';
+import './index-63e4664f.js';
+import './index-a55ec6d4.js';
+import './index-378df364.js';
+import './index-19f1eb01.js';
+import './index.module-4a73e6d9.js';
+import './index-eadb69da.js';
+import './index-86677954.js';
+import './index-852360d7.js';
+import './index-d09ab490.js';
+import './index.module-497fbb9d.js';
+import './index-e15c8208.js';
+import './index-b5c9fec7.js';
+import './index-cfa6c583.js';
+import './index-0f8eda17.js';
+import './index-4cafcf17.js';
+import './index-6633b2fe.js';
+import './index-3b52bead.js';
+import './CatalogProperties-55763d8b.js';
+import './ArticleProperties-88554e7a.js';
+import './OptionProperties-d91c735f.js';
+import './OptionValueProperties-62f4cde5.js';
+import 'react-select';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var wcConfigurator = "wcConfigurator-XqlAg";
+var wcConfiguratorSteps = "wc-configurator-steps-KdP9s";
+var mobile = "mobile-PPTgR";
+var wcConfiguratorSettings = "wc-configurator-Settings-dVmBR";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-yVOyu";
+var css_248z = ".wcConfigurator-XqlAg {\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  flex-direction: column;\n}\n\n.wcConfigurator-XqlAg *,\n.wcConfigurator-XqlAg *::before,\n.wcConfigurator-XqlAg *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-KdP9s {\n  height: 56px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin: 0 8px;\n}\n.mobile-PPTgR .wc-configurator-steps-KdP9s {\n  height: 40px;\n}\n\n.wc-configurator-Settings-dVmBR {\n  height: calc(100% - 56px - 42px - 40px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n.mobile-PPTgR .wc-configurator-Settings-dVmBR {\n  height: calc(100% - 40px - 42px - 40px);\n}\n\n.wcConfigurator-settings-actions-yVOyu {\n  height: 40px;\n  z-index: 1001;\n}\n";
+styleInject(css_248z);
+
+var Wysiwyg = function Wysiwyg(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(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: classnames(wcConfigurator, viewHandler.getIsInMobileView() ? mobile : undefined),
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), /*#__PURE__*/jsx(NavigationButtons, {
+        className: wcConfiguratorSettingsActions,
+        showBackButtonText: true
+      }), /*#__PURE__*/jsx(Toolbar, {}), viewHandler.settingsState.contentItemId && /*#__PURE__*/jsx(ContentItemWrapper, {
+        id: viewHandler.settingsState.contentItemId,
+        startPos: "right"
+      })]
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#df2927',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#fefefe',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--thirdColor)',
+  '--foldArrowMarginRight': '16px',
+  '--configuratorActionWidthForthBackSpacer': '0.1rem',
+  '--configuratorActionForthWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--configuratorActionBackWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--itemsMargin': '0.3125rem'
+};
+var index = observer(Wysiwyg);
+
+export { cssVariables, index as default };

package/build/esm/index-a39b86cf.js

@@ -0,0 +1,128 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler, a as usePlannerUIHandler } from './index-034e1c95.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { jsx, Fragment } 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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var mouseDownDetected = false;
+var polygonSelected = false;
+var Outline3D = function Outline3D(_ref) {
+  var items = _ref.items,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var viewHandler = useViewHandler();
+  var plannerUIHandler = usePlannerUIHandler();
+  if (viewHandler.uiState.isLoading) return /*#__PURE__*/jsx(Fragment, {});
+  var on3DPlannerBGClick = function on3DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+  };
+  var renderPolygon = function renderPolygon(item) {
+    switch (item.elemState) {
+      case 'selectable':
+        return /*#__PURE__*/jsx("polygon", {
+          onMouseUp: function onMouseUp(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction;
+              (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onTouchEnd: function onTouchEnd(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction2;
+              (_item$clickFunction2 = item.clickFunction) === null || _item$clickFunction2 === void 0 || _item$clickFunction2.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (!isDragging) plannerUIHandler.updateOnHoverOutline3D(true, item, 'PosNr');
+          },
+          onMouseLeave: function onMouseLeave() {
+            plannerUIHandler.updateOnHoverOutline3D(false, item, 'PosNr');
+          },
+          points: item.polygonPoints,
+          style: {
+            zIndex: item.zIndex
+          },
+          className: classnames(item.type == 'Outline3D' ? plannerUIProps.classes.outline.outline3D.outlinePolygon : undefined, item.type == 'Outline3D_Contour' ? plannerUIProps.classes.outline.outline3D.outlinePolygonContours : undefined)
+        }, item.key.toString());
+      case 'selected':
+        if (item.type == 'Outline3D_Contour') {
+          return /*#__PURE__*/jsx("polygon", {
+            points: item.polygonPoints,
+            style: {
+              zIndex: item.zIndex
+            },
+            className: classnames(plannerUIProps.classes.outline.outline3D.outlinePolygonContoursSel)
+          }, item.key.toString());
+        }
+    }
+    return '';
+  };
+  return /*#__PURE__*/jsx("svg", {
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onTouchStart: function onTouchStart(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onTouchMove: function onTouchMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onMouseUp: function onMouseUp(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    ref: function ref(_ref2) {
+      viewHandler.productState.setPlanner3DImageSvgArea(_ref2);
+      //viewHandler.viewModel.htmlElementRefs.planner3DImageSvgArea = ref as any;
+    },
+    style: {
+      zIndex: 100,
+      touchAction: 'pan-x pan-y',
+      height: '100%'
+    },
+    className: classnames(plannerUIProps.classes.outline.outline3D.outlineSVG),
+    children: items.map(function (item, i) {
+      return renderPolygon(item);
+    })
+  }, items.length > 0 ? items[0].key : Math.random());
+};
+var Outline3D$1 = observer(Outline3D);
+
+export { Outline3D$1 as default };

package/build/esm/index-a449b1e9.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-034e1c95.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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 ProductHeader = function ProductHeader(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductHeader/ProductHeader"
+  }));
+};
+
+export { ProductHeader as default };

package/build/esm/index-a46ec6f7.js

@@ -0,0 +1,52 @@
+import { s as styleInject, u as useViewHandler } from './index-034e1c95.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };

package/build/esm/index-a53f9795.js

@@ -0,0 +1,189 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-034e1c95.js';
+import 'react';
+import { s as shelfPlannerContainerRtv, a as shelfPlannerContainerHorizontal, b as shelfPlannerContainerVertical, e as expanded, c as shelfGrid, d as shelfGridBorder, w as warning, f as accessoires, g as configHeaderWrapper, h as closeButton, n as name, S as SelectedAcc, i as accessoireContainer } from './index-53c43842.js';
+import { S as SettingsItem, c as collapsableInner } from './index-78e7c005.js';
+import ShelfAccessoires from './index-427c8b97.js';
+import ShelfAccessoiresOld from './index-954e7eb0.js';
+import GridList from './index-3645f5e6.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'sift';
+import './index-d6d94fd5.js';
+import './index-f843752a.js';
+import './index-2a4765d2.js';
+import './index-df518346.js';
+import './index-b4ac4fbd.js';
+import './index.module-6cc345c7.js';
+import './index-d9976c89.js';
+import 'react-switch';
+import './index-f00f3588.js';
+import './index-78fde959.js';
+import './index-da83e692.js';
+import 'react-dropdown';
+import './index-d2c16770.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-cd5a122c.js';
+import './index-b62e4807.js';
+import './index-c7b37e31.js';
+import '@crystaldesign/content-box';
+import './index-7c196a2c.js';
+import './index-a60d93e3.js';
+import './index-60b4528e.js';
+import './index-52036c1d.js';
+import './index-2cb945e9.js';
+import '@crystaldesign/product-detail-page';
+import '@crystaldesign/products-component';
+import './index-9d7499cf.js';
+import './index-b3193210.js';
+import './index-697b001e.js';
+import 'react-laag';
+import './index-b54038c8.js';
+import './index-a0a3b3e7.js';
+import './index-131b17c0.js';
+import './index-4daa4876.js';
+import './index-4021bc0c.js';
+import './index-3e0b95d4.js';
+import './index-191e3a36.js';
+import './index-d11881ef.js';
+import './index-a041f4fc.js';
+import './index-c3107a1d.js';
+import './index.module-56d7f9de.js';
+import './index-d8ea3e57.js';
+import './index-ade970bb.js';
+import './index-8c1e7d1d.js';
+import './index-d6903ea9.js';
+import './index-2bb9a7b4.js';
+import './index-c6123a23.js';
+import './index-a852177b.js';
+import './index.module-f6689f40.js';
+import './index-558ead5f.js';
+import './index-a46ec6f7.js';
+import 'react-beautiful-dnd';
+import './index-fe276f04.js';
+
+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 ShelfPlanner = function ShelfPlanner(_ref) {
+  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3, _viewHandler$settings4, _item$shelfPlannerGri, _item$shelfPlannerGri2, _item$shelfPlannerGri3, _filteredGroups$0$ite, _filteredGroups$, _selAccItem, _selAccItem2;
+  var item = _ref.item,
+    style = _ref.style,
+    filteredGroups = _ref.filteredGroups;
+  var viewHandler = useViewHandler();
+  var height = ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) - 10;
+  var width = ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().width) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) - 16;
+  var grid = (_item$shelfPlannerGri = item === null || item === void 0 || (_item$shelfPlannerGri2 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri2 === void 0 ? void 0 : _item$shelfPlannerGri2.find(function (g) {
+    return g.ActAccessoire;
+  })) !== null && _item$shelfPlannerGri !== void 0 ? _item$shelfPlannerGri : item === null || item === void 0 || (_item$shelfPlannerGri3 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri3 === void 0 ? void 0 : _item$shelfPlannerGri3[0];
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var items = (_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : [];
+  var selAcc = grid.ActAccessoire;
+  var selAccItem = undefined;
+  if (selAcc) {
+    selAccItem = items.find(function (item) {
+      return item.articleCodex == selAcc;
+    });
+  }
+  var requiredWarning = grid.getRequiredWarning(viewHandler.configState.lang);
+  var palettesOfSelectedAcc = [];
+  if ((_selAccItem = selAccItem) !== null && _selAccItem !== void 0 && (_selAccItem = _selAccItem.configStepKeys) !== null && _selAccItem !== void 0 && _selAccItem.length) {
+    var _loop = function _loop() {
+      var stepKey = selAccItem.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2);
+          _ref3[0];
+          var itemPalette = _ref3[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (viewHandler.settingsState.selectedShelfAccessoire == stepKey.basketId) palettesOfSelectedAcc.push(itemPalette[1]);
+    };
+    for (var i = 0; i < selAccItem.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      return item.htmlRef = _ref4;
+    },
+    className: classnames(viewHandler.productState.shelfPlannerRTV ? shelfPlannerContainerRtv : undefined, grid.Direction == 'horizontal' ? shelfPlannerContainerHorizontal : shelfPlannerContainerVertical, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    style: _objectSpread({
+      height: height
+    }, style),
+    children: [!viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx("div", {
+      className: shelfGrid,
+      children: /*#__PURE__*/jsx("div", {
+        className: shelfGridBorder,
+        children: /*#__PURE__*/jsx(GridList, {
+          item: item,
+          direction: grid.Direction,
+          width: width,
+          height: height - 16 - 16
+        })
+      })
+    }), requiredWarning && /*#__PURE__*/jsx("div", {
+      className: warning,
+      dangerouslySetInnerHTML: {
+        __html: requiredWarning
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: accessoires,
+      children: [!!palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: configHeaderWrapper,
+          onClick: function onClick() {
+            return viewHandler.settingsState.setSelectedShelfAccessoire();
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: closeButton
+          }), /*#__PURE__*/jsx("div", {
+            className: name,
+            children: (_selAccItem2 = selAccItem) === null || _selAccItem2 === void 0 ? void 0 : _selAccItem2.name
+          })]
+        }), palettesOfSelectedAcc.map(function (item, index) {
+          return /*#__PURE__*/jsx(SettingsItem, {
+            item: item,
+            id: item.id
+          }, index);
+        })]
+      }), !palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(SelectedAcc, {
+          selAccItem: selAccItem
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(accessoireContainer, collapsableInner),
+          style: {
+            height: grid.Direction == 'horizontal' ? height - 80 : ''
+          },
+          children: items.map(function (acc, key) {
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoires, {
+                grids: item.shelfPlannerGrids,
+                item: acc,
+                sel: acc.articleCodex == selAcc
+              }, key), !viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoiresOld, {
+                grids: item.shelfPlannerGrids,
+                item: acc
+              }, key)]
+            });
+          })
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ShelfPlanner);
+
+export { index as default };