@crystaldesign/diva-web-planner-react 24.13.0-rc.6 → 24.13.0-rc.8

package/build/esm/index-ea29a6a5.js

@@ -0,0 +1,214 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import React, { useState, useEffect, Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import sift from 'sift';
+import TextBox from './index-b7b52366.js';
+import ItemVariant from './index-36b8737f.js';
+import SettingsPaletteGroup from './index-df53a144.js';
+import ToggleOption from './index-f052ab58.js';
+import GroupDropdown from './index-4d84f110.js';
+import PromotedProducts from './index-6ad5a07d.js';
+import ToggleName from './index-3ade1675.js';
+import ProductList from './index-9b56809f.js';
+import itemPaletteTypeComponentMap from './index-b5459cba.js';
+import ItemWrapper from './index-4aca1b41.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-fce3e4ae.js');
+});
+var DoorPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-3716a714.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, {
+          filteredGroups: filteredGroups,
+          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-eb660a71.js

@@ -0,0 +1,46 @@
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } 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-vxlYB";
+var totalPrice = "totalPrice-sBu4C";
+var price = "price-jVSu8";
+var css_248z = ".container-vxlYB {\n  width: 100%;\n  border-top: 1px #6d6e71 solid;\n  color: #6d6e71;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  padding-top: 1rem;\n}\n\n.totalPrice-sBu4C {\n  float: left;\n  margin-left: 2rem;\n}\n\n.price-jVSu8 {\n  float: right;\n  margin-right: 2rem;\n}\n";
+styleInject(css_248z);
+
+var SummaryTotalPrice = function SummaryTotalPrice(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: !hidePrices && /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsx("div", {
+        className: totalPrice,
+        children: t('configurator.TotalPrice', 'TotalPrice')
+      }), /*#__PURE__*/jsx("div", {
+        className: price,
+        children: viewHandler.productState.formatedTotalPrice
+      })]
+    })
+  });
+};
+var TotalPrice = observer(SummaryTotalPrice);
+
+export { TotalPrice as default };

package/build/esm/index-eb93bb1a.js

@@ -0,0 +1,82 @@
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs, 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 wcConfiguratorProductFooter = "wcConfigurator-product-footer-ygF4L";
+var portrait = "portrait-FCw3Q";
+var settingsHidden = "settings-hidden-PBWln";
+var landscape = "landscape-KhTSA";
+var expanded = "expanded-pQR-c";
+var wcButton = "wcButton-s5DtR";
+var sel = "sel-1Qm3v";
+var wcViewAs = "wc_ViewAs-y1Kh8";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-ygF4L {\n  text-align: center;\n  z-index: 350;\n}\n\n.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.portrait-FCw3Q.wcConfigurator-product-footer-ygF4L {\n  display: none;\n}\n\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  display: block;\n  height: 40px;\n}\n\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  bottom: 0px;\n}\n\n.landscape-KhTSA.wcConfigurator-product-footer-ygF4L {\n  display: none;\n}\n\n.landscape-KhTSA.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  display: block;\n  bottom: 0;\n  height: 40px;\n}\n\n.expanded-pQR-c.wcConfigurator-product-footer-ygF4L {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v,\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:hover {\n  background: var(--secondaryColor);\n  color: white;\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:active,\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:active {\n  background: #616161;\n  color: white;\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR {\n  background: white;\n  border: 1px solid var(--secondaryColor);\n\n  box-sizing: border-box;\n  -webkit-text-stroke: 0.6px;\n  min-width: 160px;\n  width: auto;\n  height: 38.4px;\n  line-height: 35.8px;\n  color: var(--secondaryColor);\n  border-right: 0px;\n  border-radius: 0px 0px 0px 0px;\n}\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:hover {\n  color: var(--secondaryColor);\n  background: white;\n  box-shadow: var(--boxShadowHover);\n}\n\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:last-child {\n  border-top-right-radius: var(--globalBorderRadius);\n  border-bottom-right-radius: var(--globalBorderRadius);\n  border-right: 1px solid var(--secondaryColor);\n}\n\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:first-child {\n  border-top-left-radius: var(--globalBorderRadius);\n  border-bottom-left-radius: var(--globalBorderRadius);\n}\n\n/* ViewAs  */\n.wc_ViewAs-y1Kh8 {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  list-style: none;\n  white-space: nowrap;\n  display: inline-flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n}\n\n.wc_ViewAs-y1Kh8 li {\n  display: block;\n  float: left;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorProductFooter, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        },
+        children: t('configurator.Foto')
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          },
+          children: t('configurator.Foto')
+        }), ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'SUMMARY' && renderings.map(function (rendering) {
+          var _viewHandler$productS;
+          return /*#__PURE__*/jsx("li", {
+            className: classnames(wcButton, viewHandler.productState.doShowRenderImage && ((_viewHandler$productS = viewHandler.productState.curAlternateRendering) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.imageCodex) === rendering.imageCodex ? sel : undefined),
+            onClick: function onClick() {
+              return viewHandler.productState.onChangePlannerView('3D', rendering);
+            },
+            children: rendering.title
+          });
+        })]
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        },
+        children: t('configurator.Grundriss')
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        },
+        children: t('configurator.RTV')
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };

package/build/esm/index-ebdfb190.js

@@ -0,0 +1,123 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { useTranslation, 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-16ea62d8.js';
+import GenericToolTip from './index-f96e96f7.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 accItem = "AccItem-EuKUQ";
+var wcSize = "wcSize-vX0Fm";
+var wcSizeNormal = "wcSize-normal-bRIEC";
+var wcImage = "wcImage-ScJeM";
+var wcAccInfoContainer = "wcAccInfoContainer-eEHqy";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Wlfnh";
+var metaData = "meta-data-p5e7t";
+var wcAccSize = "wcAccSize-LdKs3";
+var wcPricePreview = "wcPricePreview-cMfXC";
+var css_248z = "/* Accessoires*/\n\n.AccItem-EuKUQ {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n}\n\n.AccItem-EuKUQ:hover {\n  z-index: 200;\n}\n\n.AccItem-EuKUQ .wcSize-vX0Fm {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n}\n\n.AccItem-EuKUQ .wcSize-normal-bRIEC {\n  height: 80px;\n}\n\n.AccItem-EuKUQ .wcImagePlaceHolder-t26mm {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.AccItem-EuKUQ .wcSize-normal-bRIEC .wcImage-ScJeM {\n  height: 80px;\n}\n\n.AccItem-EuKUQ .wcImage-ScJeM {\n  width: 80px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.wcAccInfoContainer-eEHqy {\n  float: left;\n  width: calc(100% - 80px);\n  position: relative;\n  height: 100%;\n}\n.AccItem-EuKUQ .wcAccInfoContainer-eEHqy {\n  width: calc(100% - 80px);\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - 12px);\n  justify-content: space-between;\n}\n\n.AccItem-EuKUQ .wcConfigurator-settings-title-Wlfnh {\n  display: -webkit-box;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  margin-top: 14px;\n  max-width: 100%;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n}\n\n.AccItem-EuKUQ .wcConfigurator-settings-title-Wlfnh.meta-data-p5e7t {\n  -webkit-line-clamp: 1;\n}\n\n.AccItem-EuKUQ .wcAccSize-LdKs3 {\n  display: -webkit-box;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  width: 100%;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 110;\n}\n\n.AccItem-EuKUQ .wcPricePreview-cMfXC {\n  position: absolute;\n  right: 3.2px;\n  top: 4px;\n  font-size: 14px;\n}\n@media all and (max-width: 1100px) {\n  .AccItem-EuKUQ .wcSize-normal-bRIEC {\n    height: 80px;\n  }\n\n  .AccItem-EuKUQ .wcSize-normal-bRIEC img {\n    height: 80px;\n  }\n}\n\n.AccItem-EuKUQ .wcPricePreview-cMfXC {\n  position: absolute;\n  float: left;\n  -webkit-text-stroke: 0.4px;\n  font-size: 12.4px;\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,
+    grids = _ref.grids;
+  var viewHandler = useViewHandler();
+  var i18n = useTranslation();
+  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: 600,
+    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;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnShelfAccessorie(grids, item.articleCodex, undefined, true);
+    },
+    className: accItem
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcAccInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible !== '' ? metaData : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.name
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.articleCodex), /*#__PURE__*/jsx("div", {
+          className: classnames(wcAccSize),
+          children: DivaUtils.sizeFormatter({
+            width: item.width,
+            height: item.height,
+            depth: item.depth
+          }, i18n)
+        })]
+      }), !hidePrices && !!item.price && /*#__PURE__*/jsx("div", {
+        className: classnames(wcPricePreview),
+        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 ShelfAccessoiresOld = observer(ShelfAccessoires);
+
+export { ShelfAccessoiresOld as default };

package/build/esm/index-ec9b4618.js

@@ -0,0 +1,82 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.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-ecb6fb81.js

@@ -0,0 +1,45 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-62e351ed.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ArticleOverview from './index-da96c395.js';
+import JsonEditor from './index-c5231652.js';
+import { jsx } 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 './index.module-591743df.js';
+import './index.module-944b044e.js';
+import 'classnames';
+import './index.module-12186d8c.js';
+import 'react-collapsible';
+import 'jsoneditor';
+
+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 J3DEditor = function J3DEditor(props) {
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    style: {
+      userSelect: 'text'
+    },
+    ChildComponent: JsonEditor,
+    settings: [{
+      key: 'J3D',
+      name: 'J3D Editor'
+    }],
+    title: 'Artikel Übersicht'
+  }));
+};
+var J3DEditor$1 = observer(J3DEditor);
+
+export { J3DEditor$1 as default };

package/build/esm/index-ede9e219.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-62e351ed.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 SettingsItemDefaultTemplate = function SettingsItemDefaultTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Default"
+  }));
+};
+
+export { SettingsItemDefaultTemplate as default };