@crystaldesign/diva-web-planner-react 26.7.0-rc.8 → 26.7.0-rc.9

package/build/esm/index-d36bc5e4.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-2a04e43a.js';
+import SummaryOptionTree from './index-5cfd2f4f.js';
+import SummaryArticles from './index-f6c9850b.js';
+import SettingsItemAccessoireTemplate from './index-55105a3e.js';
+import Gallery from './index-152c53e6.js';
+import SettingsItemDefaultTemplate from './index-81938dc2.js';
+import Range from './index-7974fc02.js';
+import SettingsItemRoomTemplate from './index-2ca021f4.js';
+import ViewPoint from './index-d7cdb94e.js';
+import NumberBox from './index-b8c241a3.js';
+import PlannerSwitch from './index-19c1368a.js';
+import Varaint from './index-4953f1f6.js';
+import GalleryText from './index-4b230f94.js';
+import 'react';
+import GalleryText2 from './index-f8dbc204.js';
+import FaceLift from './index-38d7a702.js';
+import PlannerOverviewItem from './index-eb0f660b.js';
+import Article from './index-7f9b794d.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-laag';
+import './index.module-c4a06a9f.js';
+import './index-a3c77564.js';
+import './index-f5d4f1c5.js';
+import './index-f6870a49.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index.module-2c07ccb5.js';
+import './index-a422385b.js';
+import './index-ef005904.js';
+import './index-a4767a74.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var itemPaletteTypeComponentMap = {
+  ART: Article,
+  ART_2: FaceLift,
+  'PLANNER_2.0': PlannerOverviewItem,
+  PLANNERSWITCH: PlannerSwitch,
+  ACC: SettingsItemAccessoireTemplate,
+  ACC_CONFIG: SettingsItemAccessoireTemplate,
+  VERY_SMALL: SettingsItemDefaultTemplate,
+  SMALL: SettingsItemDefaultTemplate,
+  GAL_GROUP_DROPDOWN: function GAL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "normalimage.png"
+    }, props));
+  },
+  GAL_SMALL_GROUP_DROPDOWN: function GAL_SMALL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL: Gallery,
+  GAL_SMALL: Gallery,
+  GAL_BIG: Gallery,
+  RANGE: Range,
+  NUMBER: NumberBox,
+  SLIDER: function SLIDER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE: function MULTI_TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE_ROUND: function MULTI_TOGGLE_ROUND() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO: function RADIO() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO_LIST: function RADIO_LIST() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SUMMARY_ARTICLES: SummaryArticles,
+  SUMMARY_OPTIONTREE: SummaryOptionTree,
+  VARIANTS: Varaint,
+  STATICROOM: SettingsItemRoomTemplate,
+  VIEWPOINT: ViewPoint,
+  DROPDOWN_TEXT: function DROPDOWN_TEXT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DROPDOWN_IMAGE: function DROPDOWN_IMAGE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE: function TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_HEADER: function TOGGLE_HEADER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_NAME: function TOGGLE_NAME() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DOOR_PLANNER: function DOOR_PLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TEXTBOX: function TEXTBOX() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SHELFPLANNER: function SHELFPLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PRODUCTS: function PRODUCTS() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PROMOTED: function PROMOTED() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  CHECKOUT: function CHECKOUT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  STYLE_CONSULTANT: function STYLE_CONSULTANT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  GAL_TEXT_2: function GAL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT_2: function GAL_BIG_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT_2: function GAL_SMALL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_TEXT: function GAL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT: function GAL_BIG_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT: function GAL_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_VERY_SMALL_TEXT: function GAL_VERY_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "verysmall"
+    }, props));
+  }
+};
+
+export { itemPaletteTypeComponentMap as default };

package/build/esm/index-d4650811.js

@@ -0,0 +1,48 @@
+import './index-2a04e43a.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var BoxCopy = function BoxCopy(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps,
+    invertLeftRight = _ref.invertLeftRight;
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), {
+        x: item.type == 'BoxCopyLeft' ? -1 : item.type == 'BoxCopyRight' ? 1 : 0,
+        y: item.type == 'BoxCopyTop' ? 1 : 0,
+        z: 0
+      });
+    },
+    style: {
+      left: rect.left + '%',
+      top: 100 - rect.top + '%'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.copy.BoxPlannerCopy.copyGlobal, item.type == 'BoxCopyLeft' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : undefined, item.type == 'BoxCopyTop' ? plannerUIProps.classes.copy.BoxPlannerCopy.copyTop : undefined, item.type == 'BoxCopyRight' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : undefined)
+  });
+};
+var BoxCopy$1 = observer(BoxCopy);
+
+export { BoxCopy$1 as default };

package/build/esm/index-d7b91786.js

@@ -0,0 +1,220 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-2a04e43a.js';
+import 'react';
+import { s as shelfPlannerContainerRtv, a as shelfPlannerContainerHorizontal, b as shelfPlannerContainerVertical, e as expanded, c as shelfGrid, d as shelfGridBorder, w as warning, f as accessoires, g as configHeaderWrapper, h as closeButton, n as name, S as SelectedAcc, i as accessoireContainer } from './index-6b95be68.js';
+import { c as collapsableInner } from './index-48efc6ff.js';
+import ShelfAccessoires from './index-b6f6b6d5.js';
+import ShelfAccessoiresOld from './index-d0980e09.js';
+import GridList from './index-115029d0.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import SettingsItemsWrapper from './index-d86f8621.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'sift';
+import './index-1fa73fb8.js';
+import './index-2d2d2431.js';
+import './index-4fc3796a.js';
+import './index-e11d0c6e.js';
+import './index.module-e403d21f.js';
+import './index-f5d4f1c5.js';
+import './index-f6870a49.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-7536d002.js';
+import 'react-dropdown';
+import './index-d2a91e70.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-17cc643d.js';
+import './index-ed03d390.js';
+import './index-346f109f.js';
+import '@crystaldesign/content-box';
+import './index-f9a110fe.js';
+import './index-f281fab5.js';
+import './index-af530b8e.js';
+import './index-9cf0f255.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-561cb8bc.js';
+import './index-622d2f18.js';
+import './index-d36bc5e4.js';
+import './index-5cfd2f4f.js';
+import './index-f6c9850b.js';
+import './index-55105a3e.js';
+import './index-152c53e6.js';
+import 'react-laag';
+import './index.module-c4a06a9f.js';
+import './index-a3c77564.js';
+import './index-81938dc2.js';
+import './index-7974fc02.js';
+import './index-2ca021f4.js';
+import './index-d7cdb94e.js';
+import './index.module-2c07ccb5.js';
+import './index-b8c241a3.js';
+import './index-a422385b.js';
+import './index-19c1368a.js';
+import './index-4953f1f6.js';
+import './index-4b230f94.js';
+import './index-ef005904.js';
+import './index-f8dbc204.js';
+import './index-38d7a702.js';
+import './index-eb0f660b.js';
+import './index-a4767a74.js';
+import './index-7f9b794d.js';
+import './index-03f86982.js';
+import './index-9e44e103.js';
+import 'rc-slider';
+import './index-a52fd6a3.js';
+import './index-64a7e78e.js';
+import './index-04847887.js';
+import './index-72a54d79.js';
+import './index-5279fb47.js';
+import 'react-confetti-explosion';
+import './index-8abbaf37.js';
+import './index-5a195e83.js';
+import './index-3627081b.js';
+import 'react-qr-code';
+import './index-701c1cca.js';
+import './useCustomDimensions-dd45806d.js';
+import './index-5a39a0b2.js';
+import './ussIsSticky-287a90a0.js';
+import './index-015ad3bc.js';
+import './index-a63be589.js';
+import './index-4e3e77ad.js';
+import './index.module-cca52a67.js';
+import './index-ba342957.js';
+import './index-4529202e.js';
+import './index-bb3c4c85.js';
+import './index-dade0892.js';
+import 'react-beautiful-dnd';
+import './index-7ec5bd6b.js';
+import './index-2e67f9a9.js';
+import './index-52ac045b.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ShelfPlanner = function ShelfPlanner(_ref) {
+  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3, _viewHandler$settings4, _item$shelfPlannerGri, _item$shelfPlannerGri2, _item$shelfPlannerGri3, _filteredGroups$0$ite, _filteredGroups$, _selAccItem, _selAccItem2;
+  var item = _ref.item,
+    style = _ref.style,
+    filteredGroups = _ref.filteredGroups;
+  var viewHandler = useViewHandler();
+  var height = ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) - 10;
+  var width = ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().width) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) - 16;
+  var grid = (_item$shelfPlannerGri = item === null || item === void 0 || (_item$shelfPlannerGri2 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri2 === void 0 ? void 0 : _item$shelfPlannerGri2.find(function (g) {
+    return g.ActAccessoire;
+  })) !== null && _item$shelfPlannerGri !== void 0 ? _item$shelfPlannerGri : item === null || item === void 0 || (_item$shelfPlannerGri3 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri3 === void 0 ? void 0 : _item$shelfPlannerGri3[0];
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var items = (_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : [];
+  var selAcc = grid.ActAccessoire;
+  var selAccItem = undefined;
+  if (selAcc) {
+    selAccItem = items.find(function (item) {
+      return item.articleCodex == selAcc;
+    });
+  }
+  var requiredWarning = grid.getRequiredWarning(viewHandler.configState.lang);
+  var palettesOfSelectedAcc = [];
+  if ((_selAccItem = selAccItem) !== null && _selAccItem !== void 0 && (_selAccItem = _selAccItem.configStepKeys) !== null && _selAccItem !== void 0 && _selAccItem.length) {
+    var _loop = function _loop() {
+      var stepKey = selAccItem.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2);
+          _ref3[0];
+          var itemPalette = _ref3[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (viewHandler.settingsState.selectedShelfAccessoire == stepKey.basketId) palettesOfSelectedAcc.push(itemPalette[1]);
+    };
+    for (var i = 0; i < selAccItem.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  var mobileRTV = viewHandler.getIsInMobileView() && viewHandler.productState.shelfPlannerRTV;
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      return item.htmlRef = _ref4;
+    },
+    className: classnames(viewHandler.productState.shelfPlannerRTV ? shelfPlannerContainerRtv : undefined, grid.Direction == 'horizontal' ? shelfPlannerContainerHorizontal : shelfPlannerContainerVertical, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    style: _objectSpread({
+      height: height
+    }, style),
+    children: [!viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx("div", {
+      className: shelfGrid,
+      children: /*#__PURE__*/jsx("div", {
+        className: shelfGridBorder,
+        children: /*#__PURE__*/jsx(GridList, {
+          item: item,
+          direction: grid.Direction,
+          width: width,
+          height: height - 16 - 16
+        })
+      })
+    }), requiredWarning && /*#__PURE__*/jsx("div", {
+      className: warning,
+      dangerouslySetInnerHTML: {
+        __html: requiredWarning
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: accessoires,
+      children: [!!palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: configHeaderWrapper,
+          onClick: function onClick() {
+            return viewHandler.paletteViewHandler.setSelectedShelfAccessoire();
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: closeButton
+          }), /*#__PURE__*/jsx("div", {
+            className: name,
+            children: (_selAccItem2 = selAccItem) === null || _selAccItem2 === void 0 ? void 0 : _selAccItem2.name
+          })]
+        }), /*#__PURE__*/jsx(SettingsItemsWrapper, {
+          itemPalettesArr: palettesOfSelectedAcc
+        })]
+      }), !palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [!mobileRTV && /*#__PURE__*/jsx(SelectedAcc, {
+          selAccItem: selAccItem
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(accessoireContainer, collapsableInner),
+          style: {
+            height: grid.Direction == 'horizontal' ? height - 80 : '',
+            overflow: mobileRTV ? 'visible' : undefined
+          },
+          children: items.map(function (acc, key) {
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoires, {
+                grids: item.shelfPlannerGrids,
+                item: acc,
+                sel: acc.articleCodex == selAcc
+              }, key), !viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoiresOld, {
+                grids: item.shelfPlannerGrids,
+                item: acc
+              }, key)]
+            });
+          })
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ShelfPlanner);
+
+export { index as default };

package/build/esm/index-d7cdb94e.js

@@ -0,0 +1,57 @@
+import { u as useViewHandler } from './index-2a04e43a.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-2c07ccb5.js';
+import IsActive from './index-a3c77564.js';
+import { jsx, jsxs } 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/helpers/objectWithoutProperties';
+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';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var ViewPoint = function ViewPoint(_ref) {
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item);
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), /*#__PURE__*/jsx("div", {
+        className: wcImage,
+        style: {
+          backgroundImage: "url(".concat(item.url, ")")
+        }
+      }), /*#__PURE__*/jsx("div", {
+        className: textContainer,
+        children: /*#__PURE__*/jsx("div", {
+          className: wcConfiguratorSettingsTitle,
+          children: t('configurator.' + item.N)
+        })
+      })]
+    })
+  });
+};
+var ViewPoint$1 = observer(ViewPoint);
+
+export { ViewPoint$1 as default };

package/build/esm/index-d86f8621.js

@@ -0,0 +1,166 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-2a04e43a.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { S as SettingsItem } from './index-48efc6ff.js';
+import SettingsItemsGroup from './index-2e67f9a9.js';
+import ContentItemTeaser from './index-52ac045b.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'sift';
+import './index-1fa73fb8.js';
+import './index-2d2d2431.js';
+import './index-4fc3796a.js';
+import './index-e11d0c6e.js';
+import './index.module-e403d21f.js';
+import './index-f5d4f1c5.js';
+import './index-f6870a49.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-7536d002.js';
+import 'react-dropdown';
+import './index-d2a91e70.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-17cc643d.js';
+import './index-ed03d390.js';
+import './index-346f109f.js';
+import '@crystaldesign/content-box';
+import './index-f9a110fe.js';
+import './index-f281fab5.js';
+import './index-af530b8e.js';
+import './index-9cf0f255.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-561cb8bc.js';
+import './index-622d2f18.js';
+import './index-d36bc5e4.js';
+import './index-5cfd2f4f.js';
+import './index-f6c9850b.js';
+import './index-55105a3e.js';
+import './index-152c53e6.js';
+import 'react-laag';
+import './index.module-c4a06a9f.js';
+import './index-a3c77564.js';
+import './index-81938dc2.js';
+import './index-7974fc02.js';
+import './index-2ca021f4.js';
+import './index-d7cdb94e.js';
+import './index.module-2c07ccb5.js';
+import './index-b8c241a3.js';
+import './index-a422385b.js';
+import './index-19c1368a.js';
+import './index-4953f1f6.js';
+import './index-4b230f94.js';
+import './index-ef005904.js';
+import './index-f8dbc204.js';
+import './index-38d7a702.js';
+import './index-eb0f660b.js';
+import './index-a4767a74.js';
+import './index-7f9b794d.js';
+import './index-03f86982.js';
+import './index-9e44e103.js';
+import 'rc-slider';
+import './index-a52fd6a3.js';
+import './index-64a7e78e.js';
+import './index-04847887.js';
+import './index-72a54d79.js';
+import './index-5279fb47.js';
+import 'react-confetti-explosion';
+import './index-8abbaf37.js';
+import './index-5a195e83.js';
+import './index-3627081b.js';
+import 'react-qr-code';
+import './index-701c1cca.js';
+import './useCustomDimensions-dd45806d.js';
+import './index-5a39a0b2.js';
+import './ussIsSticky-287a90a0.js';
+import './index-015ad3bc.js';
+import './index-a63be589.js';
+import './index-4e3e77ad.js';
+import './index.module-cca52a67.js';
+import './index-ba342957.js';
+import './index-4529202e.js';
+import './index-bb3c4c85.js';
+import './index-dade0892.js';
+
+var SettingsItemsWrapper = function SettingsItemsWrapper(_ref) {
+  var itemPalettesArr = _ref.itemPalettesArr,
+    zIndexBase = _ref.zIndexBase;
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    partOfGroupArr = _useState2[0],
+    setPartOfGroupArr = _useState2[1];
+  useEffect(function () {
+    var newPartOfGroupArr = [];
+    var _loop = function _loop() {
+      var item = itemPalettesArr[i];
+      var optionStep = viewHandler.configuratorStructureHandler.getOptionStepByCodex(item.optionCodex);
+      var partOfGroup = optionStep === null || optionStep === void 0 ? void 0 : optionStep.partOfGroup;
+      var partOfGroupObj = newPartOfGroupArr.find(function (p) {
+        var _partOfGroup$groupNam;
+        return ((_partOfGroup$groupNam = partOfGroup === null || partOfGroup === void 0 ? void 0 : partOfGroup.groupName) !== null && _partOfGroup$groupNam !== void 0 ? _partOfGroup$groupNam : item.configStepKey + item.id) === p.groupName;
+      });
+      if (!partOfGroupObj) {
+        var _partOfGroup$groupNam2;
+        var newGroup = {
+          groupName: (_partOfGroup$groupNam2 = partOfGroup === null || partOfGroup === void 0 ? void 0 : partOfGroup.groupName) !== null && _partOfGroup$groupNam2 !== void 0 ? _partOfGroup$groupNam2 : item.configStepKey + item.id,
+          palettes: [item],
+          left: [],
+          right: []
+        };
+        newPartOfGroupArr.push(newGroup);
+        partOfGroupObj = newGroup;
+      } else {
+        partOfGroupObj.palettes.push(item);
+      }
+      if ((partOfGroup === null || partOfGroup === void 0 ? void 0 : partOfGroup.position) === 'l') partOfGroupObj.left.push(item.id);else if ((partOfGroup === null || partOfGroup === void 0 ? void 0 : partOfGroup.position) === 'r') partOfGroupObj.right.push(item.id);
+    };
+    for (var i = 0; i < itemPalettesArr.length; i++) {
+      _loop();
+    }
+    setPartOfGroupArr(newPartOfGroupArr);
+  }, [itemPalettesArr]);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: partOfGroupArr.map(function (item) {
+      var _item$palettes$0$opti;
+      if (item.palettes.length > 1) {
+        return /*#__PURE__*/jsx(SettingsItemsGroup, {
+          group: item
+        });
+      }
+      var teaser = item.palettes[0].contentItemTeaser;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [(teaser === null || teaser === void 0 ? void 0 : teaser.position) == 'TOP' && /*#__PURE__*/jsx(ContentItemTeaser, {
+          item: teaser
+        }), /*#__PURE__*/jsx(SettingsItem, {
+          item: item.palettes[0],
+          id: Number(item.palettes[0].id),
+          zIndexBase: zIndexBase
+        }, ((_item$palettes$0$opti = item.palettes[0].optionCodex) !== null && _item$palettes$0$opti !== void 0 ? _item$palettes$0$opti : item.palettes[0].configStepKey) + item.palettes[0].id), (teaser === null || teaser === void 0 ? void 0 : teaser.position) == 'BOTTOM' && /*#__PURE__*/jsx(ContentItemTeaser, {
+          item: teaser
+        })]
+      });
+    })
+  });
+};
+var SettingsItemsWrapper$1 = observer(SettingsItemsWrapper);
+
+export { SettingsItemsWrapper$1 as default };