@crystaldesign/diva-web-planner-react 25.4.0-beta.3 → 25.4.0-beta.30

package/build/esm/index-cd0dcc12.js

@@ -0,0 +1,41 @@
+import { s as styleInject } from './index-273b10aa.js';
+import classnames from 'classnames';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+var wcStepInfo = "wcStepInfo-IuGTY";
+var error = "error-PdtJS";
+var warning = "warning-fB-89";
+var info = "info-bs86-";
+var css_248z = ".wcStepInfo-IuGTY {\n  margin-top: 10px;\n  margin-left: 5px;\n  font-size: 15px;\n  line-height: 17px;\n}\n\n.error-PdtJS {\n  color: #dc3545;\n}\n\n.warning-fB-89 {\n  color: #ffc107;\n}\n\n.info-bs86- {\n  color: #828282;\n}\n";
+styleInject(css_248z);
+
+var StepInfo = function StepInfo(_ref) {
+  var stepInfo = _ref.stepInfo;
+  if (!stepInfo) return /*#__PURE__*/jsx(Fragment, {});
+  var text = stepInfo.text,
+    type = stepInfo.type;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcStepInfo, type === 'ERROR' ? error : undefined, type === 'INFO' ? info : undefined, type === 'WARNING' ? warning : undefined),
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  });
+};
+
+export { StepInfo as default };

package/build/esm/index-cd6bb53e.js

@@ -0,0 +1,53 @@
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } 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';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };

package/build/esm/index-cdc9fff0.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import RoomSerious from './index-f16558a1.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'classnames';
+
+var container = "container-IUsXl";
+var css_248z = ".container-IUsXl {\n  position: absolute;\n  bottom: 0;\n  left: 0px;\n  z-index: 1000;\n}\n";
+styleInject(css_248z);
+
+var RoomListSelection = function RoomListSelection(props) {
+  var viewHandler = useViewHandler();
+  var items = viewHandler.paletteViewHandler.getRoomList();
+  if (!viewHandler.uiState.ViewConfig.roomListInProduct) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    hidden: !viewHandler.settingsState.roomListInitialized,
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/jsx(RoomSerious, {
+        item: item,
+        from: viewHandler.settingsState.roomListInitialized
+      }, item.codex);
+    })
+  });
+};
+var index = observer(RoomListSelection);
+
+export { index as default };

package/build/esm/index-ce6408b5.js

@@ -0,0 +1,50 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.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';
+import '@crystaldesign/widget-contact-form';
+
+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-d070ba11.js

@@ -0,0 +1,202 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-273b10aa.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-f79bcaf0.js';
+import { S as SettingsItem, c as collapsableInner } from './index-458c7d0a.js';
+import ShelfAccessoires from './index-b91df523.js';
+import ShelfAccessoiresOld from './index-9f31fbd4.js';
+import GridList from './index-ae193dff.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'sift';
+import './index-8aff7a21.js';
+import './index-0b9c6dcf.js';
+import './index-6d0a6965.js';
+import './index-8a56eb96.js';
+import './index-c69c54f2.js';
+import './index.module-09571d1f.js';
+import './index-febfee5e.js';
+import 'react-switch';
+import './index-d83d9482.js';
+import './index-39cb2054.js';
+import './index-e914694d.js';
+import 'react-dropdown';
+import './index-1235251c.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-968e4147.js';
+import './index-d5a5d30c.js';
+import './index-137af628.js';
+import '@crystaldesign/content-box';
+import './index-7a1fa2a3.js';
+import './index-61ea9f54.js';
+import './index-2f66bd2f.js';
+import './index-41019b38.js';
+import './index-7a4380a6.js';
+import './index-badf7df4.js';
+import 'react-laag';
+import './index-b0c2adfc.js';
+import './index-7b383432.js';
+import './index-4c40bfc5.js';
+import './index-2be19785.js';
+import './index-663639bf.js';
+import './index-cb7924e3.js';
+import './index-0421908a.js';
+import './index-3e86afd5.js';
+import './index-54bac6d1.js';
+import './index-4b57e569.js';
+import './index.module-ccf4e4f4.js';
+import './index-55bdcfd0.js';
+import './index-f84e1342.js';
+import './index-cd0dcc12.js';
+import './index-0189807f.js';
+import './index-92b4be4d.js';
+import './index-23950bfc.js';
+import './index-bc990761.js';
+import './index.module-a687d981.js';
+import './index-c89918f0.js';
+import './index-cd6bb53e.js';
+import './index-13892626.js';
+import './index-ee181ed9.js';
+import './index.module-498a463d.js';
+import 'react-select';
+import './index-5977f6f5.js';
+import './index-2b62291e.js';
+import './index.module-af50b1be.js';
+import './index-3906f607.js';
+import 'qrcode.react';
+import './index-5c17855d.js';
+import './index-1bb2277d.js';
+import './index-344294c0.js';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-53726249.js';
+import './index-7326be3f.js';
+import 'react-beautiful-dnd';
+import './index-4ed6d7c1.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ShelfPlanner = function ShelfPlanner(_ref) {
+  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3, _viewHandler$settings4, _item$shelfPlannerGri, _item$shelfPlannerGri2, _item$shelfPlannerGri3, _filteredGroups$0$ite, _filteredGroups$, _selAccItem, _selAccItem2;
+  var item = _ref.item,
+    style = _ref.style,
+    filteredGroups = _ref.filteredGroups;
+  var viewHandler = useViewHandler();
+  var height = ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) - 10;
+  var width = ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().width) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) - 16;
+  var grid = (_item$shelfPlannerGri = item === null || item === void 0 || (_item$shelfPlannerGri2 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri2 === void 0 ? void 0 : _item$shelfPlannerGri2.find(function (g) {
+    return g.ActAccessoire;
+  })) !== null && _item$shelfPlannerGri !== void 0 ? _item$shelfPlannerGri : item === null || item === void 0 || (_item$shelfPlannerGri3 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri3 === void 0 ? void 0 : _item$shelfPlannerGri3[0];
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var items = (_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : [];
+  var selAcc = grid.ActAccessoire;
+  var selAccItem = undefined;
+  if (selAcc) {
+    selAccItem = items.find(function (item) {
+      return item.articleCodex == selAcc;
+    });
+  }
+  var requiredWarning = grid.getRequiredWarning(viewHandler.configState.lang);
+  var palettesOfSelectedAcc = [];
+  if ((_selAccItem = selAccItem) !== null && _selAccItem !== void 0 && (_selAccItem = _selAccItem.configStepKeys) !== null && _selAccItem !== void 0 && _selAccItem.length) {
+    var _loop = function _loop() {
+      var stepKey = selAccItem.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2);
+          _ref3[0];
+          var itemPalette = _ref3[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (viewHandler.settingsState.selectedShelfAccessoire == stepKey.basketId) palettesOfSelectedAcc.push(itemPalette[1]);
+    };
+    for (var i = 0; i < selAccItem.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      return item.htmlRef = _ref4;
+    },
+    className: classnames(viewHandler.productState.shelfPlannerRTV ? shelfPlannerContainerRtv : undefined, grid.Direction == 'horizontal' ? shelfPlannerContainerHorizontal : shelfPlannerContainerVertical, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    style: _objectSpread({
+      height: height
+    }, style),
+    children: [!viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx("div", {
+      className: shelfGrid,
+      children: /*#__PURE__*/jsx("div", {
+        className: shelfGridBorder,
+        children: /*#__PURE__*/jsx(GridList, {
+          item: item,
+          direction: grid.Direction,
+          width: width,
+          height: height - 16 - 16
+        })
+      })
+    }), requiredWarning && /*#__PURE__*/jsx("div", {
+      className: warning,
+      dangerouslySetInnerHTML: {
+        __html: requiredWarning
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: accessoires,
+      children: [!!palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: configHeaderWrapper,
+          onClick: function onClick() {
+            return viewHandler.paletteViewHandler.setSelectedShelfAccessoire();
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: closeButton
+          }), /*#__PURE__*/jsx("div", {
+            className: name,
+            children: (_selAccItem2 = selAccItem) === null || _selAccItem2 === void 0 ? void 0 : _selAccItem2.name
+          })]
+        }), palettesOfSelectedAcc.map(function (item, index) {
+          return /*#__PURE__*/jsx(SettingsItem, {
+            item: item,
+            id: item.id
+          }, index);
+        })]
+      }), !palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(SelectedAcc, {
+          selAccItem: selAccItem
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(accessoireContainer, collapsableInner),
+          style: {
+            height: grid.Direction == 'horizontal' ? height - 80 : ''
+          },
+          children: items.map(function (acc, key) {
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoires, {
+                grids: item.shelfPlannerGrids,
+                item: acc,
+                sel: acc.articleCodex == selAcc
+              }, key), !viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoiresOld, {
+                grids: item.shelfPlannerGrids,
+                item: acc
+              }, key)]
+            });
+          })
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ShelfPlanner);
+
+export { index as default };

package/build/esm/index-d11545af.js

@@ -0,0 +1,133 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import { useState } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import { observer } from 'mobx-react-lite';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-a687d981.js';
+import classnames from 'classnames';
+import IsActive from './index-55bdcfd0.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import GenericToolTip from './index-7b383432.js';
+import InfoIcon from './index-d83d9482.js';
+import PricePreview from './index-39cb2054.js';
+import { jsxs, Fragment, 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';
+import '@crystaldesign/widget-contact-form';
+
+var paletteItem = "PaletteItem-WUuXa";
+var wcSize = "wcSize-eyEDf";
+var wcSizeGallery = "wcSize-gallery-l2o6z";
+var sel = "sel-1MlhE";
+var wcVCodexTextWrapper = "wcVCodexTextWrapper-B9kjy";
+var wcVCodexText = "wcVCodexText-l-tMp";
+var wcGallery = "wcGallery-jbfei";
+var hexColor = "hexColor-otBJT";
+var css_248z = ".PaletteItem-WUuXa .wcSize-eyEDf.wcSize-gallery-l2o6z {\n  width: 100%;\n  background: transparent;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n  display: flex;\n}\n.PaletteItem-WUuXa {\n  --galleryItemSelBorder: var(--galleryItemBorder);\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderColor);\n}\n.PaletteItem-WUuXa:hover {\n  --galleryItemSelBorder: var(--galleryItemBorder);\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderHoverColor);\n  box-shadow: var(--gallerySelectedBoxShadow);\n}\n\n.PaletteItem-WUuXa.sel-1MlhE {\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderSelColor);\n  box-shadow: var(--gallerySelectedBoxShadow);\n}\n\n.wcVCodexTextWrapper-B9kjy {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.wcVCodexText-l-tMp {\n  width: 100%;\n  font-size: 18px;\n  text-shadow: 3px 4px 15px rgba(0,0,0,0.6);\n  color: white;\n  display: none;\n  text-align: center;\n  word-break: break-all;\n}\n\n.PaletteItem-WUuXa:hover .wcVCodexText-l-tMp,\n.sel-1MlhE .wcVCodexText-l-tMp {\n  display: block;\n}\n\n.PaletteItem-WUuXa.wcGallery-jbfei {\n  display: block;\n  background: transparent;\n  margin: 0;\n  margin: initial;\n  position: relative;\n  float: left;\n  border-radius: var(--galleryItemRadius);\n  z-index: 100;\n  cursor: pointer;\n  width: 100%;\n}\n\n.PaletteItem-WUuXa.wcGallery-jbfei img {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--galleryItemRadius);\n  aspect-ratio: 1 / 1;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.hexColor-otBJT {\n  width: 80px;\n  height: 80px;\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 Gallery = function Gallery(_ref) {
+  var _item$freeText, _renderLayer;
+  var itemP = _ref.item,
+    hidePricePreview = _ref.hidePricePreview,
+    paletteId = _ref.paletteId,
+    style = _ref.style,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? /*#__PURE__*/jsx(IsActive, {
+      listenToGalleryVariables: true
+    }) : _ref$isActive;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var onClick = function onClick() {
+    if (item.doShowFav) {
+      viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+    }
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0];
+    _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 && (item.image || item.hexColor) && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+      style: style,
+      id: item.codex,
+      "data-test-id": "plannerPaletteItem",
+      className: classnames(paletteItem, wcGallery, item.sel ? sel : undefined),
+      onClick: onClick
+    }, triggerProps), hoverProps), {}, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classnames(wcSize, wcSizeGallery),
+        children: [!item.doShowFav && item.sel && isActive !== undefined && isActive, item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+          item: item
+        }, item.codex), (viewHandler.getViewConfig().showVCodexInGallery && item.vCodex || item.freeText) && /*#__PURE__*/jsx("div", {
+          className: wcVCodexTextWrapper,
+          children: /*#__PURE__*/jsx("div", {
+            className: classnames(wcVCodexText),
+            children: (_item$freeText = item.freeText) !== null && _item$freeText !== void 0 ? _item$freeText : item.vCodex
+          })
+        }), item.image ? /*#__PURE__*/jsx("img", {
+          src: item.image
+        }) : item.hexColor ? /*#__PURE__*/jsx("div", {
+          className: hexColor,
+          style: {
+            backgroundColor: '#' + item.hexColor
+          }
+        }) : /*#__PURE__*/jsx(Fragment, {}), item.doShowFav && /*#__PURE__*/jsx("div", {
+          className: item.isFav ? wcFavoriteSel : wcFavorite
+        })]
+      }), !hidePricePreview && item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: item.pricePreviewPromise,
+        sel: item.sel
+      })]
+    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: /*'RAL: ' + item.rals?.[0] + '     ' +*/item.text,
+      desciption: metaDataVisible,
+      image: item.image,
+      layerProps: layerProps,
+      pricePreviewPromise: item.pricePreviewPromise,
+      hexColor: item.hexColor
+    }, item.codex)))]
+  });
+};
+var index = observer(Gallery);
+
+export { index as default };

package/build/esm/index-d192acd8.js

@@ -0,0 +1,74 @@
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } 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';
+import '@crystaldesign/widget-contact-form';
+
+var paletteItem = "PaletteItem-Y-gaJ";
+var imageWrapper = "imageWrapper-rcOF5";
+var sel = "sel-1986q";
+var imageBackground = "imageBackground-SUtlD";
+var wcImage = "wcImage-XUaTv";
+var title = "title-Cr0ha";
+var titleSel = "title-sel-8BT-F";
+var mobile = "mobile-NUDZR";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-Y-gaJ {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: -moz-min-content;\n  width: min-content;\n  height: 70px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  margin-bottom: 2px;\n  margin-left: 10px;\n}\n\n.PaletteItem-Y-gaJ:active {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-Y-gaJ:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.imageWrapper-rcOF5 {\n  border-radius: 50%;\n  border: 1px transparent solid;\n  width: 68px;\n  height: 68px;\n  transition: 0.15s ease;\n  border-style: double;\n}\n\n.sel-1986q .imageWrapper-rcOF5,\n.small-oHSfx.sel-1986q .imageWrapper-rcOF5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.imageBackground-SUtlD {\n  border-radius: 50%;\n  border: 4px white solid;\n  width: 60px;\n  height: 60px;\n  transition: 0.15s ease;\n}\n\n.sel-1986q .imageBackground-SUtlD {\n  border: 4px var(--primaryColor) solid;\n}\n\n.wcImage-XUaTv {\n  width: 100%;\n  height: 60px;\n  border-radius: 50%;\n  background-size: cover;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.title-Cr0ha {\n  text-align: center;\n  margin: 16px;\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 24px;\n  z-index: 400;\n  font-weight: 600;\n  color: var(--secondaryColor);\n  font-family: var(--diva-typography-font-family);\n  margin-left: 12px;\n  text-align: left;\n  white-space: nowrap;\n  background-color: #eee;\n  border-radius: 70px;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.PaletteItem-Y-gaJ:hover .title-Cr0ha,\n.title-sel-8BT-F {\n  opacity: 1;\n}\n\n.mobile-NUDZR.PaletteItem-Y-gaJ {\n  width: 45px;\n  height: 45px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  margin-right: 12px;\n}\n.mobile-NUDZR .imageWrapper-rcOF5 {\n  width: 43px;\n  height: 43px;\n}\n\n.mobile-NUDZR .imageBackground-SUtlD {\n  width: 39px;\n  height: 39px;\n  border-width: 2px;\n}\n\n.mobile-NUDZR .wcImage-XUaTv {\n  height: 39px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  line-height: 2px;\n  font-size: 12px;\n  padding: 14px;\n  margin: 8px;\n}\n\n/* \n@media all and (max-width: 1800px) {\n  .PaletteItem {\n    width: 81px;\n    height: 81px;\n  }\n  .imageWrapper {\n    width: 79px;\n    height: 79px;\n  }\n  .imageBackground {\n    width: 71px;\n    height: 71px;\n  }\n  .wcImage {\n    height: 71px;\n  }\n  .title {\n    line-height: 81px;\n    font-size: 12px;\n  } \n}\n*/\n";
+styleInject(css_248z);
+
+var Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from,
+    isVP = _ref.isVP;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onClick = function onClick() {
+    viewHandler.productState.setRoomListExpanded(true); //reset the timeout
+    if (isVP) {
+      viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item, !!from);
+    } else {
+      viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    onClick: onClick,
+    className: classnames(paletteItem, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? sel : undefined),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(imageWrapper),
+        children: /*#__PURE__*/jsx("div", {
+          className: classnames(imageBackground),
+          children: /*#__PURE__*/jsx("div", {
+            "data-test-id": "select-room",
+            className: wcImage,
+            style: {
+              backgroundImage: "url(".concat(item.url, ")")
+            }
+          })
+        })
+      })
+    }), !isVP && /*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? titleSel : undefined, title),
+      children: t('configurator.' + item.N)
+    })]
+  });
+};
+var RoomRound = observer(Room);
+
+export { RoomRound as default };