@crystaldesign/diva-web-planner-react 26.12.0-beta.9 → 26.12.0-rc.1

package/build/esm/index-32d7bda0.js

@@ -0,0 +1,125 @@
+import { u as useViewHandler, P as PricePreview, T as Toggle } from './index-32106d75.js';
+import 'react';
+import classnames from 'classnames';
+import { r as row, b as columToggleName, t as title, n as name, s as sel, a as toggle } from './index.module-d99f631b.js';
+import { getLogger } from '@crystaldesign/diva-core';
+import InfoIcon from './index-26a22631.js';
+import ReverseCheck from './index-2eeee125.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/real-time-viewer-next';
+import 'react-switch';
+import 'react-countup';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+
+var LOG = getLogger('Planner', 'ToggleName');
+var ToggleName = function ToggleName(_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.warn('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', 'WC_0011');
+      item.isVisited = true;
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  }
+  var checked = noItem.sel == false;
+  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__*/jsxs("div", {
+      className: classnames(columToggleName, title, name),
+      onClick: function onClick() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem, undefined, paletteId);
+      },
+      children: [noItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: noItem.pricePreviewPromise,
+        sel: noItem.sel
+      }), /*#__PURE__*/jsx("div", {
+        className: !checked ? sel : undefined,
+        dangerouslySetInnerHTML: {
+          __html: noItem.text
+        }
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(columToggleName, toggle),
+      children: /*#__PURE__*/jsx(Toggle, {
+        onChange: function onChange() {
+          viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, paletteId);
+        },
+        val: item,
+        alwaysActiveColor: true,
+        state: checked
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(columToggleName, title, name),
+      onClick: function onClick() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(yesItem, undefined, paletteId);
+      },
+      children: [yesItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: yesItem.pricePreviewPromise,
+        sel: yesItem.sel
+      }), yesItem.checkForReversingChanges !== undefined && /*#__PURE__*/jsx(ReverseCheck, {
+        item: yesItem,
+        paletteId: paletteId
+      }), /*#__PURE__*/jsx("div", {
+        className: checked ? sel : undefined,
+        dangerouslySetInnerHTML: {
+          __html: yesItem.text
+        }
+      })]
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        position: 'relative'
+      }
+    }, item.configStepKey)]
+  });
+};
+
+export { ToggleName as default };

package/build/esm/index-344b8cf0.js

@@ -0,0 +1,289 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler, r as rtvNextParamActive } from './index-32106d75.js';
+import { A as ACCESSORY_PLACEMENT_MODE } from './accessoryPlacementMode-f80348d8.js';
+import 'react';
+import { s as shelfPlannerContainerRtv, a as shelfPlannerContainerHorizontal, b as shelfPlannerContainerVertical, e as expanded, c as shelfGrid, d as shelfGridBorder, w as warning, f as accessoires, g as configHeaderWrapper, h as closeButton, n as name, S as SelectedAcc, i as accessoireContainer } from './index-76a53a27.js';
+import { c as collapsableInner } from './index-387b22af.js';
+import ShelfAccessoires from './index-30897e3f.js';
+import ShelfAccessoiresOld from './index-f494b90f.js';
+import GridList from './index-885ac945.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import SettingsItemsWrapper from './index-1a98c1ee.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+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 '@crystaldesign/real-time-viewer-next';
+import 'react-switch';
+import 'react-countup';
+import 'sift';
+import './index-e1f5694a.js';
+import './index-077951f1.js';
+import './index-ef74629e.js';
+import './index-0fc12ad6.js';
+import './index.module-d99f631b.js';
+import './index-26a22631.js';
+import './index-2eeee125.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-f5772315.js';
+import 'react-dropdown';
+import './index-702e75b4.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-ed668388.js';
+import './index-10c0eb48.js';
+import './index-44ff3dae.js';
+import '@crystaldesign/content-box';
+import './index-f207ddc2.js';
+import './index-f44f80ba.js';
+import './index-f2061f3a.js';
+import './index-ac5f7df3.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-74bdb7a0.js';
+import './index-32d7bda0.js';
+import './index-ba106f74.js';
+import './index-3c6d0c4f.js';
+import './index-bc4c906b.js';
+import './index-1587a4ec.js';
+import './index-a8f271b7.js';
+import 'react-laag';
+import './index.module-fdb46b52.js';
+import './index-7116d7cf.js';
+import './index-7009efe3.js';
+import './index-5046ad12.js';
+import './index-27314579.js';
+import './index-bc781e53.js';
+import './index.module-ff855166.js';
+import './index-fbbedb50.js';
+import './index-2443048f.js';
+import './index-ed93b19a.js';
+import './index-8fdfc24a.js';
+import './index-456e9ad6.js';
+import './index-e074acfe.js';
+import './index-4b75007c.js';
+import './index-e4b769dc.js';
+import './index-043fe583.js';
+import './index-27491a92.js';
+import './index-7b9f596d.js';
+import './index-447c10c2.js';
+import './index-434e938e.js';
+import 'rc-slider';
+import './index-4f90251f.js';
+import './index-cd208c3e.js';
+import './index-8a042471.js';
+import './index-d2bcd764.js';
+import './index-494e57ea.js';
+import 'react-confetti-explosion';
+import './index-df5b3708.js';
+import './index-13e33922.js';
+import './index-00b8a7e3.js';
+import 'react-qr-code';
+import './index-5e3720ed.js';
+import './useCustomDimensions-24c65ba5.js';
+import './index-e57f918d.js';
+import './ussIsSticky-29b9ec12.js';
+import './index-14eeba2a.js';
+import './index-6e834cf1.js';
+import './index-8565a240.js';
+import './index.module-708b56e5.js';
+import './index-d6eb0ab2.js';
+import './index-c988cdf6.js';
+import './index-85e25747.js';
+import './index-e532d7e9.js';
+import 'react-dom';
+import 'react-beautiful-dnd';
+import './index-b6e2d72e.js';
+import './index-ba8ea817.js';
+import './index-a4010bd7.js';
+
+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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/** Rough "size" of an accessory for picking the biggest family member (bbox volume, fallback cellSize). */
+var accSize = function accSize(i) {
+  var _i$width, _i$height, _i$depth;
+  return ((_i$width = i.width) !== null && _i$width !== void 0 ? _i$width : 0) * ((_i$height = i.height) !== null && _i$height !== void 0 ? _i$height : 0) * ((_i$depth = i.depth) !== null && _i$depth !== void 0 ? _i$depth : 0) || i.cellSize || 0;
+};
+
+/**
+ * `PaletteItemType` has no discriminant, but `cellSize` is declared only on `ShelfAccessoriesView`,
+ * so `in` narrows the union to it. Non-empty in practice: the SHELFPLANNER palette is fed solely by
+ * `ShelfItem.getAllItems()`, which is `ShelfAccessoriesView[]` — the element type is only lost when
+ * `updateItemPalette` widens it to `PaletteItemType[]`.
+ */
+var isShelfAccessory = function isShelfAccessory(i) {
+  return 'cellSize' in i;
+};
+
+/** Family key of a palette item: its accessory variant-family name, or null if it's not in a family. */
+function familyKeyOf(item) {
+  var _item$accessoireFamil;
+  return (_item$accessoireFamil = item.accessoireFamily) !== null && _item$accessoireFamil !== void 0 ? _item$accessoireFamil : null;
+}
+
+/**
+ * Collapse each variant family to a single palette entry — the BIGGEST member (its label/image/price
+ * represent the family; picking it auto-places that size, then the drag resizes to the right variant).
+ * Items not in a family pass through unchanged, keeping their original order.
+ */
+function collapseFamilies(items) {
+  var out = [];
+  var idxByFamily = new Map();
+  var _iterator = _createForOfIteratorHelper(items),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var it = _step.value;
+      var key = familyKeyOf(it);
+      if (!key) {
+        out.push(it);
+        continue;
+      }
+      var at = idxByFamily.get(key);
+      if (at === undefined) {
+        idxByFamily.set(key, out.length);
+        out.push(it);
+      } else if (accSize(it) > accSize(out[at])) {
+        out[at] = it;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return out;
+}
+var ShelfPlanner = function ShelfPlanner(_ref) {
+  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3, _viewHandler$settings4, _item$shelfPlannerGri, _item$shelfPlannerGri2, _item$shelfPlannerGri3, _filteredGroups$0$ite, _filteredGroups$, _selAccItem, _selAccItem2;
+  var item = _ref.item,
+    style = _ref.style,
+    filteredGroups = _ref.filteredGroups;
+  var viewHandler = useViewHandler();
+  var height = ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) - 10;
+  var width = ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().width) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) - 16;
+  var grid = (_item$shelfPlannerGri = item === null || item === void 0 || (_item$shelfPlannerGri2 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri2 === void 0 ? void 0 : _item$shelfPlannerGri2.find(function (g) {
+    return g.ActAccessoire;
+  })) !== null && _item$shelfPlannerGri !== void 0 ? _item$shelfPlannerGri : item === null || item === void 0 || (_item$shelfPlannerGri3 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri3 === void 0 ? void 0 : _item$shelfPlannerGri3[0];
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var allItems = ((_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : []).filter(isShelfAccessory);
+  // Family collapsing only makes sense with the rtv-next drag that resizes to the right variant.
+  // The old viewer has no such drag, so it must keep showing every variant as its own entry.
+  var rtvNext = viewHandler.productState.useRtvNext || rtvNextParamActive;
+  var items = rtvNext && ACCESSORY_PLACEMENT_MODE === 'autoPlaceDrag' ? collapseFamilies(allItems) : allItems;
+  var selAcc = grid.ActAccessoire;
+  var selAccItem = undefined;
+  if (selAcc) {
+    // Resolve from the full list — a selected member may have been collapsed away from the palette.
+    selAccItem = allItems.find(function (item) {
+      return item.articleCodex == selAcc;
+    });
+  }
+  var requiredWarning = grid.getRequiredWarning(viewHandler.configState.lang);
+  var palettesOfSelectedAcc = [];
+  if ((_selAccItem = selAccItem) !== null && _selAccItem !== void 0 && (_selAccItem = _selAccItem.configStepKeys) !== null && _selAccItem !== void 0 && _selAccItem.length) {
+    var _loop = function _loop() {
+      var stepKey = selAccItem.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2);
+          _ref3[0];
+          var itemPalette = _ref3[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (viewHandler.settingsState.selectedShelfAccessoire == stepKey.basketId) palettesOfSelectedAcc.push(itemPalette[1]);
+    };
+    for (var i = 0; i < selAccItem.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  var mobileRTV = viewHandler.getIsInMobileView() && viewHandler.productState.shelfPlannerRTV;
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      return item.htmlRef = _ref4;
+    },
+    className: classnames(viewHandler.productState.shelfPlannerRTV ? shelfPlannerContainerRtv : undefined, grid.Direction == 'horizontal' ? shelfPlannerContainerHorizontal : shelfPlannerContainerVertical, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    style: _objectSpread({
+      height: height
+    }, style),
+    children: [!viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx("div", {
+      className: shelfGrid,
+      children: /*#__PURE__*/jsx("div", {
+        className: shelfGridBorder,
+        children: /*#__PURE__*/jsx(GridList, {
+          item: item,
+          direction: grid.Direction,
+          width: width,
+          height: height - 16 - 16
+        })
+      })
+    }), requiredWarning && /*#__PURE__*/jsx("div", {
+      className: warning,
+      dangerouslySetInnerHTML: {
+        __html: requiredWarning
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: accessoires,
+      children: [!!palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: configHeaderWrapper,
+          onClick: function onClick() {
+            return viewHandler.paletteViewHandler.setSelectedShelfAccessoire();
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: closeButton
+          }), /*#__PURE__*/jsx("div", {
+            className: name,
+            children: (_selAccItem2 = selAccItem) === null || _selAccItem2 === void 0 ? void 0 : _selAccItem2.name
+          })]
+        }), /*#__PURE__*/jsx(SettingsItemsWrapper, {
+          itemPalettesArr: palettesOfSelectedAcc
+        })]
+      }), !palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [!mobileRTV && /*#__PURE__*/jsx(SelectedAcc, {
+          selAccItem: selAccItem
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(accessoireContainer, collapsableInner),
+          style: {
+            height: grid.Direction == 'horizontal' ? height - 80 : '',
+            overflow: mobileRTV ? 'visible' : undefined
+          },
+          children: items.map(function (acc, key) {
+            var _selAccItem3;
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoires, {
+                grids: item.shelfPlannerGrids,
+                item: acc,
+                // A collapsed family entry stands in for every member, so match the family too —
+                // the placed variant may be a smaller sibling of the entry on display.
+                sel: acc.articleCodex == selAcc || rtvNext && !!((_selAccItem3 = selAccItem) !== null && _selAccItem3 !== void 0 && _selAccItem3.accessoireFamily) && acc.accessoireFamily === selAccItem.accessoireFamily
+              }, key), !viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoiresOld, {
+                grids: item.shelfPlannerGrids,
+                item: acc
+              }, key)]
+            });
+          })
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ShelfPlanner);
+
+export { index as default };

package/build/esm/index-363e7774.js

@@ -0,0 +1,166 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-32106d75.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import SettingsHeaderContainer from './index-73e6b691.js';
+import classnames from 'classnames';
+import TotalPrice from './index-b1b18e50.js';
+import SettingsItemsWrapper from './index-1a98c1ee.js';
+import { jsxs, 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 '@crystaldesign/real-time-viewer-next';
+import 'react-switch';
+import 'react-countup';
+import './index-387b22af.js';
+import 'sift';
+import './index-e1f5694a.js';
+import './index-077951f1.js';
+import './index-ef74629e.js';
+import './index-0fc12ad6.js';
+import './index.module-d99f631b.js';
+import './index-26a22631.js';
+import './index-2eeee125.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-f5772315.js';
+import 'react-dropdown';
+import './index-702e75b4.js';
+import './index-ed668388.js';
+import './index-10c0eb48.js';
+import './index-44ff3dae.js';
+import '@crystaldesign/content-box';
+import './index-f207ddc2.js';
+import './index-f44f80ba.js';
+import './index-f2061f3a.js';
+import './index-ac5f7df3.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-74bdb7a0.js';
+import './index-32d7bda0.js';
+import './index-ba106f74.js';
+import './index-3c6d0c4f.js';
+import './index-bc4c906b.js';
+import './index-1587a4ec.js';
+import './index-a8f271b7.js';
+import 'react-laag';
+import './index.module-fdb46b52.js';
+import './index-7116d7cf.js';
+import './index-7009efe3.js';
+import './index-5046ad12.js';
+import './index-27314579.js';
+import './index-bc781e53.js';
+import './index.module-ff855166.js';
+import './index-fbbedb50.js';
+import './index-2443048f.js';
+import './index-ed93b19a.js';
+import './index-8fdfc24a.js';
+import './index-456e9ad6.js';
+import './index-e074acfe.js';
+import './index-4b75007c.js';
+import './index-e4b769dc.js';
+import './index-043fe583.js';
+import './index-27491a92.js';
+import './index-7b9f596d.js';
+import './index-447c10c2.js';
+import './index-434e938e.js';
+import 'rc-slider';
+import './index-4f90251f.js';
+import './index-cd208c3e.js';
+import './index-8a042471.js';
+import './index-d2bcd764.js';
+import './index-494e57ea.js';
+import 'react-confetti-explosion';
+import './index-df5b3708.js';
+import './index-13e33922.js';
+import './index-00b8a7e3.js';
+import 'react-qr-code';
+import './index-5e3720ed.js';
+import './useCustomDimensions-24c65ba5.js';
+import './index-e57f918d.js';
+import './ussIsSticky-29b9ec12.js';
+import './index-14eeba2a.js';
+import './index-6e834cf1.js';
+import './index-8565a240.js';
+import './index.module-708b56e5.js';
+import './index-d6eb0ab2.js';
+import './index-c988cdf6.js';
+import './index-85e25747.js';
+import './index-e532d7e9.js';
+import './index-ba8ea817.js';
+import './index-a4010bd7.js';
+
+var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
+var expanded = "expanded-r-uGX";
+var minExpanded = "minExpanded-oyaLK";
+var scrollerFlex = "scrollerFlex-XVfOS";
+var scrollerContentFill = "scrollerContentFill-p1UEK";
+var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n\n/* When in wysiwyg inspect mode: scroller becomes flex so content can fill height */\n.scrollerFlex-XVfOS {\n  display: flex;\n  flex-direction: column;\n}\n\n.scrollerFlex-XVfOS .scrollerContentFill-p1UEK {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n";
+styleInject(css_248z);
+
+var SettingsScroller = function SettingsScroller(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var settingsScrollerElement = useRef(null);
+  var itemPalettesArr = [];
+  useEffect(function () {
+    if (settingsScrollerElement.current) {
+      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
+      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
+    }
+    return function () {};
+  }, [settingsScrollerElement]);
+  var style = {};
+  var snapPoint = viewHandler.uiState.snapPoints[viewHandler.settingsState.activeSnapPointIndex];
+  var mobileHeight;
+  if (isNaN(Number(snapPoint))) {
+    mobileHeight = snapPoint;
+  } else {
+    mobileHeight = snapPoint - 38 + 'px';
+  }
+  if (viewHandler.uiState.isInMobileView) {
+    style.height = mobileHeight;
+  } else {
+    var _viewHandler$settings, _viewHandler$settings2;
+    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
+  }
+  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
+    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
+    if (!itemPalette.isRenderedNotInSettingPalette && itemPalette.visible) itemPalettesArr.push(itemPalette);
+  }
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsMinExpanded) viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MIN_CONFIG_SETTINGS');else viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MAX_CONFIG_SETTINGS');
+  }, [viewHandler.uiState.configSettingsIsExpanded, viewHandler.uiState.configSettingsIsMinExpanded]);
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerFlex),
+    id: "wcConfigurator-settings-scroller",
+    ref: settingsScrollerElement,
+    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__PURE__*/jsx(SettingsHeaderContainer, {
+      isScroller: true
+    }, (_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__*/jsxs("div", {
+      className: classnames(viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerContentFill),
+      children: [/*#__PURE__*/jsx(SettingsItemsWrapper, {
+        itemPalettesArr: itemPalettesArr
+      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
+    })]
+  });
+};
+var SettingsScroller$1 = observer(SettingsScroller);
+
+export { SettingsScroller$1 as default };