@crystaldesign/diva-web-planner-react 26.3.0-beta.4 → 26.3.0-beta.40

package/build/esm/index-a4ad90d0.js

@@ -0,0 +1,377 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
+import React, { useMemo, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { u as useAgGrid } from './agGridLoader-b1d4f14a.js';
+import ArticleSelector from './index-bb0c21f1.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-select';
+
+var scrollable = "scrollable-Wc-tN";
+var tableDescription = "tableDescription-uVw--";
+var gridContainer = "gridContainer-P2D1c";
+var rowSelected = "rowSelected-Za57x";
+var header = "header-1prGa";
+var rowNotLoaded = "rowNotLoaded-it-P2";
+var loadedYes = "loadedYes-mHpTt";
+var loadedNo = "loadedNo-CyxAP";
+var css_248z = ".scrollable-Wc-tN {\n  overflow: auto;\n  width: 100%;\n  padding: 16px;\n  height: 100%;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tableDescription-uVw-- {\n  margin: 8px 0 12px;\n  font-size: 13px;\n  color: #64748b;\n  line-height: 1.4;\n}\n\n.gridContainer-P2D1c {\n  width: 100%;\n  min-height: 150px;\n  height: calc(100% - 90px);\n  margin-top: 16px;\n}\n\n.rowSelected-Za57x {\n  background-color: #dcfce7 !important;\n}\n\n.rowSelected-Za57x:hover {\n  background-color: #bbf7d0 !important;\n}\n\n.header-1prGa {\n  padding: 8px 16px;\n  margin: 0 0 12px 0;\n  text-align: center;\n  background: linear-gradient(135deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 90%, black) 100%);\n  font-size: 18px;\n  color: white;\n  font-weight: 600;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n  border-radius: 8px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n}\n\n.table-yS0MB {\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n  font-family: var(--diva-typography-font-family);\n  font-size: 13px;\n  background: #fff;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.table-yS0MB thead {\n  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.table-yS0MB th,\n.table-yS0MB td {\n  padding: 10px 14px;\n  text-align: left;\n  border-bottom: 1px solid #e2e8f0;\n}\n\n.table-yS0MB tbody tr:hover {\n  background: #f7fafc;\n}\n\n.table-yS0MB tbody tr.rowNotLoaded-it-P2 {\n  background: #e8eae8;\n}\n\n.table-yS0MB tbody tr.rowNotLoaded-it-P2:hover {\n  background: #e0e2e0;\n}\n\n.column-txVK9 {\n  text-align: left;\n}\n\n.loadedYes-mHpTt {\n  color: #38a169;\n  font-weight: 500;\n}\n\n.loadedNo-CyxAP {\n  color: #e53e3e;\n}\n\n.nestedCell-xpEug {\n  padding: 0;\n  vertical-align: top;\n  border-bottom: 1px solid #e2e8f0;\n}\n\n.nestedTable-DRzG8 {\n  margin: 8px 0 8px 24px;\n  width: calc(100% - 24px);\n}\n\n/* Dark mode compatibility */\n.darkmode .tableDescription-uVw--,\nbody.darkmode .tableDescription-uVw-- {\n  color: #94a3b8;\n}\n\n.darkmode .loadedYes-mHpTt,\nbody.darkmode .loadedYes-mHpTt {\n  color: #68d391;\n}\n\n.darkmode .loadedNo-CyxAP,\nbody.darkmode .loadedNo-CyxAP {\n  color: #fc8181;\n}\n\n.darkmode .rowNotLoaded-it-P2,\nbody.darkmode .rowNotLoaded-it-P2 {\n  background-color: rgba(51, 65, 85, 0.5) !important;\n}\n\n.darkmode .rowNotLoaded-it-P2:hover,\nbody.darkmode .rowNotLoaded-it-P2:hover {\n  background-color: rgba(71, 85, 105, 0.6) !important;\n}\n\n.darkmode .rowSelected-Za57x,\nbody.darkmode .rowSelected-Za57x {\n  background-color: rgba(34, 197, 94, 0.25) !important;\n}\n\n.darkmode .rowSelected-Za57x:hover,\nbody.darkmode .rowSelected-Za57x:hover {\n  background-color: rgba(34, 197, 94, 0.35) !important;\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 idCounter = 0;
+function nextId() {
+  return "pl-".concat(++idCounter);
+}
+function flattenPartlistArticles(partlistArticles, allArticles, depth) {
+  var result = [];
+  for (var _i = 0, _Object$values = Object.values(partlistArticles); _i < _Object$values.length; _i++) {
+    var _pa$partlistDecisionN, _pa$quantity;
+    var pa = _Object$values[_i];
+    result.push({
+      _id: nextId(),
+      depth: depth,
+      loaded: true,
+      articleCodex: pa.articleCodex,
+      itemRefTypeNo: pa.articleCodex,
+      partlistGroup: '-',
+      decisionNo: String((_pa$partlistDecisionN = pa.partlistDecisionNo) !== null && _pa$partlistDecisionN !== void 0 ? _pa$partlistDecisionN : '-'),
+      quantity: (_pa$quantity = pa.quantity) !== null && _pa$quantity !== void 0 ? _pa$quantity : '-',
+      reason: 'Loaded (partlist child)',
+      rowNotLoaded: false,
+      article: pa
+    });
+    if (pa.partlistArticles && Object.keys(pa.partlistArticles).length > 0) {
+      result.push.apply(result, _toConsumableArray(flattenPartlistArticles(pa.partlistArticles, allArticles, depth + 1)));
+    }
+  }
+  return result;
+}
+function flattenPartlistEntries(entries, article, allArticles, depth) {
+  var result = [];
+  var _loop = function _loop() {
+    var _entry$itemRefTypeNo, _entry$partlistGroup, _entry$decisionNo, _entry$quantity;
+    var entry = entries[idx];
+    var childArticle = entry.basketId ? allArticles[entry.basketId] : undefined;
+    var childArticleFromPartlist = !childArticle && entry.loaded && article !== null && article !== void 0 && article.partlistArticles ? Object.values(article.partlistArticles).find(function (pa) {
+      return pa.articleCodex === entry.articleCodex;
+    }) : undefined;
+    var child = childArticle !== null && childArticle !== void 0 ? childArticle : childArticleFromPartlist;
+    var hasNestedPartlist = entry.loaded && (child === null || child === void 0 ? void 0 : child.partlistArticles) && Object.keys(child.partlistArticles).length > 0;
+    result.push({
+      _id: nextId(),
+      depth: depth,
+      loaded: entry.loaded,
+      articleCodex: entry.articleCodex,
+      itemRefTypeNo: (_entry$itemRefTypeNo = entry.itemRefTypeNo) !== null && _entry$itemRefTypeNo !== void 0 ? _entry$itemRefTypeNo : '',
+      partlistGroup: (_entry$partlistGroup = entry.partlistGroup) !== null && _entry$partlistGroup !== void 0 ? _entry$partlistGroup : '-',
+      decisionNo: String((_entry$decisionNo = entry.decisionNo) !== null && _entry$decisionNo !== void 0 ? _entry$decisionNo : '-'),
+      quantity: (_entry$quantity = entry.quantity) !== null && _entry$quantity !== void 0 ? _entry$quantity : '-',
+      reason: entry.reason,
+      rowNotLoaded: !entry.loaded,
+      article: entry.loaded ? child : undefined
+    });
+    if (hasNestedPartlist && child) {
+      result.push.apply(result, _toConsumableArray(flattenPartlistArticles(child.partlistArticles, allArticles, depth + 1)));
+    }
+  };
+  for (var idx = 0; idx < entries.length; idx++) {
+    _loop();
+  }
+  return result;
+}
+var PartlistDebug = function PartlistDebug(props) {
+  var _viewHandler$divaWebP;
+  var viewHandler = useViewHandler();
+  var agGrid = useAgGrid();
+  var configChanged = viewHandler.settingsState.configChanged;
+  var curConfigStep = viewHandler.tabGroupState.curConfigStep;
+  var darkMode = typeof document !== 'undefined' && document.body.classList.contains('darkmode');
+  var gridTheme = useMemo(function () {
+    return agGrid.themeQuartz ? darkMode && agGrid.colorSchemeDarkBlue ? agGrid.themeQuartz.withPart(agGrid.colorSchemeDarkBlue) : agGrid.themeQuartz : undefined;
+  }, [darkMode, agGrid.themeQuartz, agGrid.colorSchemeDarkBlue]);
+  var articlesWithPartlist = useMemo(function () {
+    var articles = viewHandler.divaWebPlanner.getDivaArticles();
+    return articles ? Object.values(articles).filter(function (a) {
+      return a.hasPartlistArticle;
+    }) : [];
+  }, [configChanged, curConfigStep]);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    rerender = _React$useState2[0],
+    setRerender = _React$useState2[1];
+  var _React$useState3 = React.useState(undefined),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    article = _React$useState4[0],
+    setArticle = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    dataVersion = _React$useState6[0],
+    setDataVersion = _React$useState6[1];
+  var gridRef = useRef(null);
+  useEffect(function () {
+    var asyncFunct = /*#__PURE__*/function () {
+      var _ref = _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 new Promise(function (r) {
+                return setTimeout(r, 1000);
+              });
+            case 2:
+              setRerender(function (r) {
+                return !r;
+              });
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function asyncFunct() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    asyncFunct();
+  }, [viewHandler.tabGroupState.allTabGroups]);
+  useEffect(function () {
+    var set = viewHandler.divaWebPlanner.actSet();
+    if (set && !set.logDecisions) set.logDecisions = true;
+    return function () {
+      var set = viewHandler.divaWebPlanner.actSet();
+      if (set) set.logDecisions = false;
+    };
+  }, [viewHandler.uiState.isLoading]);
+  useEffect(function () {
+    var actSet = viewHandler.divaWebPlanner.actSet();
+    if (article !== null && article !== void 0 && article.hasPartlistArticle && actSet !== null && actSet !== void 0 && actSet.logDecisions) {
+      article.engine.evalPartlist(article.VariantValues);
+      setDataVersion(function (v) {
+        return v + 1;
+      });
+    }
+  }, [article, configChanged, curConfigStep, viewHandler.uiState.isLoading]);
+  var entries = useMemo(function () {
+    var _article$partlistDebu;
+    var list = (_article$partlistDebu = article === null || article === void 0 ? void 0 : article.partlistDebugEntries) !== null && _article$partlistDebu !== void 0 ? _article$partlistDebu : [];
+    return _toConsumableArray(list).sort(function (a, b) {
+      var _a$sequenceNo, _b$sequenceNo, _a$itemRefTypeNo, _b$itemRefTypeNo;
+      if (a.loaded !== b.loaded) return a.loaded ? -1 : 1;
+      var seqA = (_a$sequenceNo = a.sequenceNo) !== null && _a$sequenceNo !== void 0 ? _a$sequenceNo : 0;
+      var seqB = (_b$sequenceNo = b.sequenceNo) !== null && _b$sequenceNo !== void 0 ? _b$sequenceNo : 0;
+      if (seqA !== seqB) return seqA - seqB;
+      return ((_a$itemRefTypeNo = a.itemRefTypeNo) !== null && _a$itemRefTypeNo !== void 0 ? _a$itemRefTypeNo : '').localeCompare((_b$itemRefTypeNo = b.itemRefTypeNo) !== null && _b$itemRefTypeNo !== void 0 ? _b$itemRefTypeNo : '');
+    });
+  }, [article === null || article === void 0 ? void 0 : article.partlistDebugEntries, article === null || article === void 0 ? void 0 : article.basketId, configChanged, curConfigStep, dataVersion]);
+  var allArticles = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getDivaArticles(undefined, true)) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {};
+  var rowData = useMemo(function () {
+    idCounter = 0;
+    return article ? flattenPartlistEntries(entries, article, allArticles, 0) : [];
+  }, [entries, article, allArticles]);
+  var columnDefs = useMemo(function () {
+    return [{
+      field: 'loaded',
+      headerName: 'Loaded',
+      flex: 0,
+      width: 70,
+      cellRenderer: function cellRenderer(params) {
+        return params.data ? /*#__PURE__*/jsx("span", {
+          className: params.data.loaded ? loadedYes : loadedNo,
+          children: params.data.loaded ? 'y' : 'n'
+        }) : null;
+      }
+    }, {
+      field: 'articleCodex',
+      headerName: 'ArticleCodex',
+      flex: 1,
+      minWidth: 100,
+      valueGetter: function valueGetter(params) {
+        var _params$data$depth, _params$data, _params$data$articleC, _params$data2;
+        return '│ '.repeat((_params$data$depth = (_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data.depth) !== null && _params$data$depth !== void 0 ? _params$data$depth : 0) + ((_params$data$articleC = (_params$data2 = params.data) === null || _params$data2 === void 0 ? void 0 : _params$data2.articleCodex) !== null && _params$data$articleC !== void 0 ? _params$data$articleC : '');
+      },
+      cellStyle: function cellStyle(params) {
+        var _params$data$depth2, _params$data3;
+        return {
+          paddingLeft: 8 + ((_params$data$depth2 = (_params$data3 = params.data) === null || _params$data3 === void 0 ? void 0 : _params$data3.depth) !== null && _params$data$depth2 !== void 0 ? _params$data$depth2 : 0) * 12
+        };
+      }
+    }, {
+      field: 'itemRefTypeNo',
+      headerName: 'ItemRefTypeNo',
+      flex: 1,
+      minWidth: 100
+    }, {
+      field: 'partlistGroup',
+      headerName: 'PartlistGroup',
+      flex: 0,
+      width: 100
+    }, {
+      field: 'decisionNo',
+      headerName: 'DecisionNo',
+      flex: 0,
+      width: 90
+    }, {
+      field: 'quantity',
+      headerName: 'Quantity',
+      flex: 0,
+      width: 80
+    }, {
+      field: 'reason',
+      headerName: 'Reason',
+      flex: 1,
+      minWidth: 120
+    }];
+  }, []);
+  var getRowId = function getRowId(params) {
+    var _params$data$_id, _params$data4;
+    return (_params$data$_id = (_params$data4 = params.data) === null || _params$data4 === void 0 ? void 0 : _params$data4._id) !== null && _params$data$_id !== void 0 ? _params$data$_id : '';
+  };
+  var getRowClass = function getRowClass(params) {
+    var _params$data$article;
+    if (!params.data) return undefined;
+    var classes = [];
+    if (params.data.rowNotLoaded) classes.push(rowNotLoaded);
+    if (((_params$data$article = params.data.article) === null || _params$data$article === void 0 ? void 0 : _params$data$article.basketId) === (article === null || article === void 0 ? void 0 : article.basketId)) classes.push(rowSelected);
+    return classes.join(' ') || undefined;
+  };
+  var onRowClicked = function onRowClicked(e) {
+    var _e$data;
+    if ((_e$data = e.data) !== null && _e$data !== void 0 && _e$data.article) setArticle(e.data.article);
+  };
+  useEffect(function () {
+    var id = setTimeout(function () {
+      var _gridRef$current;
+      return (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 || (_gridRef$current = _gridRef$current.api) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.redrawRows();
+    }, 0);
+    return function () {
+      return clearTimeout(id);
+    };
+  }, [article === null || article === void 0 ? void 0 : article.basketId]);
+  if (articlesWithPartlist.length === 0) {
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+      className: classnames(props.className, scrollable),
+      style: {
+        zIndex: 800
+      },
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        children: "St\xFCckliste Debug"
+      }), /*#__PURE__*/jsx("p", {
+        style: {
+          padding: 16
+        },
+        children: "No articles with partlist in this set."
+      })]
+    }));
+  }
+  if (!agGrid.loaded || !agGrid.AgGridReact) {
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+      className: classnames(props.className, scrollable),
+      style: {
+        zIndex: 800
+      },
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        children: "St\xFCckliste Debug"
+      }), /*#__PURE__*/jsx("p", {
+        className: tableDescription,
+        children: "Tables require ag-grid (not loaded in this environment)."
+      })]
+    }));
+  }
+  if (!article) {
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+      className: classnames(props.className, scrollable),
+      style: {
+        zIndex: 800
+      },
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        children: "St\xFCckliste Debug"
+      }), /*#__PURE__*/jsx(ArticleSelector, {
+        articleState: [article, setArticle],
+        rerender: rerender,
+        filter: function filter(a) {
+          return a.hasPartlistArticle;
+        }
+      })]
+    }));
+  }
+  if (!entries.length) {
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+      className: classnames(props.className, scrollable),
+      style: {
+        zIndex: 800
+      },
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        children: "St\xFCckliste Debug"
+      }), /*#__PURE__*/jsx(ArticleSelector, {
+        articleState: [article, setArticle],
+        rerender: rerender,
+        filter: function filter(a) {
+          return a.hasPartlistArticle;
+        }
+      }), /*#__PURE__*/jsx("p", {
+        style: {
+          padding: 16
+        },
+        children: "No partlist positions in catalog for this article. Change config to refresh."
+      })]
+    }));
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      children: "St\xFCckliste Debug"
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle],
+      rerender: rerender,
+      filter: function filter(a) {
+        return a.hasPartlistArticle;
+      }
+    }), /*#__PURE__*/jsx("p", {
+      className: tableDescription,
+      children: "Partlist entries for the selected article. Nested partlist children are shown with indentation."
+    }), /*#__PURE__*/jsx("div", {
+      className: gridContainer,
+      children: /*#__PURE__*/jsx(agGrid.AgGridReact, {
+        ref: gridRef,
+        rowData: rowData,
+        columnDefs: columnDefs,
+        theme: gridTheme,
+        getRowId: getRowId,
+        getRowClass: getRowClass,
+        onRowClicked: onRowClicked,
+        suppressCellFocus: true,
+        suppressRowClickSelection: true,
+        domLayout: "normal"
+      })
+    })]
+  }));
+};
+var PartlistDebug$1 = observer(PartlistDebug);
+
+export { PartlistDebug$1 as default };

package/build/esm/{index-6f08238e.js → index-a4fa889e.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';

package/build/esm/{index-2b4ea28b.js → index-a5b98d98.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-eb1177f9.js → index-a64fce97.js}

@@ -1,7 +1,7 @@
-import { u as useViewHandler } from './index-1f4ff73d.js';
+import { u as useViewHandler } from './index-3d6251d6.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import { c as wcConfiguratorSettingsExpander, h as hidden, d as wcConfiguratorSettingsMaxExpander, f as wcConfiguratorSettingsMinExpander } from './index.module-05fd374c.js';
+import { c as wcConfiguratorSettingsExpander, h as hidden, d as wcConfiguratorSettingsMaxExpander, f as wcConfiguratorSettingsMinExpander } from './index.module-cb37470e.js';
 import classnames from 'classnames';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';

package/build/esm/{index-49a80a53.js → index-a66d796b.js}

@@ -1,6 +1,6 @@
-import { s as styleInject, u as useViewHandler } from './index-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import 'react';
-import Toggle from './index-d7b9d494.js';
+import Toggle from './index-745045d6.js';
 import { observer } from 'mobx-react-lite';
 import { getLogger } from '@crystaldesign/diva-core';
 import { DivaError } from '@crystaldesign/diva-utils';

package/build/esm/{index-e9aed872.js → index-a7bdb8f2.js}

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject } from './index-1f4ff73d.js';
+import { s as styleInject } from './index-3d6251d6.js';
 import 'react';
 import classnames from 'classnames';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-c5e642eb.js → index-aa0fc26b.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject } from './index-1f4ff73d.js';
+import { s as styleInject } from './index-3d6251d6.js';
 import { useState, useEffect } from 'react';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import PricePreview from './index-c4c0bdbd.js';
+import PricePreview from './index-541d3fca.js';
 import classnames from 'classnames';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
@@ -20,7 +20,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-f43408be.js';
+import './index-4fd9025b.js';
 import 'react-countup';
 
 var wcGalleryTooltip = "wcGalleryTooltip-eM-oy";

package/build/esm/{index-534eafcc.js → index-ad299c56.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-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import CheckoutFormNew from './index-f5a53e10.js';
-import ProductCenter from './index-86da227d.js';
-import ContentItemWrapper from './index-84649c3e.js';
+import CheckoutFormNew from './index-7d993f04.js';
+import ProductCenter from './index-6b1a6dbe.js';
+import ContentItemWrapper from './index-6f7a1de5.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
@@ -22,30 +22,32 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-d7b9d494.js';
+import './index-745045d6.js';
 import 'react-switch';
 import 'react-dropdown';
-import './index-4dfa88cf.js';
-import './index-b74be3c7.js';
-import './index-e8709145.js';
-import './index-d9255280.js';
-import './index.module-eba4ad03.js';
-import './index-13fa5e78.js';
-import './index-5c24ba3a.js';
-import './index-5c7907dc.js';
+import './index-b0f85439.js';
+import './index-d78e583c.js';
+import './index-36338348.js';
+import './index-e6f5e042.js';
+import './index.module-eb933b03.js';
+import './index-37c75fa9.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-f94bad89.js';
+import './index-485aefdf.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-37f6891f.js';
-import './index-9632c1ae.js';
-import './index-558aaeef.js';
-import './index-232f568d.js';
-import './index-65543e5b.js';
-import './index-4fef9047.js';
+import './index-0c7a122e.js';
+import './index-b4cfa6c1.js';
+import './index-b228c3eb.js';
+import './index-c53a9303.js';
+import './index-c3af35c6.js';
+import './index-bc30b964.js';
 import 'react-laag';
-import './index-f4e4bf34.js';
+import './index-653b7969.js';
 import 'react-qr-code';
-import './index-7c638818.js';
-import './index-9883349b.js';
-import './index-3f1129d8.js';
+import './index-10447c01.js';
+import './index-dcb596e4.js';
+import './index-8404735d.js';
 import '@crystaldesign/content-item';
 
 var arrow = "arrow-GTKSC";

package/build/esm/{index-4dfa88cf.js → index-b0f85439.js}

@@ -1,7 +1,7 @@
 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-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';

package/build/esm/{index-3eca181a.js → index-b12d879e.js}

@@ -1,9 +1,10 @@
-import { s as styleInject, u as useViewHandler, e as evalVisible, b, _ as _onClickCheckout, I as Icon } from './index-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler, e as evalVisible, b, _ as _onClickCheckout, I as Icon } from './index-3d6251d6.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { jsx } from 'react/jsx-runtime';
+import StyleIndicator from './index-c35fa245.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -30,9 +31,9 @@ var HeaderFunctions = function HeaderFunctions(props) {
   var viewHandler = useViewHandler();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/jsx("ul", {
+  return /*#__PURE__*/jsxs("ul", {
     className: classnames(wcFunctionsToolbar, viewHandler.getIsInMobileView() ? mobile : undefined),
-    children: (_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.filter(function (b) {
+    children: [/*#__PURE__*/jsx(StyleIndicator, {}), (_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.filter(function (b) {
       return evalVisible(b, viewHandler, 'header');
     }).map(function (b$1) {
       return /*#__PURE__*/jsx("li", {
@@ -46,7 +47,7 @@ var HeaderFunctions = function HeaderFunctions(props) {
           showTitle: !viewHandler.getIsInMobileView() || viewHandler.uiState.isTablet
         })
       }, b$1.index);
-    })
+    })]
   });
 };
 var Functions = observer(HeaderFunctions);

package/build/esm/{index-558aaeef.js → index-b228c3eb.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-c38f70cf.js → index-b22ffcd3.js}

@@ -1,6 +1,6 @@
-import { s as styleInject } from './index-1f4ff73d.js';
+import { s as styleInject } from './index-3d6251d6.js';
 import 'react';
-import OrbitInteractionStandard from './index-256c0759.js';
+import OrbitInteractionStandard from './index-56a4ba48.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-f383649b.js → index-b4b78a04.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-1f4ff73d.js';
+import { s as styleInject, u as useViewHandler } from './index-3d6251d6.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -27,7 +27,7 @@ var description = "description-dcuP6";
 var button = "button-0gvSY";
 var buttonText = "buttonText-HqWTX";
 var arrow = "arrow-9YFFk";
-var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 13px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}";
+var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 15px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n.mobile .description-dcuP6 {\n  font-size: 13px;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}\n";
 styleInject(css_248z);
 
 var ContentItemTeaser = function ContentItemTeaser(_ref) {
@@ -35,9 +35,9 @@ var ContentItemTeaser = function ContentItemTeaser(_ref) {
   var viewHandler = useViewHandler();
   return /*#__PURE__*/jsxs("div", {
     className: teaserContainer,
-    children: [/*#__PURE__*/jsx("div", {
+    children: [item.emoji && /*#__PURE__*/jsx("div", {
       className: emoji,
-      children: "\uD83D\uDE34"
+      children: item.emoji
     }), /*#__PURE__*/jsx("div", {
       className: title,
       children: item.title

package/build/esm/{index-9632c1ae.js → index-b4cfa6c1.js}

@@ -1,4 +1,4 @@
-import './index-1f4ff73d.js';
+import './index-3d6251d6.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';