@crystaldesign/diva-web-planner-react 25.8.1-rc.0 → 25.8.1-rc.2

package/build/esm/index-7b282e19.js

@@ -0,0 +1,60 @@
+import './index-c79e55a2.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Dropdown from 'react-dropdown';
+import { w as wrapper, d as dropdownRoot, a as dropdownControl } from './index.module-6019f3df.js';
+import Arrow from './index-ce25e667.js';
+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 OptionsSelector = function OptionsSelector(_ref) {
+  var options = _ref.options,
+    optionState = _ref.optionState;
+  var ArrowElement = /*#__PURE__*/jsx(Arrow, {
+    onClick: function onClick() {
+      return optionState[1](undefined);
+    },
+    open: false,
+    iconAsDelete: !!optionState[0]
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    children: /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRoot),
+      controlClassName: dropdownControl,
+      options: options.map(function (option) {
+        return {
+          label: option.name,
+          value: option.codex
+        };
+      }),
+      value: optionState[0],
+      onChange: function onChange(val) {
+        return optionState[1](val.value);
+      },
+      placeholder: 'Option',
+      arrowClosed: ArrowElement,
+      arrowOpen: ArrowElement
+    })
+  });
+};
+var OptionSelector = observer(OptionsSelector);
+
+export { OptionSelector as default };

package/build/esm/index-7b5eea2d.js

@@ -0,0 +1,116 @@
+import { s as styleInject } from './index-c79e55a2.js';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getKey } from './index-d9794066.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 'sift';
+import './index-8ce5ac5c.js';
+import './index-6479c1c8.js';
+import './index-ed1c612e.js';
+import './index-63df4bf0.js';
+import './index-65b39565.js';
+import './index.module-52d2fb0f.js';
+import './index-dbf1c731.js';
+import 'react-switch';
+import './index-111f9695.js';
+import './index-d9a9da28.js';
+import './index-b22e97bc.js';
+import 'react-dropdown';
+import './index-854aad4a.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-efb19800.js';
+import './index-ce25e667.js';
+import './index-71059055.js';
+import '@crystaldesign/content-box';
+import './index-3d30ba2e.js';
+import './index-ab810bec.js';
+import './index-948a7439.js';
+import './index-ce57866b.js';
+import './index-ae0a7891.js';
+import './index-68eb5c0a.js';
+import 'react-laag';
+import './index-1a2c3c83.js';
+import './index-86d9fc00.js';
+import './index-715db398.js';
+import './index-ca679db8.js';
+import './index-402216ed.js';
+import './index-20920476.js';
+import './index-a8364ce8.js';
+import './index-1ccb8e87.js';
+import './index-24698433.js';
+import './index-01fcaad3.js';
+import './index.module-8ee21cc7.js';
+import './index-dffd19b8.js';
+import './index-ce9a8b23.js';
+import './index-087442cf.js';
+import './index-34350f6b.js';
+import './index-0fa7b691.js';
+import './index-a8c3d676.js';
+import './index-e910151b.js';
+import './index.module-61b2fc05.js';
+import './index-bcbcc54f.js';
+import './index-2dd77232.js';
+
+var container = "container-ebOfa";
+var title = "title--2-cN";
+var css_248z = ".container-ebOfa {\n  display: flex !important;\n  flex-wrap: wrap !important;\n  flex-direction: column !important;\n  margin-bottom: 3px !important;\n  background: rgba(242, 242, 242, 0.6) !important;\n  padding-top: 5px !important;\n}\n\n.title--2-cN {\n  padding-top: 3px;\n  text-align: center;\n  white-space: nowrap;\n  overflow: visible;\n  font-size: 12px;\n  color: #4b4b4b;\n  width: 100%;\n  overflow: visible;\n  height: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  z-index: 100;\n}\n";
+styleInject(css_248z);
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    PaletteComponent = _ref.PaletteComponent,
+    paletteId = _ref.paletteId,
+    rowCount = _ref.rowCount,
+    paletteType = _ref.paletteType,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var items = group.items;
+  var name = group.name !== 'none' ? group.name : t('configurator.other');
+  return /*#__PURE__*/jsx(Fragment, {
+    children: items.map(function (item, i) {
+      return /*#__PURE__*/jsxs("div", {
+        className: classnames(container, contentInnerClassName),
+        style: {
+          width: 'calc(' + 100 / rowCount + '%' + (i === 0 ? ' - 3px' : '') + ' - 5px)',
+          borderRadius: i === items.length - 1 && i === 0 ? '8px' : i === 0 ? '8px 0px 0px 8px' : i === items.length - 1 ? '0px 8px 8px 0px' : undefined,
+          marginLeft: i === 0 ? 3 : undefined,
+          paddingRight: '5px'
+        },
+        children: [/*#__PURE__*/jsx(PaletteComponent, {
+          paletteId: paletteId,
+          item: item,
+          paletteType: paletteType,
+          style: {
+            '--galleryItemRowCount': '1',
+            '--galleryItemRowCountSmall': '1',
+            paddingTop: 'unset'
+          }
+        }, getKey(item)), /*#__PURE__*/jsx("span", {
+          className: title,
+          children: i === 0 ? name : ''
+        })]
+      });
+    })
+  });
+};
+
+export { Group as default };

package/build/esm/index-7c207460.js

@@ -0,0 +1,81 @@
+import { s as styleInject, u as useViewHandler, a as usePlannerUIHandler } from './index-c79e55a2.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { jsxs, 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfiguratorGrid = "wcConfigurator-grid-DANlC";
+var wcConfiguratorGrid2DCanvas = "wcConfigurator-grid-2D-canvas-kC0d5";
+var grid2DBg = "Grid2D_BG-qKtq3";
+var css_248z = ".wcConfigurator-grid-DANlC {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  width: 100% !important;\n  height: 100% !important;\n  position: absolute !important;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  z-index: 5;\n}\n\n.Grid2D_BG-qKtq3 {\n  background-repeat: repeat;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  position: absolute;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfdDAUQEiovM6IXAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMUfzQjcAAAP7SURBVHhe7ZzZbtsKEEP7/38Yf0JWZEGWJxc0MMVAGFMUwN6rynw4DeA5kSkRUTBO7V8/Pz/nNZ6ensbHlzi97+9vyfv6+rp4W9xp1nF65eB8pnnndDqdU8hAChlIIQQlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQq5QFwZf11BOwu19fn5evC3uNOs4vXJwPtO8cykE8hG4v78fH98Lr6+vq9zd3eWWNbHrWxZQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXwAFxYIa63dbxpllH9ep5t7jTrOP0ysH5TPPOpRDIR2Dvm/rb29u4nXeyqV/B6ZUj/4RMgyVKOOD0UghBCQecXgohKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vZstBN/AqE1zmnXU7Va90KpXz/v4+DjOO2pGp1eOXAjkI/Dw8DA+vhewqa+RTf0KTq8c+SdkGixRwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXqAOuoZyE26tNGIvhNO9kU/8P2fum/v7+fv74+KDklnWF//WWNQ2WKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vRRCUMIBp5dCCEo44PRuthB8A6M2zWnWUbdb9UKrXj3vFneadZxeOXIhkMPf5+XlZZVLIdOg8/z8fHlZYpp1VA/hVA//k2SagT5XTxq+4tXLMNOss8XD9ZlmnUP9DsH7Q6Z5p9xp1nF65ci3rGmwRAkHnN7WQra406yTQgZSCEEJB5xeCiEo4YDTSyEEJRxweimEoIQDTi+FEJRwwOmlkCvUhcHXNZSTcHt56WSn1Ba+V6YPClhyqFsWXp6Y5p1D3LKAEg44va2FbHGnWSeFDKQQghIOOL0UQlDCAaeXQghKOOD0UghBCQecXgohKOGA07vZQiCugQPiwAx1u63jTbOO6tXzbnGnWcfplYPzmeady/vUIR+B+vv2XsEHA0zbeedQt6xs6gNOb2shW9xp1kkhAymEoIQDTi+FEJRwwOmlEIISDji9FEJQwgGnl0IISjjg9G62EHwDozbNadZRt1v1QqtePa+yh6gZnV45SiGH2tT3/jf15cf5TeSWdQWnV458y5oGS5RwwOmlEIISDji9FEJQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6N1sIxDXqgGsoJ+H2ahNW3oWbTT38IR/xN/BP3LKmwRIlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQghKOOD0UghBCQec3s0Wgn/CXjidfwOJNZK+WhRfKgAAAABJRU5ErkJggg==');\n  /*background-image: url(\"images/Standard/grid_standard.png\");*/\n  background-size: 100px 100px;\n  z-index: 0;\n  /* zoom: 200%;*/\n}\n";
+styleInject(css_248z);
+
+var touchMoveDetected = false;
+var Planner2DGrid = function Planner2DGrid(props) {
+  var viewHandler = useViewHandler();
+  var uiHandler = usePlannerUIHandler();
+  var gridRef = useRef(null);
+  useEffect(function () {
+    if (!gridRef) return;
+    viewHandler.productState.setPlanner2DGridElement(gridRef.current);
+    if (gridRef.current) uiHandler.setGrid2DUIElement(gridRef.current);
+  }, [gridRef]);
+  var on2DPlannerBGClick = function on2DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: gridRef,
+    className: wcConfiguratorGrid,
+    id: "wcConfigurator-grid-container",
+    style: {
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      visibility: viewHandler.productState.doShowGrid ? 'visible' : 'hidden'
+    },
+    onClick: on2DPlannerBGClick,
+    onTouchStart: function onTouchStart() {
+      touchMoveDetected = false;
+    },
+    onTouchMove: function onTouchMove() {
+      touchMoveDetected = true;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!touchMoveDetected) {
+        on2DPlannerBGClick(e);
+      }
+      touchMoveDetected = false;
+    },
+    children: [/*#__PURE__*/jsx("canvas", {
+      className: wcConfiguratorGrid2DCanvas,
+      id: "wcConfigurator-grid-2D-canvas"
+    }), /*#__PURE__*/jsx("div", {
+      className: grid2DBg,
+      style: {
+        zoom: uiHandler.get2DGridBackgroundState().zoom,
+        backgroundPosition: uiHandler.get2DGridBackgroundState().position.x + 'px ' + uiHandler.get2DGridBackgroundState().position.y + 'px'
+      }
+    })]
+  });
+};
+var Planner2DGrid$1 = observer(Planner2DGrid);
+
+export { Planner2DGrid$1 as default };

package/build/esm/index-7e3d8bb5.js

@@ -0,0 +1,55 @@
+import { s as styleInject, u as useViewHandler } from './index-c79e55a2.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/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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+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-7e7ec40c.js

@@ -0,0 +1,64 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-c79e55a2.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wcPosNrTooltip = "wcPosNrTooltip-8hudU";
+var wcPosNrTooltipText = "wcPosNrTooltipText-1gUN3";
+var css_248z = ".wcPosNrTooltip-8hudU {\n  display: block;\n  background-color: rgba(242, 242, 242, 0.9);\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n  border-radius: var(--globalBorderRadius);\n  height: -moz-fit-content;\n  height: fit-content;\n  width: 320px;\n  height: fit-content;\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  z-index: 2147483650;\n}\n.wcPosNrTooltip-8hudU img {\n  width: 90%;\n  max-height: 77%;\n  margin: 5%;\n}\n\n.wcPosNrTooltipText-1gUN3 {\n  text-align: center;\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 SettingsPosNrToolTip = function SettingsPosNrToolTip(_ref) {
+  var _theme$typography, _article$image;
+  var layerProps = _ref.layerProps,
+    article = _ref.article;
+  var _useDivaCore = useDivaCore(),
+    theme = _useDivaCore.state.theme;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: wcPosNrTooltip
+  }, layerProps), {}, {
+    style: _objectSpread(_objectSpread({}, {
+      fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
+    }), layerProps.style),
+    children: [/*#__PURE__*/jsx("img", {
+      src: (_article$image = article.image) === null || _article$image === void 0 ? void 0 : _article$image.replace('_gal', ''),
+      alt: article.name
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        padding: '0 20px'
+      },
+      className: wcPosNrTooltipText,
+      children: [article.name, /*#__PURE__*/jsx("br", {}), article.formattedSize && /*#__PURE__*/jsxs(Fragment, {
+        children: [article.formattedSize, " ", /*#__PURE__*/jsx("br", {})]
+      }), article.formattedPrice && /*#__PURE__*/jsxs("div", {
+        style: {
+          marginTop: '5px'
+        },
+        children: [article.formattedPrice, " ", /*#__PURE__*/jsx("br", {})]
+      })]
+    })]
+  }));
+};
+var SettingsPosNrToolTip$1 = observer(SettingsPosNrToolTip);
+
+export { SettingsPosNrToolTip$1 as default };

package/build/esm/index-7e8f5da3.js

@@ -0,0 +1,50 @@
+import './index-c79e55a2.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 Trash = function Trash(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var left = rect.doUseCalc ? rect.leftCalc : item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px';
+  var top = rect.doUseCalc ? rect.topCalc : item.position.interpretation == 'percentage' ? 'calc(' + rect.top + '% )' : rect.top + 'px';
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: left,
+      top: top
+    },
+    className: classnames(plannerUIProps.classes.trash.trashClass, plannerUIProps.classes.buttonGeneral, item.plannerMode == 'BOX' ? plannerUIProps.classes.trash.boxplanner : undefined),
+    id: "testDel",
+    children: item.posNr
+  });
+};
+var Trash$1 = observer(Trash);
+
+export { Trash$1 as default };

package/build/esm/index-7ff54e6f.js

@@ -0,0 +1,46 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-c79e55a2.js';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var checkoutButtonOne = "checkout-button-one-qwQE0";
+var checkoutButtonTwo = "checkout-button-two-PbR3L";
+var checkoutButtonThree = "checkout-button-three-oLcWo";
+var css_248z = ".checkout-button-one-qwQE0 {\n  background-color: #0e2e5b;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 enable-background%3D%22new 0 0 24 24%22 height%3D%2224px%22 viewBox%3D%220 0 24 24%22 width%3D%2224px%22 fill%3D%22%23FFFFFF%22%3E%3Cg%3E%3Cpath d%3D%22M0%2C0h24v24H0V0z%22 fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpolygon points%3D%226.23%2C20.23 8%2C22 18%2C12 8%2C2 6.23%2C3.77 14.46%2C12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  padding-left: 20px;\n  text-align: left;\n  background-position: 97% 50%;\n  background-size: 30px;\n  border-radius: 0;\n  border-radius: initial;\n}\n.checkout-button-two-PbR3L {\n  background-color: #f6a000;\n  background-repeat: no-repeat;\n  text-align: left;\n  padding-left: 20px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 27.891 24%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1 %7B        fill%3A %23fff%3B      %7D    %3C%2Fstyle%3E  %3C%2Fdefs%3E  %3Cg id%3D%22Gruppe_1481%22 data-name%3D%22Gruppe 1481%22 transform%3D%22translate(-610 -3077)%22%3E    %3Cpath id%3D%22Pfad_1150%22 data-name%3D%22Pfad 1150%22 class%3D%22cls-1%22 d%3D%22M27.734%2C3.881a.755.755%2C0%2C0%2C0-.591-.288H6.467L5.69.562A.743.743%2C0%2C0%2C0%2C4.966%2C0H.748a.748.748%2C0%2C0%2C0%2C0%2C1.5H4.389L8.911%2C19.161a.743.743%2C0%2C0%2C0%2C.723.562h14.1a.748.748%2C0%2C1%2C0%2C0-1.5H10.216l-.7-2.723H24.538a.747.747%2C0%2C0%2C0%2C.723-.567L27.866%2C4.521a.733.733%2C0%2C0%2C0-.132-.64M23.956%2C14H9.136L6.853%2C5.084H26.19Z%22 transform%3D%22translate(610 3077)%22%2F%3E    %3Cpath id%3D%22Pfad_1151%22 data-name%3D%22Pfad 1151%22 class%3D%22cls-1%22 d%3D%22M195.712%2C422.906a1.706%2C1.706%2C0%2C1%2C1-1.706-1.706%2C1.7%2C1.7%2C0%2C0%2C1%2C1.706%2C1.706%22 transform%3D%22translate(427.1 2676.388)%22%2F%3E    %3Cpath id%3D%22Pfad_1152%22 data-name%3D%22Pfad 1152%22 class%3D%22cls-1%22 d%3D%22M416.112%2C422.906a1.706%2C1.706%2C0%2C1%2C1-1.706-1.706%2C1.7%2C1.7%2C0%2C0%2C1%2C1.706%2C1.706%22 transform%3D%22translate(217.473 2676.388)%22%2F%3E  %3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-position: 97% 50%;\n  background-size: 30px;\n  border-radius: 0;\n  border-radius: initial;\n}\n.checkout-button-three-oLcWo {\n  background-color: #00787f;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 27.67 24%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1 %7B        fill%3A %23fff%3B      %7D    %3C%2Fstyle%3E  %3C%2Fdefs%3E  %3Cpath id%3D%22Pfad_1783%22 data-name%3D%22Pfad 1783%22 class%3D%22cls-1%22 d%3D%22M27.509%2C9.046%2C25.048.431A.611.611%2C0%2C0%2C0%2C24.432%2C0H3.2a.741.741%2C0%2C0%2C0-.615.431L.124%2C9.046a3.042%2C3.042%2C0%2C0%2C0%2C.431%2C2.646%2C3.215%2C3.215%2C0%2C0%2C0%2C2.215%2C1.231v9.846A1.234%2C1.234%2C0%2C0%2C0%2C4%2C24H9.54a1.234%2C1.234%2C0%2C0%2C0%2C1.231-1.231V16.615h6.154v6.154A1.234%2C1.234%2C0%2C0%2C0%2C18.155%2C24h5.538a1.234%2C1.234%2C0%2C0%2C0%2C1.231-1.231V12.862a3.215%2C3.215%2C0%2C0%2C0%2C2.215-1.231A2.7%2C2.7%2C0%2C0%2C0%2C27.509%2C9.046Zm-7.754.246h0a1.917%2C1.917%2C0%2C0%2C1-.431%2C1.538%2C2.475%2C2.475%2C0%2C0%2C1-2.031.8%2C3.116%2C3.116%2C0%2C0%2C1-2.215-.862%2C2.235%2C2.235%2C0%2C0%2C1-.677-1.6V1.231h4.185l1.169%2C8Zm-6.523-.062a2.465%2C2.465%2C0%2C0%2C1-.677%2C1.6%2C3.116%2C3.116%2C0%2C0%2C1-2.215.862%2C2.68%2C2.68%2C0%2C0%2C1-2.031-.8%2C1.983%2C1.983%2C0%2C0%2C1-.431-1.538L9.048%2C1.231h4.185ZM1.54%2C10.954a1.658%2C1.658%2C0%2C0%2C1-.185-1.538L3.632%2C1.231H7.755L6.648%2C9.169a3.254%2C3.254%2C0%2C0%2C1-3.323%2C2.523A2.3%2C2.3%2C0%2C0%2C1%2C1.54%2C10.954ZM18.155%2C22.769V16.615a1.234%2C1.234%2C0%2C0%2C0-1.231-1.231H10.771A1.234%2C1.234%2C0%2C0%2C0%2C9.54%2C16.615v6.154H4V12.862A5.066%2C5.066%2C0%2C0%2C0%2C7.078%2C11.2c.123.185.185.308.308.492a3.849%2C3.849%2C0%2C0%2C0%2C2.954%2C1.231%2C4.222%2C4.222%2C0%2C0%2C0%2C3.077-1.231%2C3.518%2C3.518%2C0%2C0%2C0%2C.431-.492%2C3.082%2C3.082%2C0%2C0%2C0%2C.431.492%2C4.325%2C4.325%2C0%2C0%2C0%2C3.077%2C1.231%2C3.849%2C3.849%2C0%2C0%2C0%2C2.954-1.231%2C1.34%2C1.34%2C0%2C0%2C0%2C.308-.492%2C4.777%2C4.777%2C0%2C0%2C0%2C3.077%2C1.662v9.908Zm8-11.815a2.239%2C2.239%2C0%2C0%2C1-1.846.738%2C3.3%2C3.3%2C0%2C0%2C1-3.323-2.523L19.878%2C1.231H24L26.34%2C9.415A1.683%2C1.683%2C0%2C0%2C1%2C26.155%2C10.954Z%22 transform%3D%22translate(-0.004)%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  text-align: left;\n  padding-left: 20px;\n  background-position: 97% 50%;\n  background-size: 30px;\n  border-radius: 0;\n  border-radius: initial;\n}\n";
+styleInject(css_248z);
+
+var index = function index(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.uiState.setBarrierActions([{
+      className: classnames(checkoutButtonOne)
+    }, {
+      className: classnames(checkoutButtonTwo)
+    }, {
+      className: classnames(checkoutButtonThree)
+    }]);
+  }, []);
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+
+export { index as default };