@crystaldesign/diva-web-planner-react 25.10.0-beta.31 → 25.10.0-beta.33

package/build/esm/index-eec8f00c.js

@@ -1,406 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, C as Checkout } from './index-2c954057.js';
-import React, { useState, useRef, useEffect, useMemo, Suspense } from 'react';
-import { observer } from 'mobx-react-lite';
-import sift from 'sift';
-import TextBox from './index-188f51d5.js';
-import ItemVariant from './index-76b1ef1f.js';
-import SettingsPaletteGroup from './index-45490c6c.js';
-import ToggleOption from './index-a75c2535.js';
-import GroupDropdown from './index-fd4b7a7b.js';
-import PromotedProducts from './index-6836f333.js';
-import ToggleName from './index-ad4ff4b8.js';
-import itemPaletteTypeComponentMap from './index-abbdf3b8.js';
-import classnames from 'classnames';
-import StepInfo from './index-45476604.js';
-import SettingsHeader from './index-c704e2f0.js';
-import ReplaceSwitch from './index-25b70f5b.js';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation } from 'swiper/modules';
-import Slider from './index-2b87b8a1.js';
-import MultiToggle from './index-7c77e5f8.js';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-var collapsableInner = "collapsable-inner-YPvJa";
-var css_248z$3 = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\n}\n";
-styleInject(css_248z$3);
-
-var wcConfiguratorConfigPaletteContainer = "wcConfigurator-ConfigPaletteContainer-uKDCv";
-var css_248z$2 = ".wcConfigurator-ConfigPaletteContainer-uKDCv {\n  width: 100%;\n  margin-bottom: 24px;\n}\n";
-styleInject(css_248z$2);
-
-var horizontalGroup = "horizontal-group-394E3";
-var css_248z$1 = ".horizontal-group-394E3 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n\n/*navigation*/\n\n.horizontal-group-394E3 .swiper-slide {\n  width: auto;\n  width: initial;\n}\n\n.horizontal-group-394E3 .swiper-button-prev,\n.horizontal-group-394E3 .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  top: var(--swiper-navigation-top-offset, 50%);\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\n  height: var(--swiper-navigation-size);\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--swiper-theme-color);\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.horizontal-group-394E3 .swiper-button-prev.swiper-button-disabled,\n.horizontal-group-394E3 .swiper-button-next.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n.horizontal-group-394E3 .swiper-button-prev.swiper-button-hidden,\n.horizontal-group-394E3 .swiper-button-next.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n.horizontal-group-394E3 .swiper-navigation-disabled .swiper-button-prev,\n.horizontal-group-394E3 .swiper-navigation-disabled .swiper-button-next {\n  display: none !important;\n}\n.horizontal-group-394E3 .swiper-button-prev svg,\n.horizontal-group-394E3 .swiper-button-next svg {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  transform-origin: center;\n}\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev svg,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-next svg {\n  transform: rotate(180deg);\n}\n.horizontal-group-394E3 .swiper-button-prev,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-next {\n  left: 10px;\n  left: var(--swiper-navigation-sides-offset, 10px);\n  right: auto;\n}\n.horizontal-group-394E3 .swiper-button-next,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.horizontal-group-394E3 .swiper-button-lock {\n  display: none;\n}\n/* Navigation font start */\n.horizontal-group-394E3 .swiper-button-prev:after,\n.horizontal-group-394E3 .swiper-button-next:after {\n  text-transform: none !important;\n}\n.horizontal-group-394E3 .swiper-button-prev:after,\n.horizontal-group-394E3 .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: var(--swiper-navigation-size);\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n.horizontal-group-394E3 .swiper-button-prev:after,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n.horizontal-group-394E3 .swiper-button-next,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.horizontal-group-394E3 .swiper-button-next:after,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n/* Navigation font end */\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.horizontal-group-394E3 .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.horizontal-group-394E3 .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.horizontal-group-394E3 .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.horizontal-group-394E3 .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.horizontal-group-394E3 .swiper-android .swiper-slide,\n.horizontal-group-394E3 .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.horizontal-group-394E3 .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.horizontal-group-394E3 .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.horizontal-group-394E3 .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.horizontal-group-394E3 .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.horizontal-group-394E3 .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.horizontal-group-394E3 .swiper-autoheight,\n.horizontal-group-394E3 .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.horizontal-group-394E3 .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.horizontal-group-394E3 .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.horizontal-group-394E3 .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.horizontal-group-394E3 .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.horizontal-group-394E3 .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .horizontal-group-394E3 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .horizontal-group-394E3 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.horizontal-group-394E3 .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.horizontal-group-394E3 .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.horizontal-group-394E3 .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.horizontal-group-394E3 .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
-styleInject(css_248z$1);
-
-var HorizantalGroup = function HorizantalGroup(_ref) {
-  var item = _ref.item,
-    PaletteComponent = _ref.PaletteComponent;
-  var elements = item.groups.flatMap(function (group) {
-    return group.items;
-  });
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    swiperRef = _useState2[0],
-    setSwiperRef = _useState2[1];
-  var selectedIdx = useRef(0);
-  var navigateToOnClick = function navigateToOnClick(index) {
-    selectedIdx.current = index;
-    swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(index);
-  };
-  useEffect(function () {
-    if (swiperRef) {
-      swiperRef.slideTo(selectedIdx.current, 0);
-    }
-  }, [swiperRef]);
-  if (elements.length == 1) return /*#__PURE__*/jsx(Fragment, {});
-  return /*#__PURE__*/jsx("div", {
-    className: classnames(horizontalGroup),
-    id: item.id.toString(),
-    children: /*#__PURE__*/jsx(Swiper, {
-      onSwiper: setSwiperRef,
-      resizeObserver: true,
-      modules: [Navigation],
-      slidesPerView: 'auto',
-      style: {
-        width: 'fit-content'
-      },
-      spaceBetween: 8,
-      scrollbar: true,
-      children: elements.map(function (e, index) {
-        return /*#__PURE__*/jsx(SwiperSlide, {
-          onClick: function onClick(e) {
-            navigateToOnClick(index - 1);
-            e.stopPropagation();
-          },
-          children: /*#__PURE__*/jsx(PaletteComponent, {
-            paletteType: item.type,
-            paletteId: item.id,
-            item: e
-          }, getKey(e))
-        }, index);
-      })
-    })
-  });
-};
-var HorizantalGroup$1 = observer(HorizantalGroup);
-
-var index$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': HorizantalGroup$1
-});
-
-var wrapper = "wrapper-2fZg-";
-var css_248z = ".wrapper-2fZg- {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n  width: calc(100% - 12px);\n}\n";
-styleInject(css_248z);
-
-var ArticleOverviewWrapper = function ArticleOverviewWrapper(props) {
-  var viewHandler = useViewHandler();
-  var item = viewHandler.settingsState.itemPalettes.get(1);
-  if (!item) return /*#__PURE__*/jsx(Fragment, {});
-  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
-  return /*#__PURE__*/jsx("div", {
-    className: wrapper,
-    children: /*#__PURE__*/jsx(HorizantalGroup$1, {
-      item: item,
-      PaletteComponent: PaletteComponent
-    })
-  });
-};
-var ArticleOverviewWrapper$1 = observer(ArticleOverviewWrapper);
-
-var index$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': ArticleOverviewWrapper$1
-});
-
-var ItemWrapper = function ItemWrapper(_ref) {
-  var item = _ref.item,
-    style = _ref.style,
-    children = _ref.children;
-  var viewHandler = useViewHandler();
-  var Header = !item.isHeader && !item.hideHeader ? /*#__PURE__*/jsx(SettingsHeader, {
-    isInScroller: true,
-    isSettingsHeader: false,
-    item: item
-  }) : /*#__PURE__*/jsx(Fragment, {});
-  var plannerArticles = item.type.startsWith('ART');
-  var planner2Dot0 = plannerArticles && viewHandler.settingsState.planner2Dot0Active;
-  return /*#__PURE__*/jsxs("div", {
-    style: style,
-    className: classnames(wcConfiguratorConfigPaletteContainer, {
-      wcFilterVisible: item.filterVisible
-    }),
-    ref: function ref(_ref2) {
-      return item.htmlRef = _ref2;
-    },
-    id: item.configStepKey,
-    children: [/*#__PURE__*/jsx(StepInfo, {
-      stepInfo: item.info
-    }), !planner2Dot0 && Header, planner2Dot0 && /*#__PURE__*/jsx(ArticleOverviewWrapper$1, {}), plannerArticles && !planner2Dot0 && viewHandler.settingsState.doShowReplaceMode && (!viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements || item.id == 2) && /*#__PURE__*/jsx(ReplaceSwitch, {}), planner2Dot0 && Header, children]
-  });
-};
-var ItemWrapper$1 = observer(ItemWrapper);
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': ItemWrapper$1
-});
-
-function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useGridVariables = function useGridVariables(item) {
-  var viewHandler = useViewHandler();
-  var _useDivaCore = useDivaCore(),
-    dimensions = _useDivaCore.state.dimensions;
-  var variables = useMemo(function () {
-    var _viewHandler$uiState$, _viewHandler$settings, _viewHandler$settings2, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2;
-    //this code now sets a css variable within a specific palette to define the grid items size and gird gap
-    //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
-    //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
-
-    var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
-    var settingsContainerWidth = (_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().width) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0;
-    var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
-    var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
-    var infoIconSize = undefined;
-    if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-      gridSize = '240px';
-    } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
-      gridSize = 'calc(100% - 20px)';
-    } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
-      gridSize = '100px';
-    } else if (item.type == 'ACC') {
-      if (settingsSizes.sizeAccessoires) {
-        gridSize = settingsSizes.sizeAccessoires;
-      }
-    } else if (item.type == 'ACC_CONFIG') {
-      gridSize = '100%';
-    } else if (item.type == 'RANGE') {
-      gridSize = '100%';
-    } else if (item.type == 'GAL') {
-      var _settingsSizes$sizeGa, _settingsSizes$gapGal;
-      gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
-      gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
-    } else if (item.type === 'PLANNERSWITCH') {
-      gridSize = '170px';
-    } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
-      //for the usecase of schlaraffia in mobile
-      //TODO for refactorig this should be done nicer
-      gridSize = '120px';
-    } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
-      gridSize = '120px';
-    } else if (item.type === 'VERY_SMALL') {
-      gridSize = '48%';
-    } else if (item.type == 'GAL_TEXT_2') {
-      if (settingsContainerWidth > 700) gridSize = '120px';else if (settingsContainerWidth > 550) gridSize = '120px';else if (settingsContainerWidth > 400) gridSize = '110px';else gridSize = '100px';
-    } else if (item.type == 'GAL_TEXT') {
-      if (settingsContainerWidth > 700) gridSize = '100px';else if (settingsContainerWidth > 550) gridSize = '100px';else if (settingsContainerWidth > 400) gridSize = '90px';else gridSize = '80px';
-    } else if (item.type == 'GAL_BIG_TEXT_2') {
-      if (settingsContainerWidth > 700) gridSize = '190px';else if (settingsContainerWidth > 550) gridSize = '170px';else if (settingsContainerWidth > 400) gridSize = '145px';else gridSize = '130px';
-    } else if (item.type == 'GAL_BIG_TEXT' || item.type == 'ART_2') {
-      if (settingsContainerWidth > 700) gridSize = '120px';else if (settingsContainerWidth > 550) gridSize = '120px';else if (settingsContainerWidth > 400) gridSize = '110px';else gridSize = '100px';
-    } else if (item.type == 'GAL_SMALL_TEXT_2' || item.type == 'PLANNER_2.0') {
-      if (settingsContainerWidth > 700) gridSize = '110px';else if (settingsContainerWidth > 550) gridSize = '95px';else if (settingsContainerWidth > 400) gridSize = '80px';else gridSize = '70px';
-      gridGap = '8px';
-    } else if (item.type == 'GAL_SMALL_TEXT') {
-      if (settingsContainerWidth > 700) gridSize = '75px';else if (settingsContainerWidth > 550) gridSize = '70px';else if (settingsContainerWidth > 400) gridSize = '55px';else gridSize = '50px';
-      gridGap = '6px';
-    } else if (item.type == 'GAL_VERY_SMALL_TEXT') {
-      gridSize = '60px';
-      gridGap = '6px';
-    } else if (item.type.startsWith('GAL_SMALL')) {
-      gridSize = '60px';
-    }
-    if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
-      infoIconSize = '20px';
-    }
-    return _objectSpread$1({
-      '--gridSize': gridSize,
-      '--gridGap': gridGap
-    }, infoIconSize ? {
-      '--infoIconSize': infoIconSize
-    } : {});
-  }, [item, viewHandler.uiState.ViewConfig.settingsSizes, viewHandler.settingsState.settingsScrollerElement, dimensions]);
-  return variables;
-};
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-2596d3f4.js');
-});
-var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-46c09c4a.js');
-});
-var ProductList = /*#__PURE__*/React.lazy(function () {
-  return import('./index-b7cd412f.js');
-});
-var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
-  var _item$groups$;
-  var item = _ref.item,
-    groupSize = _ref.groupSize;
-  var viewHandler = useViewHandler();
-  var variables = useGridVariables(item);
-  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
-  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    filteredGroups = _useState2[0],
-    setFilteredGroups = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filteredGroupsWithEmptyGroups = _useState4[0],
-    setFilteredGroupsWithEmptyGroups = _useState4[1];
-  useEffect(function () {
-    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
-      return _objectSpread(_objectSpread({}, group), {}, {
-        items: item.currentItemsFilter && item.type !== 'PLANNERSWITCH' ? group.items.filter(sift(item.currentItemsFilter)) : group.items
-      });
-    });
-    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
-      return group.items.length > 0;
-    });
-    if (filteredGroups.length > 0) {
-      filteredGroupsWithEmptyGroups = filteredGroups;
-    }
-    setFilteredGroups(filteredGroups);
-    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
-  }, [item, viewHandler.settingsState.itemPalettes]);
-  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
-  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
-  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
-
-  //is rendered with the articleoverviewwrapper
-  if (item.type == 'PLANNER_2.0') return /*#__PURE__*/jsx(Fragment, {});
-  switch (item.type) {
-    case 'CHECKOUT':
-      return /*#__PURE__*/jsx(Checkout, {
-        viewHandler: viewHandler
-      });
-    case 'TOGGLE':
-      return /*#__PURE__*/jsx(ToggleOption, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TOGGLE_NAME':
-      return /*#__PURE__*/jsx(ToggleName, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TEXTBOX':
-      return /*#__PURE__*/jsx(TextBox, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'DROPDOWN_TEXT':
-    case 'DROPDOWN_IMAGE':
-      return /*#__PURE__*/jsx(ItemVariant, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'NUMBER':
-      return /*#__PURE__*/jsx(PaletteComponent, {
-        paletteId: item.id,
-        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
-        groupSize: groupSize
-      }, item.id + item.configStepKey);
-    case 'SLIDER':
-      return /*#__PURE__*/jsx(Slider, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'MULTI_TOGGLE':
-    case 'MULTI_TOGGLE_ROUND':
-      return /*#__PURE__*/jsx(MultiToggle, {
-        style: variables,
-        item: item,
-        paletteId: item.id,
-        round: item.type === 'MULTI_TOGGLE_ROUND'
-      });
-    case 'SHELFPLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(ShelfPlanner, {
-          filteredGroups: filteredGroups,
-          item: item,
-          id: item.id,
-          style: variables
-        }, item.id)
-      });
-    case 'PRODUCTS':
-      return /*#__PURE__*/jsx(ProductList, {
-        item: item
-      });
-    case 'PROMOTED':
-      return /*#__PURE__*/jsx(PromotedProducts, {
-        item: item
-      });
-    case 'DOOR_PLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(DoorPlanner, {
-          item: item
-        })
-      });
-    case 'GAL_GROUP_DROPDOWN':
-    case 'GAL_SMALL_GROUP_DROPDOWN':
-      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
-        item: item,
-        PaletteComponent: PaletteComponent,
-        filteredGroups: filteredGroupsWithEmptyGroups,
-        id: item.id,
-        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
-        contentInnerClassName: innerGridClass
-      }, item.configStepKey);
-      return /*#__PURE__*/jsx(ItemWrapper$1, {
-        style: variables,
-        item: item,
-        children: childGroup
-      });
-    default:
-      var children;
-      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
-        className: innerGridClass,
-        children: filteredGroups.map(function (group) {
-          return group.items.map(function (paletteItem, i) {
-            return /*#__PURE__*/jsx(PaletteComponent, {
-              paletteType: item.type,
-              paletteId: item.id,
-              item: paletteItem
-            }, getKey(paletteItem));
-          });
-        })
-      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
-        groups: filteredGroups,
-        contentInnerClassName: innerGridClass,
-        itemPalette: item,
-        PaletteComponent: PaletteComponent
-      });
-      return /*#__PURE__*/jsx(ItemWrapper$1, {
-        style: variables,
-        item: item,
-        children: children
-      });
-  }
-};
-var getKey = function getKey(item) {
-  var _ref2, _ref3, _ref4, _item$basketId;
-  return (_ref2 = (_ref3 = (_ref4 = (_item$basketId = item.basketId) !== null && _item$basketId !== void 0 ? _item$basketId : item.codex) !== null && _ref4 !== void 0 ? _ref4 : item.key) !== null && _ref3 !== void 0 ? _ref3 : item.articleCodex) !== null && _ref2 !== void 0 ? _ref2 : item.title;
-};
-var SettingsItem = observer(SettingsPaletteItem);
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  getKey: getKey,
-  'default': SettingsItem
-});
-
-export { SettingsItem as S, index$2 as a, index$1 as b, collapsableInner as c, index as d, getKey as g, index$3 as i };

package/build/esm/index-ef38a855.js

@@ -1,66 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-2c954057.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import { useTranslation } from '@crystaldesign/diva-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var header = "header-88iFZ";
-var wrapper = "wrapper-zFPaP";
-var title = "title-Mime-";
-var sel = "sel--F5X-";
-var collapseArrow = "collapseArrow-iq67x";
-var open = "open-t8G5n";
-var mobile = "mobile-Ksq3e";
-var css_248z = ".header-88iFZ {\n  height: 48px;\n  position: relative;\n  background-color: #f8f8f8;\n  border-bottom: 2px solid #f0f0f0;\n}\n\n.wrapper-zFPaP {\n  margin-left: 16px;\n  margin-right: 16px;\n  display: flex;\n}\n.title-Mime- {\n  padding: 11px;\n  font-weight: 100;\n  font-size: 18px;\n  position: relative;\n}\n\ntitle:hover,\n.sel--F5X- {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.title-Mime-::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  height: 3px;\n  left: 50%;\n  bottom: 0;\n  background-color: var(--diva-theme-palette-primary-main);\n  transition: all ease-in-out 0.2s;\n}\n.title-Mime-:hover::after,\n.sel--F5X-::after {\n  width: 100%;\n  left: 0;\n}\n\n.collapseArrow-iq67x {\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 16.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%22960px%22 height%3D%22560px%22 viewBox%3D%220 0 960 560%22 enable-background%3D%22new 0 0 960 560%22 xml%3Aspace%3D%22preserve%22%3E%3Cg id%3D%22Rounded_Rectangle_33_copy_4_1_%22%3E%09%3Cpath d%3D%22M480%2C344.181L268.869%2C131.889c-15.756-15.859-41.3-15.859-57.054%2C0c-15.754%2C15.857-15.754%2C41.57%2C0%2C57.431l237.632%2C238.937%09%09c8.395%2C8.451%2C19.562%2C12.254%2C30.553%2C11.698c10.993%2C0.556%2C22.159-3.247%2C30.555-11.698l237.631-238.937%09%09c15.756-15.86%2C15.756-41.571%2C0-57.431s-41.299-15.859-57.051%2C0L480%2C344.181z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transform: rotate(90deg);\n  transition: all 0.35s ease;\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  right: 8px;\n  top: 5px;\n}\n.open-t8G5n .collapseArrow-iq67x {\n  transform: rotate(0deg);\n}\n\n.header-88iFZ.mobile-Ksq3e {\n  height: 38px;\n}\n\n.mobile-Ksq3e .title-Mime- {\n  padding: 8px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n.mobile-Ksq3e .collapseArrow-iq67x {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  right: 8px;\n  top: 0px;\n}\n";
-styleInject(css_248z);
-
-var SubTabGroupHeader = function SubTabGroupHeader(_ref) {
-  var openState = _ref.openState,
-    curState = _ref.curState,
-    tabs = _ref.tabs;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsxs("div", {
-    onClick: function onClick() {
-      return openState[1](!openState[0]);
-    },
-    className: classnames(header, openState[0] ? open : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
-    children: [/*#__PURE__*/jsx("div", {
-      className: wrapper,
-      children: tabs.map(function (b, index) {
-        return /*#__PURE__*/jsxs("div", {
-          className: classnames(title, curState[0] === b && openState[0] ? sel : undefined),
-          onClick: function onClick(e) {
-            curState[1](b);
-            if (!openState[0]) openState[1](true);
-            e.stopPropagation();
-          },
-          children: [b === 'ALL' && tabs.length !== 1 && t('configurator.config_all'), tabs.length === 1 && t('configurator.config_accessoire'), tabs.length > 1 && b !== 'ALL' && index + '.']
-        }, b);
-      })
-    }), /*#__PURE__*/jsx("div", {
-      className: classnames(collapseArrow)
-    })]
-  });
-};
-var SubTabGroupHeader$1 = observer(SubTabGroupHeader);
-
-export { SubTabGroupHeader$1 as default };

package/build/esm/index-f04c64e4.js

@@ -1,131 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-2c954057.js';
-import { useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import ToolContainer from './index-0f9ee373.js';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'classnames';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-f6e40593.js';
-import './index.module-cabbbaeb.js';
-import './index-9fa7ddc0.js';
-import './index-d94f0219.js';
-import './index-240dd9e7.js';
-import 'react-collapsible';
-import './index-9a29a342.js';
-import './index-5d08913b.js';
-import './index.module-179cda81.js';
-import 'react-json-view-lite';
-import './react-json-viewer-2e875e41.js';
-import './index-620e93b3.js';
-import './index.module-f32856fd.js';
-import './DecisionVizualizer-d0e0645d.js';
-import 'react-draggable';
-import './index-0b6831d9.js';
-import 'react-switch';
-import './index-bafde682.js';
-import './index-8554ead6.js';
-import './index-4d4ef4d5.js';
-import 'jsoneditor';
-import './index-1039226b.js';
-import './index-317a13a0.js';
-import './index-7952c569.js';
-import './index-362a839b.js';
-import './index-9ed4c59c.js';
-import './index-66bf0abe.js';
-import './index-b53b8dde.js';
-import './index-da0ec66e.js';
-import './index.module-a2dedf49.js';
-import 'react-select';
-import './index-df6845e4.js';
-import './index-830c921c.js';
-import './index-fffecd2d.js';
-import './index-071b5fd4.js';
-import './index-8285b4fd.js';
-import './index-9fcedd3a.js';
-import './index-060dc625.js';
-import './index-3e37a997.js';
-import './index-82d01d94.js';
-import './CatalogProperties-069aa0c3.js';
-import './ArticleProperties-b1a3bb3c.js';
-import './OptionProperties-9d913f4d.js';
-import './OptionValueProperties-0494fa02.js';
-import './index-dabce281.js';
-
-var container = "container-43rJg";
-var item = "item-JRY9h";
-var css_248z = ".container-43rJg {\n  display: flex;\n  height: 42px;\n  gap: 12px;\n  justify-content: space-around;\n  overflow: auto;\n  align-items: center;\n  background-color: #f3f3f3;\n}\n\n.item-JRY9h {\n  cursor: pointer;\n  min-width: 80px;\n  padding-left: 12px;\n  padding-right: 12px;\n  text-align: center;\n}\n";
-styleInject(css_248z);
-
-var Toolbar = function Toolbar(props) {
-  var _viewHandler$divaWebP, _viewHandler$divaWebP2;
-  var viewHandler = useViewHandler();
-  var _useDivaCore = useDivaCore(),
-    wwsClient = _useDivaCore.state.organization.settings.wwsClient;
-  var changeVal = function changeVal(newValue) {
-    var value = newValue === viewHandler.uiState.activeCatalogSection ? '3D/2D' : newValue;
-    localStorage.setItem('lastWindow', value);
-    viewHandler.uiState.setActiveCatalogSection(value);
-  };
-  var partlistsExist = !!Object.values((_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP2 === void 0 ? void 0 : _viewHandler$divaWebP2.CatalogData.allCatalogArticles) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {}).find(function (a) {
-    return a.partlistArticlesRules;
-  });
-  useEffect(function () {
-    //reset the view
-    if (wwsClient != 'Pfister' && viewHandler.uiState.activeCatalogSection == 'ekText' || !partlistsExist && viewHandler.uiState.activeCatalogSection == 'PartList' || viewHandler.uiState.activeCatalogSection !== '3D/2D') {
-      changeVal('3D/2D');
-    }
-  }, []);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [viewHandler.uiState.activeCatalogSection != '3D/2D' && /*#__PURE__*/jsx(ToolContainer, {}), /*#__PURE__*/jsxs("div", {
-      className: container,
-      children: [/*#__PURE__*/jsx("div", {
-        className: item,
-        children: viewHandler.productState.formatedTotalPrice
-      }), partlistsExist && /*#__PURE__*/jsx("div", {
-        className: item,
-        onClick: function onClick() {
-          return changeVal('PartList');
-        },
-        children: "St\xFCckliste"
-      }), /*#__PURE__*/jsx("div", {
-        className: item,
-        onClick: function onClick() {
-          return changeVal('PriceAnalyzer');
-        },
-        children: "Preise"
-      }), /*#__PURE__*/jsx("div", {
-        className: item,
-        onClick: function onClick() {
-          return changeVal('DecisionAnalyzer');
-        },
-        children: "Decisions"
-      }), wwsClient == 'Pfister' && /*#__PURE__*/jsx("div", {
-        className: item,
-        onClick: function onClick() {
-          return changeVal('ekText');
-        },
-        children: "Ek Text"
-      })]
-    })]
-  });
-};
-var Toolbar$1 = observer(Toolbar);
-
-export { Toolbar$1 as default };