@crystaldesign/diva-web-planner-react 25.1.1-rc.1 → 25.2.0-beta.10

package/build/esm/index-a5be91e9.js

@@ -0,0 +1,61 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-079b7a5c.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var wrapper = "wrapper-MPQ1D";
+var searchText = "search-text-h7Q58";
+var icon = "icon-yltss";
+var css_248z = ".wrapper-MPQ1D {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n.search-text-h7Q58 {\n  width: 130px;\n  height: 30px;\n  line-height: 28px;\n  border-radius: 5px;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  background-color: #fff;\n  padding: 0 1.6rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: relative;\n  border: 0;\n}\n\n.icon-yltss {\n  width: 36px;\n  height: 36px;\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  margin-left: 12px;\n  margin-right: 12px;\n}\n";
+styleInject(css_248z);
+
+var Search = function Search(_ref) {
+  var _ref$searchState = _slicedToArray(_ref.searchState, 2),
+    search = _ref$searchState[0],
+    setSearch = _ref$searchState[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (value && value.length > 2) setSearch(value);else if ((search === null || search === void 0 ? void 0 : search.length) !== 0) {
+      setSearch(undefined);
+    }
+  }, [value]);
+  useEffect(function () {
+    if (!(search !== null && search !== void 0 && search.length)) setValue('');
+  }, [search]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("input", {
+      ref: inputRef,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      type: 'text',
+      value: value,
+      className: searchText,
+      placeholder: t('filter.global')
+    }), /*#__PURE__*/jsx("div", {
+      className: icon
+    })]
+  });
+};
+
+export { Search as default };

package/build/esm/index-a76496e9.js

@@ -0,0 +1,121 @@
+import { s as styleInject, u as useViewHandler } from './index-079b7a5c.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-7d72254e.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var verticalItem = "verticalItem-NmQDx";
+var wcSpan = "wcSpan-0wnmJ";
+var verticalItemPoligon = "verticalItemPoligon-M44lA";
+var wcActiveStep = "wcActiveStep-ykv3D";
+var wcVisitedStep = "wcVisitedStep-qDdfW";
+var wcStepIcon = "wcStepIcon-7hz1S";
+var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedFont, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
+styleInject(css_248z);
+
+var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
+  var _getIconOfTabGroup;
+  var tabGroup = _ref.tabGroup,
+    height = _ref.height,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
+    isFirstItem = _ref.isFirstItem,
+    isLastItem = _ref.isLastItem,
+    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
+    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
+    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
+    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
+    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
+    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
+    _ref$wcStepIconClass = _ref.wcStepIconClass,
+    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
+    lastItemDiv = _ref.lastItemDiv;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var width = 128;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  if (height < minHeight) {
+    height = minHeight;
+  }
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
+  var polygonPoints;
+  if (isFirstItem && isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
+  } else if (isFirstItem) {
+    polygonPoints = '0 ' + (height - 9) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', ' + '64 ' + (height - 1);
+  } else if (isLastItem) {
+    polygonPoints = '0 ' + (height - 1) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 1);
+  } else {
+    polygonPoints = '0 ' + (height - 9) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', 64 ' + (height - 1);
+  }
+  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
+  var div = /*#__PURE__*/jsxs("div", {
+    "data-test-id": "tabGroupItem",
+    children: [/*#__PURE__*/jsx("div", {
+      className: wcStepIconClass,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    }), /*#__PURE__*/jsx("span", {
+      "data-test-id": "tabGroupItemTitle",
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    })]
+  });
+  if (isLastItem && lastItemDiv) {
+    div = lastItemDiv;
+  }
+  return /*#__PURE__*/jsxs("svg", {
+    "data-test-id": "tabGroupItemSvg",
+    viewBox: '0 0 ' + width + ' ' + height,
+    ref: tabGroupItemRef,
+    style: {
+      height: height + 'px',
+      minHeight: minHeight
+    },
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+    children: [/*#__PURE__*/jsx("polygon", {
+      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+      points: polygonPoints
+    }), /*#__PURE__*/jsx("foreignObject", {
+      width: "100%",
+      height: "100%",
+      style: {
+        pointerEvents: 'none'
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+        children: div
+      })
+    })]
+  });
+};
+var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
+
+export { VerticalTabGroupItemStandard$1 as default };

package/build/esm/index-a80afbe4.js

@@ -0,0 +1,64 @@
+import { s as styleInject } from './index-079b7a5c.js';
+import 'react';
+import classnames from 'classnames';
+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/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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 'mobx-react-lite';
+
+var container = "container-ebOfa";
+var title = "title--2-cN";
+var css_248z = ".container-ebOfa {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  margin-bottom: 3px;\n  background: rgba(242, 242, 242, 0.6);\n  padding-top: 5px;\n}\n\n.title--2-cN {\n  padding-top: 3px;\n  text-align: center;\n  white-space: nowrap;\n  overflow: visible;\n  font-size: 12px;\n  color: #4b4b4b;\n  width: 100%;\n  overflow: visible;\n  height: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  z-index: 100;\n}\n";
+styleInject(css_248z);
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    PaletteComponent = _ref.PaletteComponent,
+    paletteId = _ref.paletteId,
+    rowCount = _ref.rowCount,
+    paletteType = _ref.paletteType,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var items = group.items;
+  var name = group.name !== 'none' ? group.name : t('configurator.other');
+  return /*#__PURE__*/jsx(Fragment, {
+    children: items.map(function (item, i) {
+      return /*#__PURE__*/jsxs("div", {
+        className: classnames(container, contentInnerClassName),
+        style: {
+          width: 'calc(' + 100 / rowCount + '%' + (i === 0 ? ' - 3px' : '') + ' - 5px)',
+          borderRadius: i === items.length - 1 && i === 0 ? '8px' : i === 0 ? '8px 0px 0px 8px' : i === items.length - 1 ? '0px 8px 8px 0px' : undefined,
+          marginLeft: i === 0 ? 3 : undefined,
+          paddingRight: '5px'
+        },
+        children: [/*#__PURE__*/jsx(PaletteComponent, {
+          paletteId: paletteId,
+          item: item,
+          paletteType: paletteType,
+          style: {
+            '--galleryItemRowCount': '1',
+            '--galleryItemRowCountSmall': '1',
+            paddingTop: 'unset'
+          }
+        }, i), /*#__PURE__*/jsx("span", {
+          className: title,
+          children: i === 0 ? name : ''
+        })]
+      });
+    })
+  });
+};
+
+export { Group as default };

package/build/esm/index-aa130881.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-079b7a5c.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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 BasketAction = function BasketAction(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Action/Basket"
+  }));
+};
+
+export { BasketAction as default };

package/build/esm/index-aa40eb21.js

@@ -0,0 +1,45 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-079b7a5c.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ArticleOverview from './index-3c876ff1.js';
+import JsonEditor from './index-7563ed35.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index.module-bcc46c32.js';
+import './index.module-52e71521.js';
+import 'classnames';
+import './index.module-35e6b346.js';
+import 'react-collapsible';
+import 'jsoneditor';
+
+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 J3DEditor = function J3DEditor(props) {
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    style: {
+      userSelect: 'text'
+    },
+    ChildComponent: JsonEditor,
+    settings: [{
+      key: 'J3D',
+      name: 'J3D Editor'
+    }],
+    title: 'Artikel Übersicht'
+  }));
+};
+var J3DEditor$1 = observer(J3DEditor);
+
+export { J3DEditor$1 as default };

package/build/esm/index-aae1a2f9.js

@@ -0,0 +1,142 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-079b7a5c.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useState, useCallback, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import SettingsHeader from './index-b8516f26.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var productsGrid = "products-grid-b9XWQ";
+var skeleton = "skeleton-XdjqR";
+var css_248z = ".products-grid-b9XWQ {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: 10px;\n  height: 100%;\n  padding-top: 16px;\n}\n\n.skeleton-XdjqR {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  color: var(--primaryColor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 22px;\n  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 16px 0px;\n}\n";
+styleInject(css_248z);
+
+var PromotedProducts = function PromotedProducts(_ref) {
+  var _viewHandler$configSt;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    openComponent = _useDivaCore.actions.openComponent,
+    productHandler = _useDivaCore.handler.productHandler,
+    organization = _useDivaCore.state.organization;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    groups = _useState2[0],
+    setGroups = _useState2[1];
+  var viewHandler = useViewHandler();
+  var productsConfig = viewHandler.getViewConfig().productsConfig;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    configChangedTimeStamp = _useState4[0],
+    setConfigChangedTimeStamp = _useState4[1];
+  var onAddProduct = useCallback(function (productId) {
+    setConfigChangedTimeStamp(viewHandler.settingsState.configChanged);
+    openComponent({
+      type: 'DIVA_WEBPLANNER',
+      parameters: {
+        productId: productId
+      },
+      internal: {
+        forceReload: '1'
+      }
+    });
+  }, [viewHandler]);
+  var selectedProduct = configChangedTimeStamp === viewHandler.settingsState.configChanged && ((_viewHandler$configSt = viewHandler.configState.productId) !== null && _viewHandler$configSt !== void 0 ? _viewHandler$configSt : !viewHandler.configState.divaNr && viewHandler.divaWebPlanner.getStartProductId());
+  useEffect(function () {
+    var _productsConfig$maxCo, _productsConfig$filte, _productsConfig$sort;
+    productHandler.apiLoadProductVariantsGrouped({
+      limit: (_productsConfig$maxCo = productsConfig === null || productsConfig === void 0 ? void 0 : productsConfig.maxCount) !== null && _productsConfig$maxCo !== void 0 ? _productsConfig$maxCo : undefined,
+      search: (_productsConfig$filte = productsConfig === null || productsConfig === void 0 ? void 0 : productsConfig.filter) !== null && _productsConfig$filte !== void 0 ? _productsConfig$filte : [{
+        id: 'availableForOrganizations',
+        op: 'eq',
+        value: organization._id
+      }, {
+        id: 'promotedForOrganizations',
+        op: 'eq',
+        value: organization._id
+      }],
+      sort: (_productsConfig$sort = productsConfig === null || productsConfig === void 0 ? void 0 : productsConfig.sort) !== null && _productsConfig$sort !== void 0 ? _productsConfig$sort : '{-created}'
+    }).then(function (result) {
+      var startProductIndex = result.data.findIndex(function (group) {
+        var _group$items$0$startP;
+        return (_group$items$0$startP = group.items[0].startProductForOrganizations) === null || _group$items$0$startP === void 0 ? void 0 : _group$items$0$startP.includes(organization._id);
+      });
+      if (startProductIndex != -1) {
+        var startProduct = result.data[startProductIndex];
+        result.data.splice(startProductIndex, 1);
+        result.data.unshift(startProduct);
+      }
+      setGroups(result.data);
+    });
+  }, [viewHandler.uiState.isLoading]);
+  var skeletons = productsConfig !== null && productsConfig !== void 0 && productsConfig.maxCount && productsConfig.showSkeletions ? getSkeletons(productsConfig.maxCount, groups.length) : [];
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item
+    }), /*#__PURE__*/jsxs("div", {
+      className: productsGrid,
+      children: [groups.map(function (group, i) {
+        return /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: {
+              type: 'ProductGallery',
+              products: group.items,
+              groupVariantsByField: ['dc_color', 'dc_mainColor'],
+              onClick: onAddProduct,
+              imageWrapperStyle: {
+                aspectRatio: 'unset'
+              },
+              wrapperStyle: group.items.find(function (i) {
+                return i._id == selectedProduct;
+              }) ? {
+                border: '1px solid var(--diva-theme-palette-primary-main)',
+                borderRadius: '5px'
+              } : undefined,
+              imageStyle: {
+                aspectRatio: '14.5 / 10',
+                objectFit: 'scale-down',
+                objectPosition: 'bottom'
+              }
+            }
+          }
+        }, group._id);
+      }), skeletons.map(function (index) {
+        return /*#__PURE__*/jsx("div", {
+          className: skeleton,
+          children: /*#__PURE__*/jsx("div", {
+            children: index
+          })
+        }, index);
+      })]
+    })]
+  });
+};
+var getSkeletons = function getSkeletons(maxCount, itemsCount) {
+  var skeletonsCount = 0;
+  if (maxCount > itemsCount) {
+    skeletonsCount = maxCount - itemsCount;
+  }
+  var skeletons = [];
+  if (skeletonsCount) {
+    for (var i = skeletonsCount - 1; i >= 0; i--) {
+      skeletons.push(maxCount - i);
+    }
+  }
+  return skeletons;
+};
+var PromotedProducts$1 = observer(PromotedProducts);
+
+export { PromotedProducts$1 as default };

package/build/esm/index-abbf2e77.js

@@ -0,0 +1,43 @@
+import './index-079b7a5c.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var RotationClockwise = function RotationClockwise(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.rotation.rotClock, plannerUIProps.classes.buttonGeneral),
+    children: item.posNr
+  });
+};
+var RotationClockwise$1 = observer(RotationClockwise);
+
+export { RotationClockwise$1 as default };

package/build/esm/index-ad317b29.js

@@ -0,0 +1,49 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-079b7a5c.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ArticleOverview from './index-3c876ff1.js';
+import SVGViewer from './index-26e994e9.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index.module-bcc46c32.js';
+import './index.module-52e71521.js';
+import 'classnames';
+import './index.module-35e6b346.js';
+import 'react-collapsible';
+import './index-9ee67baf.js';
+import './index.module-4b45da5f.js';
+import './index-9a8ec367.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SVGAnalyser = function SVGAnalyser(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    ChildComponent: SVGViewer,
+    settings: [{
+      key: 'SVGSOURCE',
+      name: 'SVG Source'
+    }, {
+      key: 'SVGOVERVIEW',
+      name: 'SVG Übersicht'
+    }],
+    title: 'SVG Übersicht'
+  }));
+};
+var SVGAnalyzer = observer(SVGAnalyser);
+
+export { SVGAnalyzer as default };

package/build/esm/index-afd2ed59.js

@@ -0,0 +1,85 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-079b7a5c.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import TabGroupHorizontal from './index-33f77c66.js';
+import TabGroupVertical from './index-05d4d52e.js';
+import TabSearch from './index-3f2c6a49.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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 './index-ecdadaeb.js';
+import './index-5d669431.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+var wcConfiguratorSteps = "wcConfigurator-steps-1pUS0";
+var horizontal = "horizontal-6TCsO";
+var wcConfiguratorStepsSplit = "wcConfigurator-steps-split-ATmZ8";
+var portrait = "portrait-uvNtu";
+var closeRight = "close-right-rv5xk";
+var closeLeft = "close-left-S5bW1";
+var vertical = "vertical-HLAFY";
+var tabSearchVisibleClass = "tab-search-visible-class-VelST";
+var landscape = "landscape-O7G0i";
+var wcConfigCloseButton = "wcConfigCloseButton-mkHVY";
+var closeButtonHidden = "closeButtonHidden-g1FQc";
+var wcConfiguratorStepsContainer = "wcConfigurator-steps-Container-Yb9mE";
+var css_248z = ".wcConfigurator-steps-1pUS0 {\n  z-index: 300;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: var(--thirdColor);\n}\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n  background: var(--tabGroupBackground);\n}\n\n.horizontal-6TCsO.portrait-uvNtu.close-right-rv5xk .wcConfigurator-steps-split-ATmZ8 {\n  width: calc(100% - 3.6rem);\n}\n.horizontal-6TCsO.portrait-uvNtu.close-left-S5bW1 .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: 100%;\n  background: var(--tabGroupBackground);\n}\n\n.tab-search-visible-class-VelST.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: calc(100% - 46px);\n}\n.horizontal-6TCsO.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.wcConfigCloseButton-mkHVY {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  float: left;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n}\n.vertical-HLAFY .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: -56px;\n  left: 30px;\n}\n\n.portrait-uvNtu .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: 0;\n  margin: 10px;\n}\n\n.portrait-uvNtu.close-right-rv5xk .wcConfigCloseButton-mkHVY {\n  right: 0;\n}\n\n.portrait-uvNtu.close-left-S5bW1 .wcConfigCloseButton-mkHVY {\n  left: -50px;\n}\n\n.wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(197, 197, 197, 0.1);\n}\n\n.wcTabGroupItem-eqGtC:first-child {\n  border-radius: var(--globalBorderRadius) 0 0 var(--globalBorderRadius);\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: var(--globalBorderRadius);\n  height: 100%;\n  border-width: 0px;\n  overflow-x: auto;\n}\n.wcConfigur-xKWej .wcConfiguratorator-steps-Container-FGpNz {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n}\n\n.horizontal-6TCsO.closeButtonHidden-g1FQc .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.portrait-uvNtu .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE and Edge */\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8,\n.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  overflow: auto;\n\n  /* Hide scrollbar for IE, Edge add Firefox */\n\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-Container-Yb9mE {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-Container-Yb9mE {\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "showCloseButtonInMobile", "tabSearchClass"];
+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 TabGroupContainer = function TabGroupContainer(_ref) {
+  var className = _ref.className,
+    showCloseButtonInMobile = _ref.showCloseButtonInMobile,
+    tabSearchClass = _ref.tabSearchClass,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent,
+    isMobile = _useDivaCore$state.dimensions.isMobile;
+  var closeButtonVisible = isFullscreenComponent && showCloseButtonInMobile !== 'none' || viewHandler.tabGroupState.curTabGroupType != 'vertical' && !viewHandler.uiState.ViewConfig.hideCloseButton && viewHandler.eventIsManagedByClient('onWebPlanerClose') && !((!showCloseButtonInMobile || showCloseButtonInMobile == 'none') && viewHandler.getIsInMobileView());
+  var tabSearchVisible = viewHandler.uiState.ViewConfig.tabGroupSearchVisible;
+  var tabGroupScroller = useRef(null);
+  useEffect(function () {
+    if (tabGroupScroller.current) {
+      viewHandler.tabGroupState.setTabGroupScroller(tabGroupScroller.current);
+    }
+    return function () {};
+  }, [tabGroupScroller]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className, wcConfiguratorSteps, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? horizontal : undefined, viewHandler.tabGroupState.curTabGroupType == 'vertical' ? vertical : undefined, !closeButtonVisible ? closeButtonHidden : undefined, tabSearchVisible ? tabSearchVisibleClass : undefined, isMobile ? showCloseButtonInMobile == 'left' ? closeLeft : closeRight : undefined),
+    children: [tabSearchVisible && /*#__PURE__*/jsx(TabSearch, {
+      className: tabSearchClass
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorStepsSplit),
+      ref: tabGroupScroller,
+      children: /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorStepsContainer,
+        children: [viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsx(TabGroupHorizontal, {}), viewHandler.tabGroupState.curTabGroupType == 'vertical' && /*#__PURE__*/jsx(TabGroupVertical, {})]
+      })
+    }), closeButtonVisible && /*#__PURE__*/jsx("div", {
+      className: wcConfigCloseButton,
+      title: t('configurator.ConfigClose'),
+      onClick: viewHandler.onCloseConfigurator
+    })]
+  }));
+};
+var TabGroup = observer(TabGroupContainer);
+
+export { TabGroup as default };