@crystaldesign/diva-web-planner-react 26.1.0-beta.9 → 26.2.0-beta.1

package/build/esm/index-7ad8075e.js

@@ -0,0 +1,85 @@
+import { s as styleInject, u as useViewHandler } from './index-f07cab70.js';
+import 'react';
+import Dropdown from 'react-dropdown';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import Arrow from './index-97111c7d.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+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';
+
+var wcColorFilterItem = "wcColorFilterItem-xQqck";
+var mobile = "mobile-LQxjP";
+var tablet = "tablet-IHhtG";
+var dropdownRoot = "Dropdown-root-BjRjC";
+var dropdownControl = "Dropdown-control-8aQx0";
+var wrapper = "wrapper-T-b-1";
+var css_248z = ".wcColorFilterItem-xQqck {\n  width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  display: block;\n  float: left;\n  margin-top: 1px;\n  margin-right: 6px;\n  font-size: 14px;\n  color: #333;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .wcColorFilterItem-xQqck {\n  font-size: 12px;\n}\n\n.Dropdown-root-BjRjC {\n  float: right;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n  width: 140px;\n  min-width: 100px;\n}\n\n.mobile-LQxjP:not(.tablet-IHhtG) .Dropdown-root-BjRjC {\n  width: 120px;\n}\n\n.Dropdown-control-8aQx0 {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 12px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n\n.wrapper-T-b-1 .Dropdown-root {\n  position: relative;\n}\n\n.wrapper-T-b-1 .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 2px 24px 2px 10px;\n  transition: all 200ms ease;\n  background-color: #fff;\n  border-radius: var(--globalBorderRadius);\n  font-size: 14px;\n}\n\n.mobile-LQxjP .Dropdown-control {\n  font-size: 12px;\n}\n\n.tablet-IHhtG .Dropdown-control {\n  font-size: 15px;\n}\n\n.wrapper-T-b-1 .Dropdown-control:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n}\n\n.wrapper-T-b-1 .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 8px;\n  top: 7px;\n  width: 0;\n}\n\n.wrapper-T-b-1 .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n.wrapper-T-b-1 .Dropdown-menu {\n  background-color: white;\n  box-sizing: border-box;\n  margin-top: -1px;\n  border: 1px solid #ddd;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n.wrapper-T-b-1 .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n.wrapper-T-b-1 .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n.wrapper-T-b-1 .Dropdown-option:hover {\n  background-color: #f2f9fc;\n}\n\n.wrapper-T-b-1 .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n.wrapper-T-b-1 .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
+styleInject(css_248z);
+
+var RalDropdownFilter = function RalDropdownFilter(_ref) {
+  var _viewHandler$settings;
+  var visibleColorItems = _ref.visibleColorItems,
+    _ref$dropdownRootClas = _ref.dropdownRootClass,
+    dropdownRootClass = _ref$dropdownRootClas === void 0 ? dropdownRoot : _ref$dropdownRootClas,
+    deleteCurValue = _ref.deleteCurValue,
+    id = _ref.id;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  var dropDownValues = visibleColorItems.map(function (item) {
+    return {
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          className: wcColorFilterItem,
+          style: {
+            backgroundColor: item.rgb
+          }
+        }), " ", t('configurator.' + item.text)]
+      }),
+      text: item.text,
+      value: item.text
+    };
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
+    "data-test-id": "ral-dropdown",
+    children: /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRootClass),
+      controlClassName: dropdownControl,
+      options: dropDownValues,
+      value: actValue,
+      onChange: function onChange(val) {
+        return viewHandler.paletteViewHandler.onSelectFilter(id, val.value, 'RAL');
+      },
+      placeholder: t('configurator.colors'),
+      arrowClosed: /*#__PURE__*/jsx(Arrow, {
+        onClick: deleteCurValue,
+        open: false,
+        iconAsDelete: !!actValue
+      }),
+      arrowOpen: /*#__PURE__*/jsx(Arrow, {
+        onClick: deleteCurValue,
+        open: true,
+        iconAsDelete: !!actValue
+      })
+    })
+  });
+};
+
+export { RalDropdownFilter as default };

package/build/esm/index-7d42ef7c.js

@@ -0,0 +1,273 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-f07cab70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+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/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';
+
+var container = "container-5GMrB";
+var buttonDropdown = "button-dropdown-hJTTc";
+var open = "open-cFdzA";
+var icon = "icon-7uXLI";
+var column = "column-SanUs";
+var button = "button-qcl7w";
+var actionButton = "action-button-nTgLc";
+var actionButtonDisabled = "action-button-disabled--LWWq";
+var secondButton = "second-button-KGVxc";
+var row = "row-bjrma";
+var iconColor = "icon-color-hyBQn";
+var saveIcon = "save-icon-s5mPx";
+var sendIcon = "send-icon-O6d2-";
+var css_248z = ".container-5GMrB {\n  display: flex;\n  flex-direction: row;\n  margin-left: 16px;\n}\n\n.button-dropdown-hJTTc {\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  position: absolute;\n  bottom: 105%;\n  left: 0;\n  right: -5px;\n  padding: 0.84em 1em;\n  color: #000;\n  color: initial;\n  display: none;\n  flex-direction: column;\n}\n\n.button-dropdown-hJTTc.open-cFdzA {\n  display: flex;\n}\n\n.button-dropdown-hJTTc .icon-7uXLI {\n  filter: brightness(0.1);\n}\n.button-dropdown-hJTTc .column-SanUs:hover {\n  color: var(--primaryColor);\n}\n\n.button-qcl7w {\n  position: relative;\n  font-weight: 100;\n  border-radius: 32px;\n  transition: background-color 0.25s ease-out, color 0.25s ease-out;\n  font-size: 0.9rem;\n  line-height: 18px;\n  text-align: center;\n  cursor: pointer;\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0 0.5rem 1rem 0;\n  padding: 0.85em 1em;\n  -webkit-appearance: none;\n  border: 1px solid transparent;\n}\n\n.action-button-nTgLc {\n  background-color: var(--primaryColor);\n  color: #fefefe;\n}\n\n.action-button-disabled--LWWq {\n  opacity: 0.25;\n  cursor: not-allowed;\n}\n\n.action-button-nTgLc:hover {\n  filter: brightness(0.9);\n}\n\n.second-button-KGVxc {\n  background-color: transparent;\n  border-color: var(--primaryColor);\n  color: var(--primaryColor);\n  padding: 0.85em 1em 0.85em 0.25em;\n}\n\n.second-button-KGVxc:hover {\n  fill: #202020 !important;\n}\n\n.second-button-KGVxc:hover {\n  border-color: #202020;\n  color: #202020;\n}\n\n.row-bjrma {\n  float: left;\n}\n.second-button-KGVxc .row-bjrma {\n  padding-left: 0.5em;\n}\n\n.column-SanUs {\n  margin: 0.5em 0;\n}\n\n.icon-7uXLI {\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  width: 20px;\n  height: 20px;\n}\n.icon-color-hyBQn {\n  fill: var(--primaryColor);\n  transition: fill 0.25s ease-out, color 0.25s ease-out;\n}\n\n.second-button-KGVxc:hover .icon-color-hyBQn {\n  fill: black;\n}\n\n.save-icon-s5mPx {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2242%22 viewBox%3D%220 0 3400 3400%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Cpath    fill%3D%22white%22    transform%3D%22scale(1%2C-1) translate(450%2C-2600)%22    strokeWidth%3D%221%22    d%3D%22M783 255l-325 325l-70 70l-391 391q-14 15 -14 35.5t14 35.5l325 325q14 14 35 14t35 -14l391 -391q15 -15 35.5 -15t35.5 15l1049 1049q15 15 35.5 15t35.5 -15l327 -322q15 -15 15 -35q0 -21 -15 -35l-1447 -1448q-15 -14 -35.5 -14t-35.5 14z%22     %2F%3E%3C%2Fsvg%3E\");\n}\n.send-icon-O6d2- {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2242%22 viewBox%3D%220 0 3400 3400%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Cpath    fill%3D%22white%22    transform%3D%22scale(1%2C-1) translate(450%2C-2600)%22    strokeWidth%3D%221%22d%3D%22M921 89q-43 -54 -75 -54q-22 0 -34 25.5t-12 72.5v767h-708q-91 0 -91 31q0 26 63 65l2063 1278q42 26 79 26q42 0 68 -32t26 -88v-1800q0 -57 -26.5 -89.5t-69.5 -32.5q-37 0 -78 25l-712 425zM1000 480l1186 1700l-1186 -1300v-400z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.reset-icon-HqNs3 path {\n  background-color: var(--primaryColor);\n}\n";
+styleInject(css_248z);
+
+var LOG = getLogger('Planner', 'BasketActionSerious');
+var BasketActionSerious = function BasketActionSerious(_ref) {
+  var saveIsDisabled = _ref.saveIsDisabled,
+    sendEmailIsDisabled = _ref.sendEmailIsDisabled,
+    onSave = _ref.onSave;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openDropdown = _useState2[0],
+    setOpen = _useState2[1];
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$actions = _useDivaCore.actions,
+    userHasPermission = _useDivaCore$actions.userHasPermission,
+    openSnackBar = _useDivaCore$actions.openSnackBar;
+  var onClickReset = function onClickReset() {
+    var _viewHandler$actions;
+    (_viewHandler$actions = viewHandler.actions) === null || _viewHandler$actions === void 0 || _viewHandler$actions.openModal({
+      title: t('modals.reset'),
+      accept: true,
+      reject: true,
+      text: t('modals.are_you_sure_to_reset'),
+      callback: function callback(accepted) {
+        if (accepted) {
+          viewHandler.productState.onClickReset();
+        }
+      }
+    });
+  };
+  var onClickSave = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(type) {
+      var _viewHandler$getViewC, _viewHandler$getViewC2, _viewHandler$divaWebP, url, _viewHandler$getViewC3, _viewHandler$getViewC4;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.t0 = type;
+            _context.next = _context.t0 === 'email' ? 3 : _context.t0 === 'save' ? 8 : 13;
+            break;
+          case 3:
+            if (!(!saveIsDisabled && !sendEmailIsDisabled)) {
+              _context.next = 7;
+              break;
+            }
+            onSave();
+            _context.next = 7;
+            return viewHandler.actionButtonState.onClickAddToBasket(viewHandler, 'onSendEmail');
+          case 7:
+            return _context.abrupt("break", 13);
+          case 8:
+            if (saveIsDisabled) {
+              _context.next = 12;
+              break;
+            }
+            onSave();
+            _context.next = 12;
+            return viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
+          case 12:
+            return _context.abrupt("break", 13);
+          case 13:
+            if (!viewHandler.getViewConfig().showPdfQR) {
+              _context.next = 22;
+              break;
+            }
+            if (!(typeof viewHandler.getViewConfig().showPdfQR == 'boolean')) {
+              _context.next = 18;
+              break;
+            }
+            if (viewHandler.divaWebPlanner.getBasket().PDFDocumentURL) {
+              openSnackBar({
+                type: 'big',
+                qrCode: viewHandler.divaWebPlanner.getBasket().PDFDocumentURL,
+                message: t('basket.checkout.pdfqr'),
+                autoHideDuration: (_viewHandler$getViewC = viewHandler.getViewConfig().pdfQRAutoHideDuration) !== null && _viewHandler$getViewC !== void 0 ? _viewHandler$getViewC : 1000 * 60 * 2,
+                clickable: !((_viewHandler$getViewC2 = viewHandler.getViewConfig().pdfQRNotClickable) !== null && _viewHandler$getViewC2 !== void 0 ? _viewHandler$getViewC2 : false),
+                qrCodeSize: 312
+              });
+            } else {
+              LOG.warn('Basket is missing a pdf, no QR-Code displayed');
+            }
+            _context.next = 22;
+            break;
+          case 18:
+            _context.next = 20;
+            return (_viewHandler$divaWebP = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.api.createBasketReport(viewHandler.divaWebPlanner.getBasket(), viewHandler.getViewConfig().showPdfQR, viewHandler.getViewConfig().savePdfQR);
+          case 20:
+            url = _context.sent;
+            if (url) {
+              openSnackBar({
+                type: 'big',
+                qrCode: url,
+                qrCodeSize: 312,
+                message: t('basket.checkout.pdfqr'),
+                autoHideDuration: (_viewHandler$getViewC3 = viewHandler.getViewConfig().pdfQRAutoHideDuration) !== null && _viewHandler$getViewC3 !== void 0 ? _viewHandler$getViewC3 : 1000 * 60 * 2,
+                clickable: !((_viewHandler$getViewC4 = viewHandler.getViewConfig().pdfQRNotClickable) !== null && _viewHandler$getViewC4 !== void 0 ? _viewHandler$getViewC4 : false)
+              });
+            } else {
+              LOG.warn('Could not generate PDF, no QR-Code displayed');
+            }
+          case 22:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onClickSave(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onClickFavorites = function onClickFavorites() {
+    var _viewHandler$actions2;
+    (_viewHandler$actions2 = viewHandler.actions) === null || _viewHandler$actions2 === void 0 || _viewHandler$actions2.openModal({
+      title: t('modals.favorite'),
+      accept: true,
+      reject: true,
+      text: t('modals.are_you_sure_favorite'),
+      callback: function () {
+        var _callback = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(accepted) {
+          var _viewHandler$actions3;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!accepted) {
+                  _context2.next = 5;
+                  break;
+                }
+                onSave();
+                _context2.next = 4;
+                return viewHandler.actionButtonState.onClickAddToBasket(viewHandler, 'onSaveProduct');
+              case 4:
+                (_viewHandler$actions3 = viewHandler.actions) === null || _viewHandler$actions3 === void 0 || _viewHandler$actions3.openModal({
+                  title: t('modals.favorite'),
+                  accept: true,
+                  text: t('modals.favorites_saved')
+                });
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function callback(_x2) {
+          return _callback.apply(this, arguments);
+        }
+        return callback;
+      }()
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(button, actionButton, saveIsDisabled ? actionButtonDisabled : undefined),
+      onClick: function onClick() {
+        if (!saveIsDisabled) setOpen(!openDropdown);
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(row, icon, saveIcon)
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(row),
+        children: [" ", t('configurator.ADD_TO_BASKET')]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(openDropdown ? open : undefined, buttonDropdown),
+        children: [/*#__PURE__*/jsxs("div", {
+          className: column,
+          onClick: function onClick() {
+            return onClickSave('save');
+          },
+          id: "wcConfigurator-action-tobasket",
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(row, icon, saveIcon)
+          }), /*#__PURE__*/jsxs("div", {
+            className: classnames(row),
+            children: [" ", t('configurator.ADD_TO_BASKET')]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(column, sendEmailIsDisabled ? actionButtonDisabled : undefined),
+          onClick: function onClick() {
+            return onClickSave('email');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(row, icon, sendIcon)
+          }), /*#__PURE__*/jsxs("div", {
+            className: classnames(row),
+            children: [" ", t('configurator.SendToClient')]
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      onClick: onClickReset,
+      className: classnames(button, secondButton),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(row, icon),
+        children: /*#__PURE__*/jsx("svg", {
+          width: "26",
+          height: "22",
+          viewBox: "0 0 3400 3400",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /*#__PURE__*/jsx("path", {
+            className: iconColor,
+            transform: "scale(1,-1) translate(450,-2600)",
+            strokeWidth: "1",
+            d: "M935 2061l-114 277q135 45 279 57v-300q-85 -9 -165 -34zM1435 2069q-71 19 -135 26v300q131 -11 251 -48zM615 1884l-211 212q119 105 260 176l114 -276q-87 -47 -163 -112zM1737 1921q-43 32 -89 59l115 279q99 -53 187 -125zM2007 -3l-148 204l-6 -4 q-146 -95 -321 -145t-332 -51q-172 0 -331.5 43t-291 120.5t-240 188t-182.5 242.5t-114.5 287t-40.5 318q0 225 80 429.5t224 367.5l212 -212q-103 -120 -159.5 -270t-56.5 -314q0 -123 32 -239.5t90 -215t140.5 -181.5t181.5 -141t216 -90.5t240 -31.5q146 0 256.5 34 t226.5 109l-151 212q-8 11 -8 20q0 20 29 19h683q17 0 27.5 -10t10.5 -25q0 -6 -3 -13l-220 -644q-7 -22 -22 -22q-12 0 -22 15zM1964 1673q-20 32 -43 64l213 213q61 -75 109 -161zM2085 1400q-4 0 -10 27l279 126q4 -14 8.5 -35.5t8 -41t6.5 -37.5t6 -28.5t5 -10.5h-303z "
+          })
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(row),
+        children: [" ", t('configurator.ConfigReset')]
+      })]
+    }), userHasPermission('favorites_lueck') && /*#__PURE__*/jsxs("div", {
+      onClick: onClickFavorites,
+      className: classnames(button, secondButton),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(row, icon),
+        children: /*#__PURE__*/jsx("svg", {
+          width: "26",
+          height: "22",
+          viewBox: "0 0 3400 3400",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /*#__PURE__*/jsx("path", {
+            className: iconColor,
+            transform: "scale(1,-1) translate(450,-2600)",
+            strokeWidth: "1",
+            d: "M2491 1500l-765 -541l291 -885l-768 551l-764 -554l291 883l-776 546h958l294 900h3l292 -900h944zM484 68h-3l4 3z"
+          })
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(row),
+        children: [" ", t('configurator.Favorites')]
+      })]
+    })]
+  });
+};
+var BasketActionSerious$1 = observer(BasketActionSerious);
+
+export { BasketActionSerious$1 as default };

package/build/esm/index-7dbdaa56.js

@@ -0,0 +1,79 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-f07cab70.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-8400161d.js';
+import classnames from 'classnames';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var posnrWrapper = "posnr-wrapper-Y5KDP";
+var swiperWrapper = "swiper-wrapper-nEwC5";
+var swiperSlide = "swiper-slide-43Id0";
+var posnr = "posnr-zpYVY";
+var mobile = "mobile-0MfYt";
+var isActive = "isActive-mWaAC";
+var allIsActive = "allIsActive-iSz9H";
+var isSelectable = "isSelectable-FBPGm";
+var small = "small-xZ6Og";
+var css_248z = ".posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 {\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  flex-wrap: wrap;\n  align-items: center;\n  font-size: 16px;\n  line-height: 18px;\n  color: var(--secondaryColor);\n  height: 100%;\n  position: relative;\n  max-width: 120px;\n}\n\n.swiper-slide-43Id0 {\n  outline: none;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper {\n  width: 100%;\n  height: 100%;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY {\n  border-radius: var(--articlePosNrRadius);\n  font-size: 16px;\n  line-height: var(--articlePosNrSize);\n  min-width: var(--articlePosNrSize);\n  width: 25px;\n  text-align: center;\n  display: inline-block;\n  margin: 0 1px;\n  transition:\n    box-shadow 0.2s ease,\n    background-color 1s ease,\n    color 1s ease;\n}\n.mobile-0MfYt.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY,\n.mobile-0MfYt.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.isActive-mWaAC {\n  font-size: 14px;\n  width: 20px;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY:hover {\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n\n  cursor: pointer;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.isActive-mWaAC {\n  color: white;\n  background-color: var(--primaryColor);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.allIsActive-iSz9H {\n  color: white;\n  background: var(--primaryColor);\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.isSelectable-FBPGm {\n  color: var(--secondaryColor);\n  background: #eaeaea;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.small-xZ6Og,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.small-xZ6Og.isActive-mWaAC {\n  font-size: 12px;\n}\n\n/**\n * Swiper 11.1.12\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * https://swiperjs.com\n *\n * Copyright 2014-2024 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: September 1, 2024\n */\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  /* Fix of Webkit flickering */\n  z-index: 1;\n  display: block;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n  transition-timing-function: initial;\n  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n  box-sizing: content-box;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-android .swiper-slide,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-ios .swiper-slide,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-horizontal {\n  touch-action: pan-y;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-vertical {\n  touch-action: pan-x;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-slide {\n  flex-shrink: 0;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n  display: block;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n/* Auto Height */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-autoheight,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n/* 3D Effects */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d.swiper-css-mode .swiper-wrapper {\n  perspective: 1200px;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-wrapper {\n  transform-style: preserve-3d;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d {\n  perspective: 1200px;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-cube-shadow {\n  transform-style: preserve-3d;\n}\n/* CSS Mode */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode > .swiper-wrapper {\n  overflow: auto;\n  scrollbar-width: none;\n  /* For Firefox */\n  -ms-overflow-style: none;\n  /* For Internet Explorer and Edge */\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n  display: none;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: start start;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-horizontal > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-vertical > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-free-mode > .swiper-wrapper {\n  scroll-snap-type: none;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: none;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n  scroll-snap-stop: always;\n}\n[dir=\"ltr\"] .posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n/* Slide styles start */\n/* 3D Shadows */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-left,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-right,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-top,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-bottom,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-left,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-right,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-top,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-bottom {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 10;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow {\n  background: rgba(0, 0, 0, 0.15);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-left {\n  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-right {\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-top {\n  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-bottom {\n  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-lazy-preloader {\n  width: 42px;\n  height: 42px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  margin-left: -21px;\n  margin-top: -21px;\n  z-index: 10;\n  transform-origin: 50%;\n  box-sizing: border-box;\n  border: 4px solid var(--swiper-theme-color);\n  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n  border-radius: 50%;\n  border-top-color: transparent;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {\n  animation: swiper-preloader-spin 1s infinite linear;\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SettingsPosNr = function SettingsPosNr(_ref) {
+  var _renderLayer;
+  var id = _ref.id;
+  var viewHandler = useViewHandler();
+  var article = viewHandler.settingsState.articleInfos[id];
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.articleInfoSelected(Number(id));
+    },
+    id: "ArticleInfo",
+    className: classnames(posnr, viewHandler.settingsState.allArticlesAreActive ? allIsActive : article.isActive ? isActive : isSelectable, article.posNr.toString().length > 2 ? small : undefined)
+  }, triggerProps), hoverProps), {}, {
+    children: [article.posNr, isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: article.name,
+      price: article.singlePrice,
+      codex: article.codex,
+      image: article.image,
+      layerProps: layerProps
+    }, article.codex)))]
+  }), id);
+};
+var SettingsPosNr$1 = observer(SettingsPosNr);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SettingsPosNr$1
+});
+
+export { SettingsPosNr$1 as S, swiperSlide as a, index as i, mobile as m, posnrWrapper as p, swiperWrapper as s };

package/build/esm/index-7e9e2ed6.js

@@ -0,0 +1,29 @@
+import './index-f07cab70.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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';
+
+var PlannerUIVariant = function PlannerUIVariant() {
+  return /*#__PURE__*/jsx(DynamicMultiRender, {
+    componentName: "Product/ProductCenter/PlannerUI/PlannerUIVariants"
+  });
+};
+
+export { PlannerUIVariant as default };

package/build/esm/index-7f5d3b93.js

@@ -0,0 +1,160 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f07cab70.js';
+import { useState, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import SubTabGroupHeader from './index-32c9231a.js';
+import { S as SettingsItem } from './index-e459769a.js';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'sift';
+import './index-b616baec.js';
+import './index-a8bb3753.js';
+import './index-247163d1.js';
+import './index-30c61e75.js';
+import './index-b72f3c29.js';
+import './index.module-8174b923.js';
+import './index-c62fa8a7.js';
+import 'react-switch';
+import './index-23459eaa.js';
+import './index-c0779a6c.js';
+import './index-77d756e5.js';
+import 'react-countup';
+import './index-6d2bd81d.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-d196e06f.js';
+import 'react-dropdown';
+import './index-a367fa8e.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-7ad8075e.js';
+import './index-97111c7d.js';
+import './index-e36a6095.js';
+import '@crystaldesign/content-box';
+import './index-8e747c76.js';
+import './index-e6d33680.js';
+import './index-d7e0acd4.js';
+import './index-9ae6514d.js';
+import './index-deb33014.js';
+import './index-2a2b618e.js';
+import './index-e2cc7e95.js';
+import './index-a3f0bd97.js';
+import './index-3945e917.js';
+import 'react-laag';
+import './index.module-6f121972.js';
+import './index-8d57e40b.js';
+import './index-8400161d.js';
+import './index-a4d8ed66.js';
+import './index-92b25989.js';
+import './index-caf132a5.js';
+import './index-996bb38b.js';
+import './index.module-8ad8fd6f.js';
+import './index-fe1d1140.js';
+import './index-1d5ead2e.js';
+import './index-d0ccbd04.js';
+import './index-0cfe0c50.js';
+import './index-30f4948b.js';
+import './index-e50ec114.js';
+import './index-eaac9a51.js';
+import './index-5ece2e90.js';
+import './index-575040c5.js';
+import './index-39f35802.js';
+import './index-3107fec9.js';
+import './index-2c793958.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-db08f68e.js';
+import 'rc-slider';
+import './index-392975b3.js';
+import './index-70357481.js';
+import './index-c13888fe.js';
+import './index-d5a452a9.js';
+import 'react-confetti-explosion';
+import './index-c8051c7d.js';
+import './index-6fd14834.js';
+import './index-b06f9f44.js';
+import 'react-qr-code';
+import './index-41eb78c8.js';
+import './useCustomDimensions-4efd72cb.js';
+import './index-070643d3.js';
+import './ussIsSticky-894d3ca3.js';
+import './index-2a65bb20.js';
+import './index-058fac87.js';
+import './index-8e9cd0ea.js';
+import './index.module-26c756f6.js';
+import './index-375a9387.js';
+import './index-a85efa80.js';
+import './index-aaf8db84.js';
+
+var collapsableOuter = "collapsable-outer-udXIP";
+var css_248z = ".collapsable-outer-udXIP {\n  overflow: visible !important;\n}\n.collapsable-outer-udXIP {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n";
+styleInject(css_248z);
+
+var SubTabgroup = function SubTabgroup(_ref) {
+  var _viewHandler$getViewC, _viewHandler$getViewC2;
+  var itemPalettesOfArticle = _ref.itemPalettesOfArticle;
+  var viewHandler = useViewHandler();
+  var _useState = useState(!!((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.selectAccessoiresWithToggle)),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var basketIds = Object.keys(itemPalettesOfArticle);
+  var _useState3 = useState('ALL'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    curTab = _useState4[0],
+    setCurTab = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabs = _useState6[0],
+    setTabs = _useState6[1];
+  var _useState7 = useState(itemPalettesOfArticle[basketIds[0]]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    itemPalettes = _useState8[0],
+    setItemPalettes = _useState8[1];
+  useEffect(function () {
+    var _itemPalettesOfArticl;
+    var actPalettes = (_itemPalettesOfArticl = itemPalettesOfArticle[curTab == 'ALL' ? basketIds[0] : curTab]) !== null && _itemPalettesOfArticl !== void 0 ? _itemPalettesOfArticl : {};
+    Object.values(actPalettes).map(function (p) {
+      return p.configAllMode = curTab == 'ALL' ? basketIds : undefined;
+    });
+    setItemPalettes(actPalettes);
+    setTabs(['ALL'].concat(_toConsumableArray(basketIds.length > 1 ? basketIds : [])));
+    if (!tabs.includes(curTab)) setCurTab(tabs[0]);
+  }, [itemPalettesOfArticle, curTab]);
+  return /*#__PURE__*/jsx(Collapsible, {
+    trigger: (_viewHandler$getViewC2 = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC2 !== void 0 && _viewHandler$getViewC2.selectAccessoiresWithToggle ? /*#__PURE__*/jsx(Fragment, {}) : /*#__PURE__*/jsx(SubTabGroupHeader, {
+      tabs: tabs,
+      openState: [isOpen, setIsOpen],
+      curState: [curTab, setCurTab]
+    }),
+    contentOuterClassName: isOpen ? collapsableOuter : undefined,
+    easing: "ease",
+    open: isOpen,
+    triggerDisabled: isOpen,
+    children: Object.values(itemPalettes).map(function (item, index) {
+      return /*#__PURE__*/jsx(SettingsItem, {
+        item: item,
+        id: item.id,
+        zIndexBase: 200
+      }, item.configStepKey);
+    })
+  });
+};
+var SubTabGroup = observer(SubTabgroup);
+
+export { SubTabGroup as default };