@crystaldesign/diva-web-planner-react 25.2.1 → 25.2.2-rc.0

package/build/esm/index-f6e84e83.js

@@ -0,0 +1,134 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3e5bc115.js';
+import classnames from 'classnames';
+import { useHover, useLayer } from 'react-laag';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import MetaData from './index-4936df83.js';
+import GenericToolTip from './index-d3ce0ff4.js';
+import InfoIcon from './index-d729fdd9.js';
+import PricePreview from './index-ecb29558.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 '@crystaldesign/widget-contact-form';
+
+var articleItem = "ArticleItem-2xa9z";
+var sel = "sel-3vhEw";
+var replacemode = "replacemode-XssaJ";
+var wcArticleInfoContainer = "wcArticleInfoContainer-6umFd";
+var pricesAreHiddenClass = "pricesAreHiddenClass-5i5mY";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-C-sNn";
+var wcConfiguratorSettingsTitleSingleLine = "wcConfigurator-settings-title-single-line-xIggU";
+var wcSize = "wcSize-DKVv4";
+var wcSizeNormal = "wcSize-normal-H7PI-";
+var wcImage = "wcImage-bSQnw";
+var wcArticleSize = "wcArticleSize-FGDRM";
+var css_248z = "/*Planner*/\n\n.ArticleItem-2xa9z {\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  white-space: pre-line;\n  border: 3px solid transparent;\n  border: 3px solid var(--optionItemBorderColor, transparent);\n}\n.sel-3vhEw {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderSelColor, var(--primaryColor));\n}\n\n.ArticleItem-2xa9z:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.ArticleItem-2xa9z.replacemode-XssaJ:hover {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderHoverColor, var(--primaryColor));\n}\n\n.ArticleItem-2xa9z:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.wcArticleInfoContainer-6umFd {\n  display: flex;\n  float: left;\n  margin-top: 8px;\n  margin-left: 8px;\n  height: calc(100% - 14px);\n  max-width: calc(100% - 171.2px);\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.pricesAreHiddenClass-5i5mY .wcArticleInfoContainer-6umFd {\n  max-width: calc(100% - 100px);\n}\n\n.ArticleItem-2xa9z .wcConfigurator-settings-title-C-sNn {\n  display: -webkit-box;\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-2xa9z .wcConfigurator-settings-title-single-line-xIggU {\n  -webkit-line-clamp: 1;\n}\n.ArticleItem-2xa9z .wcSize-DKVv4 {\n  width: 98%;\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-2xa9z .wcSize-DKVv4.wcSize-normal-H7PI- {\n  max-height: 74px;\n}\n\n.ArticleItem-2xa9z .wcImagePlaceHolder-KQO1T {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.ArticleItem-2xa9z .wcImage-bSQnw {\n  width: 74px;\n  height: 74px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  margin-left: 3.2px;\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-2xa9z .wcArticleSize-FGDRM {\n  bottom: 8px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  z-index: 50;\n\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ArticleItem-2xa9z .wcArticleSize-FGDRM:hover {\n  overflow: visible;\n}\n@media all and (max-width: 1100px) {\n  .ArticleItem-2xa9z .wcSize-normal-H7PI- {\n    height: 96px;\n  }\n\n  .ArticleItem-2xa9z .wcConfigurator-settings-title-C-sNn {\n    -webkit-line-clamp: 2;\n  }\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 Article = function Article(_ref) {
+  var _renderLayer;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet,
+    hidePrices = _useDivaCore$state.hidePrices;
+  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 && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || !item.price;
+  var isInReplaceMode = viewHandler.settingsState.plannerReplaceMode && !(paletteId == 1 && viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    className: classnames(articleItem, pricesAreHidden ? pricesAreHiddenClass : undefined, 'wcConfigurator_Article', item.sel ? sel : undefined, isInReplaceMode ? replacemode : undefined),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnPlannerPalette(item, paletteId);
+    }
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.imgSrc, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcArticleInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible ? wcConfiguratorSettingsTitleSingleLine : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.title
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+          text: item.title,
+          desciption: metaDataVisible,
+          codex: item.articleCodex,
+          image: item.imgSrc,
+          layerProps: layerProps
+        }, item.codex))), /*#__PURE__*/jsx("div", {
+          className: classnames(wcArticleSize),
+          children: item.sizeInfo
+        })]
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item,
+        style: {
+          bottom: 8
+        }
+      })]
+    }), !pricesAreHidden && /*#__PURE__*/jsx(PricePreview, {
+      price: item.price,
+      style: {
+        right: -3,
+        top: -3,
+        paddingTop: 6
+      }
+    })]
+  }));
+};
+var Article$1 = observer(Article);
+
+export { Article$1 as default };

package/build/esm/index-f8599caf.js

@@ -0,0 +1,161 @@
+import { s as styleInject } from './index-3e5bc115.js';
+import 'react';
+import { w as wcBoxPlannerAddElement, a as wcBoxPlannerAddElementLeft, b as wcBoxPlannerAddElementTop, c as wcBoxPlannerAddElementRight, h as wc2DRotClock, i as wc2DRotCounterClock, d as wcPlanner3DRot, e as wcPlanner3DMove, f as wcPlannerDistanceToGround, g as wcPlannerArrowDistanceToGround } from './index.module-1d4abd0e.js';
+import { w as wcUi2DOutlineDraggable, a as wcUi2DOutlineDraggableActive, b as wcUi2DOutlineSelectable, c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-7293ae45.js';
+import PlannerUI from './index-fe0787ca.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { 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';
+import './index-02e333d0.js';
+import './index-20b9debe.js';
+import './index-5313f095.js';
+import './index-1b33069b.js';
+import './index-20408249.js';
+import './index-9a8e9430.js';
+import './index-0939106d.js';
+import './index-d6da74a2.js';
+import './index-d9cd1dd5.js';
+import './index-c3a75aff.js';
+import './index-e0775b83.js';
+import './index-dd0f63d7.js';
+import './index-6db2259a.js';
+import 'react-draggable';
+import './index-21a0cdae.js';
+import './index-b6b87ffa.js';
+import './index-d9f7e878.js';
+
+var wcPlannerButton = "wcPlannerButton-hPp4U";
+var mobile = "mobile-ZE7fr";
+var css_248z$6 = ".wcPlannerButton-hPp4U {\n  position: absolute;\n  background-repeat: no-repeat;\n  transition: background-image 0.2s ease-in-out;\n  --globalSize: 40px;\n  --posNrSize: var(--globalSize);\n  --trashSize: var(--globalSize);\n  --rotSize: var(--globalSize);\n  --copySize: var(--globalSize);\n  --fontSize: 26px;\n  --copyArrowSize: var(--globalSize);\n}\n\n.mobile-ZE7fr {\n  --globalSize: 28px;\n  --fontSize: 17px;\n}\n";
+styleInject(css_248z$6);
+
+var wcUi2DDpAvl = "wcUI2D_DP_AVL-iHhPw";
+var wcUi2DDpAvlSel = "wcUI2D_DP_AVL_SEL-SFLkk";
+var css_248z$5 = "/*STANDARD*/\n\n.wcUI2D_DP_AVL-iHhPw {\n  height: 40px;\n  width: 40px;\n\n  margin-top: -20px;\n  margin-left: -20px;\n\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0);\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle opacity%3D%220.5%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 transform%3D%22rotate(-180 20 20)%22 fill%3D%22%23E5E5E5%22%2F%3E%3Cpath d%3D%22M7 20L20 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M13 14L7 20.0606L13 26%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%224%22 transform%3D%22rotate(-180 20 20)%22 fill%3D%22%234B4B4B%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  z-index: 263;\n}\n\n.wcUI2D_DP_AVL-iHhPw:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle opacity%3D%220.5%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 transform%3D%22rotate(-180 20 20)%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M7 20L20 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M13 14L7 20.0606L13 26%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%224%22 transform%3D%22rotate(-180 20 20)%22 fill%3D%22%234B4B4B%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcUI2D_DP_AVL_SEL-SFLkk::after {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  content: '';\n  background-color: var(--primaryColor);\n  border-radius: var(--articlePosNrRadius);\n  opacity: 0.3;\n}\n";
+styleInject(css_248z$5);
+
+var wcUi2DDpAvr = "wcUI2D_DP_AVR-exJDT";
+var wcUi2DDpAvrSel = "wcUI2D_DP_AVR_SEL-RiZkU";
+var css_248z$4 = "/*STANDARD*/\n\n.wcUI2D_DP_AVR-exJDT {\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0);\n\n  margin-top: -20px;\n  margin-left: -20px;\n\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle opacity%3D%220.5%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23E5E5E5%22%2F%3E%3Cpath d%3D%22M33 20L20 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M27 26L33 19.9394L27 14%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%224%22 fill%3D%22%234B4B4B%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  z-index: 263;\n}\n\n.wcUI2D_DP_AVR-exJDT:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle opacity%3D%220.5%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M33 20L20 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M27 26L33 19.9394L27 14%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%224%22 fill%3D%22%234B4B4B%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcUI2D_DP_AVR_SEL-RiZkU::after {\n  width: 40px;\n  height: 40px;\n  content: '';\n  background-color: var(--primaryColor);\n  border-radius: var(--articlePosNrRadius);\n  opacity: 0.3;\n}\n";
+styleInject(css_248z$4);
+
+var wcUi2DDpAvDocking = "wcUI2D_DP_AV_DOCKING-B4pye";
+var wcUi2DDpAvNotDocking = "wcUI2D_DP_AV_NOT_DOCKING-lVgqL";
+var wcUi2DDpAvNotDockingSel = "wcUI2D_DP_AV_NOT_DOCKING_SEL-IB1dU";
+var wcUi3DDpAvDocking = "wcUI3D_DP_AV_DOCKING-WVzbw";
+var wcUi3DDpAvNotDocking = "wcUI3D_DP_AV_NOT_DOCKING-knDpA";
+var wcUi3DDpAvNotDockingSel = "wcUI3D_DP_AV_NOT_DOCKING_SEL-gFJW1";
+var css_248z$3 = "/*STANDARD*/\n.wcUI2D_DP_AV_DOCKING-B4pye {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: calc(var(--globalSize) * -0.5);\n  z-index: 263;\n}\n.wcUI2D_DP_AV_NOT_DOCKING-lVgqL {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M20 27L20 13%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: calc(var(--globalSize) * -0.5);\n  z-index: 263;\n}\n.wcUI2D_DP_AV_NOT_DOCKING-lVgqL:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M20 27L20 13%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcUI2D_DP_AV_NOT_DOCKING_SEL-IB1dU::after {\n  position: absolute;\n  width: var(--globalSize);\n  height: var(--globalSize);\n  background-color: var(--primaryColor);\n  border-radius: var(--articlePosNrRadius);\n  opacity: 0.5;\n}\n\n.wcUI3D_DP_AV_DOCKING-WVzbw {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: 0px;\n  z-index: 270;\n}\n\n.wcUI3D_DP_AV_DOCKING-WVzbw:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcUI3D_DP_AV_NOT_DOCKING-knDpA {\n  background-size: 100%;\n  background-position: center center;\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  height: var(--globalSize);\n  width: var(--globalSize);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M20 27L20 13%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  margin-top: calc(var(--globalSize) * -0.5);\n  margin-left: 0px;\n  z-index: 270;\n}\n.wcUI3D_DP_AV_NOT_DOCKING-knDpA:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 rx%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M27 20L13 20%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M20 27L20 13%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcUI3D_DP_AV_NOT_DOCKING_SEL-gFJW1::after {\n  position: absolute;\n  width: var(--globalSize);\n  height: var(--globalSize);\n  content: '';\n  border-radius: var(--articlePosNrRadius);\n  opacity: 0.5;\n}\n";
+styleInject(css_248z$3);
+
+var wcUiCopy = "wcUI_Copy-zGN0x";
+var css_248z$2 = "/*STANDARD*/\n.wcUI_Copy-zGN0x {\n  width: var(--copySize);\n  height: var(--copySize);\n  border-radius: 50%;\n  background: #f5f5f5;\n  background-repeat: no-repeat;\n  text-align: center;\n  cursor: pointer;\n  background-size: 70%;\n  margin-top: calc(var(--copySize) / -2);\n  margin-left: calc(var(--copySize) / -2);\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2226%22 height%3D%2226%22 viewBox%3D%220 0 26 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M20.6426 6.40527H8.20862V22.9839H20.6426V6.40527Z%22 stroke%3D%22%23555050%22 stroke-width%3D%221.5%22%2F%3E%3Cpath d%3D%22M4.75452 19.5298V2.95117H17.1885%22 stroke%3D%22%23555050%22 stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E\");\n  z-index: 262;\n}\n\n.wcUI_Copy-zGN0x:hover {\n  background-color: #c4c4c4;\n}\n";
+styleInject(css_248z$2);
+
+var wcUiDel = "wcUI_Del-S-iQr";
+var boxplanner = "boxplanner-8JTKR";
+var css_248z$1 = "/*STANDARD*/\n.wcUI_Del-S-iQr {\n  width: var(--trashSize);\n  height: var(--trashSize);\n  border-radius: 50%;\n  background: #f5f5f5;\n  text-align: center;\n  cursor: pointer;\n  margin-top: calc(var(--trashSize) / -2);\n  margin-left: calc(var(--trashSize) / -2);\n  background-position: center center;\n  background-size: 110%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M11 13.7127L29 13.7124M14.2348 28.9391L13.2581 14.2008V13.9969L13.2987 13.7127H26.7004L26.7419 13.9969V14.1602L25.7644 28.9391C23.9718 29.0203 16.2719 29.0203 14.2348 28.9391ZM17.0933 13.712H22.9067V11H17.0933V13.712Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M21.8885 16.8988V25.8406M18.0547 16.8721V25.8139V16.8721Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  z-index: 262;\n}\n\n.wcUI_Del-S-iQr:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M11 13.7127L29 13.7124M14.2348 28.9391L13.2581 14.2008V13.9969L13.2987 13.7127H26.7004L26.7419 13.9969V14.1602L25.7644 28.9391C23.9718 29.0203 16.2719 29.0203 14.2348 28.9391ZM17.0933 13.712H22.9067V11H17.0933V13.712Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M21.8885 16.8988V25.8406M18.0547 16.8721V25.8139V16.8721Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.boxplanner-8JTKR.wcUI_Del-S-iQr {\n  margin-left: calc(var(--trashSize) * -0.8);\n  margin-top: calc(var(--trashSize) * 0.3);\n}\n";
+styleInject(css_248z$1);
+
+var wcPlannerPosNr = "wcPlanner_PosNr-I5lrs";
+var wcPlannerPosNrSelectableArea = "wcPlanner_PosNr_Selectable_Area-mxnmd";
+var wcPlannerPosNrSelected = "wcPlanner_PosNr_Selected-VNG2p";
+var wcPlannerPosNrSelectable = "wcPlanner_PosNr_Selectable-XKr-h";
+var wcPlannerPosNrUnSelectable = "wcPlanner_PosNr_UnSelectable-Tm4HU";
+var wcPlannerPosNrOnHover = "wcPlanner_PosNr_OnHover-uUbHT";
+var css_248z = "/*Standard*/\n\n.wcPlanner_PosNr-I5lrs {\n  width: var(--posNrSize);\n  height: var(--posNrSize);\n  border-radius: 50%;\n  font-size: var(--fontSize);\n  line-height: var(--posNrSize);\n  text-align: center;\n  margin-top: calc(var(--posNrSize) / -2);\n  margin-left: calc(var(--posNrSize) / -2);\n  cursor: pointer;\n  z-index: 262;\n}\n\n.wcPlanner_PosNr-I5lrs:hover {\n  background: #c4c4c4;\n}\n\n.wcPlanner_PosNr_Selectable_Area-mxnmd {\n  width: var(--posNrSize);\n  height: var(--posNrSize);\n  position: absolute;\n  background-color: rgba(100, 100, 100, 0);\n  cursor: pointer;\n}\n.wcPlanner_PosNr_Selected-VNG2p {\n  background: var(--primaryColor);\n  color: #ffffff;\n}\n.wcPlanner_PosNr_Selectable-XKr-h {\n  background: #f5f5f5;\n  color: #4b4b4b;\n}\n\n.wcPlanner_PosNr_UnSelectable-Tm4HU {\n  background: #dfdfdf;\n  color: rgb(175, 172, 172);\n  cursor: inherit;\n}\n\n.wcPlanner_PosNr_UnSelectable-Tm4HU:hover {\n  background: #dfdfdf;\n}\n\n.wcPlanner_PosNr_OnHover-uUbHT {\n  background-color: #a3a3a3;\n  transition: background-color 0.15s ease;\n}\n";
+styleInject(css_248z);
+
+var StandardPlannerUI = function StandardPlannerUI() {
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  var plannerUIProps = {
+    classes: {
+      buttonGeneral: classnames(wcPlannerButton, isMobile ? mobile : undefined),
+      dockingPoint: {
+        AVL: {
+          avl: wcUi2DDpAvl,
+          avlSel: wcUi2DDpAvlSel
+        },
+        AVR: {
+          avr: wcUi2DDpAvr,
+          avrSel: wcUi2DDpAvrSel
+        },
+        DPACC: {
+          dp2DAccDocking: wcUi2DDpAvDocking,
+          dp2DAccNotDocking: wcUi2DDpAvNotDocking,
+          dp2DAccNotDockingSel: wcUi2DDpAvNotDockingSel,
+          dp3DAccDocking: wcUi3DDpAvDocking,
+          dp3DAccNotDocking: wcUi3DDpAvNotDocking,
+          dp3DAccNotDockingSel: wcUi3DDpAvNotDockingSel
+        }
+      },
+      copy: {
+        BoxPlannerCopy: {
+          copyGlobal: wcBoxPlannerAddElement,
+          copyLeft: wcBoxPlannerAddElementLeft,
+          copyTop: wcBoxPlannerAddElementTop,
+          copyRight: wcBoxPlannerAddElementRight
+        },
+        ElementCopy: wcUiCopy
+      },
+      outline: {
+        outline2D: {
+          draggable: wcUi2DOutlineDraggable,
+          draggableActive: wcUi2DOutlineDraggableActive,
+          selectable: wcUi2DOutlineSelectable
+        },
+        outline3D: {
+          outlineSVG: wc3DOutlineSvg,
+          outlinePolygon: wc3DOutlinePolygon,
+          outlinePolygonContours: wc3DOutlinePolygonContours,
+          outlinePolygonContoursSel: wc3DOutlinePolygonContoursSel
+        }
+      },
+      posNr: {
+        posNr: wcPlannerPosNr,
+        posNrAcc: '',
+        posNrSelectable: wcPlannerPosNrSelectable,
+        posNrSelectableArea: wcPlannerPosNrSelectableArea,
+        posNrSelected: wcPlannerPosNrSelected,
+        posNrUnSelectable: wcPlannerPosNrUnSelectable,
+        posNrOnHover: wcPlannerPosNrOnHover
+      },
+      rotation: {
+        rotClock: wc2DRotClock,
+        rotCounterClock: wc2DRotCounterClock,
+        rot3DGrid: wcPlanner3DRot
+      },
+      move3DGrid: {
+        move3DGrid: wcPlanner3DMove
+      },
+      trash: {
+        trashClass: wcUiDel,
+        boxplanner: boxplanner
+      },
+      dimension: {
+        distanceToGround: wcPlannerDistanceToGround,
+        distanceToGroundIcon: wcPlannerArrowDistanceToGround
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(PlannerUI, {
+    plannerUIProps: plannerUIProps
+  });
+};
+
+export { StandardPlannerUI as default };

package/build/esm/index-f8c6ea54.js

@@ -0,0 +1,156 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3e5bc115.js';
+import Dropdown from 'react-dropdown';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import InfoIcon from './index-d729fdd9.js';
+import MarqueeText from 'react-marquee-text';
+import PricePreview from './index-ecb29558.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/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 wcDropDownSelect = "wcDropDownSelect-RE7qJ";
+var dropDownArea = "dropDownArea-yEewD";
+var dropOption = "dropOption-i-M5T";
+var row = "row-80qIj";
+var title = "title-2mKgp";
+var colum = "colum-cjf3n";
+var dropdownWidth = "dropdownWidth-D5Fng";
+var image = "image-7MOa9";
+var text = "text-7Q0NH";
+var css_248z$1 = ".wcDropDownSelect-RE7qJ {\n  padding: 8px 24px 8px 8px !important;\n  box-sizing: border-box !important;\n}\n\n.wcDropDownSelect-RE7qJ {\n  height: 2.4375rem;\n  padding: 0.5rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 22px;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -1rem center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 1.5rem;\n  transition:\n    box-shadow 0.5s,\n    border-color 0.25s ease-in-out;\n  font-weight: 300;\n}\n\n.dropDownArea-yEewD {\n  max-height: 520px !important;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  display: inline-block !important;\n}\n\n.dropDownArea-yEewD {\n\n  right: 0;\n  min-width: 152px;\n  max-width: 370px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n.dropOption-i-M5T {\n  position: relative;\n}\n.dropDownArea-yEewD .dropOption-i-M5T {\n  white-space: nowrap;\n}\n.wcDropDownSelect-RE7qJ .dropOption-i-M5T {\n  width: 110px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.row-80qIj {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-2mKgp {\n  text-align: left;\n  padding-bottom: 9px;\n  padding-top: 9px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.colum-cjf3n {\n  width: 50%;\n}\n.dropdownWidth-D5Fng {\n  width: 155px;\n  margin: 10px 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.image-7MOa9 {\n  width: 45%;\n}\n.text-7Q0NH {\n  padding-right: 64px;\n}\n";
+styleInject(css_248z$1);
+
+var css_248z = "/*\n@ts-ignore\n*/\n@keyframes marqueeScroll {\n  to {\n    transform: translate3d(0, 0, 0);\n  }\n}\n";
+styleInject(css_248z);
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var DropDowmText = function DropDowmText(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var allItemsP = item.groups.flatMap(function (group) {
+    return group.items;
+  });
+  var allItems = allItemsP;
+  var sel = allItems.find(function (item) {
+    return item.sel;
+  });
+  var _useState = useState(sel === null || sel === void 0 ? void 0 : sel.text),
+    _useState2 = _slicedToArray(_useState, 2),
+    actValue = _useState2[0],
+    setActValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forceClick = _useState4[0],
+    setForceClick = _useState4[1];
+  useEffect(function () {
+    var val = allItems.find(function (item) {
+      return item.codex == actValue;
+    });
+    if (val) viewHandler.paletteViewHandler.clickedOnConfigPalette(val, undefined, paletteId);
+  }, [actValue, forceClick]);
+  var selOption = undefined;
+  var options = [];
+  var onChange = function onChange(val) {
+    setActValue(val.value);
+    setForceClick(!forceClick);
+  };
+  var _iterator = _createForOfIteratorHelper(allItems),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item = _step.value;
+      var option = {
+        label: /*#__PURE__*/jsxs("div", {
+          className: dropOption,
+          children: [/*#__PURE__*/jsx("div", {
+            className: text,
+            dangerouslySetInnerHTML: {
+              __html: _item.text
+            }
+          }), _item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+            asyncPricePreview: _item.pricePreviewPromise,
+            sel: _item.sel
+          })]
+        }),
+        text: _item.text,
+        value: _item.codex
+      };
+      if (_item.sel) {
+        selOption = {
+          label: _item.text.length > 16 ? /*#__PURE__*/jsx(MarqueeText, {
+            direction: "right",
+            duration: 8,
+            textSpacing: '8px',
+            children: _item.text
+          }) : /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            dangerouslySetInnerHTML: {
+              __html: _item.text
+            }
+          }),
+          text: _item.text,
+          value: _item.codex
+        };
+      }
+      options.push(option);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  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__*/jsx("div", {
+      className: classnames(colum, title),
+      children: item.name
+    }), /*#__PURE__*/jsx(Dropdown, {
+      className: dropdownWidth,
+      controlClassName: wcDropDownSelect,
+      menuClassName: dropDownArea,
+      options: options,
+      value: selOption,
+      placeholderClassName: dropOption,
+      onChange: onChange
+    }), item.type == 'DROPDOWN_IMAGE' && (sel === null || sel === void 0 ? void 0 : sel.image) && /*#__PURE__*/jsx("img", {
+      className: image,
+      src: sel.image.replace('_gal.', '.')
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        bottom: '24px',
+        right: '20px'
+      }
+    })]
+  });
+};
+var index = observer(DropDowmText);
+
+export { index as default };

package/build/esm/index-f975c45e.js

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

package/build/esm/index-fd4e665a.js

@@ -0,0 +1,82 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-3e5bc115.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfiguratorSettingsSearch = "wcConfigurator-settings-Search-E9-UU";
+var wcInScroller = "wcInScroller-85YS9";
+var wcConfiguratorSettingsSearchExpanded = "wcConfigurator-settings-SearchExpanded-Jceqy";
+var wcConfiguratorSettingsSearchMaxExpanded = "wcConfigurator-settings-SearchMaxExpanded-AGbgn";
+var filterNotVisible = "filter-not-visible-Os1H1";
+var css_248z = "/*SearchFilter*/\n\n.wcConfigurator-settings-Search-E9-UU {\n  width: 96px;\n  margin-right: 12px;\n  font-size: 14.4px;\n  line-height: 20.8px;\n  border-radius: var(--globalBorderRadius);\n  border: none;\n  float: right;\n  color: var(--secondaryColor);\n  transition: 0.35s ease;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n\n  transition: width 0.2s ease;\n  max-width: 240px;\n}\n\n.wcInScroller-85YS9.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcInScroller-85YS9.wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n  display: block;\n  line-height: 20.8px;\n  width: 100%;\n  max-width: 192px;\n  padding-left: 1.1em;\n}\n\n.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n  width: 160px;\n  margin-right: 48px;\n  line-height: 27.2px;\n  font-size: 17px;\n}\n\n.wcConfigurator-settings-Search-E9-UU:focus {\n  outline: medium none invert;\n  outline: initial;\n}\n\n@media all and (max-width: 1350px) and (orientation: landscape), all and (max-width: 1350px) and (min-width: 801px) and (orientation: portrait) {\n  .wcConfigurator-settings-SearchExpanded-Jceqy,\n  .wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n    display: block;\n  }\n}\n\n.wcInScroller-85YS9.wcConfigurator-settings-Search-E9-UU.filter-not-visible-Os1H1 {\n  height: 25.6px;\n  display: block;\n  margin-right: 0px;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["isInScroller", "item", "doShowFilter"];
+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 Seachbar = function Seachbar(_ref) {
+  var isInScroller = _ref.isInScroller,
+    item = _ref.item,
+    doShowFilter = _ref.doShowFilter,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var filterFreeTextChanged = function filterFreeTextChanged(searchValue, paletteId) {
+    if (searchValue !== '') {
+      viewHandler.settingsState.onAllGroups(paletteId, false);
+    } else {
+      if (viewHandler.paletteViewHandler.isGroupFolded(item.id)) {
+        viewHandler.settingsState.onAllGroups(paletteId, true);
+      }
+    }
+    viewHandler.paletteViewHandler.onSearchTextChanged(searchValue, paletteId);
+  };
+  var searchElement = useRef(null);
+  useEffect(function () {
+    var palette = viewHandler.settingsState.itemPalettes.get(item.id);
+    if ((palette === null || palette === void 0 ? void 0 : palette.configStepKey) === item.configStepKey) viewHandler.settingsState.updateItemPalette(palette.id, _objectSpread(_objectSpread({}, palette), {}, {
+      htmlInputElement: searchElement.current
+    }));
+  }, [searchElement]);
+  return /*#__PURE__*/jsx("form", {
+    autoComplete: "off",
+    onSubmit: function onSubmit(e) {
+      return e.preventDefault();
+    },
+    style: {
+      height: 'fit-content',
+      marginBottom: 0
+    },
+    children: /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({}, props), {}, {
+      ref: searchElement,
+      className: classnames(wcConfiguratorSettingsSearch, doShowFilter ? undefined : filterNotVisible, viewHandler.uiState.configSettingsIsExpanded ? wcConfiguratorSettingsSearchExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? wcConfiguratorSettingsSearchMaxExpanded : undefined, isInScroller ? wcInScroller : undefined),
+      autoComplete: 'off',
+      value: item.searchText,
+      onKeyUp: function onKeyUp(e) {
+        return filterFreeTextChanged(e.target.value, item.id);
+      },
+      placeholder: t('configurator.QUICKFILTER'),
+      type: "text",
+      "data-test-id": "plannerSearchbar"
+    }))
+  });
+};
+var Searchbar = observer(Seachbar);
+
+export { Searchbar as default };

package/build/esm/index-fde74a29.js

@@ -0,0 +1,26 @@
+import './index-3e5bc115.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+var PlannerUIVariant = function PlannerUIVariant() {
+  return /*#__PURE__*/jsx(DynamicMultiRender, {
+    componentName: "Product/ProductCenter/PlannerUI/PlannerUIVariants"
+  });
+};
+
+export { PlannerUIVariant as default };