@crystaldesign/diva-web-planner-react 26.8.0-beta.9 → 26.9.0-beta.1

package/build/esm/index-f946ed48.js

@@ -1,152 +0,0 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, P as PricePreview } from './index-82c8e7d7.js';
-import { useState, useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import classnames from 'classnames';
-import InfoIcon from './index-75c7868f.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var wrapper = "wrapper-7hUK2";
-var title = "title-cL4D6";
-var boxedContainer = "boxedContainer-4aSLS";
-var boxedOption = "boxedOption-pwmLq";
-var selected = "selected-Vv66m";
-var listContainer = "listContainer-JDin9";
-var listOption = "listOption-g5DeJ";
-var radioCircle = "radioCircle--nW1H";
-var radioInner = "radioInner-b2uFk";
-var label = "label-oLz-i";
-var css_248z = ".wrapper-7hUK2 {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n  width: 100%;\n}\n\n.title-cL4D6 {\n  font-weight: bold;\n  font-size: 16px;\n  margin-bottom: 16px;\n  text-align: left;\n  color: var(--secondaryColor);\n}\n\n/* Boxed Mode */\n.boxedContainer-4aSLS {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.boxedOption-pwmLq {\n  position: relative;\n  border: 1px solid #e0e0e0;\n  border: 1px solid var(--optionItemBorderColor, #e0e0e0);\n  border-radius: var(--globalBorderRadius);\n  padding: 12px 24px;\n  cursor: pointer;\n  flex: 1;\n  min-width: 120px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.2s ease-in-out;\n  background-color: #fff;\n}\n\n.boxedOption-pwmLq.selected-Vv66m {\n  border-color: var(--primaryColor);\n  color: var(--primaryColor);\n}\n\n/* List Mode */\n.listContainer-JDin9 {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.listOption-g5DeJ {\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 12px;\n}\n\n.radioCircle--nW1H {\n  width: 24px;\n  height: 24px;\n  border: 2px solid #e0e0e0;\n  border: 2px solid var(--optionItemBorderColor, #e0e0e0);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.radioCircle--nW1H.selected-Vv66m {\n  border-color: var(--primaryColor);\n}\n\n.radioInner-b2uFk {\n  width: 12px;\n  height: 12px;\n  background-color: var(--primaryColor);\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.radioInner-b2uFk.selected-Vv66m {\n  opacity: 1;\n}\n\n.label-oLz-i {\n  font-size: 16px;\n  color: var(--secondaryColor);\n}\n\n.label-oLz-i.selected-Vv66m {\n  color: var(--primaryColor);\n}\n\n/* Helper to toggle between modes for demo */\n.modeToggle-dxDvl {\n  font-size: 10px;\n  color: #999;\n  cursor: pointer;\n  margin-top: 8px;\n  text-decoration: underline;\n  align-self: flex-start;\n}";
-styleInject(css_248z);
-
-var Radio = function Radio(_ref) {
-  var item = _ref.item,
-    style = _ref.style,
-    paletteId = _ref.paletteId,
-    initialDisplayMode = _ref.displayMode,
-    hidePricePreview = _ref.hidePricePreview;
-  var viewHandler = useViewHandler();
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    curIndex = _useState4[0],
-    setCurIndex = _useState4[1];
-  var _useState5 = useState(initialDisplayMode || 'boxed'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mode = _useState6[0];
-    _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    allEndWithCM = _useState8[0],
-    setAllEndWithCM = _useState8[1];
-  useEffect(function () {
-    var itemList = item.groups.flatMap(function (group) {
-      return group.items;
-    });
-    var endsWithCM = itemList.every(function (i) {
-      return i.text.endsWith('cm');
-    });
-    setItems(itemList);
-    setAllEndWithCM(endsWithCM);
-    setCurIndex(itemList.findIndex(function (i) {
-      return i.sel;
-    }));
-  }, [item]);
-  var onChangeValue = function onChangeValue(index) {
-    setCurIndex(index);
-    var selectedItem = items[index];
-    if (selectedItem) {
-      viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedItem, undefined, paletteId);
-    }
-  };
-  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
-  var getLabelText = function getLabelText(opt) {
-    return allEndWithCM ? opt.text.replace('cm', '') : opt.text;
-  };
-  var renderBoxed = function renderBoxed() {
-    return /*#__PURE__*/jsx("div", {
-      className: boxedContainer,
-      children: items.map(function (opt, index) {
-        return /*#__PURE__*/jsxs("div", {
-          className: classnames(boxedOption, curIndex === index && selected),
-          onClick: function onClick() {
-            return onChangeValue(index);
-          },
-          children: [/*#__PURE__*/jsx("div", {
-            dangerouslySetInnerHTML: {
-              __html: getLabelText(opt)
-            }
-          }), opt.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
-            item: opt
-          }, opt.codex), !hidePricePreview && opt.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
-            asyncPricePreview: opt.pricePreviewPromise,
-            sel: opt.sel
-          })]
-        }, index);
-      })
-    });
-  };
-  var renderList = function renderList() {
-    return /*#__PURE__*/jsx("div", {
-      className: listContainer,
-      children: items.map(function (opt, index) {
-        return /*#__PURE__*/jsxs("div", {
-          className: listOption,
-          onClick: function onClick() {
-            return onChangeValue(index);
-          },
-          children: [/*#__PURE__*/jsx("div", {
-            className: classnames(radioCircle, curIndex === index && selected),
-            children: /*#__PURE__*/jsx("div", {
-              className: classnames(radioInner, curIndex === index && selected)
-            })
-          }), /*#__PURE__*/jsx("div", {
-            className: classnames(label, curIndex === index && selected),
-            dangerouslySetInnerHTML: {
-              __html: getLabelText(opt)
-            }
-          }), opt.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
-            item: opt
-          }, opt.codex), !hidePricePreview && opt.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
-            asyncPricePreview: opt.pricePreviewPromise,
-            sel: opt.sel
-          })]
-        }, index);
-      })
-    });
-  };
-  return /*#__PURE__*/jsxs("div", {
-    className: wrapper,
-    ref: function ref(_ref2) {
-      return item.htmlRef = _ref2;
-    },
-    style: style,
-    children: [/*#__PURE__*/jsx("div", {
-      className: title,
-      children: item.name + (allEndWithCM ? ' (cm)' : '')
-    }), mode === 'boxed' ? renderBoxed() : renderList()]
-  });
-};
-var Radio$1 = observer(Radio);
-
-export { Radio$1 as default };

package/build/esm/index-fa195372.js

@@ -1,72 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-82c8e7d7.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import { useRef, useEffect } from 'react';
-import { useTranslation } from '@crystaldesign/diva-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var wrapper = "wrapper-GKYw3";
-var wcTabGroupItem = "wcTabGroupItem-xfakc";
-var portrait = "portrait-R75Hr";
-var tablet = "tablet-QdtJo";
-var wcActiveStep = "wcActiveStep-E81Bg";
-var wcStepNum = "wcStepNum-fDZJn";
-var horizontalLine = "horizontal-line-RQbQm";
-var css_248z = ".wrapper-GKYw3 {\n  display: flex;\n  align-items: center;\n  float: left;\n}\n\n.wcTabGroupItem-xfakc {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  border: none;\n  transition: color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  color: #b5b5b5;\n  cursor: pointer;\n}\n\n.portrait-R75Hr:not(.tablet-QdtJo) .wcTabGroupItem-xfakc {\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 300;\n}\n\n.portrait-R75Hr .wcTabGroupItem-xfakc {\n  line-height: calc(var(--configuratorTabGroupHeight) - 3px);\n}\n\n.wcTabGroupItem-xfakc:hover {\n  color: #262626;\n}\n\n.wcActiveStep-E81Bg .wcTabGroupItem-xfakc {\n  color: #262626;\n}\n\n.wcStepNum-fDZJn {\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  margin-right: 11px;\n  margin-top: 3px;\n  border: 1px solid #b5b5b5;\n  border-radius: 12px;\n  text-align: center;\n  line-height: 25px;\n  font-size: 16px;\n  color: #b5b5b5;\n  transition:\n    color 0.3s ease-out,\n    border 0.3s ease-out;\n}\n\n.wcActiveStep-E81Bg .wcStepNum-fDZJn,\n.wcTabGroupItem-xfakc:hover .wcStepNum-fDZJn {\n  color: #4f555b;\n  border: 1px solid #4f555b;\n}\n\n.portrait-R75Hr:not(.tablet-QdtJo) .wcStepNum-fDZJn {\n  height: 14px;\n  width: 14px;\n  line-height: 14px;\n  font-size: 10px;\n}\n\n.horizontal-line-RQbQm {\n  width: 22px;\n  height: 0px;\n  border: 1px solid #bfbfbf;\n}\n\n.portrait-R75Hr .horizontal-line-RQbQm {\n  width: 10px;\n  border-top: 1px solid #bfbfbf;\n  border-bottom: none;\n}\n\n.tablet-QdtJo .horizontal-line-RQbQm {\n  width: 14px;\n  border-top: 1px solid #bfbfbf;\n  border-bottom: none;\n}\n";
-styleInject(css_248z);
-
-var TabGroupItemHorizontaRalph = function TabGroupItemHorizontaRalph(_ref) {
-  var tabGroup = _ref.tabGroup;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var tabGroupItemRef = useRef(null);
-  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
-  useEffect(function () {
-    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
-  }, [tabGroupItemRef]);
-  var onTabGroupClick = function onTabGroupClick(tabGroup) {
-    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
-    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
-  };
-  var keys = Object.keys(viewHandler.tabGroupState.allTabGroups);
-  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
-  var isLastItem = keys[keys.length - 1] == tabGroup.key;
-  return /*#__PURE__*/jsxs("div", {
-    className: classnames(wrapper, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined),
-    children: [/*#__PURE__*/jsxs("div", {
-      ref: tabGroupItemRef,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        onTabGroupClick(tabGroup);
-      },
-      className: classnames(wcTabGroupItem),
-      children: [!viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("span", {
-        className: classnames(wcStepNum),
-        children: tabGroup.posNr
-      }), t('configurator.' + tabGroup.title, tabGroup.title)]
-    }), !isLastItem && /*#__PURE__*/jsx("div", {
-      className: horizontalLine
-    })]
-  });
-};
-var index = observer(TabGroupItemHorizontaRalph);
-
-export { index as default };

package/build/esm/index-fb1a26d1.js

@@ -1,162 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-82c8e7d7.js';
-import { observer } from 'mobx-react-lite';
-import { useState, useEffect } from 'react';
-import { ContentItemComponent } from '@crystaldesign/content-item';
-import { getLogger, useDivaCore } from '@crystaldesign/diva-core';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-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 LOG = getLogger('Planner', 'InfoBox');
-var ContentItemWrapper = function ContentItemWrapper(_ref) {
-  var direction = _ref.direction,
-    mountElement = _ref.mountElement,
-    drawerStyle = _ref.drawerStyle;
-  var viewHandler = useViewHandler();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$actions = _useDivaCore.actions,
-    openDrawerMenu = _useDivaCore$actions.openDrawerMenu,
-    closeDrawerMenu = _useDivaCore$actions.closeDrawerMenu;
-  useEffect(function () {
-    if (viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId) {
-      setOpen(true);
-      var isMobile = viewHandler.getIsInMobileView();
-      var onClose = function onClose() {
-        closeDrawerMenu('content-item', true);
-        viewHandler.settingsState.setContentItemId();
-      };
-      var basketIds = viewHandler.settingsState.selectedArticles.map(function (article) {
-        return article.basketId;
-      }).flat();
-      var variantValues = viewHandler.divaWebPlanner.getVariantValues(basketIds);
-      var initialContext = variantValues.map(function (vv) {
-        return {
-          featureCodex: vv.OPT.startsWith('OPT') ? vv.OPT.substring(3) : vv.OPT,
-          selectedOptions: [vv.OPV]
-        };
-      });
-      var content = /*#__PURE__*/jsx(ContentItemComponent, {
-        onClose: onClose,
-        contentItemId: viewHandler.settingsState.contentItemId,
-        wrapperStyle: {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        headerWrapperStyle: {
-          borderTopRightRadius: '8px',
-          borderTopLeftRadius: '8px'
-        },
-        onContentItemLoaded: function onContentItemLoaded(title) {
-          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
-            id: viewHandler.settingsState.contentItemId,
-            title: title !== null && title !== void 0 ? title : undefined
-          });
-        },
-        params: {
-          initialContext: initialContext
-        },
-        onEvent: function onEvent(event) {
-          if (event.type == 'applyResults') {
-            var _viewHandler$divaWebP;
-            var results = event.payload;
-            var addOPT = !((_viewHandler$divaWebP = viewHandler.divaWebPlanner.actSet()) !== null && _viewHandler$divaWebP !== void 0 && _viewHandler$divaWebP.CatalogData.isIDMFormat);
-            if (addOPT) Object.entries(results).forEach(function (_ref2) {
-              var _ref3 = _slicedToArray(_ref2, 2),
-                optCodex = _ref3[0],
-                optValue = _ref3[1];
-              results["OPT".concat(optCodex)] = "OPV".concat(optValue);
-            });
-            viewHandler.paletteViewHandler.changeOnCheckoutConfig(results, basketIds);
-          } else if (event.type == 'onCancel' || event.type == 'onClose') {
-            onClose();
-          }
-        }
-      }, viewHandler.settingsState.contentItemId + viewHandler.settingsState.contentItemVisible);
-      if (isMobile) {
-        var _viewHandler$uiState$;
-        openDrawerMenu({
-          id: 'content-item',
-          content: content,
-          onClose: onClose,
-          open: true,
-          hideCloseButton: true,
-          showOverlay: true,
-          noModal: false,
-          direction: 'bottom',
-          mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
-          handleInternScroll: true
-        });
-      } else {
-        var _ref4;
-        openDrawerMenu({
-          id: 'content-item',
-          content: content,
-          onClose: onClose,
-          open: true,
-          hideCloseButton: true,
-          showOverlay: false,
-          noModal: true,
-          direction: direction,
-          mountElement: (_ref4 = mountElement !== null && mountElement !== void 0 ? mountElement : viewHandler.productState.productElement) !== null && _ref4 !== void 0 ? _ref4 : undefined,
-          handleInternScroll: true,
-          drawerStyle: _objectSpread(_objectSpread({
-            position: 'absolute',
-            zIndex: 550,
-            maxWidth: 500,
-            maxHeight: 600,
-            top: 0,
-            bottom: 'unset',
-            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
-          }, direction === 'right' ? {
-            borderTopLeftRadius: '16px',
-            borderBottomLeftRadius: '16px'
-          } : {
-            borderTopRightRadius: '16px',
-            borderBottomRightRadius: '16px'
-          }), drawerStyle),
-          wrapperStyle: _objectSpread({
-            zIndex: 550,
-            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
-          }, direction === 'right' ? {
-            borderTopLeftRadius: '16px',
-            borderBottomLeftRadius: '16px'
-          } : {
-            borderTopRightRadius: '16px',
-            borderBottomRightRadius: '16px'
-          })
-        });
-      }
-    } else if (open) {
-      closeDrawerMenu('content-item', true);
-      setTimeout(function () {
-        setOpen(false);
-      }, 400);
-    }
-  }, [viewHandler.settingsState.contentItemVisible, viewHandler.settingsState.contentItemId]);
-  return /*#__PURE__*/jsx(Fragment, {});
-};
-var ContentItemWrapper$1 = observer(ContentItemWrapper);
-
-export { ContentItemWrapper$1 as default };

package/build/esm/index-fd281264.js

@@ -1,72 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-82c8e7d7.js';
-import 'react';
-import { observer } from 'mobx-react-lite';
-import { useTranslation } from '@crystaldesign/diva-core';
-import classnames from 'classnames';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var styleIndicator = "styleIndicator-7N0ZJ";
-var mobile = "mobile-lyZP8";
-var styleIndicatorTextGroup = "styleIndicatorTextGroup-4bDAv";
-var styleIndicatorSubtitle = "styleIndicatorSubtitle-vVzrQ";
-var styleIndicatorLabel = "styleIndicatorLabel-8rCfE";
-var styleIndicatorImage = "styleIndicatorImage-DRo7q";
-var css_248z = ".styleIndicator-7N0ZJ {\n  border-radius: 14px !important;\n}\n\n.styleIndicator-7N0ZJ {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 8px;\n  background: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  -webkit-backdrop-filter: blur(8px);\n          backdrop-filter: blur(8px);\n  list-style: none;\n  cursor: default;\n  animation: styleIndicatorAppear-JwPL- 0.5s ease-out;\n}\n\n.mobile-lyZP8 {\n  border-radius: 10px !important;\n}\n\n.mobile-lyZP8 {\n  gap: 8px;\n  padding: 6px 12px 6px 6px;\n}\n\n.mobile-lyZP8 .styleIndicatorTextGroup-4bDAv {\n  gap: 0;\n}\n\n.mobile-lyZP8 .styleIndicatorSubtitle-vVzrQ {\n  font-size: 8px;\n}\n\n.mobile-lyZP8 .styleIndicatorLabel-8rCfE {\n  font-size: 11px;\n}\n\n.styleIndicatorImage-DRo7q {\n  width: 52px;\n  height: 40px;\n  border-radius: 6px;\n  overflow: hidden;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.mobile-lyZP8 .styleIndicatorImage-DRo7q {\n  width: 36px;\n  height: 28px;\n}\n\n.styleIndicatorImage-DRo7q img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.styleIndicatorTextGroup-4bDAv {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.styleIndicatorSubtitle-vVzrQ {\n  font-size: 10px;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #999;\n  color: var(--diva-theme-palette-text-secondary, #999);\n  white-space: nowrap;\n}\n\n.styleIndicatorLabel-8rCfE {\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--globalColor);\n  white-space: nowrap;\n}\n\n@keyframes styleIndicatorAppear-JwPL- {\n  0% {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  60% {\n    transform: scale(1.05);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n";
-styleInject(css_248z);
-
-var StyleIndicator = function StyleIndicator() {
-  var _aiState$enrichedAiRo;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var viewHandler = useViewHandler();
-  var aiState = viewHandler.aiState;
-  var configuratorStructureHandler = viewHandler.configuratorStructureHandler;
-  var step = configuratorStructureHandler.getConfigStepByKey('STYLE_CONSULTANT');
-  var selectedStyle = aiState.aiStyleKeyInitializedByEvent ? (_aiState$enrichedAiRo = aiState.enrichedAiRoomRenderings()) === null || _aiState$enrichedAiRo === void 0 ? void 0 : _aiState$enrichedAiRo.find(function (r) {
-    return r.key === aiState.aiSelectedStyleKey;
-  }) : undefined;
-  if (!selectedStyle || !step) return /*#__PURE__*/jsx(Fragment, {});
-  var isMobileOnly = viewHandler.getIsInMobileView() && !viewHandler.uiState.isTablet;
-  return /*#__PURE__*/jsxs("li", {
-    className: classnames(styleIndicator, isMobileOnly ? mobile : undefined),
-    onClick: function onClick() {
-      return viewHandler.navigateToConfigStep(step.configStep.key);
-    },
-    children: [/*#__PURE__*/jsx("div", {
-      className: styleIndicatorImage,
-      children: /*#__PURE__*/jsx("img", {
-        src: selectedStyle.image,
-        alt: selectedStyle.name
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: styleIndicatorTextGroup,
-      children: [/*#__PURE__*/jsx("span", {
-        className: styleIndicatorSubtitle,
-        children: t('configurator.inspiration.yourStyle', 'Dein Stil')
-      }), /*#__PURE__*/jsx("span", {
-        className: styleIndicatorLabel,
-        children: selectedStyle.name
-      })]
-    })]
-  });
-};
-var StyleIndicator$1 = observer(StyleIndicator);
-
-export { StyleIndicator$1 as default };

package/build/esm/index-fd89ffd2.js

@@ -1,41 +0,0 @@
-import { s as styleInject } from './index-82c8e7d7.js';
-import ProductHeader from './index-f65a539f.js';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import 'mobx-react-lite';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-import './index-ffdf58fb.js';
-import './index-fd281264.js';
-import '@crystaldesign/content-box';
-import './useCustomDimensions-42666d28.js';
-import '@crystaldesign/content-item';
-
-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 };

package/build/esm/index-fd920826.js

@@ -1,45 +0,0 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject } from './index-82c8e7d7.js';
-import 'react';
-import classnames from 'classnames';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import 'mobx-react-lite';
-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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-
-var wcFoldArrow = "wcFoldArrow-sIgSx";
-var wcCancelArrow = "wcCancelArrow-PZ86-";
-var wcOpenArrow = "wcOpenArrow-TZzZy";
-var wcClosedArrow = "wcClosedArrow-fWMiX";
-var css_248z = ".wcFoldArrow-sIgSx {\n  transition:\n    transform 0.35s ease,\n    width 0.5s ease,\n    height 0.5s ease;\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  background-size: contain;\n  right: 10px;\n  top: 7px;\n  width: 12px;\n  height: 12px;\n  transform: rotateZ(0deg);\n}\n.wcCancelArrow-PZ86- {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcCancelArrow-PZ86-:hover {\n  transform: rotateZ(90deg);\n}\n\n.wcOpenArrow-TZzZy {\n  transform: rotateZ(180deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcClosedArrow-fWMiX {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
-styleInject(css_248z);
-
-var _excluded = ["onClick", "iconAsDelete", "open"];
-var Arrow = function Arrow(_ref) {
-  var onClick = _ref.onClick,
-    iconAsDelete = _ref.iconAsDelete,
-    open = _ref.open,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx("span", {
-    onClick: onClick,
-    onTouchEnd: onClick,
-    className: classnames(wcFoldArrow, iconAsDelete ? wcCancelArrow : undefined, !iconAsDelete ? open ? wcOpenArrow : wcClosedArrow : undefined, props.className)
-  });
-};
-
-export { Arrow as default };

package/build/esm/index-fe30f278.js

@@ -1,44 +0,0 @@
-import { s as styleInject } from './index-82c8e7d7.js';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import 'mobx-react-lite';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var pdfButton = "pdfButton-4l4zL";
-var css_248z = ".pdfButton-4l4zL {\n  border-radius: 50%;\n  border: solid 2px var(--primaryColor);\n  width: 26px;\n  height: 26px;\n  cursor: pointer;\n  margin-left: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pdfButton-4l4zL img {\n  width: 80%;\n}\n";
-styleInject(css_248z);
-
-var pdfIcon = "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%22M20%202H8c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm0%2014H8V4h12v12zM4%206H2v14c0%201.1.9%202%202%202h14v-2H4V6zm12%206V9c0-.55-.45-1-1-1h-2v5h2c.55%200%201-.45%201-1zm-2-3h1v3h-1V9zm4%202h1v-1h-1V9h1V8h-2v5h1zm-8%200h1c.55%200%201-.45%201-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z%22%2F%3E%3C%2Fsvg%3E";
-
-var PDFButton = function PDFButton(_ref) {
-  var pdfUrl = _ref.pdfUrl;
-  return /*#__PURE__*/jsx("div", {
-    className: pdfButton,
-    onClick: function onClick() {
-      return window.open(pdfUrl, '_blank');
-    },
-    children: /*#__PURE__*/jsx("img", {
-      src: pdfIcon
-    })
-  });
-};
-
-export { PDFButton as default };

package/build/esm/index-ffdf58fb.js

@@ -1,57 +0,0 @@
-import { s as styleInject, u as useViewHandler, e as evalVisible, g as b, _ as _onClickCheckout, I as Icon } from './index-82c8e7d7.js';
-import 'react';
-import { observer } from 'mobx-react-lite';
-import classnames from 'classnames';
-import { useTranslation } from '@crystaldesign/diva-core';
-import StyleIndicator from './index-fd281264.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-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 'react-switch';
-import 'react-countup';
-
-var wcFunctionsToolbar = "wcFunctionsToolbar-33mKP";
-var mobile = "mobile--gThy";
-var css_248z = ".wcFunctionsToolbar-33mKP {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  margin-top: 0px;\n  padding-left: 0;\n  padding-left: initial;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.mobile--gThy.wcFunctionsToolbar-33mKP {\n  margin-top: 8px;\n}\n\n.wcFunctionsToolbar-33mKP li {\n  border-radius: var(--globalBorderRadius);\n  list-style: none;\n  transition: box-shadow 0.15s ease;\n  display: flex;\n  align-items: center;\n}\n.wcFunctionsToolbar-33mKP li:hover {\n  box-shadow: var(--boxShadowHover);\n}\n\n.wcFunctionsToolbar-33mKP li:active {\n  box-shadow: var(--boxShadowActive);\n}\n\n#wcSetSelector-zDZtd {\n  float: left;\n  padding-right: 1em;\n  padding-top: 0.5rem;\n}\n";
-styleInject(css_248z);
-
-var HeaderFunctions = function HeaderFunctions(props) {
-  var _viewHandler$uiState$;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsxs("ul", {
-    className: classnames(wcFunctionsToolbar, viewHandler.getIsInMobileView() ? mobile : undefined),
-    children: [/*#__PURE__*/jsx(StyleIndicator, {}), (_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.filter(function (b) {
-      return evalVisible(b, viewHandler, 'header');
-    }).map(function (b$1) {
-      return /*#__PURE__*/jsx("li", {
-        className: classnames(b),
-        onClick: function onClick() {
-          return _onClickCheckout(b$1, viewHandler, b$1.index, t);
-        },
-        children: /*#__PURE__*/jsx(Icon, {
-          checkoutButton: b$1,
-          size: 32,
-          showTitle: !viewHandler.getIsInMobileView() || viewHandler.uiState.isTablet
-        })
-      }, b$1.index);
-    })]
-  });
-};
-var Functions = observer(HeaderFunctions);
-
-export { Functions as default };