@crystaldesign/diva-web-planner-react 26.6.6 → 26.6.7

package/build/esm/index-5a146745.js

@@ -1,119 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
-import QRCode from 'react-qr-code';
-import { observer } from 'mobx-react-lite';
-import React, { useRef, useEffect } from 'react';
-import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import { Arrow } from 'react-laag';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var wrapper = "wrapper-E7OAf";
-var qrCodeWrapper = "qr-code-wrapper-I0N1r";
-var textWrapper = "text-wrapper-HcIJv";
-var header = "header-TxcNf";
-var text = "text-5GiNL";
-var closeIcon = "close-icon-SiRMa";
-var doneBar = "doneBar-7QqkY";
-var css_248z = ".wrapper-E7OAf {\n  background: #ffffff;\n  border-radius: 3px;\n  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));\n  display: flex;\n  padding: 22px;\n  gap: 12px;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out;\n}\n\n.qr-code-wrapper-I0N1r {\n  width: 96px;\n  height: 96px;\n}\n\n.text-wrapper-HcIJv {\n  display: flex;\n  flex-direction: column;\n  color: #000000;\n  width: 220px;\n  gap: 8px;\n}\n\n.header-TxcNf {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 17px;\n  line-height: 19px;\n}\n\n.text-5GiNL {\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 130%;\n}\n\n.close-icon-SiRMa {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 42px;\n  height: 42px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 80%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id%3D%22mask0_332_143%22 style%3D%22mask-type%3Aalpha%22 maskUnits%3D%22userSpaceOnUse%22 x%3D%220%22 y%3D%220%22 width%3D%2224%22 height%3D%2224%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg mask%3D%22url(%23mask0_332_143)%22%3E%3Cpath d%3D%22M8.22749 16.8365L7.16406 15.7731L10.9372 12L7.16406 8.2519L8.22749 7.18848L12.0006 10.9616L15.7487 7.18848L16.8121 8.2519L13.039 12L16.8121 15.7731L15.7487 16.8365L12.0006 13.0634L8.22749 16.8365Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-SiRMa:hover {\n  background-size: 90%;\n}\n.doneBar-7QqkY {\n  background: var(--secondaryColor);\n  height: 3px;\n  border-radius: 0 2px 2px 0;\n  animation-name: example-saRWU;\n  animation-timing-function: linear;\n  transition: width 0s ease-in;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n@keyframes example-saRWU {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\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 ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
-  var _theme$typography;
-  var layerProps = _ref.layerProps,
-    arrowProps = _ref.arrowProps,
-    autoClose = _ref.autoClose,
-    fadeIn = _ref.fadeIn,
-    fadeout = _ref.fadeout,
-    url = _ref.url;
-  var viewHandler = useViewHandler();
-  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
-  var AUTOHIDE_SEC = arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.timeUnitAutohide ? arQrCodeConfig.timeUnitAutohide : 6;
-  var _useDivaCore = useDivaCore(),
-    theme = _useDivaCore.state.theme;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var autoCloseTimeout = useRef();
-  useEffect(function () {
-    //if opend automatically close after AUTOHIDE_SEC the tooltip again
-    if (autoClose) {
-      if (!(autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current)) autoCloseTimeout.current = setTimeout(function () {
-        return viewHandler.productState.setDoShowARQRCode(false);
-      }, (AUTOHIDE_SEC + 1) * 1000);
-    }
-    return function () {
-      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
-    };
-  }, [autoClose]);
-
-  //clear autoclose when user interacts with button
-  useEffect(function () {
-    if (!viewHandler.productState.doShowARQRCode) {
-      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
-    } else viewHandler.productState.setArCodeWasVisibleOnce();
-  }, [viewHandler.productState.doShowARQRCode]);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, layerProps), {}, {
-    className: wrapper,
-    style: _objectSpread(_objectSpread({
-      opacity: fadeout ? 0 : fadeIn ? 1 : undefined
-    }, layerProps.style), {}, {
-      zIndex: 1000005
-    }),
-    children: [/*#__PURE__*/jsx("div", {
-      className: qrCodeWrapper,
-      children: url && /*#__PURE__*/React.createElement(QRCode, {
-        value: url,
-        size: 96,
-        onClick: function onClick() {
-          return url && window.open(url, '_blank');
-        }
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: textWrapper,
-      style: {
-        fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        className: header,
-        children: t('configurator.ar_qr_title')
-      }), /*#__PURE__*/jsx("div", {
-        className: text,
-        children: t('configurator.ar_qr_text')
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: closeIcon,
-      onClick: function onClick() {
-        return viewHandler.productState.setDoShowARQRCode(false);
-      }
-    }), /*#__PURE__*/jsx(Arrow, _objectSpread({
-      onPointerEnterCapture: undefined,
-      onPointerLeaveCapture: undefined
-    }, arrowProps)), autoClose && /*#__PURE__*/jsx("div", {
-      className: doneBar,
-      style: {
-        animationDuration: AUTOHIDE_SEC + 's'
-      }
-    })]
-  }));
-};
-var Tooltip = observer(ArQrCodeTooltip);
-
-export { Tooltip as default };

package/build/esm/index-5b27c9c8.js

@@ -1,51 +0,0 @@
-import './index-bbdfb97a.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-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-5ca41d3c.js

@@ -1,39 +0,0 @@
-import { s as styleInject } from './index-bbdfb97a.js';
-import 'react';
-import classnames from 'classnames';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import 'mobx-react-lite';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var isActive = "is-active-bp70x";
-var listenToVariablesOptionClass = "listen-to-variables-option-class-rPBBX";
-var listenToVariablesGalleryClass = "listen-to-variables-gallery-class-dRVC6";
-var css_248z = ".is-active-bp70x {\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  height: 19.2px;\n  width: 19.2px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2221%22 height%3D%2221%22 viewBox%3D%220 0 21 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2210.3408%22 cy%3D%2210.781%22 r%3D%2210%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath d%3D%22M5.68848 10.7237L9.86816 15.3262L14.9932 8.18604%22 stroke%3D%22white%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  border-radius: 20px;\n  border: 1px solid #d5d5d5;\n  background-position: center;\n  z-index: 100;\n}\n.listen-to-variables-option-class-rPBBX {\n  opacity: 1;\n  opacity: var(--hideOptionSelActive, 1);\n}\n\n.listen-to-variables-gallery-class-dRVC6 {\n  opacity: 1;\n  opacity: var(--hideGallerySelActive, 1);\n}\n";
-styleInject(css_248z);
-
-var IsActive = function IsActive(_ref) {
-  var listenToGalleryVariables = _ref.listenToGalleryVariables,
-    listenToOptionVariables = _ref.listenToOptionVariables;
-  return /*#__PURE__*/jsx("div", {
-    className: classnames(isActive, listenToOptionVariables ? listenToVariablesOptionClass : undefined, listenToGalleryVariables ? listenToVariablesGalleryClass : undefined)
-  });
-};
-
-export { IsActive as default };

package/build/esm/index-5cb692e9.js

@@ -1,111 +0,0 @@
-import { u as useViewHandler, P as PricePreview, T as Toggle } from './index-bbdfb97a.js';
-import 'react';
-import classnames from 'classnames';
-import { r as row, c as colum, t as title, a as toggle } from './index.module-d6f043d2.js';
-import { observer } from 'mobx-react-lite';
-import { getLogger } from '@crystaldesign/diva-core';
-import { DivaError } from '@crystaldesign/diva-utils';
-import InfoIcon from './index-04a7a9b4.js';
-import ReverseCheck from './index-755074ae.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-import '@mui/icons-material/Block';
-import '@mui/icons-material/Warning';
-
-var LOG = getLogger('Planner', 'ToggleOption');
-var ToggleOption = function ToggleOption(_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.error(new DivaError('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', {
-        code: 'WC_0011'
-      }));
-      item.isVisited = true;
-      return /*#__PURE__*/jsx(Fragment, {});
-    }
-  }
-  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__*/jsxs("div", {
-      className: classnames(colum, toggle),
-      children: [noItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
-        asyncPricePreview: noItem.pricePreviewPromise,
-        sel: noItem.sel,
-        pos: "left"
-      }), /*#__PURE__*/jsx(Toggle, {
-        onChange: function onChange() {
-          viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, paletteId);
-        },
-        val: item,
-        state: noItem.sel == false,
-        off: noItem.text,
-        on: yesItem.text
-      }), yesItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
-        asyncPricePreview: yesItem.pricePreviewPromise,
-        sel: yesItem.sel,
-        pos: "right"
-      }), yesItem.checkForReversingChanges !== undefined && /*#__PURE__*/jsx(ReverseCheck, {
-        item: yesItem,
-        paletteId: paletteId
-      })]
-    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
-      item: contentItem,
-      style: {
-        bottom: 'calc(50% - 10px)',
-        right: '20px'
-      }
-    }, item.configStepKey)]
-  });
-};
-var ToggleOption$1 = observer(ToggleOption);
-
-export { ToggleOption$1 as default };

package/build/esm/index-5f476063.js

@@ -1,63 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler, _ as _onClickCheckout, I as Icon } from './index-bbdfb97a.js';
-import 'react';
-import { useTranslation } from '@crystaldesign/diva-core';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import 'react-dynamic-multi-render';
-import 'mobx-react-lite';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-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 BasketMobile = function BasketMobile(_ref) {
-  var _viewHandler$uiState$;
-  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  var viewHandler = useViewHandler();
-  var addToBasketButton = (_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.find(function (b) {
-    return b.type === 'ADD_TO_BASKET';
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: addToBasketButton ? /*#__PURE__*/jsx("div", {
-      onClick: function onClick() {
-        return _onClickCheckout(addToBasketButton, viewHandler, addToBasketButton.index, t);
-      },
-      className: props.className,
-      style: {
-        backgroundImage: 'unset',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      children: /*#__PURE__*/jsx(Icon, {
-        checkoutButton: _objectSpread({
-          isPrimary: true
-        }, addToBasketButton),
-        size: 32
-      })
-    }) : /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-      onClick: function onClick() {
-        return viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
-      }
-    }))
-  });
-};
-
-export { BasketMobile as default };

package/build/esm/index-6051ac01.js

@@ -1,159 +0,0 @@
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
-import { observer } from 'mobx-react-lite';
-import { useRef, useState, useEffect } from 'react';
-import StepInfo from './index-ec31a7cb.js';
-import { jsx, Fragment, jsxs } 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/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 'react-switch';
-import 'react-countup';
-
-var paletteItem = "palette-item-F-QYy";
-var wcTextBox = "wcTextBox-lKT8X";
-var headerTitle = "headerTitle-RuXs-";
-var css_248z = ".palette-item-F-QYy {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.palette-item-F-QYy > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.palette-item-F-QYy input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.palette-item-F-QYy input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
-styleInject(css_248z);
-
-var NumberBox = function NumberBox(_ref) {
-  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
-  var itemP = _ref.item,
-    paletteId = _ref.paletteId;
-  var item = itemP;
-  var throttleRef = useRef(null);
-  var viewHandler = useViewHandler();
-  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    userInFocus = _useState2[0],
-    setUserInFocus = _useState2[1];
-  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
-    _useState4 = _slicedToArray(_useState3, 2),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var isDefined = true;
-  if (itemPalette) {
-    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
-    if (step) isDefined = step.configStep.isDefined;
-  }
-  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
-  var handleChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
-      var _e$target$value;
-      var value;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
-            if (!e.target.value.endsWith('.')) {
-              _context.next = 4;
-              break;
-            }
-            setValue(e.target.value);
-            return _context.abrupt("return");
-          case 4:
-            value = value.replace(/[^0-9.,]/g, '');
-            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');
-
-            //delay logic update for 500ms
-            if (throttleRef.current) clearTimeout(throttleRef.current);
-            throttleRef.current = setTimeout(function () {
-              return updateLogic(value);
-            }, 500);
-            setValue(value);
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function handleChange(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var updateLogic = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (!itemPalette) {
-              _context2.next = 3;
-              break;
-            }
-            _context2.next = 3;
-            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
-          case 3:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function updateLogic(_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  useEffect(function () {
-    var _itemPalette$selected2, _itemPalette$selected3;
-    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
-  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
-  return /*#__PURE__*/jsxs("div", {
-    ref: function ref(_ref4) {
-      if (itemPalette) itemPalette.htmlRef = _ref4;
-    },
-    style: {
-      display: 'block'
-    },
-    children: [itemPalette && /*#__PURE__*/jsx("div", {
-      className: headerTitle,
-      children: itemPalette.name
-    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
-      stepInfo: itemPalette.info
-    }), /*#__PURE__*/jsx("div", {
-      className: paletteItem,
-      children: /*#__PURE__*/jsx("div", {
-        style: {
-          margin: '5px'
-        },
-        children: /*#__PURE__*/jsx("input", {
-          onBlur: function onBlur() {
-            setUserInFocus(false);
-          },
-          onFocus: function onFocus() {
-            var _itemPalette$info2;
-            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
-          },
-          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
-          lang: "en-150",
-          className: wcTextBox,
-          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
-          onChange: handleChange,
-          step: "0.01",
-          onKeyDown: function onKeyDown(e) {
-            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
-              e.preventDefault();
-            }
-          },
-          value: value,
-          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
-        })
-      })
-    })]
-  });
-};
-var NumberBox$1 = observer(NumberBox);
-
-export { NumberBox$1 as default };

package/build/esm/index-607ce1b1.js

@@ -1,53 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var container = "container-vxlYB";
-var totalPrice = "totalPrice-sBu4C";
-var price = "price-jVSu8";
-var css_248z = ".container-vxlYB {\n  width: 100%;\n  border-top: 1px #6d6e71 solid;\n  color: #6d6e71;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  padding-top: 1rem;\n}\n\n.totalPrice-sBu4C {\n  float: left;\n  margin-left: 2rem;\n}\n\n.price-jVSu8 {\n  float: right;\n  margin-right: 2rem;\n}\n";
-styleInject(css_248z);
-
-var SummaryTotalPrice = function SummaryTotalPrice(props) {
-  var _viewHandler$productS;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var viewHandler = useViewHandler();
-  var _useDivaCore = useDivaCore(),
-    hidePrices = _useDivaCore.state.hidePrices;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: !hidePrices && /*#__PURE__*/jsxs("div", {
-      className: container,
-      children: [/*#__PURE__*/jsx("div", {
-        className: totalPrice,
-        children: t('configurator.TotalPrice', 'TotalPrice')
-      }), /*#__PURE__*/jsx("div", {
-        className: price,
-        children: DivaUtils.formatPrice((_viewHandler$productS = viewHandler.productState.formatedTotalPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0, viewHandler.productState.priceFormat)
-      })]
-    })
-  });
-};
-var TotalPrice = observer(SummaryTotalPrice);
-
-export { TotalPrice as default };

package/build/esm/index-62c3ee59.js

@@ -1,48 +0,0 @@
-import './index-bbdfb97a.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var RotationCounterClockwise = function RotationCounterClockwise(_ref) {
-  var item = _ref.item,
-    rect = _ref.rect,
-    onElement = _ref.onElement,
-    plannerUIProps = _ref.plannerUIProps;
-  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: rect.left + 'px',
-      top: rect.top + 'px'
-    },
-    className: classnames(plannerUIProps.classes.rotation.rotCounterClock, plannerUIProps.classes.buttonGeneral),
-    children: item.posNr
-  });
-};
-var RotationCounterClockwise$1 = observer(RotationCounterClockwise);
-
-export { RotationCounterClockwise$1 as default };