@crystaldesign/diva-web-planner-react 25.13.0-beta.21 → 25.13.0-beta.23

package/build/esm/index-20fc36bf.js

@@ -0,0 +1,221 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-f895d7dd.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef, useEffect } from 'react';
+import { useLayer } from 'react-laag';
+import Tooltip from './index-ef170c37.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import FullscreenAr, { FullscreenArHeader } from './index-de8b9dae.js';
+import QRCode from 'react-qr-code';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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';
+
+var _excluded = ["Button", "dontOpenModal"];
+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 Button = _ref.Button,
+    dontOpenModal = _ref.dontOpenModal,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$actions = _useDivaCore.actions,
+    openDrawerMenu = _useDivaCore$actions.openDrawerMenu,
+    openModal = _useDivaCore$actions.openModal,
+    _useDivaCore$state = _useDivaCore.state,
+    isMobile = _useDivaCore$state.isMobile,
+    isTablet = _useDivaCore$state.dimensions.isTablet;
+  //tooltip is going to close itself by timer
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoClose = _useState2[0],
+    setAutoClose = _useState2[1];
+  var autoCloseTimeout = useRef();
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openDrawer = _useState4[0],
+    setOpenDrawer = _useState4[1];
+  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
+  var openAr = isMobile || isTablet;
+  //if the viewer is in an iframe (pfister) we dont want to open the modal for the arcombi
+  var shouldOpenModal = openAr && !viewHandler.productState.allow3DComb && !viewHandler.productState.allowRTV;
+
+  //for fade animation
+  var _useState5 = useState(viewHandler.productState.arCodeWasVisibleOnce),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tooltipVisible = _useState6[0],
+    setTooltipVisible = _useState6[1];
+  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible && !dontOpenModal;
+  var _useLayer = useLayer({
+      isOpen: showTooltip,
+      auto: true,
+      placement: 'right-end',
+      triggerOffset: 16
+    }),
+    triggerProps = _useLayer.triggerProps,
+    layerProps = _useLayer.layerProps,
+    renderLayer = _useLayer.renderLayer,
+    arrowProps = _useLayer.arrowProps;
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    url = _useState8[0],
+    setUrl = _useState8[1];
+  useEffect(function () {
+    if (viewHandler.uiState.AllConfig.arViewerIframe) {
+      if (openDrawer) openModal({
+        rejectByIcon: true,
+        fullscreen: true,
+        dontRenderForm: true,
+        callback: function callback(value) {
+          viewHandler.productState.loadRTVForAr = false;
+          viewHandler.productState.setDoShowARQRCode(false);
+          setOpenDrawer(false);
+          viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
+        },
+        content: /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(FullscreenArHeader, {}), /*#__PURE__*/jsx(FullscreenAr, {
+            url: url,
+            isArCompatible: viewHandler.productState.isArCompatible,
+            broswerSupportAR: viewHandler.productState.browserSupportAR,
+            activateAR: viewHandler.productState.activateAR,
+            hqRenderScript: viewHandler.hqRenderScript,
+            isTablet: isTablet
+          })]
+        })
+      });
+    } else openDrawerMenu({
+      id: 'ar-qr-code',
+      mountElementId: 'wcConfigurator-wrapper',
+      handleInternScroll: true,
+      showOverlay: true,
+      snapPoints: [1],
+      onClose: function onClose() {
+        setOpenDrawer(false);
+        viewHandler.productState.loadRTVForAr = false;
+        viewHandler.productState.setDoShowARQRCode(false);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
+      },
+      title: /*#__PURE__*/jsx(FullscreenArHeader, {}),
+      content: /*#__PURE__*/jsx(FullscreenAr, {
+        url: url,
+        isArCompatible: viewHandler.productState.isArCompatible,
+        broswerSupportAR: viewHandler.productState.browserSupportAR,
+        activateAR: viewHandler.productState.activateAR,
+        hqRenderScript: viewHandler.hqRenderScript,
+        isTablet: isTablet
+      }),
+      open: openDrawer
+    });
+  }, [openDrawer, viewHandler.productState.activateAR]);
+  useEffect(function () {
+    if (viewHandler.productState.isARIframeVisible === false) setOpenDrawer(false);
+  }, [viewHandler.productState.isARIframeVisible]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode == true) {
+      viewHandler.openARObserverConnection(function () {
+        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
+      } // request hqr onreceivehqr triggers update
+      ).then(function (url) {
+        return setUrl(url);
+      });
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode && shouldOpenModal) {
+      setOpenDrawer(true);
+    }
+  }, [viewHandler.productState.activateAR, url]);
+  useEffect(function () {
+    //start timeout for auto open the tooltip
+    if (dontOpenModal) return;
+    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
+      var _arQrCodeConfig$timeU;
+      autoCloseTimeout.current = setTimeout(function () {
+        viewHandler.productState.setArCodeWasVisibleOnce();
+        setAutoClose(true);
+        viewHandler.productState.setDoShowARQRCode(true);
+      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
+    }
+    if (!viewHandler.productState.doShowARQRCode && autoClose) {
+      setAutoClose(false);
+    }
+    //delay the state of visible so we animate the fade out
+    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
+      setTimeout(function () {
+        setTooltipVisible(viewHandler.productState.doShowARQRCode);
+      }, 200);
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  var onClick = function onClick() {
+    viewHandler.productState.setDoShowARQRCode(true);
+    if (shouldOpenModal) {
+      if (!viewHandler.productState.doShowRTV && !(viewHandler.viewPlannerHandler.getCurPlannerViewMode() == 'RTViewer' || viewHandler.viewPlannerHandler.getCurPlannerViewMode() == '3DCOMB')) {
+        viewHandler.setHQRenderScript(undefined);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
+      }
+      setOpenDrawer(true);
+      viewHandler.productState.loadRTVForAr = true;
+    }
+  };
+  if (url && !openAr && dontOpenModal) {
+    return /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/jsx(QRCode, {
+        value: url,
+        size: 96,
+        onClick: function onClick() {
+          return url && window.open(url, '_blank');
+        }
+      }), ";"]
+    });
+  }
+  if (Button) {
+    return /*#__PURE__*/jsx(Button, {
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
+      id: "ar-icon"
+    }, props), {}, {
+      className: classnames(props.className),
+      onClick: onClick,
+      title: t('configurator.ar_qr_title')
+    }, triggerProps), {}, {
+      style: {
+        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV ? 'visible' : 'hidden'
+      }
+    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
+      arrowProps: arrowProps,
+      layerProps: layerProps,
+      autoClose: autoClose,
+      fadeIn: tooltipVisible,
+      fadeout: !viewHandler.productState.doShowARQRCode,
+      url: url
+    }))]
+  });
+};
+var ArQrCodeIcon = observer(ArQrCodeTooltip);
+
+export { ArQrCodeIcon as default };

package/build/esm/index-2244e646.js

@@ -0,0 +1,131 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler, a as usePlannerUIHandler } from './index-f895d7dd.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var mouseDownDetected = false;
+var polygonSelected = false;
+var Outline3D = function Outline3D(_ref) {
+  var items = _ref.items,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var viewHandler = useViewHandler();
+  var plannerUIHandler = usePlannerUIHandler();
+  if (viewHandler.uiState.isLoading) return /*#__PURE__*/jsx(Fragment, {});
+  var on3DPlannerBGClick = function on3DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+  };
+  var renderPolygon = function renderPolygon(item) {
+    switch (item.elemState) {
+      case 'selectable':
+        return /*#__PURE__*/jsx("polygon", {
+          onMouseUp: function onMouseUp(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction;
+              (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onTouchEnd: function onTouchEnd(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction2;
+              (_item$clickFunction2 = item.clickFunction) === null || _item$clickFunction2 === void 0 || _item$clickFunction2.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (!isDragging) plannerUIHandler.updateOnHoverOutline3D(true, item, 'PosNr');
+          },
+          onMouseLeave: function onMouseLeave() {
+            plannerUIHandler.updateOnHoverOutline3D(false, item, 'PosNr');
+          },
+          points: item.polygonPoints,
+          style: {
+            zIndex: item.zIndex
+          },
+          className: classnames(item.type == 'Outline3D' ? plannerUIProps.classes.outline.outline3D.outlinePolygon : undefined, item.type == 'Outline3D_Contour' ? plannerUIProps.classes.outline.outline3D.outlinePolygonContours : undefined)
+        }, item.key.toString());
+      case 'selected':
+        if (item.type == 'Outline3D_Contour') {
+          return /*#__PURE__*/jsx("polygon", {
+            points: item.polygonPoints,
+            style: {
+              zIndex: item.zIndex
+            },
+            className: classnames(plannerUIProps.classes.outline.outline3D.outlinePolygonContoursSel)
+          }, item.key.toString());
+        }
+    }
+    return '';
+  };
+  return /*#__PURE__*/jsx("svg", {
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onTouchStart: function onTouchStart(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onTouchMove: function onTouchMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onMouseUp: function onMouseUp(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    ref: function ref(_ref2) {
+      viewHandler.productState.setPlanner3DImageSvgArea(_ref2);
+      //viewHandler.viewModel.htmlElementRefs.planner3DImageSvgArea = ref as any;
+    },
+    style: {
+      zIndex: 100,
+      touchAction: 'pan-x pan-y',
+      height: '100%'
+    },
+    className: classnames(plannerUIProps.classes.outline.outline3D.outlineSVG),
+    children: items.map(function (item, i) {
+      return renderPolygon(item);
+    })
+  }, items.length > 0 ? items[0].key : Math.random());
+};
+var Outline3D$1 = observer(Outline3D);
+
+export { Outline3D$1 as default };

package/build/esm/index-22ef9cfa.js

@@ -0,0 +1,121 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import { useState, useEffect } from 'react';
+import { n as notExpanded } from './index.module-db0872b4.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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';
+
+var table = "table-jksgC";
+var column = "column-g-8AC";
+var scrollable = "scrollable-thuFz";
+var header = "header-hKjpS";
+var css_248z = ".table-jksgC {\n  position: relative;\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  background-color: #ffffff;\n  border-collapse: collapse;\n  border-width: 0px;\n  border-color: #e7eaf8;\n  border-style: solid;\n  color: #000000;\n  font-weight: normal;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  overflow-y: auto;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n.table-jksgC thead {\n  font-weight: bold !important;\n}\n.table-jksgC thead {\n  border-bottom: 1px solid;\n  /* min-width: 20px; */\n  background-color: var(--thirdColor);\n  font-size: 16px;\n  padding-top: 1%;\n  color: black;\n}\n.column-g-8AC {\n  text-align: left;\n  height: 20px;\n}\n.column-g-8AC th:nth-child(1) {\n  width: 40%;\n  border-bottom: 1px solid;\n}\n.column-g-8AC th {\n  border-bottom: 1px solid;\n  padding-right: 10px;\n  margin-bottom: 1%;\n  font-weight: normal;\n}\n.column-g-8AC th:last-child {\n  font-size: 12px;\n}\n.scrollable-thuFz {\n  overflow: auto;\n  left: 50px;\n  display: flex;\n  flex-direction: column;\n  height: auto;\n}\n.header-hKjpS {\n  height: 46px;\n  width: 100%;\n  padding-top: 0.7%;\n  text-align: center;\n  background-color: var(--primaryColor);\n  font-size: 30px;\n  color: white;\n  font-weight: 600;\n  cursor: ns-resize;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["onMouseDown"];
+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 ArticleOverview = function ArticleOverview(_ref) {
+  var _viewHandler$divaWebP;
+  var onMouseDown = _ref.onMouseDown,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var articles = Object.values((_viewHandler$divaWebP = viewHandler.divaWebPlanner.getDivaArticles()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {});
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  useEffect(function () {
+    var asyncFunct = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return DivaUtils.Sleep(1000);
+            case 2:
+              setRerender(!rerender);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function asyncFunct() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    asyncFunct();
+  }, [viewHandler.settingsState.configChanged]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      onMouseDown: onMouseDown,
+      children: "Artikel \xDCbersicht"
+    }), /*#__PURE__*/jsxs("table", {
+      className: table,
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsxs("tr", {
+          className: column,
+          children: [/*#__PURE__*/jsx("th", {
+            children: "Name"
+          }), /*#__PURE__*/jsx("th", {
+            children: "ArticleCodex"
+          }), /*#__PURE__*/jsx("th", {
+            children: "CatalogCodex"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Preis"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Bruttopreis"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Discount Prozent"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Menge"
+          })]
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        children: Object.values(articles).map(function (article, index) {
+          var _article$price, _article$bruttoCalcPr, _article$discountPerc;
+          return /*#__PURE__*/jsxs("tr", {
+            className: column,
+            children: [/*#__PURE__*/jsxs("th", {
+              children: [" ", article.name]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [article.articleCodex, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [article.catalogCodex, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [" ", (_article$price = article.price) !== null && _article$price !== void 0 ? _article$price : 0, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [" ", (_article$bruttoCalcPr = article.bruttoCalcPrice) !== null && _article$bruttoCalcPr !== void 0 ? _article$bruttoCalcPr : 0, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [" ", (_article$discountPerc = article.discountPercentage) !== null && _article$discountPerc !== void 0 ? _article$discountPerc : 0, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [article.quantity, " "]
+            })]
+          }, article.basketId);
+        })
+      })]
+    })]
+  }));
+};
+var ArticleOverview$1 = observer(ArticleOverview);
+
+export { ArticleOverview$1 as default };

package/build/esm/index-2318f829.js

@@ -0,0 +1,127 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-f895d7dd.js';
+import 'react';
+import SettingsHeaderContainer from './index-99ab8f37.js';
+import SettingsScroller from './index-2ba8fd4a.js';
+import { observer } from 'mobx-react-lite';
+import { w as wcConfiguratorSettings, t as tabsHorizontal, e as expanded } from './index.module-58c406b6.js';
+import classnames from 'classnames';
+import SettingsSwiper from './index-c2446d32.js';
+import SettingsExpanderButtons from './index-4dac6800.js';
+import SettingsBottomDrawer from './index-46386e0d.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 './index-dec8225e.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-4f5222ee.js';
+import 'sift';
+import './index-3c959d9b.js';
+import './index-3a60fea5.js';
+import './index-306178d7.js';
+import './index-952a5c07.js';
+import './index.module-0b394271.js';
+import './index-75641c70.js';
+import 'react-switch';
+import './index-6791a979.js';
+import './index-0f3649e7.js';
+import './index-b37e7e23.js';
+import 'react-countup';
+import './index-a94c294d.js';
+import 'react-dropdown';
+import './index-eea8208e.js';
+import './index-d0833032.js';
+import './index-73d8de18.js';
+import './index-401794f3.js';
+import '@crystaldesign/content-box';
+import './index-f42547fd.js';
+import './index-e8174612.js';
+import './index-e52a7ccc.js';
+import './index-3628a3ac.js';
+import './index-6e004a01.js';
+import './index-026a5157.js';
+import './index-ebdfb0d6.js';
+import './index-edb94589.js';
+import './index-36d79fe8.js';
+import 'react-laag';
+import './index.module-275be6f9.js';
+import './index-a466ebb1.js';
+import './index-239e18f6.js';
+import './index-6808756a.js';
+import './index-3752887b.js';
+import './index-45188c11.js';
+import './index-ab35f003.js';
+import './index.module-fcbe5d5c.js';
+import './index-a7f2b97b.js';
+import './index-dfd87d0d.js';
+import './index-a9fd917a.js';
+import './index-c041b665.js';
+import './index-86db8a69.js';
+import './index-7d1aace9.js';
+import './index-51fa2eef.js';
+import './index-9f5b8e30.js';
+import './index-14069479.js';
+import './index-1be744d4.js';
+import './index-68b21ac2.js';
+import './index-34607866.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-b98cd0a9.js';
+import 'rc-slider';
+import './index-439308ca.js';
+import './index-69d84c10.js';
+import './index-4c2f6d86.js';
+import './index-eb747787.js';
+import 'react-confetti-explosion';
+import './index-bb938fdb.js';
+import './index-20fc36bf.js';
+import './index-ef170c37.js';
+import 'react-qr-code';
+import './index-de8b9dae.js';
+import './useCustomDimensions-d22714f4.js';
+import './index-14382312.js';
+import './ussIsSticky-9eedcdc1.js';
+import './index-bf6ced8a.js';
+import './index-f857a3ec.js';
+import 'vaul';
+
+var _excluded = ["className", "tabgroupElement"];
+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 Settings = function Settings(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var className = _ref.className,
+    tabgroupElement = _ref.tabgroupElement,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var useSwiper = viewHandler.getIsInMobileView() && viewHandler.getViewConfig().navigateMobileSwiper;
+  var settingsContent = /*#__PURE__*/jsx(Fragment, {
+    children: useSwiper ? /*#__PURE__*/jsx(SettingsSwiper, {}) : /*#__PURE__*/jsxs(Fragment, {
+      children: [!viewHandler.uiState.isInMobileView && !viewHandler.settingsState.forceSettingsHeaderInScrollContainer && /*#__PURE__*/jsx(SettingsHeaderContainer, {}, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsx(SettingsScroller, {}), /*#__PURE__*/jsx(SettingsExpanderButtons, {})]
+    })
+  });
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    id: "wcConfigurator-settings",
+    className: classnames(className, wcConfiguratorSettings, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? tabsHorizontal : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: [/*#__PURE__*/jsx(SettingsBottomDrawer, {
+      draggerElement: tabgroupElement,
+      children: settingsContent
+    }), !viewHandler.uiState.isInMobileView && settingsContent]
+  }));
+};
+var Settings$1 = observer(Settings);
+
+export { Settings$1 as default };