@crystaldesign/diva-web-planner-react 25.2.0-beta.2 → 25.2.0-beta.21

package/build/esm/index-12e09e62.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-bfb7feaa.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-1d0cd950.js';
+import GenericToolTip from './index-5dc98f9e.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';
+import './index-deba0462.js';
+
+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,
+      image: item.image,
+      codex: item.articleCodex,
+      layerProps: layerProps
+    }, item.articleCodex)))]
+  }));
+};
+var ShelfAccessoiresOld = observer(ShelfAccessoires);
+
+export { ShelfAccessoiresOld as default };

package/build/esm/index-132fb063.js

@@ -0,0 +1,82 @@
+import { s as styleInject } from './index-bfb7feaa.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation, DivaUtils } 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 row = "row-aKbIG";
+var rowPaddingTop = "row-padding-top-SRH2s";
+var rowPaddingTopArticle = "row-padding-top-article-Iwelk";
+var columnLeft = "column-left-jSCha";
+var columnRight = "column-right-rkkBn";
+var columnRightRed = "column-right-red-Lmt65";
+var columnOption = "column-option-2v7Hm";
+var columnPartlist = "column-partlist-0LS9Z";
+var codexes = "codexes--r2fL";
+var tabGroup = "tab-group-an6TP";
+var css_248z = ".row-aKbIG {\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  font-weight: 300;\n  padding-right: 0.9375rem;\n  padding-left: 0.9375rem;\n  display: flow-root;\n  color: #404040;\n}\n.row-padding-top-SRH2s {\n  padding-top: 8px;\n}\n\n.row-padding-top-article-Iwelk {\n  padding-top: 1rem;\n}\n\n.column-left-jSCha {\n  float: left;\n}\n.column-left-jSCha a {\n  color: var(--primaryColor);\n}\n.column-right-rkkBn {\n  float: right;\n  text-align: right;\n}\n\n.column-right-red-Lmt65 {\n  color: var(--primaryColor);\n}\n.column-option-2v7Hm {\n  font-size: 0.8125rem;\n  font-weight: normal;\n  line-height: 1.1;\n}\n.column-partlist-0LS9Z {\n  max-width: 70%;\n}\n\n.codexes--r2fL {\n  font-style: italic;\n}\n\n.tab-group-an6TP {\n  border-bottom: 1px solid var(--primaryColor);\n  font-size: 1.125rem;\n  margin: 1.5rem 0 0 0;\n  color: var(--primaryColor);\n  padding: 0;\n  text-align: left;\n  text-transform: capitalize;\n  font-weight: 300;\n}\n";
+styleInject(css_248z);
+
+var OptiontreeSerious = function OptiontreeSerious(_ref) {
+  var itemP = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var item = itemP;
+  if (item.isTabGroup) {
+    return /*#__PURE__*/jsx("div", {
+      className: tabGroup,
+      children: item.title
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [item.isPartlistArticle && /*#__PURE__*/jsxs("div", {
+      className: classnames(row, rowPaddingTopArticle),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(columnPartlist, columnLeft),
+        dangerouslySetInnerHTML: {
+          __html: item.title
+        }
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnRight),
+        children: (item.quantity && item.quantity > 1 ? '(x' + item.quantity + ') ' : '') + (!hidePrices && item.price ? DivaUtils.formatPrice(item.price) : '')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(row, item.isPartlistArticle ? rowPaddingTop : undefined),
+      children: [/*#__PURE__*/jsxs("span", {
+        className: classnames(columnOption, columnLeft),
+        children: [item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            children: item.size && item.size !== '' ? t('configurator.size') : item.description
+          }), ": ", item.size]
+        }), !item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            dangerouslySetInnerHTML: {
+              __html: item.title
+            }
+          }), item.description && ': ' + item.description]
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnOption, columnRight, columnRightRed, codexes),
+        children: item.codex
+      })]
+    })]
+  });
+};
+var index = observer(OptiontreeSerious);
+
+export { index as default };

package/build/esm/index-136bbcad.js

@@ -0,0 +1,241 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-bfb7feaa.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect, createElement } from 'react';
+import Product from './index-6f53d876.js';
+import Sidebar from './index-52f302d7.js';
+import OptionTree from './index-496f76dc.js';
+import PartListTable from './index-4218e444.js';
+import MaskEditor from './index-24fd422d.js';
+import SVGAnalyzer from './index-893aa6c4.js';
+import { l as list } from './index.module-9da22490.js';
+import EkTextViewer from './index-e6442c9a.js';
+import CatalogMakeup from './index-036ed2fb.js';
+import DecisionAnalyzer from './index-d141d885.js';
+import RTVAnalyzer from './index-76bed023.js';
+import J3DEditor from './index-1c7a023a.js';
+import PropertiesEditor from './index-0dbead10.js';
+import ArticleOverview from './index-dcc19bfa.js';
+import { jsx, jsxs, Fragment } 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-3d374a66.js';
+import './index-3f0f8c8a.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+import 'classnames';
+import './index-766f6255.js';
+import './index-1126206f.js';
+import 'sift';
+import './index-74b909f0.js';
+import './index-9eaf08a2.js';
+import './index-3f967125.js';
+import './index-8f55b825.js';
+import './index-f6061b2c.js';
+import './index.module-d66248ab.js';
+import './index-791084e3.js';
+import 'react-switch';
+import './index-e8678693.js';
+import './index-deba0462.js';
+import './index-01ebe54b.js';
+import 'react-dropdown';
+import './index-e33c141c.js';
+import './index-88e6d823.js';
+import './index-35da1669.js';
+import './index-e80aafd9.js';
+import '@crystaldesign/content-box';
+import './index-3ad16ce9.js';
+import './index-e7abac8f.js';
+import './index-a87ffae6.js';
+import './index-903e604b.js';
+import './index-455a4267.js';
+import './index-51135c0c.js';
+import 'react-laag';
+import './index-1d0cd950.js';
+import './index-5dc98f9e.js';
+import './index-3c0470d4.js';
+import './index-b922d1ed.js';
+import './index-81f15d2a.js';
+import './index-c6cc855f.js';
+import './index-18b69117.js';
+import './index-34c0dd56.js';
+import './index-9eba5570.js';
+import './index-c901f1ae.js';
+import './index.module-b80d97f8.js';
+import './index-471e93be.js';
+import './index-22064e75.js';
+import './index-9a5124da.js';
+import './index-cdbd1e90.js';
+import './index-daabd5b2.js';
+import './index-291fdf80.js';
+import './index-f346aca0.js';
+import './index.module-6a00ac29.js';
+import './index-a4d80c02.js';
+import './index-c783fda0.js';
+import './index-4bbda80b.js';
+import './index-c64a6d06.js';
+import './index-d028d7fc.js';
+import './index-4c4408d2.js';
+import './index.module-1b1b8941.js';
+import './index-b7b6ba53.js';
+import './index-934f42cb.js';
+import './index-10dc5551.js';
+import './index-ada1bbf0.js';
+import './index-a60a1693.js';
+import './index-bb82528f.js';
+import './index-c8ac86cf.js';
+import './index-7f6cbfb6.js';
+import './index-5bf65c65.js';
+import './index-3c85e2ea.js';
+import 'react-qr-code';
+import './index-a8973ac0.js';
+import './index-e16477aa.js';
+import './index-f93dfa51.js';
+import './index-7e6333cd.js';
+import './index-77d53d67.js';
+import './index-d6b08f80.js';
+import 'react-collapsible';
+import './index-053af3d0.js';
+import './index-12dec7c4.js';
+import './index.module-40218603.js';
+import 'react-json-view-lite';
+import './react-json-viewer-0a5e0dd1.js';
+import './index.module-0e4013fb.js';
+import 'jsoneditor';
+import './index-2f512291.js';
+import './index-dae0ebb6.js';
+import './index-801412d7.js';
+import './index.module-818aeb0a.js';
+import './index-a2e5276f.js';
+import './index-9650ddc1.js';
+import './index.module-575f1b5f.js';
+import './index-58940109.js';
+import './DecisionVizualizer-a8a96c38.js';
+import './index-007106fd.js';
+import './index-48d5d568.js';
+import './CatalogProperties-734aed46.js';
+import './ArticleProperties-3ca93ef6.js';
+import './OptionProperties-4c228118.js';
+import './OptionValueProperties-cf664434.js';
+import 'react-select';
+
+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 CatalogProduct = function CatalogProduct(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var changeVal = function changeVal(newValue) {
+    localStorage.setItem('lastWindow', newValue);
+    viewHandler.uiState.setActiveCatalogSection(newValue);
+  };
+  useEffect(function () {
+    switch (viewHandler.uiState.activeCatalogSection) {
+      case 'Options':
+        viewHandler.uiState.setConfigSettingsIsExpanded(true);
+        break;
+      case 'ekText':
+      case '3D/2D':
+      case 'PartList':
+      case 'Artikelübersicht':
+      case 'SVGübersicht':
+      case 'DecisionAnalyzer':
+      case 'CatalogMakeup':
+      case 'RTVAnalyzer':
+      case 'J3DEditor':
+      case 'PropertiesEditor':
+      case 'MaskEditor':
+        viewHandler.uiState.setConfigSettingsIsExpanded(false);
+        break;
+    }
+  }, [viewHandler.uiState.activeCatalogSection]);
+  useEffect(function () {
+    if (viewHandler.getIsInMobileView()) viewHandler.uiState.setActiveCatalogSection('3D/2D');
+  }, []);
+  var activeWindow = undefined;
+  var classname = props.className + ' ' + list;
+  switch (viewHandler.uiState.activeCatalogSection) {
+    case 'Options':
+      activeWindow = /*#__PURE__*/jsx(OptionTree, _objectSpread(_objectSpread({}, props), {}, {
+        style: {
+          zIndex: 700
+        }
+      }));
+      break;
+    case 'PartList':
+      activeWindow = /*#__PURE__*/jsx(PartListTable, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'DecisionAnalyzer':
+      activeWindow = /*#__PURE__*/jsx(DecisionAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'Artikelübersicht':
+      activeWindow = /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'SVGübersicht':
+      activeWindow = /*#__PURE__*/jsx(SVGAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'ekText':
+      activeWindow = /*#__PURE__*/jsx(EkTextViewer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'CatalogMakeup':
+      activeWindow = /*#__PURE__*/jsx(CatalogMakeup, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'RTVAnalyzer':
+      activeWindow = /*#__PURE__*/jsx(RTVAnalyzer, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'J3DEditor':
+      activeWindow = /*#__PURE__*/jsx(J3DEditor, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'PropertiesEditor':
+      activeWindow = /*#__PURE__*/jsx(PropertiesEditor, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+    case 'MaskEditor':
+      activeWindow = /*#__PURE__*/jsx(MaskEditor, _objectSpread(_objectSpread({}, props), {}, {
+        className: classname
+      }));
+      break;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(Sidebar, _objectSpread(_objectSpread({}, props), {}, {
+      currentWindowActive: viewHandler.uiState.activeCatalogSection,
+      setCurrentWindowActive: changeVal
+    })), /*#__PURE__*/createElement(Product, _objectSpread(_objectSpread({}, props), {}, {
+      style: {
+        boxSizing: 'border-box',
+        borderLeft: !viewHandler.uiState.isInMobileView ? '50px solid transparent' : undefined
+      },
+      key: 'product'
+    })), activeWindow]
+  });
+};
+var index = observer(CatalogProduct);
+
+export { index as default };

package/build/esm/index-13aa155e.js

@@ -0,0 +1,121 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-bfb7feaa.js';
+import { observer } from 'mobx-react-lite';
+import { useState, createElement } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-5dc98f9e.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import MetaData from './index-1d0cd950.js';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-deba0462.js';
+
+var wrapper = "wrapper-q2VFw";
+var textWrapper = "text-wrapper-Th9kS";
+var element = "element-e6pDX";
+var elementText = "element-text-Lfswv";
+var image = "image-p37Vz";
+var hexColor = "hexColor-JQ-dp";
+var text = "text-DX9ZX";
+var deleteButton = "delete-button-sXPbV";
+var css_248z = ".wrapper-q2VFw {\n  position: relative;\n}\n\n.text-wrapper-Th9kS {\n  width: 48%;\n}\n.element-e6pDX {\n  position: relative;\n  display: flex;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 2px solid var(--primaryColor);\n  overflow: hidden;\n  cursor: pointer;\n  background-color: #fff;\n}\n\n.element-text-Lfswv {\n  border-radius: 0px;\n  border: 0px solid #fff;\n  width: calc(100% - 26px);\n  margin-top: 5px;\n  height: 64px;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: 26px;\n}\n\n.image-p37Vz {\n  width: 100%;\n  height: auto;\n}\n\n.hexColor-JQ-dp {\n  width: 100%;\n  height: 100%;\n}\n\n.text-DX9ZX {\n  line-height: 20px;\n  width: 100%;\n  font-size: 15px;\n  white-space: nowrap;\n}\n\n.delete-button-sXPbV {\n  position: absolute;\n  top: 0px;\n  right: -8px;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  background-color: red;\n  background-repeat: no-repeat;\n  background-size: 80%;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23fff%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.delete-button-sXPbV:hover {\n  cursor: pointer;\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 Item = function Item(_ref) {
+  var _renderLayer, _selectedElement$meta;
+  var selectedElement = _ref.selectedElement,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _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;
+  }
+  var notRelevant = selectedElement.codex.includes('OPV_NICHT_RELEVANT');
+  var isTextElement = !selectedElement.image && !selectedElement.hexColor;
+  if (notRelevant) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, isTextElement ? textWrapper : undefined),
+    children: [/*#__PURE__*/createElement("div", _objectSpread(_objectSpread(_objectSpread({}, triggerProps), hoverProps), {}, {
+      key: selectedElement.codex,
+      className: classnames(element, isTextElement ? elementText : undefined),
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.scrollToOPV(paletteId, selectedElement.codex);
+      },
+      title: t('configurator.scroll_there', 'hier hin scrollen')
+    }), selectedElement.image ? /*#__PURE__*/jsx("img", {
+      className: image,
+      src: selectedElement.image
+    }) : selectedElement.hexColor ? /*#__PURE__*/jsx("div", {
+      className: hexColor,
+      style: {
+        backgroundColor: '#' + selectedElement.hexColor
+      }
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: text,
+        children: selectedElement.text
+      }), /*#__PURE__*/jsx(MetaData, {
+        metaData: selectedElement.metaData,
+        visible: [metaDataVisible, setMetaDataVisible]
+      }, selectedElement.codex)]
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: selectedElement.text,
+      codex: (_selectedElement$meta = selectedElement.metaData) === null || _selectedElement$meta === void 0 || (_selectedElement$meta = _selectedElement$meta.find(function (m) {
+        return m.codex === 'codex';
+      })) === null || _selectedElement$meta === void 0 ? void 0 : _selectedElement$meta.values[0],
+      image: selectedElement.image,
+      hexColor: selectedElement.hexColor,
+      layerProps: layerProps
+    }, selectedElement.codex)))), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedElement, undefined, paletteId);
+      },
+      className: deleteButton,
+      title: t('configurator.remove_selection', 'Auswahl entfernen')
+    })]
+  });
+};
+var Item$1 = observer(Item);
+
+export { Item$1 as default };

package/build/esm/index-14e828df.js

@@ -0,0 +1,67 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-bfb7feaa.js';
+import 'react';
+import Toggle from './index-791084e3.js';
+import DivaUtils from '@crystaldesign/diva-utils';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import 'classnames';
+import 'react-switch';
+
+var SummaryVariantButton = function SummaryVariantButton(_ref) {
+  var _variantPalette$1$gro;
+  _ref.item;
+  var viewHandler = useViewHandler();
+  var variantPalette = viewHandler.settingsState.itemPaletteArr.find(function (item) {
+    return item[1].type === 'VARIANTS' && item[1].visible;
+  });
+  if (!variantPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var variants = (_variantPalette$1$gro = variantPalette[1].groups) === null || _variantPalette$1$gro === void 0 || (_variantPalette$1$gro = _variantPalette$1$gro[0]) === null || _variantPalette$1$gro === void 0 ? void 0 : _variantPalette$1$gro.items;
+  if (!(variants !== null && variants !== void 0 && variants.length)) return /*#__PURE__*/jsx(Fragment, {});
+  var copyTableToClipboard = function copyTableToClipboard() {
+    var html = '<h3>' + viewHandler.productState.webConifguratorTitle + ' - ' + Object.values(viewHandler.settingsState.articleInfos).map(function (article) {
+      return article.name;
+    }).join(', ') + '</h3>' + '<table>' + variants.map(function (variant) {
+      if (variant.index === undefined) return '';
+      return '<tr>' + '<td>' + 'index: ' + variant.index + '</td>' + variant.variantValues.map(function (values) {
+        return (values.optionValueImage ? '<td>' + '<img src="' + values.optionValueImage + '"/>' + '</td>' : '') +
+        //::::
+        '<td>' + (values.optionName + ' (' + values.opt.substring(3) + '):') + '<br/>' + (values.optionValueName + ' (' + values.opv.substring(3) + ')') + '</td>';
+      }).join('') + '<td>' + DivaUtils.formatPrice(variant.price) + '</td>' + '</tr>';
+    }).join('') + '</table>';
+    var blob = new Blob([html], {
+      type: 'text/html'
+    });
+    navigator.clipboard.write([new ClipboardItem(_defineProperty({}, blob.type, blob))]);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: copyTableToClipboard,
+      children: "als Tabelle kopieren"
+    }), /*#__PURE__*/jsx(Toggle, {
+      height: 32,
+      handleDiameter: 22,
+      width: 60,
+      onChange: function onChange() {
+        variants[0].onToggle(true);
+        viewHandler.paletteViewHandler.updateCurPaletteData(true);
+      },
+      state: !variants.find(function (variant) {
+        return variant.disabled;
+      })
+    })]
+  });
+};
+
+export { SummaryVariantButton as default };