@crystaldesign/diva-web-planner-react 24.15.0-beta.4 → 24.15.0-beta.40

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

@@ -1,75 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-297a2af7.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-3efd0b61.js

@@ -1,45 +0,0 @@
-import { u as useViewHandler } from './index-297a2af7.js';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import Image3DNavBar from './index-6f42331f.js';
-import { g as wcConfigurator3Dimage, h as imageCenterOrbit, j as imageCenterStatic } from './index.module-070135bd.js';
-import Logo from './index-5254f3a2.js';
-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 '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'classnames';
-
-var Planner3DImage = function Planner3DImage(props) {
-  var viewHandler = useViewHandler();
-  return /*#__PURE__*/jsxs("div", {
-    ref: function ref(_ref) {
-      return viewHandler.productState.setImage3DElement(_ref);
-    },
-    className: wcConfigurator3Dimage,
-    id: "3DImage-Container",
-    style: {
-      // backgroundImage: viewHandler.productState.RenderImageURL,
-      visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
-    },
-    children: [viewHandler.productState.doShowRenderImage && /*#__PURE__*/jsx(Image3DNavBar, {}), /*#__PURE__*/jsx("img", {
-      className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
-      id: "diva3dImg",
-      draggable: "false",
-      src: viewHandler.productState.diva3dImgSrc
-    }), /*#__PURE__*/jsx(Logo, {})]
-  });
-};
-var Planner3DImage$1 = observer(Planner3DImage);
-
-export { Planner3DImage$1 as default };

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

@@ -1,121 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-297a2af7.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import { useRef, useEffect } from 'react';
-import { useTranslation } from '@crystaldesign/diva-core';
-import { g as getIconOfTabGroup } from './IconHandler-b6efaa96.js';
-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 verticalItem = "verticalItem-NmQDx";
-var wcSpan = "wcSpan-0wnmJ";
-var verticalItemPoligon = "verticalItemPoligon-M44lA";
-var wcActiveStep = "wcActiveStep-ykv3D";
-var wcVisitedStep = "wcVisitedStep-qDdfW";
-var wcStepIcon = "wcStepIcon-7hz1S";
-var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedFont, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
-styleInject(css_248z);
-
-var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
-  var _getIconOfTabGroup;
-  var tabGroup = _ref.tabGroup,
-    height = _ref.height,
-    _ref$minHeight = _ref.minHeight,
-    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
-    isFirstItem = _ref.isFirstItem,
-    isLastItem = _ref.isLastItem,
-    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
-    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
-    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
-    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
-    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
-    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
-    _ref$wcStepIconClass = _ref.wcStepIconClass,
-    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
-    lastItemDiv = _ref.lastItemDiv;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var width = 128;
-  var tabGroupItemRef = useRef(null);
-  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
-  if (height < minHeight) {
-    height = minHeight;
-  }
-  useEffect(function () {
-    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
-  }, [tabGroupItemRef]);
-  var onTabGroupClick = function onTabGroupClick(tabGroup) {
-    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
-  };
-  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
-  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
-  var polygonPoints;
-  if (isFirstItem && isLastItem) {
-    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
-  } else if (isFirstItem) {
-    polygonPoints = '0 ' + (height - 9) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', ' + '64 ' + (height - 1);
-  } else if (isLastItem) {
-    polygonPoints = '0 ' + (height - 1) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 1);
-  } else {
-    polygonPoints = '0 ' + (height - 9) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', 64 ' + (height - 1);
-  }
-  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
-  var div = /*#__PURE__*/jsxs("div", {
-    "data-test-id": "tabGroupItem",
-    children: [/*#__PURE__*/jsx("div", {
-      className: wcStepIconClass,
-      style: {
-        WebkitMaskImage: 'url(' + icon + ')',
-        maskImage: 'url(' + icon + ')'
-      }
-    }), /*#__PURE__*/jsx("span", {
-      "data-test-id": "tabGroupItemTitle",
-      children: t('configurator.' + tabGroup.title, tabGroup.title)
-    })]
-  });
-  if (isLastItem && lastItemDiv) {
-    div = lastItemDiv;
-  }
-  return /*#__PURE__*/jsxs("svg", {
-    "data-test-id": "tabGroupItemSvg",
-    viewBox: '0 0 ' + width + ' ' + height,
-    ref: tabGroupItemRef,
-    style: {
-      height: height + 'px',
-      minHeight: minHeight
-    },
-    onClick: function onClick() {
-      return onTabGroupClick(tabGroup);
-    },
-    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
-    children: [/*#__PURE__*/jsx("polygon", {
-      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
-      points: polygonPoints
-    }), /*#__PURE__*/jsx("foreignObject", {
-      width: "100%",
-      height: "100%",
-      style: {
-        pointerEvents: 'none'
-      },
-      children: /*#__PURE__*/jsx("span", {
-        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
-        children: div
-      })
-    })]
-  });
-};
-var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
-
-export { VerticalTabGroupItemStandard$1 as default };

package/build/esm/index-40356b20.js

@@ -1,49 +0,0 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-297a2af7.js';
-import 'react';
-import { observer } from 'mobx-react-lite';
-import { jsx } 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 table = "table-JbkH8";
-var sel = "sel-Ri--o";
-var css_248z = ".tabHeader-9hw2V {\n  font-size: 20px;\n  font-weight: 300;\n}\n\n.table-JbkH8 {\n  border-collapse: collapse;\n  font-size: 0.9em;\n  font-family: sans-serif;\n  min-width: 400px;\n  width: 100%;\n  background: var(--thirdColor);\n  color: black;\n  text-align: left;\n  transition: background-color 0.3s;\n  border-radius: 5px;\n}\n.table-JbkH8 th {\n  width: 25%;\n  padding: 6px 10px;\n  font-weight: inherit;\n}\n.sel-Ri--o {\n  background-color: var(--primaryColor);\n  transition: background-color 0.3s;\n  border-radius: 5px;\n  color: #fff;\n}\n.background-6HSWH {\n  background-color: white;\n}\n";
-styleInject(css_248z);
-
-var _excluded = ["tabGroup"];
-var TabGroups = function TabGroups(_ref) {
-  var tabGroup = _ref.tabGroup;
-    _objectWithoutProperties(_ref, _excluded);
-  var viewHandler = useViewHandler();
-  var currentTabGroup = viewHandler.tabGroupState.curTabGroup;
-  return /*#__PURE__*/jsx("div", {
-    onClick: function onClick() {
-      viewHandler.tabGroupState.navigateToTabgroupByPosNr(tabGroup.posNr);
-    },
-    children: /*#__PURE__*/jsx("table", {
-      className: table,
-      children: /*#__PURE__*/jsx("tbody", {
-        children: /*#__PURE__*/jsx("tr", {
-          children: /*#__PURE__*/jsx("th", {
-            className: tabGroup.title === (currentTabGroup === null || currentTabGroup === void 0 ? void 0 : currentTabGroup.title) ? sel : undefined,
-            children: tabGroup.title
-          })
-        })
-      })
-    })
-  });
-};
-var TabGroups$1 = observer(TabGroups);
-
-export { TabGroups$1 as default };

package/build/esm/index-42294179.js

@@ -1,27 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-297a2af7.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 PlannerMsgContainer = function PlannerMsgContainer(props) {
-  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
-    componentName: "Product/ProductCenter/PlannerMsgContainer"
-  }));
-};
-
-export { PlannerMsgContainer as default };

package/build/esm/index-42e01cdf.js

@@ -1,111 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-297a2af7.js';
-import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
-import { useHover, useLayer } from 'react-laag';
-import MetaData from './index-a05d2fa4.js';
-import GenericToolTip from './index-b7c39e12.js';
-import { jsxs, jsx } 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 '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-
-var container = "container-08OcY";
-var sel = "sel-hd522";
-var titleContainer = "title-container-QzcUc";
-var title = "title-WUWIa";
-var subTitle = "sub-title-OQXRX";
-var css_248z = ".container-08OcY {\n  position: relative;\n  box-sizing: border-box;\n  border: 3px solid transparent;\n  border-radius: 6px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n  background: #f2f2f2;\n  cursor: pointer;\n}\n\n.container-08OcY.sel-hd522 {\n  border-color: var(--primaryColor);\n}\n\n.container-08OcY:hover {\n  box-shadow: rgba(0, 0, 0,0.2) 0px 0px 16px 0px;\n}\n\n.container-08OcY img {\n  width: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.title-container-QzcUc {\n  color: #4b4b4b;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  height: 100%;\n}\n.title-WUWIa,\n.sub-title-OQXRX {\n  height: auto;\n  margin: 0 3px;\n}\n\n.title-WUWIa {\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 15px;\n}\n\n.sub-title-OQXRX {\n  margin-top: 4px;\n  font-size: 12px;\n  line-height: 12px;\n  font-weight: 300;\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 ShelfAccessoires = function ShelfAccessoires(_ref) {
-  var _renderLayer;
-  var item = _ref.item;
-    _ref.grids;
-    var sel$1 = _ref.sel;
-  var viewHandler = useViewHandler();
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    hidePrices = _useDivaCore$state.hidePrices,
-    _useDivaCore$state$di = _useDivaCore$state.dimensions,
-    isMobile = _useDivaCore$state$di.isMobile,
-    isTablet = _useDivaCore$state$di.isTablet;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    metaDataVisible = _useState2[0],
-    setMetaDataVisible = _useState2[1];
-
-  /* tool tip stuff*/
-  var triggerProps = {};
-  var layerProps = {};
-  var renderLayer = undefined;
-  var isOver = false;
-  var hoverProps = {};
-  var hover = useHover({
-    delayEnter: 1000,
-    hideOnScroll: true
-  });
-  var tooltip = useLayer({
-    isOpen: hover[0],
-    auto: true,
-    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
-  });
-  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
-    isOver = hover[0];
-    hoverProps = hover[1];
-    triggerProps = tooltip.triggerProps;
-    layerProps = tooltip.layerProps;
-    renderLayer = tooltip.renderLayer;
-  }
-  var header = item.name;
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
-    id: item.articleCodex,
-    className: classnames(container, sel$1 ? sel : undefined),
-    onClick: function onClick() {
-      return viewHandler.paletteViewHandler.selectShelfAccessorie(item.articleCodex);
-    }
-  }, triggerProps), hoverProps), {}, {
-    children: [/*#__PURE__*/jsx("img", {
-      style: {
-        maxHeight: viewHandler.settingsState.settingsWidth / 3
-      },
-      src: item.image
-    }), /*#__PURE__*/jsxs("div", {
-      className: titleContainer,
-      children: [/*#__PURE__*/jsx("div", {
-        className: classnames(title),
-        dangerouslySetInnerHTML: {
-          __html: header
-        }
-      }), /*#__PURE__*/jsx(MetaData, {
-        metaData: item.metaData,
-        visible: [metaDataVisible, setMetaDataVisible]
-      }, item.articleCodex), !hidePrices && !!item.price && /*#__PURE__*/jsx("div", {
-        className: classnames(subTitle),
-        children: DivaUtils.formatPrice(item.price)
-      })]
-    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
-      text: item.name,
-      desciption: metaDataVisible,
-      price: item.price,
-      image: item.image,
-      codex: item.articleCodex,
-      layerProps: layerProps
-    }, item.articleCodex)))]
-  }));
-};
-var ShelfAccessoires$1 = observer(ShelfAccessoires);
-
-export { ShelfAccessoires$1 as default };

package/build/esm/index-47caa24d.js

@@ -1,179 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler } from './index-297a2af7.js';
-import 'react';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import ShelfDeleteButton from './index-696f6c60.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 };