@crystaldesign/diva-web-planner-react 26.7.0-rc.9 → 26.7.0

package/build/esm/index-dde18cf0.js

@@ -0,0 +1,88 @@
+import { s as styleInject, u as useViewHandler } from './index-55508962.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wcConfiguratorProductFooter = "wcConfigurator-product-footer-SQUKh";
+var portrait = "portrait-begxM";
+var landscape = "landscape-m3RkP";
+var expanded = "expanded-D5PIt";
+var wcButton = "wcButton-2kxBv";
+var sel = "sel-4wfuc";
+var wcViewAs = "wc_ViewAs-QJyAI";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-SQUKh {\n  text-align: center;\n  z-index: 350;\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n  display: flex;\n  gap: 10px;\n}\n\n.portrait-begxM.wcConfigurator-product-footer-SQUKh {\n  display: none;\n}\n\n.landscape-m3RkP.wcConfigurator-product-footer-SQUKh {\n  display: none;\n}\n\n.expanded-D5PIt.wcConfigurator-product-footer-SQUKh {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc,\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc:hover {\n  background: #262626;\n  color: white;\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv:active,\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv.sel-4wfuc:active {\n  background: #262626;\n  color: white;\n}\n\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv {\n  background: white;\n  box-sizing: border-box;\n  -webkit-text-stroke: 0.6px;\n  min-width: 150px;\n  width: auto;\n  height: 38.4px;\n  line-height: 35.8px;\n  color: var(--secondaryColor);\n  border-radius: var(--globalBorderRadius);\n  border: 1px solid #262626;\n}\n\n.portrait-begxM.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv {\n  min-width: 140px;\n}\n.wcConfigurator-product-footer-SQUKh .wcButton-2kxBv:hover {\n  color: var(--secondaryColor);\n  background: white;\n  box-shadow: var(--boxShadowHover);\n}\n\n/* ViewAs  */\n.wc_ViewAs-QJyAI {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  list-style: none;\n  white-space: nowrap;\n  display: flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.wc_ViewAs-QJyAI li {\n  display: block;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  if (viewHandler.productState.footerVisible.length <= 1 && (((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) != 'SUMMARY' || !renderings.length)) return /*#__PURE__*/jsx(Fragment, {});
+  if (viewHandler.uiState.ViewConfig.roomListInProduct && viewHandler.productState.roomListExpanded && viewHandler.settingsState.roomListInitialized) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorProductFooter, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        },
+        children: t('configurator.Foto')
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        },
+        children: t('configurator.Grundriss')
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          },
+          children: t('configurator.Foto')
+        }), ((_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.type) == 'SUMMARY' && renderings.map(function (rendering) {
+          var _viewHandler$productS;
+          return /*#__PURE__*/jsx("li", {
+            className: classnames(wcButton, viewHandler.productState.doShowRenderImage && ((_viewHandler$productS = viewHandler.productState.curAlternateRendering) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.imageCodex) === rendering.imageCodex ? sel : undefined),
+            onClick: function onClick() {
+              return viewHandler.productState.onChangePlannerView('3D', rendering);
+            },
+            children: rendering.title
+          });
+        })]
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        },
+        children: t('configurator.RTV')
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };

package/build/esm/index-de10aa46.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-55508962.js';
+import SummaryOptionTree from './index-1c0956fd.js';
+import SummaryArticles from './index-0be3ac76.js';
+import SettingsItemAccessoireTemplate from './index-9c833314.js';
+import Gallery from './index-bd2c66e2.js';
+import SettingsItemDefaultTemplate from './index-0cbcf4c6.js';
+import Range from './index-04d47aa2.js';
+import SettingsItemRoomTemplate from './index-b5dbbd51.js';
+import ViewPoint from './index-e8921bd5.js';
+import NumberBox from './index-f4d15b2c.js';
+import PlannerSwitch from './index-ad1359ff.js';
+import Varaint from './index-820a5ce8.js';
+import GalleryText from './index-fe155b30.js';
+import 'react';
+import GalleryText2 from './index-53407fbe.js';
+import FaceLift from './index-ddaa5540.js';
+import PlannerOverviewItem from './index-f1ceac88.js';
+import Article from './index-5ca0c9c1.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-laag';
+import './index.module-97239b72.js';
+import './index-b53199b9.js';
+import './index-09cbbb15.js';
+import './index-2e884503.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index.module-6af42ed3.js';
+import './index-57721f08.js';
+import './index-73f1f21f.js';
+import './index-61f28554.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+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 itemPaletteTypeComponentMap = {
+  ART: Article,
+  ART_2: FaceLift,
+  'PLANNER_2.0': PlannerOverviewItem,
+  PLANNERSWITCH: PlannerSwitch,
+  ACC: SettingsItemAccessoireTemplate,
+  ACC_CONFIG: SettingsItemAccessoireTemplate,
+  VERY_SMALL: SettingsItemDefaultTemplate,
+  SMALL: SettingsItemDefaultTemplate,
+  GAL_GROUP_DROPDOWN: function GAL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "normalimage.png"
+    }, props));
+  },
+  GAL_SMALL_GROUP_DROPDOWN: function GAL_SMALL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL: Gallery,
+  GAL_SMALL: Gallery,
+  GAL_BIG: Gallery,
+  RANGE: Range,
+  NUMBER: NumberBox,
+  SLIDER: function SLIDER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE: function MULTI_TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE_ROUND: function MULTI_TOGGLE_ROUND() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO: function RADIO() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO_LIST: function RADIO_LIST() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SUMMARY_ARTICLES: SummaryArticles,
+  SUMMARY_OPTIONTREE: SummaryOptionTree,
+  VARIANTS: Varaint,
+  STATICROOM: SettingsItemRoomTemplate,
+  VIEWPOINT: ViewPoint,
+  DROPDOWN_TEXT: function DROPDOWN_TEXT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DROPDOWN_IMAGE: function DROPDOWN_IMAGE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE: function TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_HEADER: function TOGGLE_HEADER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_NAME: function TOGGLE_NAME() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DOOR_PLANNER: function DOOR_PLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TEXTBOX: function TEXTBOX() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SHELFPLANNER: function SHELFPLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PRODUCTS: function PRODUCTS() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PROMOTED: function PROMOTED() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  CHECKOUT: function CHECKOUT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  STYLE_CONSULTANT: function STYLE_CONSULTANT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  GAL_TEXT_2: function GAL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT_2: function GAL_BIG_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT_2: function GAL_SMALL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_TEXT: function GAL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT: function GAL_BIG_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT: function GAL_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_VERY_SMALL_TEXT: function GAL_VERY_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "verysmall"
+    }, props));
+  }
+};
+
+export { itemPaletteTypeComponentMap as default };

package/build/esm/index-e0d86597.js

@@ -0,0 +1,111 @@
+import { u as useViewHandler, P as PricePreview, T as Toggle } from './index-55508962.js';
+import 'react';
+import classnames from 'classnames';
+import { r as row, c as colum, t as title, a as toggle } from './index.module-5b1ff29f.js';
+import { observer } from 'mobx-react-lite';
+import { getLogger } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import InfoIcon from './index-09cbbb15.js';
+import ReverseCheck from './index-2e884503.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+
+var LOG = getLogger('Planner', 'ToggleOption');
+var ToggleOption = function ToggleOption(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var items = item.groups[0].items;
+  var yesItem;
+  var noItem;
+  if (!items) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  for (var i = 0; i < items.length; i++) {
+    var _items$i$codex, _items$i$codex2;
+    if ((_items$i$codex = items[i].codex) !== null && _items$i$codex !== void 0 && _items$i$codex.startsWith('OPVNEIN')) {
+      noItem = items[i];
+    }
+    if ((_items$i$codex2 = items[i].codex) !== null && _items$i$codex2 !== void 0 && _items$i$codex2.startsWith('OPVJA')) {
+      yesItem = items[i];
+    }
+  }
+  if (!noItem || !yesItem) {
+    if (items.length == 2) {
+      noItem = items[0];
+      yesItem = items[1];
+    }
+    if (!noItem || !yesItem) {
+      LOG.error(new DivaError('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', {
+        code: 'WC_0011'
+      }));
+      item.isVisited = true;
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  }
+  var contentItem = (_item$selectedElement = item.selectedElements) !== null && _item$selectedElement !== void 0 && _item$selectedElement[0].contentItemId ? item.selectedElements[0] : item.optionContentItemId ? {
+    contentItemId: item.optionContentItemId,
+    codex: item.configStepKey
+  } : undefined;
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(colum, title),
+      children: item.name
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(colum, toggle),
+      children: [noItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: noItem.pricePreviewPromise,
+        sel: noItem.sel,
+        pos: "left"
+      }), /*#__PURE__*/jsx(Toggle, {
+        onChange: function onChange() {
+          viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, paletteId);
+        },
+        val: item,
+        state: noItem.sel == false,
+        off: noItem.text,
+        on: yesItem.text
+      }), yesItem.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+        asyncPricePreview: yesItem.pricePreviewPromise,
+        sel: yesItem.sel,
+        pos: "right"
+      }), yesItem.checkForReversingChanges !== undefined && /*#__PURE__*/jsx(ReverseCheck, {
+        item: yesItem,
+        paletteId: paletteId
+      })]
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        bottom: 'calc(50% - 10px)',
+        right: '20px'
+      }
+    }, item.configStepKey)]
+  });
+};
+var ToggleOption$1 = observer(ToggleOption);
+
+export { ToggleOption$1 as default };

package/build/esm/index-e26ce22f.js

@@ -0,0 +1,124 @@
+import { u as useViewHandler, P as PricePreview, T as Toggle } from './index-55508962.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-5b1ff29f.js';
+import { getLogger } from '@crystaldesign/diva-core';
+import InfoIcon from './index-09cbbb15.js';
+import ReverseCheck from './index-2e884503.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 '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-e66945de.js

@@ -0,0 +1,104 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-55508962.js';
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Grid } from 'swiper/modules';
+import ConceptItem from './index-f5cca3cd.js';
+import classnames from 'classnames';
+import Collapsible from 'react-collapsible';
+import CollapsibleTrigger from './index-2857e8e7.js';
+import InfoBanner from './index-90f42b29.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/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-09cbbb15.js';
+
+var collapsible = "collapsible-RtG0L";
+var collapsibleContentInner = "collapsible-content-inner-pCgwK";
+var conceptFilter = "concept-filter-oYrcv";
+var conceptFilterSwiper = "concept-filter-swiper-l7E-n";
+var css_248z = ".collapsible-RtG0L {\n  margin-bottom: 16px;\n}\n\n.collapsible-content-inner-pCgwK {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-top: 16px;\n  justify-content: center;\n  align-items: center;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 4px;\n}\n\n/*grid css*/\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-grid > .swiper-wrapper {\n  flex-wrap: wrap;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-grid-column > .swiper-wrapper {\n  flex-wrap: wrap;\n  flex-direction: column;\n  height: 198px;\n}\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-android .swiper-slide,\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-autoheight,\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
+styleInject(css_248z);
+
+var ConceptFilter = function ConceptFilter(_ref) {
+  var genericConceptItems = _ref.genericConceptItems,
+    bannerTitle = _ref.bannerTitle,
+    bannerText = _ref.bannerText,
+    _onClose = _ref.onClose;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    swiperRef = _useState2[0],
+    setSwiperRef = _useState2[1];
+  var navigateToOnClick = function navigateToOnClick(index) {
+    swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(index);
+  };
+  return /*#__PURE__*/jsxs(Collapsible, {
+    open: true,
+    className: collapsible,
+    trigger: /*#__PURE__*/jsx(CollapsibleTrigger, {
+      open: false
+    }),
+    triggerWhenOpen: /*#__PURE__*/jsx(CollapsibleTrigger, {
+      open: true
+    }),
+    contentInnerClassName: collapsibleContentInner,
+    easing: "ease-out",
+    onClose: function onClose() {
+      _onClose === null || _onClose === void 0 || _onClose();
+    },
+    children: [/*#__PURE__*/jsx(InfoBanner, {
+      title: bannerTitle,
+      text: bannerText
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(conceptFilterSwiper, conceptFilter),
+      children: /*#__PURE__*/jsx(Swiper, {
+        onSwiper: setSwiperRef,
+        resizeObserver: true,
+        modules: [Navigation, Grid],
+        style: {
+          width: 'fit-content'
+        },
+        spaceBetween: 8,
+        scrollbar: true,
+        slideToClickedSlide: true,
+        wrapperClass: "no-swiping",
+        slidesPerView: 3,
+        grid: {
+          rows: 2
+        },
+        children: genericConceptItems.map(function (e, index) {
+          return /*#__PURE__*/jsx(SwiperSlide, {
+            onClick: function onClick(e) {
+              var clickRow = (index - index % 2) / 2;
+              var rowToNavigateTo = clickRow - 1;
+              navigateToOnClick(rowToNavigateTo >= 0 ? rowToNavigateTo : 0);
+              e.stopPropagation();
+            },
+            children: /*#__PURE__*/jsx(ConceptItem, {
+              item: e
+            }, e.key)
+          }, index);
+        })
+      })
+    })]
+  });
+};
+var ConceptGallery = observer(ConceptFilter);
+
+export { ConceptGallery as default };