@crystaldesign/diva-web-planner-react 24.15.0-beta.5 → 24.15.0-beta.51

package/build/esm/index-008214c4.js

@@ -1,164 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-2bc9fc80.js';
-import { observer } from 'mobx-react-lite';
-import { useState, useRef, useEffect } from 'react';
-import { useLayer } from 'react-laag';
-import Tooltip from './index-0159684a.js';
-import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import classnames from 'classnames';
-import FullscreenAr from './index-f140c6fe.js';
-import { jsx, jsxs, Fragment } 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 'react-qr-code';
-
-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 ArQrCodeTooltip = function ArQrCodeTooltip(props) {
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useDivaCore = useDivaCore(),
-    openModal = _useDivaCore.actions.openModal,
-    _useDivaCore$state = _useDivaCore.state,
-    isMobile = _useDivaCore$state.isMobile,
-    isTablet = _useDivaCore$state.dimensions.isTablet;
-  //tooltip is going to close itself by timer
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    autoClose = _useState2[0],
-    setAutoClose = _useState2[1];
-  var autoCloseTimeout = useRef();
-  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
-  var openAr = isMobile || isTablet;
-
-  //for fade animation
-  var _useState3 = useState(viewHandler.productState.arCodeWasVisibleOnce),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVisible = _useState4[0],
-    setTooltipVisible = _useState4[1];
-  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible;
-  var _useLayer = useLayer({
-      isOpen: showTooltip,
-      auto: true,
-      placement: 'right-end',
-      triggerOffset: 16
-    }),
-    triggerProps = _useLayer.triggerProps,
-    layerProps = _useLayer.layerProps,
-    renderLayer = _useLayer.renderLayer,
-    arrowProps = _useLayer.arrowProps;
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    url = _useState6[0],
-    setUrl = _useState6[1];
-  useEffect(function () {
-    if (viewHandler.productState.doShowARQRCode == true) {
-      viewHandler.openARObserverConnection(function () {
-        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
-      } // request hqr onreceivehqr triggers update
-      ).then(function (url) {
-        return setUrl(url);
-      });
-    }
-  }, [viewHandler.productState.doShowARQRCode]);
-  useEffect(function () {
-    if (viewHandler.productState.doShowARQRCode && openAr) openModal({
-      content: /*#__PURE__*/jsx(FullscreenAr, {
-        url: url,
-        isArCompatible: viewHandler.productState.isArCompatible,
-        broswerSupportAR: viewHandler.productState.browserSupportAR,
-        activateAR: viewHandler.productState.activateAR
-      }),
-      fullscreen: true,
-      rejectByIcon: true,
-      dontRenderForm: true,
-      callback: function callback(value) {
-        if (!value) {
-          viewHandler.productState.setDoShowARQRCode(false);
-          viewHandler.productState.loadRTVForAr = false;
-          viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : '3D');
-        }
-      }
-    });
-  }, [viewHandler.productState.activateAR, url]);
-  useEffect(function () {
-    //start timeout for auto open the tooltip
-    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
-      var _arQrCodeConfig$timeU;
-      autoCloseTimeout.current = setTimeout(function () {
-        viewHandler.productState.setArCodeWasVisibleOnce();
-        setAutoClose(true);
-        viewHandler.productState.setDoShowARQRCode(true);
-      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
-    }
-    if (!viewHandler.productState.doShowARQRCode && autoClose) {
-      setAutoClose(false);
-    }
-    //delay the state of visible so we animate the fade out
-    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
-      setTimeout(function () {
-        setTooltipVisible(viewHandler.productState.doShowARQRCode);
-      }, 200);
-    }
-  }, [viewHandler.productState.doShowARQRCode]);
-  var onClick = function onClick() {
-    viewHandler.productState.setDoShowARQRCode(true);
-    if (openAr) {
-      if (!viewHandler.productState.doShowRTV) {
-        viewHandler.productState.loadRTVForAr = true;
-        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
-      }
-      openModal({
-        content: /*#__PURE__*/jsx(FullscreenAr, {
-          url: url,
-          isArCompatible: viewHandler.productState.isArCompatible,
-          broswerSupportAR: viewHandler.productState.browserSupportAR,
-          activateAR: viewHandler.productState.activateAR
-        }),
-        fullscreen: true,
-        dontRenderForm: true,
-        rejectByIcon: true,
-        callback: function callback(value) {
-          if (!value) {
-            viewHandler.productState.loadRTVForAr = false;
-            viewHandler.productState.setDoShowARQRCode(false);
-            viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : '3D');
-          }
-        }
-      });
-    }
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
-      id: "ar-icon"
-    }, props), {}, {
-      className: classnames(props.className),
-      onClick: onClick,
-      title: t('configurator.ar_qr_title')
-    }, triggerProps), {}, {
-      style: {
-        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV ? 'visible' : 'hidden'
-      }
-    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
-      arrowProps: arrowProps,
-      layerProps: layerProps,
-      autoClose: autoClose,
-      fadeIn: tooltipVisible,
-      fadeout: !viewHandler.productState.doShowARQRCode,
-      url: url
-    }))]
-  });
-};
-var ArQrCodeIcon = observer(ArQrCodeTooltip);
-
-export { ArQrCodeIcon as default };

package/build/esm/index-0159684a.js

@@ -1,113 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-2bc9fc80.js';
-import QRCode from 'react-qr-code';
-import { observer } from 'mobx-react-lite';
-import React, { useRef, useEffect } from 'react';
-import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import { Arrow } from 'react-laag';
-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/helpers/slicedToArray';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-
-var wrapper = "wrapper-E7OAf";
-var qrCodeWrapper = "qr-code-wrapper-I0N1r";
-var textWrapper = "text-wrapper-HcIJv";
-var header = "header-TxcNf";
-var text = "text-5GiNL";
-var closeIcon = "close-icon-SiRMa";
-var doneBar = "doneBar-7QqkY";
-var css_248z = ".wrapper-E7OAf {\n  background: #ffffff;\n  border-radius: 3px;\n  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));\n  display: flex;\n  padding: 22px;\n  gap: 12px;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out;\n}\n\n.qr-code-wrapper-I0N1r {\n  width: 96px;\n  height: 96px;\n}\n\n.text-wrapper-HcIJv {\n  display: flex;\n  flex-direction: column;\n  color: #000000;\n  width: 220px;\n  gap: 8px;\n}\n\n.header-TxcNf {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 17px;\n  line-height: 19px;\n}\n\n.text-5GiNL {\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 130%;\n}\n\n.close-icon-SiRMa {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 42px;\n  height: 42px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 80%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id%3D%22mask0_332_143%22 style%3D%22mask-type%3Aalpha%22 maskUnits%3D%22userSpaceOnUse%22 x%3D%220%22 y%3D%220%22 width%3D%2224%22 height%3D%2224%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg mask%3D%22url(%23mask0_332_143)%22%3E%3Cpath d%3D%22M8.22749 16.8365L7.16406 15.7731L10.9372 12L7.16406 8.2519L8.22749 7.18848L12.0006 10.9616L15.7487 7.18848L16.8121 8.2519L13.039 12L16.8121 15.7731L15.7487 16.8365L12.0006 13.0634L8.22749 16.8365Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-SiRMa:hover {\n  background-size: 90%;\n}\n.doneBar-7QqkY {\n  background: var(--secondaryColor);\n  height: 3px;\n  border-radius: 0 2px 2px 0;\n  animation-name: example-saRWU;\n  animation-timing-function: linear;\n  transition: width 0s ease-in;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n@keyframes example-saRWU {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\n  }\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 ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
-  var _theme$typography;
-  var layerProps = _ref.layerProps,
-    arrowProps = _ref.arrowProps,
-    autoClose = _ref.autoClose,
-    fadeIn = _ref.fadeIn,
-    fadeout = _ref.fadeout,
-    url = _ref.url;
-  var viewHandler = useViewHandler();
-  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
-  var AUTOHIDE_SEC = arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.timeUnitAutohide ? arQrCodeConfig.timeUnitAutohide : 6;
-  var _useDivaCore = useDivaCore(),
-    theme = _useDivaCore.state.theme;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var autoCloseTimeout = useRef();
-  useEffect(function () {
-    //if opend automatically close after AUTOHIDE_SEC the tooltip again
-    if (autoClose) {
-      autoCloseTimeout.current = setTimeout(function () {
-        return viewHandler.productState.setDoShowARQRCode(false);
-      }, AUTOHIDE_SEC * 1000);
-    }
-    return function () {
-      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
-    };
-  }, []);
-
-  //clear autoclose when user interacts with button
-  useEffect(function () {
-    if (!viewHandler.productState.doShowARQRCode) {
-      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
-    } else viewHandler.productState.setArCodeWasVisibleOnce();
-  }, [viewHandler.productState.doShowARQRCode]);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, layerProps), {}, {
-    className: wrapper,
-    style: _objectSpread(_objectSpread({
-      opacity: fadeout ? 0 : fadeIn ? 1 : undefined
-    }, layerProps.style), {}, {
-      zIndex: 1000005
-    }),
-    children: [/*#__PURE__*/jsx("div", {
-      className: qrCodeWrapper,
-      children: url && /*#__PURE__*/React.createElement(QRCode, {
-        value: url,
-        size: 96,
-        onClick: function onClick() {
-          return url && window.open(url, '_blank');
-        }
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: textWrapper,
-      style: {
-        fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        className: header,
-        children: t('configurator.ar_qr_title')
-      }), /*#__PURE__*/jsx("div", {
-        className: text,
-        children: t('configurator.ar_qr_text')
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: closeIcon,
-      onClick: function onClick() {
-        return viewHandler.productState.setDoShowARQRCode(false);
-      }
-    }), /*#__PURE__*/jsx(Arrow, _objectSpread({
-      onPointerEnterCapture: undefined,
-      onPointerLeaveCapture: undefined
-    }, arrowProps)), autoClose && /*#__PURE__*/jsx("div", {
-      className: doneBar,
-      style: {
-        animationDuration: AUTOHIDE_SEC + 's'
-      }
-    })]
-  }));
-};
-var Tooltip = observer(ArQrCodeTooltip);
-
-export { Tooltip as default };

package/build/esm/index-0239c768.js

@@ -1,27 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-2bc9fc80.js';
-import 'react';
-import DynamicMultiRender from 'react-dynamic-multi-render';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'mobx-react-lite';
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var BarrierActions = function BarrierActions(props) {
-  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
-    componentName: "GlobalElements/BarrierActions"
-  }));
-};
-
-export { BarrierActions as default };

package/build/esm/index-0318d9e3.js

@@ -1,223 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-2bc9fc80.js';
-import React, { useState, useEffect, Suspense } from 'react';
-import { observer } from 'mobx-react-lite';
-import sift from 'sift';
-import TextBox from './index-d0ed8a75.js';
-import ItemVariant from './index-6d758576.js';
-import SettingsPaletteGroup from './index-191b9887.js';
-import ToggleOption from './index-caa2b780.js';
-import GroupDropdown from './index-5aa227a9.js';
-import PromotedProducts from './index-6b0ab35a.js';
-import ToggleName from './index-f953a8bc.js';
-import ProductList from './index-d5b624fb.js';
-import itemPaletteTypeComponentMap from './index-55a73f3f.js';
-import ItemWrapper from './index-aede039f.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-var collapsableInner = "collapsable-inner-YPvJa";
-var css_248z = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\n}\n";
-styleInject(css_248z);
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-b05397a2.js');
-});
-var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-d9dff5a1.js');
-});
-var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
-  var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
-  var item = _ref.item,
-    groupSize = _ref.groupSize;
-  var viewHandler = useViewHandler();
-  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
-  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    filteredGroups = _useState2[0],
-    setFilteredGroups = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filteredGroupsWithEmptyGroups = _useState4[0],
-    setFilteredGroupsWithEmptyGroups = _useState4[1];
-  useEffect(function () {
-    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
-      return _objectSpread(_objectSpread({}, group), {}, {
-        items: item.currentItemsFilter ? group.items.filter(sift(item.currentItemsFilter)) : group.items
-      });
-    });
-    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
-      return group.items.length > 0;
-    });
-    if (filteredGroups.length > 0) {
-      filteredGroupsWithEmptyGroups = filteredGroups;
-    }
-    setFilteredGroups(filteredGroups);
-    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
-  }, [item, viewHandler.settingsState.itemPalettes]);
-  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
-  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
-
-  //this code now sets a css variable within a specific palette to define the grid items size and gird gap
-  //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
-  //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
-  var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
-  var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
-  var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
-  var infoIconSize = undefined;
-  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-    gridSize = '240px';
-  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
-    gridSize = 'calc(100% - 20px)';
-  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
-    gridSize = '100px';
-  } else if (item.type == 'ACC') {
-    if (settingsSizes.sizeAccessoires) {
-      gridSize = settingsSizes.sizeAccessoires;
-    }
-  } else if (item.type == 'ACC_CONFIG') {
-    gridSize = '100%';
-  } else if (item.type.startsWith('GAL_SMALL')) {
-    gridSize = '60px';
-  } else if (item.type == 'RANGE') {
-    gridSize = '100%';
-  } else if (item.type == 'GAL') {
-    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
-    gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
-    gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
-  } else if (item.type === 'PLANNERSWITCH') {
-    gridSize = '170px';
-  } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
-    //for the usecase of schlaraffia in mobile
-    //TODO for refactorig this should be done nicer
-    gridSize = '120px';
-  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
-    gridSize = '120px';
-  } else if (item.type === 'VERY_SMALL') {
-    gridSize = '48%';
-  } else if (item.type === 'GAL_TEXT') {
-    gridSize = '100px';
-  } else if (item.type === 'GAL_BIG_TEXT') {
-    gridSize = '120px';
-  } else if (item.type === 'GAL_SMALL_TEXT') {
-    gridSize = '70px';
-  }
-  if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
-    infoIconSize = '20px';
-  }
-  var variables = _objectSpread({
-    '--gridSize': gridSize,
-    '--gridGap': gridGap
-  }, infoIconSize ? {
-    '--infoIconSize': infoIconSize
-  } : {});
-  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
-  switch (item.type) {
-    case 'TOGGLE':
-      return /*#__PURE__*/jsx(ToggleOption, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TOGGLE_NAME':
-      return /*#__PURE__*/jsx(ToggleName, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TEXTBOX':
-      return /*#__PURE__*/jsx(TextBox, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'DROPDOWN_TEXT':
-    case 'DROPDOWN_IMAGE':
-      return /*#__PURE__*/jsx(ItemVariant, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'NUMBER':
-      return /*#__PURE__*/jsx(PaletteComponent, {
-        paletteId: item.id,
-        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
-        groupSize: groupSize
-      }, item.id + item.configStepKey);
-    case 'SHELFPLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(ShelfPlanner, {
-          filteredGroups: filteredGroups,
-          item: item,
-          id: item.id,
-          style: variables
-        }, item.id)
-      });
-    case 'PRODUCTS':
-      return /*#__PURE__*/jsx(ProductList, {
-        item: item
-      });
-    case 'PROMOTED':
-      return /*#__PURE__*/jsx(PromotedProducts, {
-        item: item
-      });
-    case 'DOOR_PLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(DoorPlanner, {
-          item: item
-        })
-      });
-    case 'GAL_GROUP_DROPDOWN':
-    case 'GAL_SMALL_GROUP_DROPDOWN':
-      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
-        item: item,
-        PaletteComponent: PaletteComponent,
-        filteredGroups: filteredGroupsWithEmptyGroups,
-        id: item.id,
-        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
-        contentInnerClassName: innerGridClass
-      }, item.configStepKey);
-      return /*#__PURE__*/jsx(ItemWrapper, {
-        style: variables,
-        item: item,
-        children: childGroup
-      });
-    default:
-      var children;
-      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
-        className: innerGridClass,
-        children: filteredGroups.map(function (group) {
-          return group.items.map(function (paletteItem, i) {
-            return /*#__PURE__*/jsx(PaletteComponent, {
-              paletteType: item.type,
-              paletteId: item.id,
-              item: paletteItem
-            }, i);
-          });
-        })
-      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
-        groups: filteredGroups,
-        contentInnerClassName: innerGridClass,
-        itemPalette: item,
-        PaletteComponent: PaletteComponent
-      });
-      return /*#__PURE__*/jsx(ItemWrapper, {
-        style: variables,
-        item: item,
-        children: children
-      });
-  }
-};
-var SettingsItem = observer(SettingsPaletteItem);
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': SettingsItem
-});
-
-export { SettingsItem as S, collapsableInner as c, index as i };

package/build/esm/index-034edb4e.js

@@ -1,36 +0,0 @@
-import { s as styleInject } from './index-2bc9fc80.js';
-import ProductHeader from './index-87f36bd7.js';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'mobx-react-lite';
-import 'classnames';
-import './index-b5464ddb.js';
-import '@crystaldesign/content-box';
-import './index-bd5cbfeb.js';
-import '@crystaldesign/content-item';
-import 'react-draggable';
-
-var productHeader = "productHeader-oJxLo";
-var css_248z = ".productHeader-oJxLo {\n  font-weight: 300 !important;\n}\n";
-styleInject(css_248z);
-
-var ProductHeaderBlue = function ProductHeaderBlue(props) {
-  return /*#__PURE__*/jsx(ProductHeader, {
-    productClass: productHeader
-  });
-};
-
-export { ProductHeaderBlue as default };