@crystaldesign/diva-web-planner-react 25.9.0-beta.1 → 25.9.0-beta.11

package/build/esm/index-85d56a5f.js

@@ -0,0 +1,286 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import Dropdown from 'react-dropdown';
+import RALFilter from './index-bd8c7c36.js';
+import Searchbar from './index-f0f21be7.js';
+import Arrow from './index-d67606ee.js';
+import InfoIcon from './index-c84c0bf5.js';
+import PricePreview from './index-d71c5c4c.js';
+import { jsx, jsxs, 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 '@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';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-f981c831.js';
+import './index-83be5767.js';
+import '@crystaldesign/content-box';
+import './index-075c9607.js';
+
+var container = "container-sQHMr";
+var dropdownRoot = "Dropdown-root-elxKM";
+var dropdownControl = "Dropdown-control-K74AD";
+var dropdownMenu = "dropdown-menu-Zxk-s";
+var row = "row-qZvF1";
+var colum = "colum-BalsH";
+var dropOption = "dropOption-WucMK";
+var text = "text-cICxb";
+var textWithPrice = "text-with-price-o4SIM";
+var css_248z = ".container-sQHMr {\n  display: inline-block;\n  width: 100%;\n}\n.container-sQHMr .Dropdown-root-elxKM {\n  box-shadow: var(--boxShadowHover);\n}\n\n.container-sQHMr .Dropdown-control-K74AD {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 52px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n.container-sQHMr .dropdown-menu-Zxk-s {\n  max-height: 400px !important;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n}\n\n.row-qZvF1 {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n  justify-content: space-between;\n  align-items: center;\n  --infoIconSize: 24px;\n}\n.colum-BalsH {\n  width: calc(50% - 32px);\n  margin: 3px;\n}\n\n.dropOption-WucMK {\n  width: 100%;\n  position: relative;\n}\n\n.text-cICxb {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.text-with-price-o4SIM {\n  padding-right: 64px;\n}\n";
+styleInject(css_248z);
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var GroupDropdown = function GroupDropdown(_ref) {
+  var _filteredGroups$, _filteredGroups$index, _filteredGroups$index2;
+  var filteredGroups = _ref.filteredGroups,
+    PaletteComponent = _ref.PaletteComponent,
+    id = _ref.id,
+    item = _ref.item,
+    showSearchBar = _ref.showSearchBar,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    actGroup = _useState2[0],
+    setActGroup = _useState2[1];
+  var options = [];
+  var selectedItem;
+  var indexOfSelGroup = -1;
+  var indexOfSelGroupItem = -1;
+  var indexOfActGroup = -1;
+  var displayParentNameInDropDown = false;
+  var actDropdownValue = '---';
+  if (filteredGroups[0] && (_filteredGroups$ = filteredGroups[0]) !== null && _filteredGroups$ !== void 0 && (_filteredGroups$ = _filteredGroups$.items) !== null && _filteredGroups$ !== void 0 && _filteredGroups$[0]) {
+    var _filteredGroups$2;
+    if (((_filteredGroups$2 = filteredGroups[0]) === null || _filteredGroups$2 === void 0 || (_filteredGroups$2 = _filteredGroups$2.items) === null || _filteredGroups$2 === void 0 ? void 0 : _filteredGroups$2[0]).parentName) {
+      displayParentNameInDropDown = true;
+    }
+    var _loop = function _loop() {
+      var filteredGroup = filteredGroups[i];
+      if (!selectedItem) {
+        selectedItem = filteredGroup.items.find(function (item) {
+          return item.sel;
+        });
+        if (selectedItem) {
+          indexOfSelGroup = i;
+        }
+      }
+      var firstOpv = filteredGroup.items[0];
+      if (displayParentNameInDropDown) {
+        var group = options.find(function (option) {
+          return option.key == firstOpv.parentName;
+        });
+        if (!group) {
+          group = {
+            type: 'group',
+            key: firstOpv.parentName,
+            name: /*#__PURE__*/jsxs("div", {
+              className: dropOption,
+              children: [/*#__PURE__*/jsx("div", {
+                className: classnames(text, firstOpv.pricePreviewPromise ? textWithPrice : undefined),
+                dangerouslySetInnerHTML: {
+                  __html: firstOpv.parentName
+                }
+              }), firstOpv.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+                asyncPricePreview: firstOpv.pricePreviewPromise
+              })]
+            }),
+            items: []
+          };
+          options.push(group);
+        }
+        group.items.push({
+          label: /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            children: /*#__PURE__*/jsx("div", {
+              className: classnames(text, firstOpv.pricePreviewPromise ? textWithPrice : undefined),
+              dangerouslySetInnerHTML: {
+                __html: filteredGroup.name
+              }
+            })
+          }),
+          value: filteredGroup.name
+        });
+        if (indexOfSelGroup == i) {
+          indexOfSelGroupItem = group.items.length - 1;
+          indexOfSelGroup = options.findIndex(function (group) {
+            return group.key == firstOpv.parentName;
+          });
+        }
+      } else {
+        options.push({
+          label: /*#__PURE__*/jsxs("div", {
+            className: dropOption,
+            children: [/*#__PURE__*/jsx("div", {
+              className: classnames(text, firstOpv.pricePreviewPromise ? textWithPrice : undefined),
+              dangerouslySetInnerHTML: {
+                __html: filteredGroup.name
+              }
+            }), firstOpv.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+              asyncPricePreview: firstOpv.pricePreviewPromise
+            })]
+          }),
+          value: filteredGroup.name
+        });
+      }
+    };
+    for (var i = 0; i < filteredGroups.length; i++) {
+      _loop();
+    }
+    indexOfActGroup = indexOfSelGroup;
+    if (actGroup) {
+      indexOfActGroup = filteredGroups.findIndex(function (val) {
+        return val.name == actGroup;
+      });
+    }
+    if (item.currentItemsFilter) {
+      actDropdownValue = '---';
+    } else if (actGroup) {
+      actDropdownValue = actGroup;
+    } else {
+      var _options$indexOfSelGr;
+      if ((_options$indexOfSelGr = options[indexOfSelGroup]) !== null && _options$indexOfSelGr !== void 0 && _options$indexOfSelGr.label) {
+        actDropdownValue = {
+          label: /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            children: /*#__PURE__*/jsx("div", {
+              className: text,
+              dangerouslySetInnerHTML: {
+                __html: options[indexOfSelGroup].value
+              }
+            })
+          }),
+          value: options[indexOfSelGroup].value
+        };
+        indexOfActGroup = indexOfSelGroup;
+      } else if (indexOfSelGroup >= 0) {
+        var _options$indexOfSelGr2;
+        var _item = (_options$indexOfSelGr2 = options[indexOfSelGroup]) === null || _options$indexOfSelGr2 === void 0 || (_options$indexOfSelGr2 = _options$indexOfSelGr2.items) === null || _options$indexOfSelGr2 === void 0 ? void 0 : _options$indexOfSelGr2[indexOfSelGroupItem];
+        actDropdownValue = {
+          label: /*#__PURE__*/jsx("div", {
+            className: dropOption,
+            children: /*#__PURE__*/jsx("div", {
+              className: text,
+              dangerouslySetInnerHTML: {
+                __html: _item.value
+              }
+            })
+          }),
+          value: _item.value
+        };
+        var index = indexOfSelGroupItem;
+        for (var _i = 0; _i < options.length && _i < indexOfSelGroup; _i++) {
+          index = index + options[_i].items.length;
+        }
+        indexOfActGroup = index;
+      }
+    }
+  }
+  var onGroupSel = function onGroupSel(val) {
+    var _item$deleteCurFilter;
+    (_item$deleteCurFilter = item.deleteCurFilter) === null || _item$deleteCurFilter === void 0 || _item$deleteCurFilter.call(item);
+    setActGroup(val.value);
+  };
+  var allItems = [];
+  var _iterator = _createForOfIteratorHelper(filteredGroups),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _row = _step.value;
+      var _iterator2 = _createForOfIteratorHelper(_row.items),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var e = _step2.value;
+          allItems.push(e);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var uiItems = item.currentItemsFilter ? allItems : (_filteredGroups$index = filteredGroups[indexOfActGroup]) === null || _filteredGroups$index === void 0 ? void 0 : _filteredGroups$index.items;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [showSearchBar && /*#__PURE__*/jsx(Searchbar, {
+      doShowFilter: true,
+      style: {
+        margin: '6px 2px 6px 0px',
+        width: 'calc(100% - 10px)',
+        maxWidth: 'unset',
+        border: '1px solid lightgrey'
+      },
+      isInScroller: false,
+      item: item
+    }), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: row,
+        children: [/*#__PURE__*/jsx("div", {
+          className: colum,
+          children: /*#__PURE__*/jsx(RALFilter, {
+            id: id,
+            dropdownRootClass: dropdownRoot
+          })
+        }), ((_filteredGroups$index2 = filteredGroups[indexOfActGroup]) === null || _filteredGroups$index2 === void 0 ? void 0 : _filteredGroups$index2.contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+          item: filteredGroups[indexOfActGroup],
+          style: {
+            zIndex: 100,
+            top: 'unset',
+            left: 'unset',
+            position: 'relative'
+          }
+        }, filteredGroups[indexOfActGroup].key), /*#__PURE__*/jsx("div", {
+          className: colum,
+          children: /*#__PURE__*/jsx(Dropdown, {
+            className: classnames(dropdownRoot),
+            controlClassName: dropdownControl,
+            options: options,
+            value: actDropdownValue,
+            onChange: onGroupSel,
+            menuClassName: dropdownMenu,
+            arrowClosed: /*#__PURE__*/jsx(Arrow, {
+              open: false
+            }),
+            arrowOpen: /*#__PURE__*/jsx(Arrow, {
+              open: true
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: contentInnerClassName,
+        children: uiItems === null || uiItems === void 0 ? void 0 : uiItems.map(function (item, i) {
+          return /*#__PURE__*/jsx(PaletteComponent, {
+            paletteId: id,
+            item: item,
+            hidePricePreview: true
+          }, i);
+        })
+      })]
+    })]
+  });
+};
+var GroupDropdown$1 = observer(GroupDropdown);
+
+export { GroupDropdown$1 as default };

package/build/esm/index-86efa80e.js

@@ -0,0 +1,147 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-75136b70.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-f0a416a7.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';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+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-8706fef2.js

@@ -0,0 +1,64 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject } from './index-75136b70.js';
+import 'react';
+import SettingsItemHeader from './index-6742d747.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+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';
+import '@crystaldesign/widget-contact-form';
+import './index-0295b9c6.js';
+import './index-bd8c7c36.js';
+import './index-f981c831.js';
+import 'react-dropdown';
+import './index-d67606ee.js';
+import './index-83be5767.js';
+import '@crystaldesign/content-box';
+import './index-075c9607.js';
+import './index-f0f21be7.js';
+import './index-7e205580.js';
+import './index-b2c9d3f7.js';
+import 'react-switch';
+import './index-68be0ebd.js';
+import './index-a4b3d0fe.js';
+import './index-12880fa2.js';
+import './index-6645d0b1.js';
+import './index-0fa2200d.js';
+import './index-82661198.js';
+import 'react-laag';
+import './index-bdab7c1f.js';
+import './index-d71c5c4c.js';
+import './index-47c0af4b.js';
+import './index-c84c0bf5.js';
+
+var settingsHeaderContainer = "settingsHeaderContainer-ywbxo";
+var settingsHeaderTitle = "settingsHeaderTitle-AeKfm";
+var css_248z = ".settingsHeaderContainer-ywbxo {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.settingsHeaderContainer-ywbxo {\n  height: 100%;\n  position: relative;\n  display: block;\n  width: 100%;\n  border-bottom: 1px solid #e6e6e6;\n  width: calc(100% - 32px);\n  margin-top: 12px;\n  height: -moz-fit-content;\n  height: fit-content;\n  padding-bottom: 16px;\n  display: flow-root;\n  position: relative;\n  --infoIconSize: 24px;\n}\n\n.settingsHeaderTitle-AeKfm {\n  font-size: 26px;\n  line-height: 1;\n  margin: 6px 0 0 0;\n  width: auto;\n  font-weight: 300;\n  line-height: 24px;\n  -webkit-font-smoothing: antialiased;\n  color: var(--secondaryColor);\n  float: left;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\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 SettingsItemHeaderSerious = function SettingsItemHeaderSerious(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(SettingsItemHeader, _objectSpread(_objectSpread({}, props), {}, {
+    titleClass: settingsHeaderTitle,
+    containerClass: settingsHeaderContainer
+  }));
+};
+
+export { SettingsItemHeaderSerious as default };

package/build/esm/index-870fa205.js

@@ -0,0 +1,42 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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';
+import '@crystaldesign/widget-contact-form';
+
+var wcAccCtaMinus = "wcAccCTAMinus-Y6GAJ";
+var css_248z = ".wcAccCTAMinus-Y6GAJ {\n  font-weight: 300;\n  font-size: 18px;\n  height: 22px;\n  width: 22px;\n  float: left;\n  background: #f2f2f2;\n  border-radius: 19.008px;\n  -webkit-text-stroke: 0px;\n  transition: background-color 0.15s ease;\n  text-align: center;\n  float: right;\n  cursor: pointer;\n}\n\n.wcAccCTAMinus-Y6GAJ:hover {\n  background: #d9d9d9;\n  color: #424242;\n}\n\n.wcAccCTAMinus-Y6GAJ {\n  line-height: 21px;\n}\n";
+styleInject(css_248z);
+
+var ShelfDeleteButton = function ShelfDeleteButton(_ref) {
+  var index = _ref.index,
+    grid = _ref.grid;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick(e) {
+      viewHandler.paletteViewHandler.clickDeleteAccessorieOnShelfPlanner(grid, index);
+      e.stopPropagation();
+    },
+    className: wcAccCtaMinus,
+    children: "-"
+  });
+};
+
+export { ShelfDeleteButton as default };

package/build/esm/index-882cbf45.js

@@ -0,0 +1,67 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-75136b70.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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';
+
+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 TabSearch = function TabSearch(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    var searchGotResetted = !!viewHandler.tabGroupState.filterTabgroup && !search;
+    viewHandler.tabGroupState.setFilterTabgroup(search && search !== '' ? search : undefined);
+    if (searchGotResetted) {
+      setTimeout(function () {
+        return viewHandler.tabGroupState.scrollToCurTabgroup();
+      }, 200);
+    }
+  }, [search]);
+  useEffect(function () {
+    if (viewHandler.tabGroupState.filterTabgroup === undefined && search) {
+      setSearch('');
+    }
+  }, [viewHandler.tabGroupState.filterTabgroup]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx("input", {
+      value: search,
+      type: "text",
+      onChange: function onChange(e) {
+        return setSearch(e.target.value);
+      },
+      placeholder: t('filter.global')
+    }), !!search && /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return setSearch('');
+      }
+    })]
+  }));
+};
+var TabSearch$1 = observer(TabSearch);
+
+export { TabSearch$1 as default };

package/build/esm/index-88febce5.js

@@ -0,0 +1,50 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } 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 container = "container-LyqYI";
+var hidden = "hidden-TqWZg";
+var notHidden = "not-hidden-Wbdom";
+var text = "text-022qF";
+var css_248z = ".container-LyqYI {\n  bottom: 32px;\n  left: 0px;\n  position: absolute;\n  z-index: 1000;\n  margin-left: 20px;\n  margin-bottom: 20px;\n  opacity: 1;\n  display: flex;\n  align-items: center;\n}\n\n.hidden-TqWZg {\n  opacity: 0;\n}\n\n.not-hidden-Wbdom {\n  transition: opacity 0.5s;\n}\n.text-022qF {\n  margin-left: 10px;\n  font-size: 13px;\n}\n";
+styleInject(css_248z);
+
+var RotateIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M16.48%202.52c3.27%201.55%205.61%204.72%205.97%208.48h1.5C23.44%204.84%2018.29%200%2012%200l-.66.03%203.81%203.81%201.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12%200L1.75%208.11c-.59.59-.59%201.54%200%202.12l12.02%2012.02c.59.59%201.54.59%202.12%200l6.36-6.36c.59-.59.59-1.54%200-2.12L10.23%201.75zm4.6%2019.44L2.81%209.17l6.36-6.36%2012.02%2012.02-6.36%206.36zm-7.31.29C4.25%2019.94%201.91%2016.76%201.55%2013H.05C.56%2019.16%205.71%2024%2012%2024l.66-.03-3.81-3.81-1.33%201.32z%22%2F%3E%3C%2Fsvg%3E";
+
+var RotateInfo = function RotateInfo(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (!viewHandler.uiState.isMobileLandscape || viewHandler.uiState.isMobilePortrait || viewHandler.uiState.ViewConfig.disableLandscape) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, !viewHandler.productState.orbitHidden ? hidden : notHidden),
+    children: [/*#__PURE__*/jsx("img", {
+      src: RotateIcon
+    }), /*#__PURE__*/jsx("div", {
+      className: text,
+      children: t('configurator.rotate_mobile')
+    })]
+  });
+};
+var RotateInfo$1 = observer(RotateInfo);
+
+export { RotateInfo$1 as default };