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

package/build/esm/index-0bad8f19.js

@@ -0,0 +1,44 @@
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.js';
+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';
+import 'mobx-react-lite';
+
+var verticalItem = "verticalItem-EHV6R";
+var openClass = "open-class-cQobQ";
+var visited = "visited-ecPKp";
+var arrow = "arrow-hUG12";
+var css_248z = ".verticalItem-EHV6R {\n  font-size: 12px;\n  padding: 12px 16px;\n  width: calc(100% - 32px);\n  color: #fff;\n  position: relative;\n  cursor: pointer;\n  background-color: #2e4351;\n  display: flex;\n  justify-content: space-between;\n  line-height: 20px;\n  border-bottom: #fdfdfd 1px solid;\n  transition: border 0.3s ease;\n}\n.open-class-cQobQ.verticalItem-EHV6R {\n  border-bottom: none;\n}\n\n.visited-ecPKp {\n  background-color: #142a37;\n}\n\n.arrow-hUG12 {\n  width: 8px;\n  height: 20px;\n  margin-right: 6px;\n  background: center / 100% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  transition: transform 0.3s ease;\n}\n\n.open-class-cQobQ .arrow-hUG12 {\n  transform: rotate(90deg);\n}\n";
+styleInject(css_248z);
+
+var Header = function Header(_ref) {
+  var tabGroup = _ref.tabGroup,
+    open = _ref.open;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(verticalItem, viewHandler.tabGroupAlreadyVisited(tabGroup) ? visited : undefined, open ? openClass : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(arrow)
+    })]
+  });
+};
+
+export { Header as default };

package/build/esm/index-0d7b459d.js

@@ -0,0 +1,51 @@
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.js';
+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 wcConfigSingleDiv = "wcConfigSingleDiv-Vcdzw";
+var wcConfigSingleText = "wcConfigSingleText-iKpxJ";
+var css_248z = "#wcConfigSingleCheckbox-FeN-P input {\n  zoom: 1.2;\n  transform: scale(2);\n  -ms-transform: scale(2);\n  -webkit-transform: scale(1.2);\n  -o-transform: scale(2);\n  -moz-transform: scale(2);\n  transform-origin: 0 0;\n  -ms-transform-origin: 0 0;\n  -webkit-transform-origin: 0 0;\n  -o-transform-origin: 0 0;\n  -moz-transform-origin: 0 0;\n  margin: 3px 10px 3px 10px;\n}\n.wcConfigSingleDiv-Vcdzw {\n  min-height: 26px;\n  margin-top: 2px;\n  width: auto;\n}\n.wcConfigSingleText-iKpxJ {\n  line-height: 24px;\n}\n";
+styleInject(css_248z);
+
+var SettingsConfigSingle = function SettingsConfigSingle(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var configSingleIsChanged = function configSingleIsChanged() {
+    viewHandler.paletteViewHandler.configSingleIsChanged();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: wcConfigSingleDiv,
+    id: "wcConfigSingleCheckbox",
+    children: [/*#__PURE__*/jsx("input", {
+      style: {
+        "float": 'left'
+      },
+      type: "checkbox",
+      checked: viewHandler.settingsState.doConfigSingle,
+      onClick: configSingleIsChanged
+    }), /*#__PURE__*/jsx("a", {
+      className: wcConfigSingleText,
+      onClick: configSingleIsChanged,
+      children: t('configurator.CONFIG_SINGLE')
+    })]
+  });
+};
+var SettingsConfigSingle$1 = observer(SettingsConfigSingle);
+
+export { SettingsConfigSingle$1 as default };

package/build/esm/index-0df3620f.js

@@ -0,0 +1,50 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.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-0e7ecc36.js

@@ -0,0 +1,178 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { u as useViewHandler } from './index-8b51bdc0.js';
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { s as svgWrapper, t as table, c as column, a as selected } from './index.module-8da4d7bf.js';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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 _excluded = ["plannerArticles", "curBox", "isExpanded"];
+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 SVGOverview = function SVGOverview(_ref) {
+  var plannerArticles = _ref.plannerArticles,
+    curBox = _ref.curBox;
+    _ref.isExpanded;
+    var props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useState = useState('None'),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var articlesLoaded = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articlesLoaded) return /*#__PURE__*/jsx(Fragment, {});
+  var articles = Object.values(articlesLoaded);
+  var filteredArticles = articles.filter(function (article) {
+    return article.hasCatalogPlannerArticle;
+  });
+  // _> Matche curSVG mit topSVG wenn gleich im Array dann grünes dropdown
+  // _> Pro Artikel Dropdown pro SVG mit aktuell noch allen Informationen
+
+  var curElement = plannerArticles[curBox];
+  var article = filteredArticles[curBox];
+  var svgCur = '';
+  var svgURL = '';
+  var svgObjs = [];
+  if (curElement === undefined) return /*#__PURE__*/jsx(Fragment, {});
+  if (curElement.topSvgsWithFormula) {
+    var _article$plannerData;
+    (_article$plannerData = article.plannerData) === null || _article$plannerData === void 0 || _article$plannerData.curSVG;
+    var curSVG = curElement.topSvgsWithFormula.find(function (item) {
+      var _article$plannerData2;
+      return item.SVG === ((_article$plannerData2 = article.plannerData) === null || _article$plannerData2 === void 0 ? void 0 : _article$plannerData2.curSVG);
+    });
+    if (curSVG) {
+      for (var i = 0; i < curElement.topSvgsWithFormula.length; i++) {
+        svgObjs.push(curElement.topSvgsWithFormula[i]);
+      }
+      svgURL = article.CatalogData.getCatImageURL(curSVG === null || curSVG === void 0 ? void 0 : curSVG.SVG, '');
+      svgCur = curSVG.SVG;
+      curSVG === null || curSVG === void 0 || curSVG.JsFormula;
+    }
+  }
+  if (!svgURL) {
+    svgURL = article.CatalogData.getCatImageURL(curElement.topSvg, '');
+    svgObjs.push({
+      SVG: svgURL,
+      Layer: curElement.topLayer,
+      AVC: curElement.topAVC,
+      AVO: curElement.topAVO,
+      AVU: curElement.topAVU,
+      AVN: curElement.topAVN,
+      AVS: curElement.topAVS,
+      HasAVL: curElement.topHasAVL,
+      HasAVR: curElement.topHasAVR,
+      JsFormula: ''
+    });
+  }
+  if (svgURL !== '') {
+    var getSVG = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(topSVGUrl) {
+        var response;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetch(topSVGUrl);
+            case 2:
+              response = _context.sent;
+              _context.t0 = setText;
+              _context.next = 6;
+              return response.text();
+            case 6:
+              _context.t1 = _context.sent;
+              (0, _context.t0)(_context.t1);
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getSVG(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    getSVG(svgURL);
+  } else if (text != 'None') setText('None');
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(svgWrapper),
+    children: /*#__PURE__*/jsxs("table", {
+      className: table,
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsxs("tr", {
+          className: column,
+          children: [/*#__PURE__*/jsx("th", {
+            children: "Nr"
+          }), /*#__PURE__*/jsx("th", {
+            children: "SVG"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Layer"
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVC"
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVO"
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVU "
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVN "
+          }), /*#__PURE__*/jsx("th", {
+            children: "AVS "
+          }), /*#__PURE__*/jsx("th", {
+            children: "HasAVL "
+          }), /*#__PURE__*/jsx("th", {
+            children: "HasAVR "
+          }), /*#__PURE__*/jsx("th", {
+            children: "JSFormula "
+          })]
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        children: Object.values(svgObjs).map(function (svgObj, index) {
+          return /*#__PURE__*/jsxs("tr", {
+            className: svgObj.SVG === svgCur ? selected : undefined,
+            children: [/*#__PURE__*/jsx("th", {
+              children: index + 1
+            }), /*#__PURE__*/jsx("th", {
+              children: /*#__PURE__*/jsx("img", {
+                src: article.CatalogData.getCatImageURL(svgObj.SVG, '')
+              })
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.Layer
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVC
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVO
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVU
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVN
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.AVS
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.HasAVL
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.HasAVR
+            }), /*#__PURE__*/jsx("th", {
+              children: svgObj.JsFormula
+            })]
+          }, svgObj.JsFormula);
+        })
+      })]
+    })
+  }));
+};
+var SVGOverview$1 = observer(SVGOverview);
+
+export { SVGOverview$1 as default };

package/build/esm/index-0f0546c7.js

@@ -0,0 +1,58 @@
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import IsActive from './index-f13d3b38.js';
+import InfoIcon from './index-fdebd928.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var articleItem = "ArticleItem-MKJ0R";
+var wcSize = "wcSize-NqLig";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Tn0PY";
+var wcImage = "wcImage-ui7-N";
+var css_248z = "/*Planner*/\n\n.ArticleItem-MKJ0R {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  float: left;\n}\n\n.ArticleItem-MKJ0R:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n.ArticleItem-MKJ0R:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.ArticleItem-MKJ0R:hover {\n  z-index: 200;\n}\n\n.ArticleItem-MKJ0R .wcSize-NqLig {\n  width: 100%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\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.ArticleItem-MKJ0R .wcConfigurator-settings-title-Tn0PY {\n  float: left;\n  margin-top: 11.2px;\n  margin-left: 11.2px;\n  max-width: calc(100% - 72px);\n  max-height: 64px;\n  min-height: 16px;\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  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.ArticleItem-MKJ0R .wcImage-ui7-N {\n  width: 60px;\n  height: 60px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\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  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.ArticleItem-MKJ0R .wcConfigurator-settings-title-Tn0PY:hover {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  background: #fff;\n}\n";
+styleInject(css_248z);
+
+var PlannerSwitch = function PlannerSwitch(_ref) {
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(articleItem),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickOnPlannerElementSwitch(item);
+    },
+    children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+      item: item
+    }, item.articleCodex), /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.imgSrc, ")")
+        },
+        title: item.title
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorSettingsTitle),
+        children: item.title
+      })]
+    })]
+  });
+};
+var PlannerSwitch$1 = observer(PlannerSwitch);
+
+export { PlannerSwitch$1 as default };

package/build/esm/index-10080e08.js

@@ -0,0 +1,70 @@
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import PriceSumm from './index-962c16a6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 wcConfiguratorAction = "wcConfigurator-action-iR7Ru";
+var actionWrapper = "action-wrapper-TYqko";
+var wcConfiguratorActionButton = "wcConfigurator-action-button-3hCIo";
+var wcCheckoutButtonText = "wcCheckoutButtonText-ac0CJ";
+var mobile = "mobile-wwCj2";
+var icon = "icon-WhJgC";
+var wcBookmarkIcon = "wcBookmarkIcon-rO-Z7";
+var wcConsulationIcon = "wcConsulationIcon-moUm6";
+var css_248z = ".wcConfigurator-action-iR7Ru {\n  background: rgba(242.2, 242.2, 242.2, 0.9);\n  transition: width 0.2s ease-in-out;\n  display: flex;\n  gap: 2%;\n}\n.action-wrapper-TYqko {\n  width: 100%;\n}\n\n.wcConfigurator-action-button-3hCIo {\n  background-color: var(--primaryColor);\n  background-color: var(--saveButton, var(--primaryColor));\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--saveButton, var(--primaryColor)) solid;\n  border-radius: var(--globalBorderRadius);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  line-height: var(--lineHeight1);\n  font-weight: var(--fontWeight1);\n  height: calc(100% - 2px);\n  font-size: 14px;\n  color: white;\n  -webkit-text-stroke: 0px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  transition: box-shadow 0.3s;\n}\n\n.wcConfigurator-action-button-3hCIo:hover {\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcConfigurator-settings-actions-isOnFirstStepDisabled--eOou .wcConfigurator-action-button-3hCIo {\n  pointer-events: none;\n  background-color: #c25353;\n  border-color: #c25353;\n}\n\n.wcCheckoutButtonPrice-ne06W {\n  float: right;\n  margin-right: 10%;\n}\n.wcCheckoutButtonIcon-9fAmS {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  width: 50%;\n  height: 50%;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  position: absolute;\n}\n\n.landscape-2ux1a .wcConfigurator-action-iR7Ru {\n  /*auser In die Zusammenfassung wird ausgeblendet*/\n  display: none;\n}\n.landscape-2ux1a .wcConfigurator-Settings-hidden-fR5wC.wcConfigurator-settings-actions-isOnLastStep-LzEID .wcConfigurator-action-iR7Ru {\n  display: none;\n}\n\n.landscape-2ux1a .wcConfigurator-action-iR7Ru .wcConfigurator-action-button-3hCIo {\n  line-height: var(--configuratorActionHeight);\n}\n.wcConfigurator-action-button-3hCIo .wcCheckoutButtonText-ac0CJ {\n  margin-top: 0px;\n}\n\n.landscape-2ux1a .wcConfigurator-action-button-3hCIo .wcCheckoutButtonText-ac0CJ,\n.portrait-8hnRF .wcConfigurator-action-button-3hCIo .wcCheckoutButtonText-ac0CJ {\n  margin-top: 0px;\n}\n\n.wcCheckoutButtonText-ac0CJ {\n  float: left;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n\n.mobile-wwCj2 .action-wrapper-TYqko {\n  display: flex;\n  justify-content: flex-end;\n  width: 38px;\n}\n\n.mobile-wwCj2 .wcConfigurator-action-button-3hCIo {\n  background: no-repeat url('data:image/jpeg;base64,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') center center;\n  background-size: 126%;\n  border-radius: 3px;\n  cursor: pointer;\n  height: 40px;\n  width: 40px;\n  z-index: 300;\n  border: 0px solid black;\n}\n\n.icon-WhJgC {\n  cursor: pointer;\n  border: solid 1px;\n  width: 38px;\n  height: 38px;\n  background-position: 50%;\n  background-size: contain;\n  background-repeat: no-repeat;\n  transition:\n    background 0.4s,\n    box-shadow 0.3s;\n  border-radius: 3px;\n}\n\n.icon-WhJgC:hover {\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcBookmarkIcon-rO-Z7 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M220-154.667V-750q0-30.905 22.189-53.35 22.188-22.445 53.606-22.445h368.41q31.418 0 53.606 22.445Q740-780.905 740-750v595.333L480-265.744 220-154.667Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcBookmarkIcon-rO-Z7:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M220-154.667V-750q0-30.905 22.246-53.35 22.247-22.445 53.549-22.445h368.41q31.302 0 53.549 22.445Q740-780.905 740-750v595.333L480-265.744 220-154.667Zm51.179-77.948L480-321.824l208.821 89.209V-750q0-9.231-7.693-16.923-7.692-7.693-16.923-7.693h-368.41q-9.231 0-16.923 7.693-7.693 7.692-7.693 16.923v517.385Zm0-542.001h417.642-417.642Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcConsulationIcon-moUm6 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M479.871-389.846q-13.589 0-24.115-10.655-10.525-10.654-10.525-24.243 0-13.589 10.654-24.115 10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.589-10.654 24.115-10.654 10.526-24.244 10.526Zm-160 0q-13.589 0-24.115-10.655-10.525-10.654-10.525-24.243 0-13.589 10.654-24.115 10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.589-10.654 24.115-10.654 10.526-24.244 10.526Zm320 0q-13.589 0-24.115-10.655-10.525-10.654-10.525-24.243 0-13.589 10.654-24.115 10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.589-10.654 24.115-10.654 10.526-24.244 10.526ZM479.871-236q-13.589 0-24.115-10.654-10.525-10.655-10.525-24.244t10.654-24.115q10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.59-10.654 24.115Q493.461-236 479.871-236Zm-160 0q-13.589 0-24.115-10.654-10.525-10.655-10.525-24.244t10.654-24.115q10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.59-10.654 24.115Q333.461-236 319.871-236Zm320 0q-13.589 0-24.115-10.654-10.525-10.655-10.525-24.244t10.654-24.115q10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.59-10.654 24.115Q653.461-236 639.871-236Zm-425.41 136q-31.302 0-53.548-22.246-22.246-22.247-22.246-53.549v-537.231q0-31.302 22.246-53.548 22.246-22.247 53.548-22.247h57.385v-80.41h55.539v80.41h308.307v-80.41h52.975v80.41h56.872q31.301 0 53.548 22.247 22.246 22.246 22.246 53.548v537.231q0 31.302-22.246 53.549Q776.84-100 745.539-100H214.461Zm0-51.179h531.078q9.23 0 16.923-7.693 7.692-7.692 7.692-16.923v-376H189.846v376q0 9.231 7.692 16.923 7.692 7.693 16.923 7.693Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcConsulationIcon-moUm6:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M214.461-100q-31.302 0-53.548-22.246-22.246-22.247-22.246-53.549v-537.231q0-31.302 22.246-53.548 22.246-22.247 53.548-22.247h57.385v-80.41h55.539v80.41h308.307v-80.41h52.975v80.41h56.872q31.301 0 53.548 22.247 22.246 22.246 22.246 53.548v537.231q0 31.302-22.246 53.549Q776.84-100 745.539-100H214.461Zm0-51.179h531.078q9.23 0 16.923-7.693 7.692-7.692 7.692-16.923v-376H189.846v376q0 9.231 7.692 16.923 7.692 7.693 16.923 7.693Zm-24.615-451.795h580.308v-110.052q0-9.231-7.692-16.923-7.693-7.692-16.923-7.692H214.461q-9.231 0-16.923 7.692-7.692 7.692-7.692 16.923v110.052Zm0 0v-134.667 134.667Zm290.025 213.128q-13.589 0-24.115-10.655-10.525-10.654-10.525-24.243 0-13.589 10.654-24.115 10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.589-10.654 24.115-10.654 10.526-24.244 10.526Zm-160 0q-13.589 0-24.115-10.655-10.525-10.654-10.525-24.243 0-13.589 10.654-24.115 10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.589-10.654 24.115-10.654 10.526-24.244 10.526Zm320 0q-13.589 0-24.115-10.655-10.525-10.654-10.525-24.243 0-13.589 10.654-24.115 10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.589-10.654 24.115-10.654 10.526-24.244 10.526ZM479.871-236q-13.589 0-24.115-10.654-10.525-10.655-10.525-24.244t10.654-24.115q10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.59-10.654 24.115Q493.461-236 479.871-236Zm-160 0q-13.589 0-24.115-10.654-10.525-10.655-10.525-24.244t10.654-24.115q10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.59-10.654 24.115Q333.461-236 319.871-236Zm320 0q-13.589 0-24.115-10.654-10.525-10.655-10.525-24.244t10.654-24.115q10.654-10.526 24.244-10.526 13.589 0 24.115 10.655 10.525 10.654 10.525 24.243 0 13.59-10.654 24.115Q653.461-236 639.871-236Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var BasketActionRalph = function BasketActionRalph(_ref) {
+  var _ref$buttonTextClassN = _ref.buttonTextClassName,
+    buttonTextClassName = _ref$buttonTextClassN === void 0 ? wcCheckoutButtonText : _ref$buttonTextClassN,
+    containerClassName = _ref.containerClassName;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wcConfiguratorAction, containerClassName, viewHandler.getIsInMobileView() ? mobile : undefined),
+    children: [!viewHandler.getIsInMobileView() && /*#__PURE__*/jsxs(Fragment, {
+      children: [viewHandler.eventIsManagedByClient('onRequestConsulation') && /*#__PURE__*/jsx("div", {
+        className: classnames(icon, wcConsulationIcon),
+        title: t('configurator.consulation'),
+        onClick: viewHandler.productState.onRequestConsulation
+      }), viewHandler.eventIsManagedByClient('onSave') && /*#__PURE__*/jsx("div", {
+        className: classnames(icon, wcBookmarkIcon),
+        title: t('configurator.bookmark'),
+        onClick: viewHandler.productState.onClickSave2
+      })]
+    }), viewHandler.getIsInMobileView() && /*#__PURE__*/jsx(PriceSumm, {}), /*#__PURE__*/jsx("div", {
+      className: actionWrapper,
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorActionButton),
+        onClick: function onClick() {
+          return viewHandler.actionButtonState.onClickAddToBasket();
+        },
+        id: "wcConfigurator-action-tobasket",
+        children: !viewHandler.getIsInMobileView() && /*#__PURE__*/jsx("div", {
+          className: buttonTextClassName,
+          children: t('configurator.ADD_TO_BASKET')
+        })
+      })
+    })]
+  });
+};
+var index = observer(BasketActionRalph);
+
+export { index as default };

package/build/esm/index-12c091c5.js

@@ -0,0 +1,143 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useState, useCallback, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import SettingsHeader from './index-7f8299f3.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var productsGrid = "products-grid-b9XWQ";
+var skeleton = "skeleton-XdjqR";
+var css_248z = ".products-grid-b9XWQ {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: 10px;\n  height: 100%;\n  padding-top: 16px;\n}\n\n.skeleton-XdjqR {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  color: var(--primaryColor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 22px;\n  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 16px 0px;\n}\n";
+styleInject(css_248z);
+
+var PromotedProducts = function PromotedProducts(_ref) {
+  var _viewHandler$configSt;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    openComponent = _useDivaCore.actions.openComponent,
+    productHandler = _useDivaCore.handler.productHandler,
+    organization = _useDivaCore.state.organization;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    groups = _useState2[0],
+    setGroups = _useState2[1];
+  var viewHandler = useViewHandler();
+  var productsConfig = viewHandler.getViewConfig().productsConfig;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    configChangedTimeStamp = _useState4[0],
+    setConfigChangedTimeStamp = _useState4[1];
+  var onAddProduct = useCallback(function (productId) {
+    setConfigChangedTimeStamp(viewHandler.settingsState.configChanged);
+    openComponent({
+      type: 'DIVA_WEBPLANNER',
+      parameters: {
+        productId: productId
+      },
+      internal: {
+        forceReload: '1'
+      }
+    });
+  }, [viewHandler]);
+  var selectedProduct = configChangedTimeStamp === viewHandler.settingsState.configChanged && ((_viewHandler$configSt = viewHandler.configState.productId) !== null && _viewHandler$configSt !== void 0 ? _viewHandler$configSt : !viewHandler.configState.divaNr && viewHandler.divaWebPlanner.getStartProductId());
+  useEffect(function () {
+    var _productsConfig$maxCo, _productsConfig$filte, _productsConfig$sort;
+    productHandler.apiLoadProductVariantsGrouped({
+      limit: (_productsConfig$maxCo = productsConfig === null || productsConfig === void 0 ? void 0 : productsConfig.maxCount) !== null && _productsConfig$maxCo !== void 0 ? _productsConfig$maxCo : undefined,
+      search: (_productsConfig$filte = productsConfig === null || productsConfig === void 0 ? void 0 : productsConfig.filter) !== null && _productsConfig$filte !== void 0 ? _productsConfig$filte : [{
+        id: 'availableForOrganizations',
+        op: 'eq',
+        value: organization._id
+      }, {
+        id: 'promotedForOrganizations',
+        op: 'eq',
+        value: organization._id
+      }],
+      sort: (_productsConfig$sort = productsConfig === null || productsConfig === void 0 ? void 0 : productsConfig.sort) !== null && _productsConfig$sort !== void 0 ? _productsConfig$sort : '{-created}'
+    }).then(function (result) {
+      var startProductIndex = result.data.findIndex(function (group) {
+        var _group$items$0$startP;
+        return (_group$items$0$startP = group.items[0].startProductForOrganizations) === null || _group$items$0$startP === void 0 ? void 0 : _group$items$0$startP.includes(organization._id);
+      });
+      if (startProductIndex != -1) {
+        var startProduct = result.data[startProductIndex];
+        result.data.splice(startProductIndex, 1);
+        result.data.unshift(startProduct);
+      }
+      setGroups(result.data);
+    });
+  }, [viewHandler.uiState.isLoading]);
+  var skeletons = productsConfig !== null && productsConfig !== void 0 && productsConfig.maxCount && productsConfig.showSkeletions ? getSkeletons(productsConfig.maxCount, groups.length) : [];
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item
+    }), /*#__PURE__*/jsxs("div", {
+      className: productsGrid,
+      children: [groups.map(function (group, i) {
+        return /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: {
+              type: 'ProductGallery',
+              products: group.items,
+              groupVariantsByField: ['dc_color', 'dc_mainColor'],
+              onClick: onAddProduct,
+              imageWrapperStyle: {
+                aspectRatio: 'unset'
+              },
+              wrapperStyle: group.items.find(function (i) {
+                return i._id == selectedProduct;
+              }) ? {
+                border: '1px solid var(--diva-theme-palette-primary-main)',
+                borderRadius: '5px'
+              } : undefined,
+              imageStyle: {
+                aspectRatio: '14.5 / 10',
+                objectFit: 'scale-down',
+                objectPosition: 'bottom'
+              }
+            }
+          }
+        }, group._id);
+      }), skeletons.map(function (index) {
+        return /*#__PURE__*/jsx("div", {
+          className: skeleton,
+          children: /*#__PURE__*/jsx("div", {
+            children: index
+          })
+        }, index);
+      })]
+    })]
+  });
+};
+var getSkeletons = function getSkeletons(maxCount, itemsCount) {
+  var skeletonsCount = 0;
+  if (maxCount > itemsCount) {
+    skeletonsCount = maxCount - itemsCount;
+  }
+  var skeletons = [];
+  if (skeletonsCount) {
+    for (var i = skeletonsCount - 1; i >= 0; i--) {
+      skeletons.push(maxCount - i);
+    }
+  }
+  return skeletons;
+};
+var PromotedProducts$1 = observer(PromotedProducts);
+
+export { PromotedProducts$1 as default };