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

package/build/esm/index-e48ed829.js

@@ -0,0 +1,219 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-e0c6b93d.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-24d8e0ca.js';
+import Product from './index-26aebe9f.js';
+import Settings from './index-fd302a2d.js';
+import TabGroup from './index-b0057d01.js';
+import NavigationButtons from './index-9725001c.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import BasketActionStandard from './index-c0d1cf36.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-fa79d152.js';
+import ProgressBar from './index-44c7ba38.js';
+import BarrierActions from './index-b255978e.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import './index-8d5655d2.js';
+import './index-708ae258.js';
+import './index-eb99bd89.js';
+import './index-9cf5046a.js';
+import './index-0b46aa51.js';
+import 'react-laag';
+import './index-13b0e5e0.js';
+import './index-c7c91493.js';
+import './index-708c7617.js';
+import 'sift';
+import './index-efb65b32.js';
+import './index-2d8da945.js';
+import './index-3a238a3c.js';
+import './index-dbf2adc1.js';
+import './index.module-10abb965.js';
+import './index-16cea8f1.js';
+import 'react-switch';
+import './index-87ba3217.js';
+import './index-24438765.js';
+import './index-b852789e.js';
+import 'react-dropdown';
+import './index-2627e6d7.js';
+import './index-8998255e.js';
+import './index-079c09a5.js';
+import './index-3fcd95a0.js';
+import '@crystaldesign/content-box';
+import './index-8c7174d4.js';
+import './index-7405ba6a.js';
+import './index-f765cc7c.js';
+import './index-220bdc3e.js';
+import './index-4ff56657.js';
+import './index-1a3ab6be.js';
+import './index-5c7f568e.js';
+import './index-ac5f2159.js';
+import './index-c41dafb0.js';
+import './index-cbb2283d.js';
+import './index-1c751c5f.js';
+import './index-d244983e.js';
+import './index-31db0e80.js';
+import './index.module-4b3422bc.js';
+import './index-9b83c24b.js';
+import './index-5b45677f.js';
+import './index-7dda49b6.js';
+import './index-d13b4fed.js';
+import './index-537bb435.js';
+import './index-7bf1e29e.js';
+import './index-e562f45d.js';
+import './index.module-53c3e6b0.js';
+import './index-8c19880b.js';
+import './index-c7329cf6.js';
+import './index-61aefd6d.js';
+import './index-29a53e55.js';
+import './index-23cb107a.js';
+import './index-8d6d26a2.js';
+import './index-88db02ea.js';
+import './index-6395ea79.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-cdda2daa.js';
+import 'rc-slider/assets/index.css';
+import 'rc-slider';
+import './index-6e313f76.js';
+import './index-d1ad8349.js';
+import './index-b6fd3503.js';
+import './index-5387e911.js';
+import './index-f90a3b6a.js';
+import './index-f8662a02.js';
+import './index-1b15ac66.js';
+import './index-ab56eb05.js';
+import './index-cbb40f72.js';
+import './index-6414f7f2.js';
+import './index.module-743bc8b7.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 foldedup = "foldedup-Qqnox";
+var settingsHidden = "settings-hidden-NnHMW";
+var burgerVisible = "burger-visible-AFcf0";
+var isOnLastStep = "isOnLastStep-eAWSY";
+var progressBar = "progressBar-Izqk1";
+var actionOnTop = "action-on-top-UqyK5";
+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}\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  transition:\n    height 0.45s,\n    top 0.45s;\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: 0;\n  height: 40%;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-product-Ovdqk {\n  z-index: 1;\n}\n\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-product-Ovdqk {\n  height: calc(100% - 50px);\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\n  left: 0px;\n  top: calc(40% + 46px);\n  height: calc(60% - 46px - var(--configuratorActionHeight) - 6px);\n  width: 100%;\n}\n\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-settings-OLzdK {\n  top: 100%;\n}\n\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-settings-OLzdK {\n  top: 2.5rem;\n  height: calc(100% - 46px);\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\n  position: absolute;\n  left: 0px;\n  top: 40%;\n  width: calc(100% - 50px);\n  height: 46px;\n}\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ.burger-visible-AFcf0 {\n  left: 50px;\n  width: calc(100% - 50px - 50px);\n}\n\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-steps-1--dZ {\n  top: 0px;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\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.portrait-XiOPl.isOnLastStep-eAWSY .wcConfigurator-settings-actions-xqcr5,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-settings-actions-xqcr5 {\n  display: none !important;\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.portrait-XiOPl.isOnLastStep-eAWSY .wcConfigurator-action-ycd5b {\n  right: 0px;\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  display: flex;\n}\n\n.portrait-XiOPl .progressBar-Izqk1 {\n  position: absolute;\n  width: calc(100% - 50px);\n  height: 3px;\n  top: 40%;\n  left: 0;\n  z-index: 1000;\n  display: flex;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.action-on-top-UqyK5 {\n  position: absolute;\n  top: 40%;\n  right: 0;\n  width: 50px;\n  height: 46px;\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: 300;\n}\n\n.landscape-EyFBs,\n.portrait-XiOPl {\n  --configuratorActionHeight: 50px;\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(),
+    _useDivaCore$state = _useDivaCore.state,
+    headerInfos = _useDivaCore$state.headerInfos,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("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.configSettingsIsFoldedUp ? foldedup : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, viewHandler.actionButtonState.isOnLastStep ? isOnLastStep : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
+      children: [/*#__PURE__*/jsx(Product, {
+        className: wcConfiguratorProduct
+      }), !viewHandler.uiState.isInMobileView && /*#__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(BasketActionStandard, {
+          containerClassName: wcConfiguratorAction,
+          showCheckoutButtons: false
+        })]
+      }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(TabGroup, {
+          className: classnames(wcConfiguratorSteps, headerInfos.onlyBurgerVisibles || isFullscreenComponent ? burgerVisible : undefined),
+          showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+        }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(ProgressBar, {
+          className: progressBar
+        }), /*#__PURE__*/jsx(Settings, {
+          className: wcConfiguratorSettings
+        }), /*#__PURE__*/jsx(NavigationButtons, {
+          className: classnames(wcConfiguratorSettingsActions),
+          showCheckoutButtons: true
+        }), /*#__PURE__*/jsx(BasketActionStandard, {
+          containerClassName: wcConfiguratorAction,
+          showCheckoutButtons: viewHandler.uiState.isMobilePortrait
+        }), /*#__PURE__*/jsx(BasketMobile, {
+          className: actionOnTop
+        })]
+      })]
+    }), /*#__PURE__*/jsx(BarrierActions, {}), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#d60084',
+  '--secondaryColor': '#4b4b4b',
+  '--thirdColor': '#e5e5e5; ',
+  '--globalBorderRadius': '3px',
+  '--articlePosNrRadius': '50%',
+  '--articlePosNrSize': '1.5rem',
+  '--articlePosNrFontSize': '1.1rem',
+  '--galleryItemRadius': '50%',
+  '--galleryItemRowCount': '5',
+  '--galleryItemMargin': '0.5%',
+  '--galleryItemRowCountSmall': '6',
+  '--galleryItemMarginSmall': '0.3%',
+  '--galleryItemBorder': '0px',
+  '--galleryItemBorderColor': '#e8e9ed',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--lineHeight1': '20.8px',
+  '--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': '5px',
+  '--settingsScrollerPaddingLeft': '5px',
+  '--foldArrowMarginRight': 'calc(50% - 8px)',
+  '--configuratorActionHeight': '50px',
+  '--configuratorActionForthWidth': 'calc(100% - 56px)',
+  '--configuratorActionBackWidth': '50px'
+};
+var index = observer(Standard);
+
+export { index as default };

package/build/esm/index-e562f45d.js

@@ -0,0 +1,146 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-e0c6b93d.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-53c3e6b0.js';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-8c19880b.js';
+import MetaData from './index-c7329cf6.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import InfoIcon from './index-87ba3217.js';
+import PricePreview from './index-24438765.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var paletteItem = "palette-item-IUL0m";
+var wcVCodexText = "wcVCodexText-GN3-8";
+var sel = "sel-3ZIRz";
+var imageWrapper = "imageWrapper-QwsRE";
+var small = "small-Ynrzj";
+var wcImage = "wcImage-eveCj";
+var titleWrapper = "titleWrapper-89f-B";
+var title = "title-mFBM6";
+var big = "big-wADuy";
+var css_248z = "/*Size Normal */\n\n.palette-item-IUL0m {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.palette-item-IUL0m:active,\n.palette-item-IUL0m:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-GN3-8 {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.palette-item-IUL0m:hover .wcVCodexText-GN3-8,\n.sel-3ZIRz .wcVCodexText-GN3-8 {\n  display: block;\n}\n\n.imageWrapper-QwsRE {\n  border-radius: 50%;\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.palette-item-IUL0m:hover .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-3ZIRz.palette-item-IUL0m:hover .imageWrapper-QwsRE,\n.small-Ynrzj.sel-3ZIRz.palette-item-IUL0m:hover .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-eveCj {\n  width: calc(100% - 8px);\n  aspect-ratio: 1;\n  border: 4px white solid;\n  border-radius: 50%;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.sel-3ZIRz .wcImage-eveCj,\n.small-Ynrzj.sel-3ZIRz .wcImage-eveCj {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-NBrjx {\n  width: 80px;\n  height: 80px;\n}\n\n.titleWrapper-89f-B {\n  display: flex;\n  justify-content: center;\n  overflow: visible;\n  max-height: 32px;\n}\n\n.title-mFBM6 {\n  text-align: center;\n  width: 100%;\n  height: 32px;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  transition: height 0.3s ease-out;\n}\n\n.palette-item-IUL0m:hover .title-mFBM6,\n.palette-item-IUL0m:focus .title-mFBM6,\n.small-Ynrzj .palette-item-IUL0m:hover .title-mFBM6,\n.small-Ynrzj .palette-item-IUL0m:focus .title-mFBM6 {\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  -webkit-line-clamp: 30;\n  height: 50px;\n  z-index: 200;\n  background-color: var(--settingsBackgroundColor);\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  transition: height 0.3s ease-in;\n}\n\n/* Size Small */\n\n.small-Ynrzj .wcVCodexText-GN3-8 {\n  font-size: 12px;\n}\n\n.small-Ynrzj .title-mFBM6 {\n  font-size: 12px;\n  height: 14px;\n  -webkit-line-clamp: 1;\n}\n\n.small-Ynrzj .titleWrapper-89f-B {\n  max-height: 14px;\n}\n/* Size very Small */\n\n.very-small-XTQPS .wcVCodexText-GN3-8 {\n  font-size: 10px;\n}\n\n.very-small-XTQPS .title-mFBM6 {\n  font-size: 10px;\n  -webkit-line-clamp: 1;\n}\n\n.very-small-XTQPS .titleWrapper-89f-B {\n  max-height: 20px;\n}\n\n/* Size big */\n\n.big-wADuy .wcVCodexText-GN3-8 {\n  font-size: 15px;\n}\n\n.big-wADuy .title-mFBM6 {\n  font-size: 15px;\n  -webkit-line-clamp: 2;\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 Option = function Option(_ref) {
+  var _item$hexColor, _renderLayer;
+  var itemP = _ref.item,
+    type = _ref.type,
+    paletteId = _ref.paletteId,
+    hidePricePreview = _ref.hidePricePreview;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor) && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    id: item.codex,
+    className: classnames(type == 'small' ? small : undefined, type == 'big' ? big : undefined, paletteItem, item.sel ? sel : undefined),
+    onClick: onClick
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(imageWrapper),
+      children: [item.vCodex && /*#__PURE__*/jsx("div", {
+        className: classnames(wcVCodexText),
+        children: item.vCodex
+      }), item.image ? /*#__PURE__*/jsx("img", {
+        className: classnames(wcImage),
+        src: type != 'small' ? item.image.replace('_gal', '') : item.image
+      }) : /*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundColor: '#' + ((_item$hexColor = item.hexColor) !== null && _item$hexColor !== void 0 ? _item$hexColor : 'dfdfdf')
+        }
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item
+      }, item.codex)]
+    }), /*#__PURE__*/jsx("div", {
+      className: titleWrapper,
+      children: /*#__PURE__*/jsx("div", {
+        className: title,
+        dangerouslySetInnerHTML: {
+          __html: item.text
+        }
+      })
+    }), item.doShowFav && /*#__PURE__*/jsx("div", {
+      className: item.isFav ? wcFavoriteSel : wcFavorite,
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+      }
+    }), /*#__PURE__*/jsx(MetaData, {
+      style: {
+        position: 'relative',
+        "float": 'left',
+        display: 'none'
+      },
+      metaData: item.metaData,
+      visible: [metaDataVisible, setMetaDataVisible]
+    }, item.codex), !hidePricePreview && item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+      asyncPricePreview: item.pricePreviewPromise,
+      sel: item.sel,
+      style: type == 'small' ? {
+        fontSize: 9
+      } : undefined
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.text + (item.freeText ? item.freeText : ''),
+      hexColor: item.hexColor,
+      desciption: metaDataVisible,
+      pricePreviewPromise: item.pricePreviewPromise,
+      image: item.image,
+      layerProps: layerProps
+    }, item.codex)))]
+  }));
+};
+var GalleryText = observer(Option);
+
+export { GalleryText as default };

package/build/esm/index-e96ec6f9.js

@@ -0,0 +1,185 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-e0c6b93d.js';
+import { useState, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import Collapsible from 'react-collapsible';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-87ba3217.js';
+import PricePreview from './index-24438765.js';
+import { g as getKey } from './index-708c7617.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+import 'sift';
+import './index-efb65b32.js';
+import './index-708ae258.js';
+import './index-2d8da945.js';
+import './index-3a238a3c.js';
+import './index-dbf2adc1.js';
+import './index.module-10abb965.js';
+import './index-16cea8f1.js';
+import 'react-switch';
+import './index-b852789e.js';
+import 'react-dropdown';
+import './index-2627e6d7.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-8998255e.js';
+import './index-079c09a5.js';
+import './index-3fcd95a0.js';
+import '@crystaldesign/content-box';
+import './index-8c7174d4.js';
+import './index-7405ba6a.js';
+import './index-f765cc7c.js';
+import './index-220bdc3e.js';
+import './index-4ff56657.js';
+import './index-1a3ab6be.js';
+import './index-5c7f568e.js';
+import './index-ac5f2159.js';
+import './index-c41dafb0.js';
+import './index-cbb2283d.js';
+import './index-1c751c5f.js';
+import './index-d244983e.js';
+import './index-31db0e80.js';
+import './index.module-4b3422bc.js';
+import './index-9b83c24b.js';
+import './index-5b45677f.js';
+import './index-7dda49b6.js';
+import './index-d13b4fed.js';
+import './index-537bb435.js';
+import './index-7bf1e29e.js';
+import './index-e562f45d.js';
+import './index.module-53c3e6b0.js';
+import 'react-laag';
+import './index-8c19880b.js';
+import './index-c7329cf6.js';
+import './index-61aefd6d.js';
+import './index-29a53e55.js';
+import './index-23cb107a.js';
+import './index-8d6d26a2.js';
+import './index-88db02ea.js';
+import './index-6395ea79.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-cdda2daa.js';
+import 'rc-slider/assets/index.css';
+import 'rc-slider';
+import './index-6e313f76.js';
+import './index-d1ad8349.js';
+
+var wrapper = "wrapper-QG-9Z";
+var wcGroupedContainer = "wcGroupedContainer-jhNWc";
+var open = "open-tiFs0";
+var wcPaletteHeader = "wcPaletteHeader-TmsT4";
+var wcSizeGroupHeader = "wcSizeGroupHeader-40Cqv";
+var wcGroupHeaderTitle = "wcGroupHeaderTitle-5oMvI";
+var wcFoldingArrow = "wcFoldingArrow-DFXd-";
+var wcGroupOpen = "wcGroupOpen-6Lf4-";
+var css_248z = ".wrapper-QG-9Z {\n  width: 100%;\n}\n\n.wcConfigurator-settings-j6rpE .wcGroupedContainer-jhNWc {\n  transition: all 0.35s ease;\n  box-sizing: content-box;\n  overflow: visible;\n  display: inline-block;\n  width: 100%;\n}\n\n.open-tiFs0 .Collapsible__contentOuter {\n  overflow: visible !important;\n}\n\n.wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv {\n  width: 98%;\n  height: 34px;\n  border-bottom: 1px solid #dfdfdf;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  margin-left: 1%;\n  margin-right: 1%;\n  align-items: center;\n}\n.wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv:hover {\n  z-index: 200;\n}\n\n.wcGroupHeaderTitle-5oMvI {\n  font-size: 15px;\n  font-weight: 200;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-text-stroke: 0.4px;\n  width: calc(100% - 32px);\n  padding-top: 6px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n}\n\n.wcGroupHeaderTitle-5oMvI:hover {\n  z-index: 200;\n}\n\n.wcPaletteHeader-TmsT4 .wcFoldingArrow-DFXd- {\n  margin: 0px 6px;\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  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n}\n\n.wcGroupOpen-6Lf4- .wcPaletteHeader-TmsT4 .wcFoldingArrow-DFXd- {\n  transform: rotateZ(180deg);\n}\n";
+styleInject(css_248z);
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    PaletteComponent = _ref.PaletteComponent,
+    itemPalette = _ref.itemPalette,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useState = useState(group.isFolded),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentHidden = _useState2[0],
+    setContentHidden = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentVisible = _useState4[0],
+    setContentVisible = _useState4[1];
+  var _useState5 = useState(!group.isFolded),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
+  useEffect(function () {
+    if (!isOpen && !group.isFolded) {
+      setTimeout(function () {
+        return setIsOpen(!group.isFolded);
+      }, 400);
+    } else {
+      setIsOpen(!group.isFolded);
+    }
+    if (!contentHidden && group.isFolded) {
+      setTimeout(function () {
+        return setContentHidden(group.isFolded);
+      }, 200);
+    } else {
+      setContentHidden(group.isFolded);
+    }
+    if (group.isFolded) {
+      setContentVisible(false);
+    } else {
+      setTimeout(function () {
+        return setContentVisible(true);
+      }, 300);
+    }
+  }, [group.isFolded]);
+  var name = group.name !== 'none' ? group.name : t('configurator.other');
+  var title = name + (group.parentName && group.parentName != itemPalette.name ? ' (' + group.parentName + ')' : '');
+  var pricePreviewPromise = group.items[0].pricePreviewPromise;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, contentVisible ? open : undefined),
+    id: title,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      className: wcGroupedContainer,
+      open: isOpen,
+      contentInnerClassName: contentInnerClassName,
+      handleTriggerClick: function handleTriggerClick() {
+        if (group.isFolded) viewHandler.settingsState.openGroup(itemPalette.id, group.key, viewHandler.paletteViewHandler.isGroupFolded(itemPalette.id));else {
+          viewHandler.settingsState.closeGroup(itemPalette.id, group.key);
+        }
+      },
+      triggerOpenedClassName: wcGroupOpen,
+      trigger: /*#__PURE__*/jsxs("div", {
+        className: classnames(wcPaletteHeader, wcSizeGroupHeader),
+        children: [/*#__PURE__*/jsx("div", {
+          className: wcFoldingArrow
+        }), group.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+          item: group,
+          style: {
+            zIndex: 100,
+            margin: '0px 10px',
+            position: 'relative'
+          }
+        }, group.key), /*#__PURE__*/jsxs("div", {
+          className: wcGroupHeaderTitle,
+          children: [title, pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+            asyncPricePreview: pricePreviewPromise
+          })]
+        })]
+      }),
+      easing: "ease",
+      children: !contentHidden && group.items.map(function (item, i) {
+        return /*#__PURE__*/jsx(PaletteComponent, {
+          paletteType: itemPalette.type,
+          paletteId: itemPalette.id,
+          item: item,
+          hidePricePreview: true
+        }, getKey(item));
+      })
+    })
+  }, title);
+};
+var Group$1 = observer(Group);
+
+export { Group$1 as default };

package/build/esm/index-eb99bd89.js

@@ -0,0 +1,55 @@
+import { s as styleInject, u as useViewHandler } from './index-e0c6b93d.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfigSingleDiv = "wcConfigSingleDiv-Vcdzw";
+var wcConfigSingleText = "wcConfigSingleText-iKpxJ";
+var css_248z = "#wcConfigSingleCheckbox-FeN-P input {\n  zoom: 1.2;\n  transform: scale(2);\n  -ms-transform: scale(2);\n  -webkit-transform: scale(1.2);\n  -o-transform: scale(2);\n  -moz-transform: scale(2);\n  transform-origin: 0 0;\n  -ms-transform-origin: 0 0;\n  -webkit-transform-origin: 0 0;\n  -o-transform-origin: 0 0;\n  -moz-transform-origin: 0 0;\n  margin: 3px 10px 3px 10px;\n}\n.wcConfigSingleDiv-Vcdzw {\n  min-height: 26px;\n  margin-top: 2px;\n  width: auto;\n}\n.wcConfigSingleText-iKpxJ {\n  line-height: 24px;\n}\n";
+styleInject(css_248z);
+
+var SettingsConfigSingle = function SettingsConfigSingle(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var configSingleIsChanged = function configSingleIsChanged() {
+    viewHandler.paletteViewHandler.configSingleIsChanged();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: wcConfigSingleDiv,
+    id: "wcConfigSingleCheckbox",
+    children: [/*#__PURE__*/jsx("input", {
+      style: {
+        "float": 'left'
+      },
+      type: "checkbox",
+      checked: viewHandler.settingsState.doConfigSingle,
+      onClick: configSingleIsChanged
+    }), /*#__PURE__*/jsx("a", {
+      className: wcConfigSingleText,
+      onClick: configSingleIsChanged,
+      children: t('configurator.CONFIG_SINGLE')
+    })]
+  });
+};
+var SettingsConfigSingle$1 = observer(SettingsConfigSingle);
+
+export { SettingsConfigSingle$1 as default };