@crystaldesign/diva-web-planner-react 24.12.1 → 24.12.2

package/build/esm/index-2aea635c.js

@@ -0,0 +1,213 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-b1ce50e8.js';
+import React, { useState, useEffect, Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import sift from 'sift';
+import TextBox from './index-ea629c8c.js';
+import ItemVariant from './index-544849b2.js';
+import SettingsPaletteGroup from './index-99c6d749.js';
+import ToggleOption from './index-18c3125f.js';
+import GroupDropdown from './index-e803fc98.js';
+import PromotedProducts from './index-20cccd24.js';
+import ToggleName from './index-d2d373d7.js';
+import ProductList from './index-c2f5f0fe.js';
+import itemPaletteTypeComponentMap from './index-929e26ea.js';
+import ItemWrapper from './index-f31f8a63.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var collapsableInner = "collapsable-inner-YPvJa";
+var css_248z = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ShelfPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-f99568af.js');
+});
+var DoorPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-254bbd22.js');
+});
+var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
+  var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
+  var item = _ref.item,
+    groupSize = _ref.groupSize;
+  var viewHandler = useViewHandler();
+  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
+  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredGroups = _useState2[0],
+    setFilteredGroups = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredGroupsWithEmptyGroups = _useState4[0],
+    setFilteredGroupsWithEmptyGroups = _useState4[1];
+  useEffect(function () {
+    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
+      return _objectSpread(_objectSpread({}, group), {}, {
+        items: item.currentItemsFilter ? group.items.filter(sift(item.currentItemsFilter)) : group.items
+      });
+    });
+    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
+      return group.items.length > 0;
+    });
+    if (filteredGroups.length > 0) {
+      filteredGroupsWithEmptyGroups = filteredGroups;
+    }
+    setFilteredGroups(filteredGroups);
+    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
+  }, [item, viewHandler.settingsState.itemPalettes]);
+  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
+  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
+
+  //this code now sets a css variable within a specific palette to define the grid items size and gird gap
+  //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
+  //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
+  var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
+  var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
+  var gridItemSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
+  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
+    gridItemSize = '240px';
+  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
+    gridItemSize = 'calc(100% - 20px)';
+  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
+    gridItemSize = '100px';
+  } else if (item.type == 'ACC') {
+    if (settingsSizes.sizeAccessoires) {
+      gridItemSize = settingsSizes.sizeAccessoires;
+    }
+  } else if (item.type == 'ACC_CONFIG') {
+    gridItemSize = '100%';
+  } else if (item.type.startsWith('GAL_SMALL')) {
+    gridItemSize = '60px';
+  } else if (item.type == 'RANGE') {
+    gridItemSize = '100%';
+  } else if (item.type == 'GAL') {
+    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
+    gridItemSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
+    gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
+  } else if (item.type === 'PLANNERSWITCH') {
+    gridItemSize = '170px';
+  } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
+    //for the usecase of schlaraffia in mobile
+    //TODO for refactorig this should be done nicer
+    gridItemSize = '120px';
+  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
+    gridItemSize = '120px';
+  } else if (item.type === 'VERY_SMALL') {
+    gridItemSize = '48%';
+  } else if (item.type === 'GAL_TEXT') {
+    gridItemSize = '100px';
+  } else if (item.type === 'GAL_BIG_TEXT') {
+    gridItemSize = '120px';
+  } else if (item.type === 'GAL_SMALL_TEXT') {
+    gridItemSize = '70px';
+  }
+  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
+  switch (item.type) {
+    case 'TOGGLE':
+      return /*#__PURE__*/jsx(ToggleOption, {
+        item: item,
+        paletteId: item.id
+      });
+    case 'TOGGLE_NAME':
+      return /*#__PURE__*/jsx(ToggleName, {
+        item: item,
+        paletteId: item.id
+      });
+    case 'TEXTBOX':
+      return /*#__PURE__*/jsx(TextBox, {
+        item: item,
+        paletteId: item.id
+      });
+    case 'DROPDOWN_TEXT':
+    case 'DROPDOWN_IMAGE':
+      return /*#__PURE__*/jsx(ItemVariant, {
+        item: item,
+        paletteId: item.id
+      });
+    case 'NUMBER':
+      return /*#__PURE__*/jsx(PaletteComponent, {
+        paletteId: item.id,
+        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
+        groupSize: groupSize
+      }, item.id + item.configStepKey);
+    case 'SHELFPLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(ShelfPlanner, {
+          item: item,
+          id: item.id,
+          style: {
+            '--gridSize': gridItemSize,
+            '--gridGap': gridGap
+          }
+        }, item.id)
+      });
+    case 'PRODUCTS':
+      return /*#__PURE__*/jsx(ProductList, {
+        item: item
+      });
+    case 'PROMOTED':
+      return /*#__PURE__*/jsx(PromotedProducts, {
+        item: item
+      });
+    case 'DOOR_PLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(DoorPlanner, {
+          item: item
+        })
+      });
+    case 'GAL_GROUP_DROPDOWN':
+    case 'GAL_SMALL_GROUP_DROPDOWN':
+      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
+        item: item,
+        PaletteComponent: PaletteComponent,
+        filteredGroups: filteredGroupsWithEmptyGroups,
+        id: item.id,
+        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
+        contentInnerClassName: innerGridClass
+      }, item.configStepKey);
+      return /*#__PURE__*/jsx(ItemWrapper, {
+        gridGap: gridGap,
+        gridItemSize: gridItemSize,
+        item: item,
+        children: childGroup
+      });
+    default:
+      var children;
+      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
+        className: innerGridClass,
+        children: filteredGroups.map(function (group) {
+          return group.items.map(function (paletteItem, i) {
+            return /*#__PURE__*/jsx(PaletteComponent, {
+              paletteType: item.type,
+              paletteId: item.id,
+              item: paletteItem
+            }, i);
+          });
+        })
+      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
+        groups: filteredGroups,
+        contentInnerClassName: innerGridClass,
+        itemPalette: item,
+        PaletteComponent: PaletteComponent
+      });
+      return /*#__PURE__*/jsx(ItemWrapper, {
+        gridGap: gridGap,
+        gridItemSize: gridItemSize,
+        item: item,
+        children: children
+      });
+  }
+};
+var SettingsItem = observer(SettingsPaletteItem);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SettingsItem
+});
+
+export { SettingsItem as S, collapsableInner as c, index as i };

package/build/esm/index-2b5ec618.js

@@ -0,0 +1,75 @@
+import { s as styleInject, u as useViewHandler } from './index-b1ce50e8.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, DivaUtils } 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 container = "container-GW5iG";
+var mobile = "mobile-PkDVb";
+var image = "image-afs5h";
+var textContainer = "textContainer-eYs6D";
+var expanded = "expanded-0VaOS";
+var articleName = "articleName-YT5oo";
+var posNrContainer = "posNrContainer-sis0e";
+var posNrHeightFitter = "posNrHeightFitter-LVv74";
+var quantity = "quantity-nayMq";
+var price = "price-ZyMfu";
+var css_248z = ".container-GW5iG {\n  position: relative;\n  border-top: 1px solid #c6c6c6;\n  margin: 0 16px;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: row;\n}\n\n.container-GW5iG.mobile-PkDVb {\n  margin: 0;\n}\n\n.image-afs5h {\n  max-height: 5rem;\n  max-width: 30%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.textContainer-eYs6D {\n  position: relative;\n  height: 80px;\n  width: calc(70% - 80px);\n  overflow: auto;\n  margin-left: 16px;\n}\n.mobile-PkDVb .textContainer-eYs6D {\n  word-break: break-word;\n}\n.expanded-0VaOS .textContainer-eYs6D {\n  width: calc(50% - 80px);\n}\n\n.articleName-YT5oo {\n  font-weight: 300;\n}\n\n.posNrContainer-sis0e {\n  margin-left: 16px;\n  text-align: center;\n  height: 5rem;\n  width: calc(20% - 16px);\n  position: relative;\n}\n.posNrHeightFitter-LVv74 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n}\n\n.posNrContainer-sis0e span {\n  background: var(--thirdColor);\n  border-radius: var(--articlePosNrRadius);\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 1.27rem;\n  min-width: 1.27rem;\n  width: 2rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  text-align: center;\n  display: inline-block;\n  padding: 0 1px;\n  -webkit-text-stroke: 0.5px;\n  margin-bottom: 0.2rem;\n}\n\n.quantity-nayMq {\n  margin-left: 16px;\n  width: calc(10% - 16px);\n  height: 5rem;\n  font-style: italic;\n  font-weight: 600;\n  text-align: center;\n  line-height: 5rem;\n}\n.price-ZyMfu {\n  margin-left: 16px;\n  width: calc(20% - 16px);\n  height: 5rem;\n  font-weight: 600;\n  line-height: 5rem;\n  text-align: center;\n  white-space: nowrap;\n}\n";
+styleInject(css_248z);
+
+var Articles = function Articles(_ref) {
+  var _item$targetArticlePo;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var isExpanded = viewHandler.uiState.configSettingsIsExpanded || viewHandler.uiState.configSettingsIsMaxExpanded;
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, isExpanded ? expanded : undefined, isMobile ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("img", {
+      className: classnames(image),
+      src: item.image
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(textContainer),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(articleName),
+        children: item.title
+      }), item.description && /*#__PURE__*/jsx("span", {
+        children: item.description
+      })]
+    }), isExpanded && !isMobile && /*#__PURE__*/jsx("div", {
+      className: classnames(posNrContainer),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(posNrHeightFitter),
+        children: (_item$targetArticlePo = item.targetArticlePosNrs) === null || _item$targetArticlePo === void 0 ? void 0 : _item$targetArticlePo.map(function (posNr, key) {
+          return /*#__PURE__*/jsx("span", {
+            children: posNr
+          }, key);
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(quantity),
+      children: item.quantity + 'x'
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(price),
+      children: DivaUtils.formatPrice(item.price)
+    })]
+  });
+};
+var SummaryArticles = observer(Articles);
+
+export { SummaryArticles as default };

package/build/esm/index-2b89fc2f.js

@@ -0,0 +1,37 @@
+import { s as styleInject } from './index-b1ce50e8.js';
+import ProductHeader from './index-f49fead3.js';
+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';
+import 'mobx-react-lite';
+import 'classnames';
+import './index-9c37e259.js';
+import '@crystaldesign/content-box';
+import './index-e9717fd4.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var productHeader = "productHeader-19YtG";
+var css_248z = ".productHeader-19YtG h1 {\n  font-weight: 700;\n}\n";
+styleInject(css_248z);
+
+var ProductHeaderRalph = function ProductHeaderRalph(props) {
+  return /*#__PURE__*/jsx(ProductHeader, {
+    hidePrice: true,
+    productClass: productHeader
+  });
+};
+
+export { ProductHeaderRalph as default };

package/build/esm/index-2c822684.js

@@ -0,0 +1,82 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-b1ce50e8.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+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/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 inputBox = "inputBox-wq5O7";
+var css_248z = ".inputBox-wq5O7 {\n  width: 70px;\n  font-size: 20px;\n  height: 22px;\n}\n";
+styleInject(css_248z);
+
+var NumberInput = function NumberInput(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useState = useState(item.numberInput),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputGotChangedByComponent = _useState4[0],
+    setInputGotChangedByComponent = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    invalidValue = _useState6[0],
+    setInvalidValue = _useState6[1];
+  useEffect(function () {
+    var _item$groups;
+    var opvItem = (_item$groups = item.groups) === null || _item$groups === void 0 || (_item$groups = _item$groups[0].items) === null || _item$groups === void 0 ? void 0 : _item$groups[0];
+    if (inputValue && opvItem && !isNaN(inputValue) && Number(opvItem.measureMinimum) <= inputValue && Number(opvItem.measureMaximum) >= inputValue) {
+      setInvalidValue(false);
+      if (inputValue !== Number(opvItem.freeText)) {
+        if (inputGotChangedByComponent) {
+          setInputGotChangedByComponent(false);
+          onRangeChange(opvItem);
+        }
+      }
+    } else {
+      setInvalidValue(true);
+    }
+  }, [inputValue]);
+  useEffect(function () {
+    setInputValue(item.numberInput);
+  }, [item]);
+  var onRangeChange = function onRangeChange(opvItem) {
+    if (inputValue) {
+      viewHandler.paletteViewHandler.onRangeClickChange(item, opvItem, inputValue.toString());
+    }
+  };
+  var onChange = function onChange(e) {
+    var newVal = Number(e.target.value);
+    if (newVal >= 0) {
+      setInputGotChangedByComponent(true);
+      setInputValue(newVal);
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [': ', /*#__PURE__*/jsx("input", {
+      className: inputBox,
+      onInput: onChange,
+      style: {
+        color: invalidValue ? 'red' : undefined
+      },
+      type: "number",
+      value: inputValue
+    }), ' ', item.measureUnit]
+  });
+};
+var NumberInput$1 = observer(NumberInput);
+
+export { NumberInput$1 as default };

package/build/esm/index-2d031a33.js

@@ -0,0 +1,45 @@
+import './index-b1ce50e8.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import SVGOverview from './index-c6df7146.js';
+import SVGSourceViewer from './index-ec1b9a71.js';
+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';
+import './index.module-fe9bf425.js';
+import 'classnames';
+
+var index = function index(props) {
+  // const [Component, setComponent] = useState(0);
+  if (props.selectedJson === 'SVGOVERVIEW') {
+    var Component = /*#__PURE__*/jsx(SVGOverview, {
+      plannerArticles: props.plannerArticles,
+      curBox: props.curBox,
+      isExpanded: props.isExpanded
+    });
+  } else {
+    var Component = /*#__PURE__*/jsx(SVGSourceViewer, {
+      plannerArticles: props.plannerArticles,
+      curBox: props.curBox,
+      isExpanded: props.isExpanded
+    });
+    //setComponent();
+  }
+  return /*#__PURE__*/jsx("div", {
+    children: Component
+  });
+};
+var SVGViewer = observer(index);
+
+export { SVGViewer as default };

package/build/esm/index-2ddeac75.js

@@ -0,0 +1,179 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-b1ce50e8.js';
+import 'react';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import ShelfDeleteButton from './index-27562269.js';
+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/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';
+
+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 GridList = function GridList(_ref) {
+  var _item$shelfPlannerGri;
+  var item = _ref.item,
+    height = _ref.height;
+    _ref.width;
+    var direction = _ref.direction;
+  var grid = (_item$shelfPlannerGri = item.shelfPlannerGrids) === null || _item$shelfPlannerGri === void 0 ? void 0 : _item$shelfPlannerGri[0];
+  var viewHandler = useViewHandler();
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var itemHeight = height / grid.Cells.length;
+  var cells = [];
+  var lastInUse = -1;
+  var onBoardNameAdded = false;
+  for (var i = 0; i < grid.Cells.length; i++) {
+    var cell = grid.Cells[i];
+    if (cell.InUse == -1) {
+      cells.splice(0, 0, {
+        heightCount: 1,
+        inUse: cell.InUse,
+        index: cell.Index,
+        type: undefined,
+        isDisabled: cell.IsDisabled,
+        isRequired: cell.IsRequired,
+        onlyPlaceHolder: cell.OnlyPlaceHolder,
+        noMove: cell.NoMove,
+        noDelete: cell.NoDelete
+      });
+    } else if (lastInUse != cell.InUse && lastInUse != cell.OnBoard) {
+      var _cell$Article, _cell$Article2;
+      lastInUse = cell.InUse;
+      onBoardNameAdded = false;
+      cells.splice(0, 0, {
+        heightCount: 1,
+        inUse: cell.InUse,
+        index: cell.Index,
+        type: cell.Type,
+        isDisabled: cell.IsDisabled,
+        isRequired: cell.IsRequired,
+        articleText: (_cell$Article = cell.Article) === null || _cell$Article === void 0 ? void 0 : _cell$Article.name,
+        onlyPlaceHolder: cell.OnlyPlaceHolder,
+        noMove: cell.NoMove,
+        noDelete: cell.NoDelete,
+        basketId: (_cell$Article2 = cell.Article) === null || _cell$Article2 === void 0 ? void 0 : _cell$Article2.basketId
+      });
+    } else {
+      var foundCell = cells.find(function (cell) {
+        return cell.inUse == lastInUse;
+      });
+      if (foundCell) {
+        if (lastInUse === cell.OnBoard && !onBoardNameAdded) {
+          var _cell$Article3;
+          onBoardNameAdded = true;
+          foundCell.articleText = ((_cell$Article3 = cell.Article) === null || _cell$Article3 === void 0 ? void 0 : _cell$Article3.name) + '<br/>&<br/>' + foundCell.articleText;
+          foundCell.onBoard = true;
+        }
+        foundCell.heightCount++;
+      }
+    }
+  }
+  var onDragEnd = function onDragEnd(result) {
+    if (!result.destination) return;
+    var sourceIndex = cells[result.source.index].index;
+    var destinationIndex = cells[result.destination.index].index;
+    if (sourceIndex != destinationIndex) viewHandler.paletteViewHandler.shelfItemMoved(grid, sourceIndex, destinationIndex);
+  };
+  var getItemStyle = function getItemStyle(isDragging, draggableStyle, item, showNumber) {
+    if (direction == 'horizontal') {
+      return getItemStyleHorizontal(isDragging, draggableStyle, item, showNumber);
+    } else {
+      return getItemStyleVertical(isDragging, draggableStyle, item);
+    }
+  };
+  var getItemStyleVertical = function getItemStyleVertical(isDragging, draggableStyle, item) {
+    return _objectSpread({
+      userSelect: 'none',
+      width: 'calc(' + 100 * (item.heightCount / grid.Cells.length) + '% - 1px)',
+      wordBreak: 'break-word',
+      height: '100%',
+      marginRight: '1px',
+      background: item.isRequired ? '#FFEBEB' : item.inUse == -1 ? 'none' : isDragging ? 'grey' : 'lightgrey',
+      backgroundImage: item.isDisabled && 'linear-gradient(45deg, #ffffff  25%, #c7c7c7 25%, #c7c7c7 50%, #ffffff  50%, #ffffff  75%, #c7c7c7 75%, #c7c7c7 100%)',
+      backgroundSize: item.isDisabled && '28.28px 28.28px',
+      "float": 'left',
+      borderRight: item.inUse == -1 ? '1px solid lightgrey' : 'none',
+      boxSizing: 'border-box'
+    }, draggableStyle);
+  };
+  var getItemStyleHorizontal = function getItemStyleHorizontal(isDragging, draggableStyle, item, showNumber) {
+    return _objectSpread({
+      userSelect: 'none',
+      height: itemHeight * item.heightCount - 1,
+      marginBottom: '1px',
+      fontSize: item.inUse === -1 ? '12px' : undefined,
+      lineHeight: item.inUse === -1 ? '2px' : undefined,
+      background: item.isRequired ? '#FFEBEB' : item.inUse === -1 ? 'none' : isDragging ? 'grey' : 'lightgrey',
+      backgroundImage: item.isDisabled && 'linear-gradient(45deg, #ffffff  25%, #c7c7c7 25%, #c7c7c7 50%, #ffffff  50%, #ffffff  75%, #c7c7c7 75%, #c7c7c7 100%)',
+      backgroundSize: item.isDisabled && '28.28px 28.28px',
+      borderBottom: item.inUse == -1 ? showNumber ? '1px solid #B5B5B5' : '1px solid lightgrey' : 'none',
+      boxSizing: 'border-box'
+    }, draggableStyle);
+  };
+  var getTextStyle = function getTextStyle() {
+    if (direction == 'vertikal') {
+      return {
+        maxHeight: 'calc(100% - 22px)',
+        overflow: 'auto'
+      };
+    }
+    return {};
+  };
+  return /*#__PURE__*/jsx(DragDropContext, {
+    onDragEnd: onDragEnd,
+    children: /*#__PURE__*/jsx(Droppable, {
+      droppableId: "droppable",
+      direction: direction == 'vertikal' ? 'horizontal' : 'vertical',
+      children: function children(provided, snapshot) {
+        return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, provided.droppableProps), {}, {
+          ref: provided.innerRef,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          children: [cells.map(function (item, index) {
+            return /*#__PURE__*/jsx(Draggable, {
+              index: index,
+              isDragDisabled: item.inUse == -1 || item.isDisabled || item.noMove,
+              draggableId: index.toString(),
+              children: function children(provided, snapshot) {
+                return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+                  onClick: function onClick() {
+                    viewHandler.settingsState.setSelectedShelfAccessoire(item.basketId);
+                    viewHandler.paletteViewHandler.clickAddAccessorieOnShelfPlanner(grid, item.index);
+                  },
+                  ref: provided.innerRef
+                }, provided.draggableProps), provided.dragHandleProps), {}, {
+                  style: getItemStyle(snapshot.isDragging, provided.draggableProps.style, item, item.index % 5 === 0 && !!index),
+                  children: [!!item.articleText && /*#__PURE__*/jsx("div", {
+                    style: getTextStyle(),
+                    dangerouslySetInnerHTML: {
+                      __html: item.articleText
+                    }
+                  }), item.inUse == -1 && item.index % 5 === 0 && !!index && direction == 'horizontal' && item.index, (item.inUse > -1 && !item.noDelete && !item.isDisabled || item.onBoard) && /*#__PURE__*/jsx(ShelfDeleteButton, {
+                    grid: grid,
+                    index: item.inUse
+                  })]
+                }));
+              }
+            }, index);
+          }), provided.placeholder]
+        }));
+      }
+    })
+  });
+};
+var GridList$1 = observer(GridList);
+
+export { GridList$1 as default };