@crystaldesign/diva-web-planner-react 25.11.0-rc.1 → 25.11.0-rc.11

package/build/esm/index-b7ea829a.js

@@ -0,0 +1,86 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-bcc6dde7.js';
+import { observer } from 'mobx-react-lite';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import PriceCounter from './index-821320fd.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 '@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-countup';
+
+var wrapper = "wrapper-1wXYE";
+var priceWrapper = "priceWrapper-oLrQ1";
+var price = "price-aaYz6";
+var rabattVisible = "rabattVisible-npE0I";
+var brutto = "brutto-T4loO";
+var title = "title-1Yq19";
+var mobile = "mobile-Oy5-9";
+var percentage = "percentage--8-xl";
+var css_248z = ".wrapper-1wXYE {\n  position: sticky;\n  width: calc(100% - 24px);\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-bottom: 8px;\n  white-space: nowrap;\n}\n\n.priceWrapper-oLrQ1 {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  width: 100%;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n}\n\n.price-aaYz6 {\n  font-size: 18px;\n  line-height: 18px;\n  font-size: 24px;\n  line-height: 24px;\n  color: rgba(17, 24, 39, 1);\n  font-weight: 700;\n}\n.rabattVisible-npE0I .price-aaYz6 {\n  color: rgb(220, 38, 38);\n}\n\n.brutto-T4loO {\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n  color: rgba(107, 114, 128, 1);\n  -webkit-text-decoration-line: line-through;\n          text-decoration-line: line-through;\n  display: none;\n}\n.rabattVisible-npE0I .brutto-T4loO {\n  display: block;\n}\n\n.title-1Yq19 {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: left;\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  text-align: center;\n}\n\n.mobile-Oy5-9 .title-1Yq19 {\n  font-size: 16px;\n  line-height: 20px;\n}\n\n.percentage--8-xl {\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 16px;\n  color: #fff;\n  padding: 4px 8px;\n  border-radius: 40px;\n  background-color: rgb(220, 38, 38);\n}\n";
+styleInject(css_248z);
+
+var SummaryHeader = function SummaryHeader(props) {
+  var _viewHandler$productS, _viewHandler$productS2;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useState = useState(Math.round(viewHandler.productState.formatedCurSetPrice * 100 / viewHandler.productState.formatedBruttoPrice) - 100),
+    _useState2 = _slicedToArray(_useState, 2),
+    rabattPercentage = _useState2[0],
+    setRabattPercentage = _useState2[1];
+  useEffect(function () {
+    var percentage = Math.round(viewHandler.productState.formatedCurSetPrice * 100 / viewHandler.productState.formatedBruttoPrice) - 100;
+    if (percentage !== rabattPercentage) setRabattPercentage(percentage);
+  }, [viewHandler.productState.formatedCurSetPrice, viewHandler.productState.formatedBruttoPrice]);
+  var showRabatt = viewHandler.productState.formatedBruttoPrice !== undefined && !viewHandler.getViewConfig().hideRabattPrice;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, viewHandler.getIsInMobileView() ? mobile : undefined, showRabatt ? rabattVisible : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: title,
+      children: t('configurator.summary.header.title')
+    }), !hidePrices && /*#__PURE__*/jsxs("div", {
+      className: priceWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: brutto,
+        children: /*#__PURE__*/jsx(PriceCounter, {
+          price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0,
+          duration: 1.5
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: price,
+        children: /*#__PURE__*/jsx(PriceCounter, {
+          price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0,
+          duration: 1.5
+        })
+      }), showRabatt && /*#__PURE__*/jsx("div", {
+        className: percentage,
+        children: /*#__PURE__*/jsx(PriceCounter, {
+          price: rabattPercentage,
+          formattingFn: function formattingFn(n) {
+            return n + '%';
+          },
+          duration: 1.5
+        })
+      })]
+    })]
+  });
+};
+var SummaryHeader$1 = observer(SummaryHeader);
+
+export { SummaryHeader$1 as default };

package/build/esm/{index-b9786d81.js → index-b88dcb4f.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-a98f2811.js';
+import './index-bcc6dde7.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-bf3f49fb.js → index-b8ef8f7a.js}

@@ -1,27 +1,27 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-a98f2811.js';
+import { s as styleInject, u as useViewHandler } from './index-bcc6dde7.js';
 import React, { useState, useRef, useEffect, useMemo, Suspense } from 'react';
 import { observer } from 'mobx-react-lite';
 import sift from 'sift';
-import TextBox from './index-b0a9f088.js';
-import ItemVariant from './index-dc14356b.js';
-import SettingsPaletteGroup from './index-ad8f211f.js';
-import ToggleOption from './index-a60ea71a.js';
-import GroupDropdown from './index-de61c681.js';
-import PromotedProducts from './index-f2a949e8.js';
-import ToggleName from './index-a2f9d0b4.js';
-import itemPaletteTypeComponentMap from './index-faafcad3.js';
+import TextBox from './index-e01d13b0.js';
+import ItemVariant from './index-dbbc32a5.js';
+import SettingsPaletteGroup from './index-33138083.js';
+import ToggleOption from './index-db7f4d80.js';
+import GroupDropdown from './index-077b9032.js';
+import PromotedProducts from './index-03afa493.js';
+import ToggleName from './index-d7b7c413.js';
+import itemPaletteTypeComponentMap from './index-0e9bad48.js';
 import classnames from 'classnames';
-import StepInfo from './index-017c458e.js';
-import SettingsHeader from './index-861f7996.js';
-import ReplaceSwitch from './index-f63b7730.js';
+import StepInfo from './index-6a40b525.js';
+import SettingsHeader from './index-897a4efb.js';
+import ReplaceSwitch from './index-92a9c2ae.js';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
-import Slider from './index-2ebcf311.js';
-import MultiToggle from './index-f9467275.js';
+import Slider from './index-533fa2b0.js';
+import MultiToggle from './index-d1256d06.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import SummaryOverview from './index-a9bdf091.js';
+import SummaryOverview from './index-86b0790e.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 var collapsableInner = "collapsable-inner-YPvJa";
@@ -194,9 +194,7 @@ var useGridVariables = function useGridVariables(item) {
     var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
     var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
     var infoIconSize = undefined;
-    if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-      gridSize = '240px';
-    } else if (['SUMMARY_ARTICLES', 'SUMMARY_OPTIONTREE', 'VARIANTS'].includes(item.type)) {
+    if (['SUMMARY_ARTICLES', 'SUMMARY_OPTIONTREE', 'VARIANTS'].includes(item.type)) {
       gridSize = 'calc(100% - 20px)';
     } else if (['GAL_GROUP_DROPDOWN', 'GAL_BIG'].includes(item.type)) {
       gridSize = '100px';
@@ -256,13 +254,13 @@ var useGridVariables = function useGridVariables(item) {
 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 ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-21832392.js');
+  return import('./index-c9ed9ce2.js');
 });
 var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-12188ef2.js');
+  return import('./index-3d40086b.js');
 });
 var ProductList = /*#__PURE__*/React.lazy(function () {
-  return import('./index-7ee2c818.js');
+  return import('./index-5cb3a3d9.js');
 });
 var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
   var _item$groups$;

package/build/esm/{index-66a7b60d.js → index-b9345a20.js}

@@ -1,23 +1,23 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { a as usePlannerUIHandler, u as useViewHandler } from './index-a98f2811.js';
+import { a as usePlannerUIHandler, u as useViewHandler } from './index-bcc6dde7.js';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import AVL from './index-4e26db2a.js';
-import AVR from './index-7ba7dc4e.js';
-import Outline from './index-0f9f084a.js';
-import RotationClockwise from './index-b9e23b55.js';
-import RotationCounterClockwise from './index-839eccfb.js';
-import Trash from './index-30e0e616.js';
-import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-65957c24.js';
+import AVL from './index-32a6a95e.js';
+import AVR from './index-b54c92a2.js';
+import Outline from './index-c4eaaa63.js';
+import RotationClockwise from './index-a4958e8f.js';
+import RotationCounterClockwise from './index-099e45b7.js';
+import Trash from './index-219bbc49.js';
+import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-ca9aa06e.js';
 import { Vector2 } from '@crystaldesign/web-planner-logic';
-import PosNr from './index-3fee9446.js';
-import BoxCopy from './index-f17d3358.js';
-import Move3DGrid from './index-dd162513.js';
-import Rotation3DGrid from './index-a773fea2.js';
+import PosNr from './index-b52b9ef5.js';
+import BoxCopy from './index-f7679e75.js';
+import Move3DGrid from './index-2e436986.js';
+import Rotation3DGrid from './index-2ef4ee72.js';
 import { getLogger } from '@crystaldesign/diva-core';
 import { DivaError } from '@crystaldesign/diva-utils';
-import ElementCopy from './index-f90d5b25.js';
-import DistanceToGround from './index-53e42c79.js';
+import ElementCopy from './index-2999ca64.js';
+import DistanceToGround from './index-bf46a1ec.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -32,7 +32,7 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-4a0f1f56.js';
+import './index-7d20e8c2.js';
 import 'react-draggable';
 
 function usePosNrPositioning(_ref) {

package/build/esm/{index-803fc446.js → index-b9597090.js}

@@ -1,11 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-a98f2811.js';
+import { s as styleInject, u as useViewHandler } from './index-bcc6dde7.js';
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import CheckoutFormNew from './index-c1b43896.js';
-import ProductCenter from './index-92dca7ba.js';
-import ContentItemWrapper from './index-78751ddc.js';
+import CheckoutFormNew from './index-c6ee77ee.js';
+import ProductCenter from './index-9b686282.js';
+import ContentItemWrapper from './index-e974d4eb.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
@@ -22,29 +22,29 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-a2f530b1.js';
+import './index-82f5b1a3.js';
 import 'react-switch';
 import 'react-dropdown';
-import './index-1acf089c.js';
-import './index-3860f6f3.js';
-import './index-2c72acba.js';
-import './index-ed739602.js';
-import './index.module-51adebc2.js';
-import './index-2d26d586.js';
-import './index-f23ee292.js';
+import './index-146faafc.js';
+import './index-6e491644.js';
+import './index-85cc0fb7.js';
+import './index-fb61cfb1.js';
+import './index.module-135bb96c.js';
+import './index-6f96269c.js';
+import './index-a6e12613.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-e0567122.js';
-import './index-e2465b6b.js';
-import './index-d34ca55d.js';
-import './index-c027be5d.js';
-import './index-e09ee350.js';
-import './index-677442f1.js';
+import './index-b6e6bcff.js';
+import './index-02155513.js';
+import './index-7e7de3e0.js';
+import './index-af8ecec4.js';
+import './index-265a18ee.js';
+import './index-d37f6582.js';
 import 'react-laag';
-import './index-7d3d9b5f.js';
+import './index-777735f8.js';
 import 'react-qr-code';
-import './index-3fc71e62.js';
-import './index-277fabc8.js';
-import './index-c2f216a7.js';
+import './index-6009bfbe.js';
+import './index-d8e374b4.js';
+import './index-e11d0d5e.js';
 import '@crystaldesign/content-item';
 
 var arrow = "arrow-GTKSC";

package/build/esm/{index-343d80b2.js → index-b9c8f466.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-a98f2811.js';
+import './index-bcc6dde7.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';