@crystaldesign/diva-web-planner-react 25.8.0-rc.9 → 25.9.0-beta.10

package/build/esm/index-dd65d7a5.js

@@ -0,0 +1,125 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Outline = function Outline(_ref) {
+  var _item$size, _item$size2;
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState(item.position.x),
+    _useState4 = _slicedToArray(_useState3, 2),
+    posX = _useState4[0],
+    setPosX = _useState4[1];
+  var _useState5 = useState(item.position.y),
+    _useState6 = _slicedToArray(_useState5, 2),
+    posY = _useState6[0],
+    setPosY = _useState6[1];
+  var mouseDownDetected = false;
+
+  //LOG.log("Set outline UI x: " + posX + ", y: " + posY);
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    },
+    onTouchStart: function onTouchStart(e) {
+      if (e.touches.length != 1) return;
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc;
+        setIsDragging(true);
+        (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - mousePosOnScreenLastFrame.x, e.clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onTouchMove: function onTouchMove(e) {
+      if (e.touches.length != 1) return;
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc2;
+        setIsDragging(true);
+        (_item$onDragStartFunc2 = item.onDragStartFunction) === null || _item$onDragStartFunc2 === void 0 || _item$onDragStartFunc2.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct2;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - mousePosOnScreenLastFrame.x, e.touches[0].clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.touches[0].clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.touches[0].clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onMouseUp: function onMouseUp() {
+      if (isDragging) {
+        var _item$onDragEndFuncti;
+        setIsDragging(false);
+        (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd() {
+      if (isDragging) {
+        var _item$onDragEndFuncti2;
+        setIsDragging(false);
+        (_item$onDragEndFuncti2 = item.onDragEndFunction) === null || _item$onDragEndFuncti2 === void 0 || _item$onDragEndFuncti2.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    style: {
+      left: posX + 'px',
+      top: posY + 'px',
+      width: (item === null || item === void 0 || (_item$size = item.size) === null || _item$size === void 0 ? void 0 : _item$size.x) + 'px',
+      height: (item === null || item === void 0 || (_item$size2 = item.size) === null || _item$size2 === void 0 ? void 0 : _item$size2.y) + 'px',
+      transform: 'rotate(' + (item === null || item === void 0 ? void 0 : item.rotOfElement) + 'deg)'
+    },
+    className: classnames(isDragging ? plannerUIProps.classes.outline.outline2D.draggableActive : undefined, item.elemState == 'selected' ? plannerUIProps.classes.outline.outline2D.draggable : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.outline.outline2D.selectable : undefined)
+  });
+};
+var Outline$1 = observer(Outline);
+
+export { Outline$1 as default };

package/build/esm/index-de5ae83e.js

@@ -0,0 +1,136 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-75136b70.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-4cbeb72c.js';
+import classnames from 'classnames';
+import IsActive from './index-e18b8b86.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import GenericToolTip from './index-bdab7c1f.js';
+import InfoIcon from './index-c84c0bf5.js';
+import PricePreview from './index-d71c5c4c.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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+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-decde6ea.js

@@ -0,0 +1,84 @@
+import { s as styleInject, u as useViewHandler, _ as _onClickCheckout, I as Icon } from './index-75136b70.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { c as checkoutButton } from './index.module-b14d3bab.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfiguratorAction = "wcConfigurator-action-1kRvz";
+var wcConfiguratorActionButton = "wcConfigurator-action-Button-uCk2M";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-S5Uqm";
+var wcCheckoutButtonText = "wcCheckoutButtonText-AKaeu";
+var css_248z = ".wcConfigurator-action-1kRvz {\n  background: rgba(242.2, 242.2, 242.2, 0.9);\n  transition: width 0.2s ease-in-out;\n  display: flex;\n}\n\n.wcConfigurator-action-Button-uCk2M {\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  flex-grow: 1;\n  -webkit-text-stroke: 0px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.wcConfigurator-settings-actions-isOnFirstStepDisabled-4PqCh .wcConfigurator-action-Button-uCk2M {\n  pointer-events: none;\n  background-color: #c25353;\n  border-color: #c25353;\n}\n\n.wcConfigurator-action-Button-uCk2M:hover {\n  background-color: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n  cursor: pointer;\n  transition:\n    box-shadow 0.3s ease,\n    background-color 0.3s ease,\n    border-color 0.3s ease;\n\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcCheckoutButtonPrice-S5Uqm {\n  float: right;\n  margin-right: 10%;\n}\n.wcCheckoutButtonIcon-6TJQ5 {\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-1LGy8 .wcConfigurator-action-1kRvz {\n  /*auser In die Zusammenfassung wird ausgeblendet*/\n  display: none;\n}\n.landscape-1LGy8 .wcConfigurator-Settings-hidden-kvVds.wcConfigurator-settings-actions-isOnLastStep-BV9rP .wcConfigurator-action-1kRvz {\n  display: none;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz .wcConfigurator-action-Button-uCk2M {\n  line-height: var(--configuratorActionHeight);\n}\n.wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu,\n.portrait-ySRAg .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.wcCheckoutButtonText-AKaeu {\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";
+styleInject(css_248z);
+
+var BasketActionStandard = function BasketActionStandard(_ref) {
+  var _viewHandler$uiState$;
+  var _ref$buttonTextClassN = _ref.buttonTextClassName,
+    buttonTextClassName = _ref$buttonTextClassN === void 0 ? wcCheckoutButtonText : _ref$buttonTextClassN,
+    _ref$buttonPriceClass = _ref.buttonPriceClassName,
+    buttonPriceClassName = _ref$buttonPriceClass === void 0 ? wcCheckoutButtonPrice : _ref$buttonPriceClass,
+    containerClassName = _ref.containerClassName,
+    price = _ref.price,
+    showCheckoutButtons = _ref.showCheckoutButtons;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wcConfiguratorAction, containerClassName),
+    children: [showCheckoutButtons && ((_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.map(function (b, index) {
+      if (!evalVisible(b, viewHandler)) return /*#__PURE__*/jsx(Fragment, {});
+      return /*#__PURE__*/jsx("div", {
+        className: checkoutButton,
+        onClick: function onClick() {
+          return _onClickCheckout(b, viewHandler, index, t);
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          checkoutButton: b,
+          size: 32
+        })
+      }, index);
+    })), /*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorActionButton,
+      onClick: function onClick() {
+        return viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
+      },
+      id: "wcConfigurator-action-tobasket",
+      children: [/*#__PURE__*/jsx("div", {
+        className: buttonTextClassName,
+        children: t('configurator.ADD_TO_BASKET')
+      }), !hidePrices && viewHandler.tabGroupState.curTabGroupType == 'horizontal' && price && /*#__PURE__*/jsx("div", {
+        className: buttonPriceClassName,
+        children: price
+      })]
+    })]
+  });
+};
+var BasketActionStandard$1 = observer(BasketActionStandard);
+var evalVisible = function evalVisible(button, viewHandler) {
+  var rule = button.visibleNavigatorFunction; //button.visibleNavigatorFunction;
+  if (button.visibleRule && !eval(button.visibleRule)) return false;
+  if (rule === false || rule === undefined) return false;
+  return rule === true || viewHandler.uiState.isMobileLandscape && rule.includes('MOBILE_L') || viewHandler.uiState.isMobilePortrait && rule.includes('MOBILE_P') || !viewHandler.getIsInMobileView() && rule.includes('DESKTOP');
+};
+
+export { BasketActionStandard$1 as default };

package/build/esm/index-df1469ac.js

@@ -0,0 +1,120 @@
+import { u as useViewHandler } from './index-75136b70.js';
+import 'react';
+import classnames from 'classnames';
+import { r as row, b as columToggleName, t as title, n as name, s as sel, a as toggle } from './index.module-3edc0f08.js';
+import Toggle from './index-b2c9d3f7.js';
+import { getLogger } from '@crystaldesign/diva-core';
+import InfoIcon from './index-c84c0bf5.js';
+import PricePreview from './index-d71c5c4c.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import 'react-switch';
+
+var LOG = getLogger('Planner', 'ToggleName');
+var ToggleName = function ToggleName(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var items = item.groups[0].items;
+  var yesItem;
+  var noItem;
+  if (!items) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  for (var i = 0; i < items.length; i++) {
+    var _items$i$codex, _items$i$codex2;
+    if ((_items$i$codex = items[i].codex) !== null && _items$i$codex !== void 0 && _items$i$codex.startsWith('OPVNEIN')) {
+      noItem = items[i];
+    }
+    if ((_items$i$codex2 = items[i].codex) !== null && _items$i$codex2 !== void 0 && _items$i$codex2.startsWith('OPVJA')) {
+      yesItem = items[i];
+    }
+  }
+  if (!noItem || !yesItem) {
+    if (items.length == 2) {
+      noItem = items[0];
+      yesItem = items[1];
+    }
+    if (!noItem || !yesItem) {
+      LOG.warn('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', 'WC_0011');
+      item.isVisited = true;
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  }
+  var checked = noItem.sel == false;
+  var contentItem = (_item$selectedElement = item.selectedElements) !== null && _item$selectedElement !== void 0 && _item$selectedElement[0].contentItemId ? item.selectedElements[0] : item.optionContentItemId ? {
+    contentItemId: item.optionContentItemId,
+    codex: item.configStepKey
+  } : undefined;
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(columToggleName, title, name),
+      onClick: function onClick() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem, undefined, paletteId);
+      },
+      children: [noItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: noItem.pricePreviewPromise,
+        sel: noItem.sel
+      }), /*#__PURE__*/jsx("div", {
+        className: !checked ? sel : undefined,
+        dangerouslySetInnerHTML: {
+          __html: noItem.text
+        }
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(columToggleName, toggle),
+      children: /*#__PURE__*/jsx(Toggle, {
+        onChange: function onChange() {
+          viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, paletteId);
+        },
+        val: item,
+        alwaysActiveColor: true,
+        state: checked
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(columToggleName, title, name),
+      onClick: function onClick() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(yesItem, undefined, paletteId);
+      },
+      children: [yesItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: yesItem.pricePreviewPromise,
+        sel: yesItem.sel
+      }), /*#__PURE__*/jsx("div", {
+        className: checked ? sel : undefined,
+        dangerouslySetInnerHTML: {
+          __html: yesItem.text
+        }
+      })]
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        position: 'relative'
+      }
+    }, item.configStepKey)]
+  });
+};
+
+export { ToggleName as default };

package/build/esm/index-df67632b.js

@@ -0,0 +1,44 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-75136b70.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-db54a2f7.js';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import './index.module-b14d3bab.js';
+
+var container = "container-LaFKa";
+var back = "back-A14G4";
+var forth = "forth-6EUqO";
+var css_248z = ".container-LaFKa .back-A14G4 {\n  border: 1px var(--secondaryColor) solid;\n  border: 1px var(--navigateBack, var(--secondaryColor)) solid;\n  background-color: white;\n  color: var(--secondaryColor);\n  color: var(--navigateBack, var(--secondaryColor));\n  float: left;\n  width: 50%;\n  box-sizing: border-box;\n  flex-grow: 1;\n}\n\n.container-LaFKa .forth-6EUqO {\n  border: 1px var(--secondaryColor) solid;\n  background-color: var(--secondaryColor);\n  background-color: var(--navigateForth, var(--secondaryColor));\n  color: #ffffff;\n  color: var(--navigateForthFontColor, #ffffff);\n  float: right;\n  width: 50%;\n  box-sizing: border-box;\n  flex-grow: 1;\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 ActionNavigationGold = function ActionNavigationGold(props) {
+  return /*#__PURE__*/jsx(ActionNavigation, _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, container),
+    showBackButtonText: true,
+    backOverwrite: back,
+    forthOverwrite: forth
+  }));
+};
+var index = observer(ActionNavigationGold);
+
+export { index as default };

package/build/esm/index-e18b8b86.js

@@ -0,0 +1,32 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-75136b70.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+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 IsActive = function IsActive(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/IsActive"
+  }));
+};
+
+export { IsActive as default };

package/build/esm/index-e2c3fbf3.js

@@ -0,0 +1,52 @@
+import { a as usePlannerUIHandler } from './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var AVR = function AVR(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  var rotation = (item.rotOfElement ? item.rotOfElement : 0) + (item.iconRotDeg ? item.iconRotDeg : 0);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, undefined);
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px',
+      transform: 'rotate(' + rotation + 'deg)'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.dockingPoint.AVR.avr, iconIsSelected ? plannerUIProps.classes.dockingPoint.AVR.avrSel : undefined),
+    children: item.posNr
+  });
+};
+var AVR$1 = observer(AVR);
+
+export { AVR$1 as default };