@crystaldesign/diva-web-planner-react 26.10.0-beta.9 → 26.11.0-beta.1

package/build/esm/index-08d97746.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-899b8922.js';
+import SummaryOptionTree from './index-5ad09ef7.js';
+import SummaryArticles from './index-61b4ebd3.js';
+import SettingsItemAccessoireTemplate from './index-afe33b8f.js';
+import Gallery from './index-69650205.js';
+import SettingsItemDefaultTemplate from './index-9562a9d8.js';
+import Range from './index-f3bca3be.js';
+import SettingsItemRoomTemplate from './index-6fe3ff14.js';
+import ViewPoint from './index-8d52e836.js';
+import NumberBox from './index-1487d493.js';
+import PlannerSwitch from './index-a7de9a70.js';
+import Varaint from './index-031864a2.js';
+import GalleryText from './index-bd8d0479.js';
+import 'react';
+import GalleryText2 from './index-e7790e24.js';
+import FaceLift from './index-1010faf1.js';
+import PlannerOverviewItem from './index-0908ac1e.js';
+import Article from './index-fdd2f2b6.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+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 'react-laag';
+import './index.module-41cf846f.js';
+import './index-1e23c982.js';
+import './index-37df8f9a.js';
+import './index-83d6bb83.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index.module-15c22604.js';
+import './index-102ef56e.js';
+import './index-1d2d7fb6.js';
+import './index-84657f6d.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+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 itemPaletteTypeComponentMap = {
+  ART: Article,
+  ART_2: FaceLift,
+  'PLANNER_2.0': PlannerOverviewItem,
+  PLANNERSWITCH: PlannerSwitch,
+  ACC: SettingsItemAccessoireTemplate,
+  ACC_CONFIG: SettingsItemAccessoireTemplate,
+  VERY_SMALL: SettingsItemDefaultTemplate,
+  SMALL: SettingsItemDefaultTemplate,
+  GAL_GROUP_DROPDOWN: function GAL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "normalimage.png"
+    }, props));
+  },
+  GAL_SMALL_GROUP_DROPDOWN: function GAL_SMALL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL: Gallery,
+  GAL_SMALL: Gallery,
+  GAL_BIG: Gallery,
+  RANGE: Range,
+  NUMBER: NumberBox,
+  SLIDER: function SLIDER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE: function MULTI_TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE_ROUND: function MULTI_TOGGLE_ROUND() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO: function RADIO() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO_LIST: function RADIO_LIST() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SUMMARY_ARTICLES: SummaryArticles,
+  SUMMARY_OPTIONTREE: SummaryOptionTree,
+  VARIANTS: Varaint,
+  STATICROOM: SettingsItemRoomTemplate,
+  VIEWPOINT: ViewPoint,
+  DROPDOWN_TEXT: function DROPDOWN_TEXT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DROPDOWN_IMAGE: function DROPDOWN_IMAGE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE: function TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_HEADER: function TOGGLE_HEADER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_NAME: function TOGGLE_NAME() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DOOR_PLANNER: function DOOR_PLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TEXTBOX: function TEXTBOX() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SHELFPLANNER: function SHELFPLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PRODUCTS: function PRODUCTS() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PROMOTED: function PROMOTED() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  CHECKOUT: function CHECKOUT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  STYLE_CONSULTANT: function STYLE_CONSULTANT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  GAL_TEXT_2: function GAL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT_2: function GAL_BIG_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT_2: function GAL_SMALL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_TEXT: function GAL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT: function GAL_BIG_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT: function GAL_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_VERY_SMALL_TEXT: function GAL_VERY_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "verysmall"
+    }, props));
+  }
+};
+
+export { itemPaletteTypeComponentMap as default };

package/build/esm/index-0908ac1e.js

@@ -0,0 +1,134 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler, G as GenericToolTip } from './index-899b8922.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import InfoIcon from './index-37df8f9a.js';
+import { A as AddElement, a as articleItem, s as small, b as sel, i as imageWrapper, w as wcImage, t as titleWrapper, c as title, d as trashIcon, e as wrapper, m as mobile, f as tablet } from './index-84657f6d.js';
+import { useHover, useLayer } from 'react-laag';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+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';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+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 PlannerOverviewItem = function PlannerOverviewItem(_ref) {
+  var _viewHandler$settings, _viewHandler$settings2, _renderLayer, _item$longDescription;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var isSelected = item.basketId == ((_viewHandler$settings = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.basketId) && ((_viewHandler$settings2 = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.mode) != 'add';
+  var onClick = function onClick() {
+    viewHandler.viewPlannerHandler.onElementSelected(item.setId, item.id);
+    viewHandler.paletteViewHandler.elementOverviewSelectionChanged(true, undefined, item, 'replace', true);
+  };
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 2000,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var isSmall = viewHandler.settingsState.isScrollingDown;
+  if (item.basketId == 'add') {
+    return /*#__PURE__*/jsx(AddElement, {
+      item: item
+    });
+  }
+  if (item.isAccessoire) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    className: classnames(wrapper, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
+    onClick: onClick
+  }, triggerProps), hoverProps), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      id: item.basketId,
+      className: classnames(articleItem, isSmall ? small : undefined, isSelected ? sel : undefined),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classnames(imageWrapper),
+        children: [item.image && /*#__PURE__*/jsx("img", {
+          className: classnames(wcImage),
+          src: item.image.replace('_gal', '').replace('_low', '')
+        }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+          item: item,
+          style: _objectSpread({
+            bottom: isSmall ? '-1px' : '-7px',
+            right: '-8px'
+          }, isSmall ? {
+            '--infoIconSize': '16px'
+          } : {})
+        }, item.codex)]
+      }), /*#__PURE__*/jsx("div", {
+        className: titleWrapper,
+        children: /*#__PURE__*/jsx("div", {
+          className: title,
+          dangerouslySetInnerHTML: {
+            __html: item.title
+          }
+        })
+      }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+        text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.title,
+        codex: item.articleCodex,
+        image: item.image,
+        layerProps: layerProps,
+        price: item.price
+      }, item.codex))), /*#__PURE__*/jsx("div", {
+        className: trashIcon,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          viewHandler.viewPlannerHandler.onElementDeleted(item.setId, item.id);
+        },
+        children: /*#__PURE__*/jsx("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: viewHandler.getIsInMobileView() ? '12' : '15',
+          height: viewHandler.getIsInMobileView() ? '12' : '15',
+          viewBox: "0 -960 960 960",
+          fill: "var(--trash-color)",
+          children: /*#__PURE__*/jsx("path", {
+            d: "m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
+          })
+        })
+      })]
+    })
+  }));
+};
+var PlannerOverviewItem$1 = observer(PlannerOverviewItem);
+
+export { PlannerOverviewItem$1 as default };

package/build/esm/index-0b387613.js

@@ -0,0 +1,238 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-82a28d6e.js';
+import Product from './index-15d52408.js';
+import Settings from './index-7e78bbac.js';
+import TabGroup from './index-f930afa0.js';
+import NavigationButtons from './index-c8de3993.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import BasketAction from './index-cdb372f1.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-40ca5eeb.js';
+import ProgressBar from './index-33722dfd.js';
+import { jsxs, Fragment, 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';
+import './index-e0900a31.js';
+import './index-180189d9.js';
+import './index-07075961.js';
+import './index-7ae6b393.js';
+import './index-4a1aeedd.js';
+import 'sift';
+import './index-84f83c67.js';
+import './index-a784e48f.js';
+import './index-ada3c152.js';
+import './index-8b6d1b2c.js';
+import './index.module-ce9cbd44.js';
+import './index-37df8f9a.js';
+import './index-83d6bb83.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-869d65ec.js';
+import 'react-dropdown';
+import './index-f74add7e.js';
+import './index-624149c8.js';
+import './index-dc3778bc.js';
+import './index-ead3c18e.js';
+import '@crystaldesign/content-box';
+import './index-71c05fb2.js';
+import './index-45ae8ca7.js';
+import './index-985d0ac1.js';
+import './index-8ce6adb9.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-3fb76e70.js';
+import './index-73c75e94.js';
+import './index-08d97746.js';
+import './index-5ad09ef7.js';
+import './index-61b4ebd3.js';
+import './index-afe33b8f.js';
+import './index-69650205.js';
+import 'react-laag';
+import './index.module-41cf846f.js';
+import './index-1e23c982.js';
+import './index-9562a9d8.js';
+import './index-f3bca3be.js';
+import './index-6fe3ff14.js';
+import './index-8d52e836.js';
+import './index.module-15c22604.js';
+import './index-1487d493.js';
+import './index-102ef56e.js';
+import './index-a7de9a70.js';
+import './index-031864a2.js';
+import './index-bd8d0479.js';
+import './index-1d2d7fb6.js';
+import './index-e7790e24.js';
+import './index-1010faf1.js';
+import './index-0908ac1e.js';
+import './index-84657f6d.js';
+import './index-fdd2f2b6.js';
+import './index-d8f30b62.js';
+import './index-2e12b9e1.js';
+import 'rc-slider';
+import './index-16fe405b.js';
+import './index-e8eb5116.js';
+import './index-a52f90e6.js';
+import './index-da2a2a8b.js';
+import './index-7c7b6fc7.js';
+import 'react-confetti-explosion';
+import './index-17ba7b38.js';
+import './index-99c94447.js';
+import './index-048552f0.js';
+import 'react-qr-code';
+import './index-eb30bc4d.js';
+import './useCustomDimensions-f2bb4edd.js';
+import './index-0ec473cc.js';
+import './ussIsSticky-6dac519b.js';
+import './index-85269def.js';
+import './index-10cd9e60.js';
+import './index-ac5a2704.js';
+import './index.module-25cdca01.js';
+import './index-f45ab225.js';
+import './index-46e9d390.js';
+import './index-89fd7133.js';
+import './index-52eb8599.js';
+import './index-2a46675e.js';
+import './index-bf19aa67.js';
+import './index.module-5bcecdc6.js';
+import './index-c7d3af7e.js';
+import './index-854179de.js';
+import './index-3ee68248.js';
+import './index-e260a81a.js';
+import '@mui/material';
+import './index-5ec31db5.js';
+import './index-0029288b.js';
+import './index-d6856cc5.js';
+import './index-74d46a1a.js';
+import './index-9663c0f2.js';
+import './index.module-76c17bd6.js';
+
+var wcConfigurator = "wcConfigurator-YOuy8";
+var landscape = "landscape-EyFBs";
+var portrait = "portrait-XiOPl";
+var wcConfiguratorProduct = "wcConfigurator-product-Ovdqk";
+var minExpanded = "min-expanded-aFvtw";
+var wcConfiguratorSettingsWrapper = "wc-configurator-settings-wrapper-ymkif";
+var expanded = "expanded-LXnio";
+var maxExpanded = "max-expanded-Q2hOy";
+var wcConfiguratorSettings = "wcConfigurator-settings-OLzdK";
+var wcConfiguratorSteps = "wcConfigurator-steps-1--dZ";
+var closeButtonVisible = "close-button-visible-y3GY8";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-xqcr5";
+var wcConfiguratorAction = "wcConfigurator-action-ycd5b";
+var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-mgMRu";
+var tablet = "tablet-W9NOW";
+var css_248z = ".wcConfigurator-YOuy8 {\n  position: relative;\n\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n  overscroll-behavior-y: contain;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-YOuy8 *,\n.wcConfigurator-YOuy8 *::before,\n.wcConfigurator-YOuy8 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-YOuy8.landscape-EyFBs {\n  height: 100%;\n  width: 100%;\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl {\n  height: 100%;\n  width: 100%;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-Ovdqk {\n  position: absolute;\n  width: 63%;\n  max-width: calc(100% - 564px);\n  left: 0px;\n  top: 0;\n  height: 100%;\n}\n.min-expanded-aFvtw .wcConfigurator-product-Ovdqk {\n  width: calc(100% - 128px - 16px);\n  max-width: none;\n  max-width: initial;\n}\n\n.wc-configurator-settings-wrapper-ymkif {\n  position: absolute;\n  z-index: 600;\n  height: calc(100% - 32px);\n  width: calc(37% - 16px);\n  min-width: 550px;\n  right: 0;\n  padding: 16px 16px 16px 0;\n  background-color: var(--settingsBackgroundColor);\n  transition: width 0.45s;\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\n}\n\n.expanded-LXnio .wc-configurator-settings-wrapper-ymkif {\n  width: 70%;\n}\n\n.min-expanded-aFvtw .wc-configurator-settings-wrapper-ymkif {\n  width: calc(128px);\n  min-width: 0;\n  min-width: initial;\n}\n.max-expanded-Q2hOy .wc-configurator-settings-wrapper-ymkif {\n  width: calc(100% - 16px);\n  z-index: 801;\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-OLzdK {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n\n  overflow-y: hidden;\n  overflow-x: hidden;\n  overflow: visible;\n  z-index: 100;\n  right: calc(128px + 4px + 16px);\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-1--dZ {\n  position: absolute;\n  z-index: 300;\n  right: 16px;\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n  width: 128px;\n}\n.close-button-visible-y3GY8 .wcConfigurator-steps-1--dZ {\n  top: 80px;\n  height: calc(100% - 32px - 4px - 50px - 64px);\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-xqcr5 {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n  height: 50px;\n  right: calc(128px + 4px + 16px);\n  bottom: 16px;\n  z-index: 200;\n}\n\n.min-expanded-aFvtw .wcConfigurator-settings-actions-xqcr5 {\n  overflow: hidden;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-ycd5b {\n  position: absolute;\n  width: 128px;\n  height: 50px;\n  right: 16px;\n  bottom: 16px;\n  z-index: 200;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-LXnio .wcConfigurator-settings-OLzdK,\n.max-expanded-Q2hOy .wcConfigurator-settings-OLzdK,\n.expanded-LXnio .wcConfigurator-settings-actions-xqcr5,\n.max-expanded-Q2hOy .wcConfigurator-settings-actions-xqcr5 {\n  width: calc(100% - 128px - 16px - 4px);\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl,\n.landscape-EyFBs.wcConfigurator-YOuy8 {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-EyFBs .wcConfigurator-product-Ovdqk {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-EyFBs .wcConfigurator-settings-OLzdK {\n  display: none;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\n} */\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-EyFBs .wcConfigurator-steps-1--dZ {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-EyFBs .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-EyFBs .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-XiOPl .wcConfigurator-product-Ovdqk {\n  top: 0px;\n  left: 0px;\n  height: var(--configuratorProductHeight);\n  transition: height 0.2s ease-out;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\n  left: 0px;\n  top: auto;\n  top: initial;\n  transition: height 0.2s ease-out;\n  bottom: 0px;\n  width: 100%;\n  z-index: 1000;\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\n  position: relative;\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  transition: none 0s ease 0s;\n  transition: initial;\n  flex-grow: 10;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-XiOPl .wcConfigurator-action-ycd5b,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-mgMRu {\n  position: relative;\n  transition: bottom 0.2s ease-out;\n  width: 50px;\n  height: var(--configuratorTabGroupHeight);\n  background: no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 600;\n}\n\n.landscape-EyFBs,\n.portrait-XiOPl {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-W9NOW {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\n}\n\n.wcConfigurator-YOuy8 ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
+styleInject(css_248z);
+
+var Standard = function Standard(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        id: "wcConfigurator-wrapper",
+        ref: function ref(wrapperRef) {
+          return viewHandler.uiState.setWrapperRef(wrapperRef);
+        },
+        style: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          bottom: 0,
+          left: 0
+        },
+        children: [/*#__PURE__*/jsx(Product, {
+          className: wcConfiguratorProduct
+        }), viewHandler.uiState.isInMobileView ? /*#__PURE__*/jsx(Settings, {
+          tabgroupElement: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(TabGroup, {
+              className: wcConfiguratorSteps,
+              showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+            }), /*#__PURE__*/jsx(BasketMobile, {
+              className: mobileActionAfterTabgroups
+            }), /*#__PURE__*/jsx(ProgressBar, {})]
+          })
+        }) : /*#__PURE__*/jsxs("div", {
+          className: wcConfiguratorSettingsWrapper,
+          children: [/*#__PURE__*/jsx(TabGroup, {
+            className: wcConfiguratorSteps
+          }), /*#__PURE__*/jsx(Settings, {
+            className: wcConfiguratorSettings
+          }), /*#__PURE__*/jsx(NavigationButtons, {
+            className: wcConfiguratorSettingsActions,
+            showCheckoutButtons: true
+          }), /*#__PURE__*/jsx(BasketAction, {
+            containerClassName: wcConfiguratorAction,
+            showCheckoutButtons: false
+          })]
+        })]
+      })
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#d60084',
+  '--secondaryColor': '#4b4b4b',
+  '--thirdColor': '#e5e5e5e5',
+  '--articlePosNrRadius': '50%',
+  '--articlePosNrSize': '1.5rem',
+  '--galleryItemRadius': '50%',
+  '--galleryItemRowCount': '5',
+  '--galleryItemMargin': '0.5%',
+  '--galleryItemRowCountSmall': '6',
+  '--galleryItemMarginSmall': '0.3%',
+  '--galleryItemBorder': '0px',
+  '--galleryItemBorderColor': '#e8e9ed',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--fontWeight1': '300',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--tabGroupBackground': 'unset',
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.9)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '12px',
+  '--settingsScrollerPaddingLeft': '12px',
+  '--configuratorActionHeight': '50px',
+  '--configuratorActionForthWidth': 'calc(100% - 56px)',
+  '--configuratorActionBackWidth': '50px',
+  '--globalBorderRadius': '3px',
+  '--mobile-tabgroup-drawer-border-radius': '12px',
+  '--buttons-border-radius': '8px'
+};
+var index = observer(Standard);
+
+export { index as default };

package/build/esm/index-0c7b8562.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-899b8922.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+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 ProductFooter = function ProductFooter(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductFooter"
+  }));
+};
+
+export { ProductFooter as default };

package/build/esm/index-0db57583.js

@@ -0,0 +1,48 @@
+import './index-899b8922.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } 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/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 BoxCopy = function BoxCopy(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps,
+    invertLeftRight = _ref.invertLeftRight;
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), {
+        x: item.type == 'BoxCopyLeft' ? -1 : item.type == 'BoxCopyRight' ? 1 : 0,
+        y: item.type == 'BoxCopyTop' ? 1 : 0,
+        z: 0
+      });
+    },
+    style: {
+      left: rect.left + '%',
+      top: 100 - rect.top + '%'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.copy.BoxPlannerCopy.copyGlobal, item.type == 'BoxCopyLeft' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : undefined, item.type == 'BoxCopyTop' ? plannerUIProps.classes.copy.BoxPlannerCopy.copyTop : undefined, item.type == 'BoxCopyRight' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : undefined)
+  });
+};
+var BoxCopy$1 = observer(BoxCopy);
+
+export { BoxCopy$1 as default };