@crystaldesign/diva-web-planner-react 24.15.0-beta.30 → 24.15.0-beta.31

package/build/esm/index-e3506fc9.js

@@ -0,0 +1,82 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import 'react';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { observer } from 'mobx-react-lite';
+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 infoButton = "infoButton-1VGiK";
+var css_248z = ".infoButton-1VGiK {\n  line-height: 26px;\n  width: 26px;\n  height: 26px;\n  background-color: white;\n  color: var(--primaryColor);\n  text-align: center;\n  cursor: pointer;\n  border: solid 2px var(--primaryColor);\n  border-radius: 50%;\n  margin-left: 10px;\n}\n";
+styleInject(css_248z);
+
+var InfoButton = function InfoButton(_ref) {
+  var _selectedElement$grou, _selectedElement$long;
+  var selectedElement = _ref.selectedElement,
+    id = _ref.id,
+    openUrl = _ref.openUrl;
+  var viewHandler = useViewHandler();
+  var text = selectedElement ? ((_selectedElement$grou = selectedElement.groupName) !== null && _selectedElement$grou !== void 0 ? _selectedElement$grou : '') + (selectedElement.parentName ? " (".concat(selectedElement.parentName, ")") : '') + ' ' + ((_selectedElement$long = selectedElement.longDescription) !== null && _selectedElement$long !== void 0 ? _selectedElement$long : '') : '';
+  var updateInfoBox = function updateInfoBox() {
+    if (!selectedElement) return;
+    viewHandler.settingsState.updateInfoBox({
+      type: 'info',
+      content: /*#__PURE__*/jsx(ContentBoxComponent, {
+        onClose: function onClose() {
+          return viewHandler.settingsState.updateInfoBox();
+        },
+        settings: {
+          contentBoxProps: {
+            type: 'CloseButtonContainer',
+            style: {
+              background: 'transparent',
+              padding: 0
+            },
+            closeIconSize: '24px',
+            content: {
+              type: 'InfoBox',
+              imageUrl: selectedElement.image,
+              title: selectedElement.text,
+              text: text
+            }
+          }
+        }
+      }),
+      id: id,
+      key: selectedElement.codex
+    });
+  };
+  var onClick = function onClick() {
+    if (openUrl && selectedElement) {
+      window.open(selectedElement.url, '_blank');
+      return;
+    }
+    viewHandler.settingsState.setContentItemVisible(false);
+    var boxContent = viewHandler.settingsState.infoBoxContent;
+    if (boxContent && boxContent.id === id && boxContent.type === 'info') viewHandler.settingsState.updateInfoBox();else updateInfoBox();
+  };
+  var boxContent = viewHandler.settingsState.infoBoxContent;
+  if (boxContent && boxContent.id === id && boxContent.key !== (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.codex) && boxContent.type === 'info') {
+    updateInfoBox();
+  }
+  return /*#__PURE__*/jsx("div", {
+    title: 'Info',
+    onClick: onClick,
+    className: infoButton,
+    children: "i"
+  });
+};
+var InfoButton$1 = observer(InfoButton);
+
+export { InfoButton$1 as default };

package/build/esm/index-e695c275.js

@@ -0,0 +1,142 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.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-28e57850.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-e701f826.js

@@ -0,0 +1,40 @@
+import { s as styleInject } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import 'react';
+import { jsx, Fragment } 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';
+import 'mobx-react-lite';
+
+var wcStepInfo = "wcStepInfo-IuGTY";
+var error = "error-PdtJS";
+var warning = "warning-fB-89";
+var info = "info-bs86-";
+var css_248z = ".wcStepInfo-IuGTY {\n  margin-top: 10px;\n  margin-left: 5px;\n  font-size: 15px;\n  line-height: 17px;\n}\n\n.error-PdtJS {\n  color: #dc3545;\n}\n\n.warning-fB-89 {\n  color: #ffc107;\n}\n\n.info-bs86- {\n  color: #828282;\n}\n";
+styleInject(css_248z);
+
+var StepInfo = function StepInfo(_ref) {
+  var stepInfo = _ref.stepInfo;
+  if (!stepInfo) return /*#__PURE__*/jsx(Fragment, {});
+  var text = stepInfo.text,
+    type = stepInfo.type;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcStepInfo, type === 'ERROR' ? error : undefined, type === 'INFO' ? info : undefined, type === 'WARNING' ? warning : undefined),
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  });
+};
+
+export { StepInfo as default };

package/build/esm/index-e7cd0d0a.js

@@ -0,0 +1,154 @@
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import DockFilter from './index-281c7503.js';
+import RALFilter from './index-f4bbad50.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import Searchbar from './index-25a1df5d.js';
+import ToggleHeader from './index-3d68df31.js';
+import NumberInput from './index-b0e91916.js';
+import InfoButton from './index-e3506fc9.js';
+import PDFButton from './index-c78f3637.js';
+import SummaryVariantButton from './index-3c9289e0.js';
+import SelectedOpv from './index-bf632920.js';
+import InfoIcon from './index-efc5dd21.js';
+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 '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-17162832.js';
+import 'react-dropdown';
+import './index-ebbb0e7e.js';
+import './index-edd299b4.js';
+import '@crystaldesign/content-box';
+import './index-0b321731.js';
+import './index-c9d64e0f.js';
+import 'react-switch';
+import './index-48f3b85a.js';
+import 'react-laag';
+import './index-197e79bf.js';
+import './index-0f663f3c.js';
+import './index-796275b1.js';
+
+var headerWrapper = "header-wrapper-qVEmI";
+var wcConfiguratorSettingsHeaderTitle = "wcConfigurator-settings-header-title--CcUK";
+var wcConfiguratorSettingsHeaderPrice = "wcConfigurator-settings-header-price-UmViW";
+var scroller = "scroller-jdhnI";
+var wcConfigItemHeader = "wcConfigItem-Header-JEANn";
+var minExpanded = "min-expanded-kEE9N";
+var landscape = "landscape-DHu2r";
+var portrait = "portrait-8Z7gh";
+var quantity = "quantity-GKJLF";
+var iconsContainer = "icons-container-DbfdO";
+var css_248z = ".wcConfigurator-settings-header--UZPU {\n  height: 100%;\n  position: relative;\n  width: 100%;\n  --infoIconSize: 24px;\n}\n\n.header-wrapper-qVEmI {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.wcConfigurator-settings-header-title--CcUK {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\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\n.wcConfigurator-settings-header-price-UmViW {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: right;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK {\n  max-width: calc(100% - 51.2px);\n  margin: 8px 0px;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK.wcFilterIsVisible-S9QKu {\n  max-width: calc(50% - 19.2px);\n}\n\n.wcConfigurator-settings-header-Filters-Container-hi62D {\n  width: 100%;\n  float: left;\n}\n.wcConfigItem-Header-JEANn {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n.wcConfigItem-Header-JEANn {\n  /* width: calc(100% - 32px); */\n  margin-top: 8px;\n  margin-right: 8px;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 40px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.min-expanded-kEE9N.wcConfigItem-Header-JEANn {\n  overflow: hidden;\n}\n\n:not(.scroller-jdhnI).wcConfigItem-Header-JEANn {\n  margin-left: var(--settingsScrollerPaddingLeft);\n  margin-right: var(--settingsScrollerPaddingRight);\n}\n\n.landscape-DHu2r.wcConfigItem-Header-JEANn,\n.portrait-8Z7gh.wcConfigItem-Header-JEANn {\n  min-height: 40px;\n}\n\n.landscape-DHu2r.scroller-jdhnI header,\n.portrait-8Z7gh.scroller-jdhnI header {\n  min-height: 40px;\n}\n\n.quantity-GKJLF {\n  max-width: 200px;\n  float: left;\n  padding-top: 12px;\n  padding-left: 20%;\n}\n\n.icons-container-DbfdO {\n  display: flex;\n  align-items: center;\n  float: right;\n  position: relative;\n  margin-top: 5px;\n  flex-grow: 2;\n  justify-content: flex-end;\n  max-width: 100%;\n}\n";
+styleInject(css_248z);
+
+var SettingsItemHeader = function SettingsItemHeader(_ref) {
+  var _viewHandler$getViewC, _item$selectedElement, _item$selectedElement2, _item$selectedElement3;
+  var isSettingsHeader = _ref.isSettingsHeader,
+    specialElement1 = _ref.specialElement1,
+    specialElement2 = _ref.specialElement2,
+    item = _ref.item,
+    isInScroller = _ref.isInScroller,
+    _ref$titleClass = _ref.titleClass,
+    titleClass = _ref$titleClass === void 0 ? wcConfiguratorSettingsHeaderTitle : _ref$titleClass,
+    _ref$containerClass = _ref.containerClass,
+    containerClass = _ref$containerClass === void 0 ? wcConfigItemHeader : _ref$containerClass;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var FilterTypeComponentMap = {
+    DockFilter: !viewHandler.settingsState.plannerReplaceMode ? DockFilter : function () {
+      return /*#__PURE__*/jsx(Fragment, {});
+    },
+    RAL: !viewHandler.uiState.ViewConfig.hideRalColorFilter ? RALFilter : function () {
+      return /*#__PURE__*/jsx(Fragment, {});
+    },
+    None: function None() {
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  };
+  var PaletteComponent = FilterTypeComponentMap[item.filterComponent ? item.filterComponent : 'None'];
+  var doShowSearchbar = item.searchVisible && (!isSettingsHeader || !!item.shelfPlannerGrids) && !viewHandler.uiState.ViewConfig.hideSearchBar && !item.isRenderedNotInSettingPalette;
+  var doShowFilter = item.filterVisible && !isSettingsHeader && item.filterComponent;
+  var title = isSettingsHeader || item.type == 'TOGGLE' ? t('configurator.' + viewHandler.settingsState.paletteHeaderStepName, viewHandler.settingsState.paletteHeaderStepName) : t('configurator.' + item.name, item.name);
+  if (item.isMultiselect) {
+    title = title + ' (' + t('configurator.isMultiselect') + ')';
+  }
+  if ((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.showOptionCodexInOptionHeader) title = title + (item.optionCodex ? ' (' + item.optionCodex + ')' : '');
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(containerClass, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, isInScroller ? scroller : undefined),
+    children: /*#__PURE__*/jsxs("div", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      className: headerWrapper,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: titleClass,
+        children: [/*#__PURE__*/jsx("span", {
+          "data-test-id": "settingsItemHeaderTitle",
+          children: title
+        }), !isSettingsHeader && item.measureUnit && /*#__PURE__*/jsx(NumberInput, {
+          item: item
+        })]
+      }), item.quantity !== undefined && !isSettingsHeader && /*#__PURE__*/jsxs("div", {
+        className: classnames(quantity),
+        children: [" ", t('configurator.quantity', 'Anzahl') + ': ' + item.quantity, "x"]
+      }), !hidePrices && !isSettingsHeader && item.price !== undefined && /*#__PURE__*/jsx("div", {
+        className: wcConfiguratorSettingsHeaderPrice,
+        children: item.price
+      }), /*#__PURE__*/jsxs("div", {
+        className: iconsContainer,
+        children: [specialElement1, item.type == 'TOGGLE_HEADER' && /*#__PURE__*/jsx(ToggleHeader, {
+          item: item
+        }), doShowSearchbar && /*#__PURE__*/jsx(Searchbar, {
+          isInScroller: isInScroller,
+          item: item,
+          doShowFilter: !!doShowFilter
+        }, item.configStepKey), doShowFilter && /*#__PURE__*/jsx(PaletteComponent, {
+          id: item.id
+        }), /*#__PURE__*/jsx(SummaryVariantButton, {
+          item: item
+        }), !isSettingsHeader && (item === null || item === void 0 || (_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 || (_item$selectedElement = _item$selectedElement[0]) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement.pdfUrl) && /*#__PURE__*/jsx(PDFButton, {
+          pdfUrl: item.selectedElements[0].pdfUrl
+        }), !isSettingsHeader && /*#__PURE__*/jsx(Fragment, {
+          children: (_item$selectedElement2 = item.selectedElements) !== null && _item$selectedElement2 !== void 0 && (_item$selectedElement2 = _item$selectedElement2[0]) !== null && _item$selectedElement2 !== void 0 && _item$selectedElement2.url ? /*#__PURE__*/jsx(InfoButton, {
+            id: item.id,
+            selectedElement: item.selectedElements[0],
+            openUrl: true
+          }) : item.optionContentItemId ? /*#__PURE__*/jsx(InfoIcon, {
+            item: {
+              contentItemId: item.optionContentItemId,
+              codex: item.configStepKey
+            },
+            style: {
+              bottom: 'calc(50% - 10px)'
+            }
+          }) : !isSettingsHeader && viewHandler.uiState.isInMobileView && (item === null || item === void 0 || (_item$selectedElement3 = item.selectedElements) === null || _item$selectedElement3 === void 0 ? void 0 : _item$selectedElement3.length) && viewHandler.getViewConfig().infoButton && /*#__PURE__*/jsx(InfoButton, {
+            id: item.id,
+            selectedElement: item.selectedElements[0]
+          })
+        }), specialElement2]
+      }), item.selectedElements && item.isMultiselect && /*#__PURE__*/jsx(SelectedOpv, {
+        item: item,
+        selectedElements: item.selectedElements
+      })]
+    })
+  });
+};
+var SettingsItemHeader$1 = observer(SettingsItemHeader);
+
+export { SettingsItemHeader$1 as default };

package/build/esm/index-e841c4ad.js

@@ -0,0 +1,56 @@
+import './index-4238b6c1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Dropdown from 'react-dropdown';
+import { w as wrapper, d as dropdownRoot, a as dropdownControl } from './index.module-58fea74c.js';
+import Arrow from './index-ebbb0e7e.js';
+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 OptionsSelector = function OptionsSelector(_ref) {
+  var options = _ref.options,
+    optionState = _ref.optionState;
+  var ArrowElement = /*#__PURE__*/jsx(Arrow, {
+    onClick: function onClick() {
+      return optionState[1](undefined);
+    },
+    open: false,
+    iconAsDelete: !!optionState[0]
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    children: /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRoot),
+      controlClassName: dropdownControl,
+      options: options.map(function (option) {
+        return {
+          label: option.name,
+          value: option.codex
+        };
+      }),
+      value: optionState[0],
+      onChange: function onChange(val) {
+        return optionState[1](val.value);
+      },
+      placeholder: 'Option',
+      arrowClosed: ArrowElement,
+      arrowOpen: ArrowElement
+    })
+  });
+};
+var OptionSelector = observer(OptionsSelector);
+
+export { OptionSelector as default };

package/build/esm/index-e9964ea8.js

@@ -0,0 +1,139 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+import { s as styleInject } from './index-4238b6c1.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import 'react';
+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/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 shareOption = "share-option-tqy8P";
+var shareText = "share-text-grps7";
+var loader = "loader-KG6ip";
+var facebookIcon = "facebook-icon-1-Vop";
+var emailIcon = "email-icon-AWH8x";
+var whatsappIcon = "whatsapp-icon-I2GLz";
+var telegramIcon = "telegram-icon-0jmu8";
+var css_248z = ".share-option-tqy8P {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  border: solid 0.1px;\n  border-radius: 5px;\n  margin-top: 1%;\n}\n\n.share-text-grps7 {\n  align-self: center;\n  margin: auto;\n}\n\n.loader-KG6ip {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 8px solid #b6b6b6;\n  border-radius: 50%;\n  animation: spin-FpWtQ 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #b6b6b6 transparent transparent transparent;\n}\n\n/* Safari */\n\n@keyframes spin-FpWtQ {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.share-option-tqy8P:hover {\n  color: black;\n}\n\n.facebook-icon-1-Vop {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Uploaded to%3A SVG Repo%2C www.svgrepo.com%2C Generator%3A SVG Repo Mixer Tools --%3E%3Csvg fill%3D%22%23000000%22 width%3D%22800px%22 height%3D%22800px%22 viewBox%3D%220 0 512 512%22 id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M480%2C257.35c0-123.7-100.3-224-224-224s-224%2C100.3-224%2C224c0%2C111.8%2C81.9%2C204.47%2C189%2C221.29V322.12H164.11V257.35H221V208c0-56.13%2C33.45-87.16%2C84.61-87.16%2C24.51%2C0%2C50.15%2C4.38%2C50.15%2C4.38v55.13H327.5c-27.81%2C0-36.51%2C17.26-36.51%2C35v42h62.12l-9.92%2C64.77H291V478.66C398.1%2C461.85%2C480%2C369.18%2C480%2C257.35Z%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.email-icon-AWH8x {\n  margin-left: 1%;\n  background-position-y: -1px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2240%22 viewBox%3D%220 -960 960 960%22 width%3D%2240%22%3E%3Cpath d%3D%22M174.461-180q-31.417 0-53.606-22.189-22.188-22.188-22.188-53.606v-448.41q0-31.418 22.188-53.606Q143.044-780 174.461-780h611.078q31.417 0 53.606 22.189 22.188 22.188 22.188 53.606v448.41q0 31.418-22.188 53.606Q816.956-180 785.539-180H174.461ZM480-467.359l330.154-215.359-12.308-46.103-317.846 208-317.846-208-12.308 46.103L480-467.359Z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.whatsapp-icon-I2GLz {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox%3D%220 0 20 20%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22m0 0h20v20h-20z%22 fill%3D%22none%22%2F%3E%3Cpath d%3D%22m16.8 5.7c-2.4-3.7-7.3-4.8-11.1-2.5-3.7 2.3-4.9 7.3-2.5 11l.2.3-.8 3 3-.8.3.2c1.3.7 2.7 1.1 4.1 1.1 1.5 0 3-.4 4.3-1.2 3.7-2.4 4.8-7.3 2.5-11.1zm-2.1 7.7c-.4.6-.9 1-1.6 1.1-.4 0-.9.2-2.9-.6-1.7-.8-3.1-2.1-4.1-3.6-.6-.7-.9-1.6-1-2.5 0-.8.3-1.5.8-2 .2-.2.4-.3.6-.3h.5c.2 0 .4 0 .5.4.2.5.7 1.7.7 1.8.1.1.1.3 0 .4.1.2 0 .4-.1.5s-.2.3-.3.4c-.2.1-.3.3-.2.5.4.6.9 1.2 1.4 1.7.6.5 1.2.9 1.9 1.2.2.1.4.1.5-.1s.6-.7.8-.9.3-.2.5-.1l1.6.8c.2.1.4.2.5.3.1.3.1.7-.1 1z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n\n.telegram-icon-0jmu8 {\n  margin-left: 1%;\n  background-position-y: top;\n  background-image: url(\"data:image/svg+xml,%3Csvg height%3D%2232%22 viewBox%3D%220 0 32 32%22 width%3D%2232%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22m16 .5c-8.563 0-15.5 6.938-15.5 15.5s6.938 15.5 15.5 15.5c8.563 0 15.5-6.938 15.5-15.5s-6.938-15.5-15.5-15.5zm7.613 10.619-2.544 11.988c-.188.85-.694 1.056-1.4.656l-3.875-2.856-1.869 1.8c-.206.206-.381.381-.781.381l.275-3.944 7.181-6.488c.313-.275-.069-.431-.482-.156l-8.875 5.587-3.825-1.194c-.831-.262-.85-.831.175-1.231l14.944-5.763c.694-.25 1.3.169 1.075 1.219z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  background-size: contain;\n}\n";
+styleInject(css_248z);
+
+var Share = (function (props) {
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.isMobile;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    language = _useTranslation.i18n.language;
+  if (_typeof(props.url) == 'object') props.url = props.url[language];
+  var url = props.url.replace('{{DivaNr}}', props.divaNr);
+  url = url;
+  var text = t('configurator.sharemessage');
+  function onShare(type) {
+    switch (type) {
+      case 'facebook':
+        window.open("https://www.facebook.com/sharer/sharer.php?u=".concat(encodeURIComponent(url)), '_blank');
+        break;
+      case 'email':
+        window.open("mailto:?body=".concat(encodeURIComponent(text + ' ' + url)), '_blank');
+        break;
+      case 'telegram':
+        window.open("https://telegram.me/share/url?url=".concat(encodeURIComponent(url), "&text=").concat(encodeURIComponent(text)), '_blank');
+        break;
+      case 'whatsapp':
+        window.open("https://api.whatsapp.com/send?text=".concat(encodeURIComponent(text + ' ' + url)), '_blank');
+        break;
+    }
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [props.loading && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: 100
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: loader
+        })
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          position: 'absolute',
+          bottom: 0
+        },
+        children: t('configurator.shareloadinginfo')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        visibility: props.loading ? 'hidden' : 'visible'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: t('configurator.sharedescription')
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: shareOption,
+        onClick: function onClick() {
+          return onShare('email');
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: emailIcon
+        }), /*#__PURE__*/jsx("div", {
+          className: shareText,
+          children: t('configurator.shareemail')
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: shareOption,
+        onClick: function onClick() {
+          return onShare('facebook');
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: facebookIcon
+        }), /*#__PURE__*/jsx("div", {
+          className: shareText,
+          children: t('configurator.sharefacebook')
+        })]
+      }), isMobile && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: shareOption,
+          onClick: function onClick() {
+            return onShare('whatsapp');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: whatsappIcon
+          }), /*#__PURE__*/jsx("div", {
+            className: shareText,
+            children: t('configurator.sharewhatsapp')
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: shareOption,
+          onClick: function onClick() {
+            return onShare('telegram');
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: telegramIcon
+          }), /*#__PURE__*/jsx("div", {
+            className: shareText,
+            children: t('configurator.sharetelegram')
+          })]
+        })]
+      })]
+    })]
+  });
+});
+
+export { Share as default };