@crystaldesign/diva-web-planner-react 24.13.0-rc.2 → 24.13.0-rc.21

package/build/esm/index-0a40a4e4.js

@@ -0,0 +1,42 @@
+import './index-6177a8f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { 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';
+
+var ElementCopy = function ElementCopy(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.doUseCalc ? rect.leftCalc : item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: rect.doUseCalc ? rect.topCalc : item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.copy.ElementCopy, plannerUIProps.classes.buttonGeneral)
+  });
+};
+var ElementCopy$1 = observer(ElementCopy);
+
+export { ElementCopy$1 as default };

package/build/esm/index-0dbba601.js

@@ -0,0 +1,111 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-6177a8f1.js';
+import Article from './index-1be5f85e.js';
+import SummaryOptionTree from './index-e828e862.js';
+import SummaryArticles from './index-fb412b79.js';
+import SettingsItemAccessoireTemplate from './index-ec69dcdb.js';
+import ItemVariant from './index-15600cc4.js';
+import SettingsItemDefaultTemplate from './index-852e048a.js';
+import Range from './index-918fb537.js';
+import SettingsItemRoomTemplate from './index-8dac78d7.js';
+import ViewPoint from './index-86205dfc.js';
+import NumberBox from './index-2667fc32.js';
+import PlannerSwitch from './index-7c9fdfb0.js';
+import SummaryPartlist from './index-c4978a7e.js';
+import Varaint from './index-d087192a.js';
+import GalleryText from './index-93e71532.js';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+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 'mobx-react-lite';
+import 'classnames';
+import 'react-laag';
+import './index-ebe7561f.js';
+import './index-a8bbb6ff.js';
+import './index-051ad641.js';
+import './index.module-9ea7156f.js';
+import './index-a373fe03.js';
+import './index-b2c11fbb.js';
+import './index-fcae2025.js';
+import 'react-switch';
+import './index.module-0ad038d3.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 itemPaletteTypeComponentMap = {
+  ART: Article,
+  PLANNERSWITCH: PlannerSwitch,
+  ACC: SettingsItemAccessoireTemplate,
+  ACC_CONFIG: SettingsItemAccessoireTemplate,
+  VERY_SMALL: SettingsItemDefaultTemplate,
+  SMALL: SettingsItemDefaultTemplate,
+  GAL_GROUP_DROPDOWN: SettingsItemDefaultTemplate,
+  GAL_SMALL_GROUP_DROPDOWN: ItemVariant,
+  GAL: ItemVariant,
+  GAL_SMALL: ItemVariant,
+  GAL_BIG: ItemVariant,
+  RANGE: Range,
+  NUMBER: NumberBox,
+  SUMMARY_PARTLIST: SummaryPartlist,
+  SUMMARY_ARTICLES: SummaryArticles,
+  SUMMARY_OPTIONTREE: SummaryOptionTree,
+  VARIANTS: Varaint,
+  STATICROOM: SettingsItemRoomTemplate,
+  VIEWPOINT: ViewPoint,
+  DROPDOWN_TEXT: function DROPDOWN_TEXT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DROPDOWN_IMAGE: function DROPDOWN_IMAGE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE: function TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_HEADER: function TOGGLE_HEADER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_NAME: function TOGGLE_NAME() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DOOR_PLANNER: function DOOR_PLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TEXTBOX: function TEXTBOX() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SHELFPLANNER: function SHELFPLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PRODUCTS: function PRODUCTS() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PROMOTED: function PROMOTED() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  GAL_TEXT: function GAL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT: function GAL_BIG_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT: function GAL_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  }
+};
+
+export { itemPaletteTypeComponentMap as default };

package/build/esm/index-0fa9444d.js

@@ -0,0 +1,101 @@
+import { s as styleInject, u as useViewHandler } from './index-6177a8f1.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { useDivaCore } from '@crystaldesign/diva-core';
+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/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 container = "container-bxM6C";
+var hidden = "hidden-X63IT";
+var mobile = "mobile--b4Sq";
+var wrapper = "wrapper-jE0i2";
+var imageItem = "image-item-2MypG";
+var sel = "sel-9mQFl";
+var css_248z = ".container-bxM6C {\n  position: absolute;\n  top: 20%;\n  right: 16px;\n  z-index: 700;\n  -webkit-tap-highlight-color: transparent;\n  width: 50px;\n  height: 100%;\n  transition: opacity 0.5s;\n}\n\n.hidden-X63IT {\n  opacity: 0;\n  z-index: 0;\n}\n\n.mobile--b4Sq.container-bxM6C {\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  bottom: 8px;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 50%;\n  border-radius: 48px;\n  height: 40px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.wrapper-jE0i2 {\n  background-color: #f2f2f2;\n  border-radius: 40px;\n  position: relative;\n  height: -moz-min-content;\n  height: min-content;\n  max-height: 60%;\n  display: flex;\n  padding-left: 7px;\n  padding-right: 7px;\n  overflow: hidden;\n}\n\n.mobile--b4Sq .wrapper-jE0i2 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: 0;\n  padding-left: initial;\n  padding-right: 0;\n  padding-right: initial;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 100%;\n  height: 32px;\n  max-height: none;\n  max-height: initial;\n  display: block;\n}\n\n.image-item-2MypG {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f8f8f8 2px;\n  display: block;\n  cursor: pointer;\n  transition: border-color 200ms ease;\n}\n\n.mobile--b4Sq .image-item-2MypG {\n  width: 28px;\n  height: 28px;\n  margin-top: 0;\n  margin-top: initial;\n  margin-bottom: 0;\n  margin-bottom: initial;\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n.sel-9mQFl.image-item-2MypG {\n  border: 2px solid #4f4f4f;\n}\n\n.image-item-2MypG:hover {\n  cursor: pointer;\n  border: solid #9d9d9d 2px;\n}\n";
+styleInject(css_248z);
+
+var PromotedOpvs = function PromotedOpvs(props) {
+  var _viewHandler$settings, _promotedOpvs$article;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    height = _useDivaCore$state$di.height,
+    width = _useDivaCore$state$di.width;
+  useEffect(function () {
+    if (viewHandler.productState.configChangedByPromoOpvs) {
+      viewHandler.productState.setConfigChangedByPromoOpvs(false);
+    } else {
+      viewHandler.productState.setSelectedPromitionIndex(undefined);
+    }
+  }, [viewHandler.settingsState.configChanged]);
+  var contents = [];
+  var catalogData = viewHandler.divaWebPlanner.getCatalogData();
+  var promotedOpvs = catalogData === null || catalogData === void 0 ? void 0 : catalogData.promotedOpvs;
+  var selectedArticleCodex = (_viewHandler$settings = viewHandler.settingsState.selectedArticles) === null || _viewHandler$settings === void 0 || (_viewHandler$settings = _viewHandler$settings[0]) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.codex;
+  if (viewHandler.uiState.isLoading || !selectedArticleCodex || !promotedOpvs) return /*#__PURE__*/jsx(Fragment, {});
+  if (!viewHandler.productState.promotionVisible || !((_promotedOpvs$article = promotedOpvs.articles[selectedArticleCodex]) !== null && _promotedOpvs$article !== void 0 && _promotedOpvs$article.length)) {
+    if (viewHandler.uiState.configSettingsIsHidden) viewHandler.uiState.onClickHideConfigSettings();
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var _loop = function _loop(i) {
+    var promo = promotedOpvs.articles[selectedArticleCodex][i];
+    var opv = catalogData.getOptionValue(promo.displayOPV);
+    contents.push({
+      swiperSlideStyle: {
+        height: 'auto',
+        width: 'auto'
+      },
+      content: /*#__PURE__*/jsx("span", {
+        onClick: function onClick(e) {
+          return viewHandler.productState.onPromotionClick(promo.variantValues, i);
+        },
+        style: {
+          backgroundImage: 'url(' + (opv !== null && opv !== void 0 && opv.image ? catalogData.getCatImageURL(opv.image, '_gal') : '') + ')'
+        },
+        className: classnames(imageItem, viewHandler.productState.selectedPromotionIndex === i ? sel : undefined)
+      }, i)
+    });
+  };
+  for (var i = 0; i < promotedOpvs.articles[selectedArticleCodex].length; i++) {
+    _loop(i);
+  }
+  var sliderProps = {
+    type: 'SliderContainer',
+    sliderType: viewHandler.uiState.isInMobileView ? 'slideX' : 'slideY',
+    slidesPerView: 'auto',
+    freeMode: true,
+    allowTouchMove: true,
+    contents: contents,
+    scrollToSelectedItem: true,
+    mousewheel: true
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(container, viewHandler.uiState.isInMobileView ? mobile : undefined, !viewHandler.uiState.configSettingsIsHidden ? hidden : undefined),
+    children: /*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: sliderProps
+          }
+        }, +height + width)
+      })
+    })
+  });
+};
+var PromotedOpvs$1 = observer(PromotedOpvs);
+
+export { PromotedOpvs$1 as default };

package/build/esm/index-1088ef05.js

@@ -0,0 +1,48 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-6177a8f1.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { r as reactJson, a as reactJsonExpanded } from './index.module-78c8df80.js';
+import classnames from 'classnames';
+import ReactJson from 'react-json-view';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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';
+
+var _excluded = ["json", "isExpanded", "collapsed"];
+var JsonViewer = function JsonViewer(_ref) {
+  var json = _ref.json,
+    isExpanded = _ref.isExpanded,
+    _ref$collapsed = _ref.collapsed,
+    collapsed = _ref$collapsed === void 0 ? 1 : _ref$collapsed;
+    _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx("div", {
+      className: classnames(reactJson, isExpanded ? reactJsonExpanded : undefined),
+      children: /*#__PURE__*/jsx(ReactJson, {
+        collapseStringsAfterLength: false,
+        enableClipboard: false,
+        collapsed: collapsed,
+        displayDataTypes: false,
+        displayObjectSize: false,
+        shouldCollapse: false,
+        theme: 'ashes',
+        src: json
+      }, viewHandler.settingsState.configChanged)
+    })
+  });
+};
+var JsonViewer$1 = observer(JsonViewer);
+
+export { JsonViewer$1 as default };

package/build/esm/index-11afc5e9.js

@@ -0,0 +1,44 @@
+import './index-6177a8f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { 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';
+
+var Trash = function Trash(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.doUseCalc ? rect.leftCalc : item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: rect.doUseCalc ? rect.topCalc : item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.trash, plannerUIProps.classes.buttonGeneral),
+    id: "testDel",
+    children: item.posNr
+  });
+};
+var Trash$1 = observer(Trash);
+
+export { Trash$1 as default };

package/build/esm/index-12276d85.js

@@ -0,0 +1,187 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-6177a8f1.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-dfd3f7bc.js';
+import { S as SettingsItem, c as collapsableInner } from './index-02b1ad96.js';
+import ShelfAccessoires from './index-20c4c490.js';
+import ShelfAccessoiresOld from './index-68018b4f.js';
+import GridList from './index-c9e815da.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-947d5a0a.js';
+import './index-509577cb.js';
+import './index-2ac582da.js';
+import './index-c0ce2bf4.js';
+import './index-e586ef31.js';
+import './index.module-857ed89a.js';
+import './index-fcae2025.js';
+import 'react-switch';
+import './index-051ad641.js';
+import './index-79cc4bed.js';
+import 'react-dropdown';
+import './index-ec269ceb.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-66ad06ec.js';
+import './index-7d98aa77.js';
+import './index-39eab3f3.js';
+import '@crystaldesign/content-box';
+import './index-5b70a2a2.js';
+import './index-f4638b08.js';
+import './index-ce796a38.js';
+import './index-d703cc39.js';
+import './index-546a5033.js';
+import '@crystaldesign/products-component';
+import './index-fba1a7c2.js';
+import './index-0dbba601.js';
+import './index-1be5f85e.js';
+import 'react-laag';
+import './index-ebe7561f.js';
+import './index-a8bbb6ff.js';
+import './index-e828e862.js';
+import './index-fb412b79.js';
+import './index-ec69dcdb.js';
+import './index-15600cc4.js';
+import './index-852e048a.js';
+import './index-918fb537.js';
+import './index-8dac78d7.js';
+import './index-86205dfc.js';
+import './index.module-9ea7156f.js';
+import './index-a373fe03.js';
+import './index-2667fc32.js';
+import './index-b2c11fbb.js';
+import './index-7c9fdfb0.js';
+import './index-c4978a7e.js';
+import './index-d087192a.js';
+import './index-93e71532.js';
+import './index.module-0ad038d3.js';
+import './index-f60ef6f6.js';
+import './index-d6317d52.js';
+import 'react-beautiful-dnd';
+import './index-1f67f007.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 };