@crystaldesign/diva-web-planner-react 26.6.6 → 26.6.7

package/build/esm/index-330727a6.js

@@ -0,0 +1,117 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import { createElement } from 'react';
+import Group from './index-3edfbbbe.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-collapsible';
+import './index-f78afc73.js';
+import './index-56ca7f75.js';
+import 'sift';
+import './index-71209997.js';
+import './index-2701173b.js';
+import './index-a08d6991.js';
+import './index-2a162372.js';
+import './index.module-40da725d.js';
+import './index-b9b51763.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-ad12fe99.js';
+import 'react-dropdown';
+import './index-75415572.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-31a2fa01.js';
+import './index-fde56e5f.js';
+import './index-d49b3bb6.js';
+import '@crystaldesign/content-box';
+import './index-5a01f5db.js';
+import './index-249e8a6a.js';
+import './index-55488ec5.js';
+import './index-79de39ed.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-43bb0ce2.js';
+import './index-5970b652.js';
+import './index-d49f85b7.js';
+import './index-b7a79f8e.js';
+import './index-5fad9992.js';
+import './index-91ea2596.js';
+import './index-890c9736.js';
+import 'react-laag';
+import './index.module-b01124e7.js';
+import './index-8a501200.js';
+import './index-aa269912.js';
+import './index-59838b9b.js';
+import './index-704fe22f.js';
+import './index-abd7cb98.js';
+import './index.module-d235f9b8.js';
+import './index-c5c0072b.js';
+import './index-2c45f4d9.js';
+import './index-644e2e45.js';
+import './index-a2195d9f.js';
+import './index-5676740f.js';
+import './index-dd70b724.js';
+import './index-d9f47727.js';
+import './index-4230c585.js';
+import './index-4801ecff.js';
+import './index-3c86a01f.js';
+import './index-49fda74d.js';
+import './index-c05ebc09.js';
+import './index-ff12da0b.js';
+import 'rc-slider';
+import './index-63d75fa2.js';
+import './index-72d71409.js';
+import './index-a6aa095c.js';
+import './index-9a6634be.js';
+import './index-967212ed.js';
+import 'react-confetti-explosion';
+import './index-2100307b.js';
+import './index-33341010.js';
+import './index-ee669dff.js';
+import 'react-qr-code';
+import './index-5b581fa5.js';
+import './useCustomDimensions-6b7cb8ec.js';
+import './index-109182d7.js';
+import './ussIsSticky-1916bdba.js';
+import './index-039c79b0.js';
+import './index-c6d0ddb7.js';
+import './index-eaf43d57.js';
+import './index.module-6f10ce99.js';
+import './index-a71bb1ad.js';
+import './index-c41b8790.js';
+import './index-ea1a66c8.js';
+import './index-83f23ac9.js';
+
+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 PaletteGroup = function PaletteGroup(props) {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: props.groups.map(function (group) {
+      return /*#__PURE__*/createElement(Group, _objectSpread(_objectSpread({}, props), {}, {
+        key: group.key,
+        group: group
+      }));
+    })
+  });
+};
+var StandradGroup = observer(PaletteGroup);
+
+export { StandradGroup as default };

package/build/esm/index-33341010.js

@@ -0,0 +1,202 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef, useEffect } from 'react';
+import { useLayer } from 'react-laag';
+import Tooltip from './index-ee669dff.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import FullscreenAr, { FullscreenArHeader } from './index-5b581fa5.js';
+import QRCode from 'react-qr-code';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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 'react-switch';
+import 'react-countup';
+
+var _excluded = ["Button", "dontOpenModal"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
+  var Button = _ref.Button,
+    dontOpenModal = _ref.dontOpenModal,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    openDrawerMenu = _useDivaCore.actions.openDrawerMenu,
+    _useDivaCore$state = _useDivaCore.state,
+    isMobile = _useDivaCore$state.isMobile,
+    isTablet = _useDivaCore$state.dimensions.isTablet;
+  //tooltip is going to close itself by timer
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoClose = _useState2[0],
+    setAutoClose = _useState2[1];
+  var autoCloseTimeout = useRef();
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openDrawer = _useState4[0],
+    setOpenDrawer = _useState4[1];
+  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
+  var openAr = isMobile || isTablet;
+  //if the viewer is in an iframe (pfister) we dont want to open the modal for the arcombi
+  var shouldOpenModal = openAr && !viewHandler.productState.allow3DComb && !viewHandler.productState.allowRTV;
+
+  //for fade animation
+  var _useState5 = useState(viewHandler.productState.arCodeWasVisibleOnce),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tooltipVisible = _useState6[0],
+    setTooltipVisible = _useState6[1];
+  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible && !dontOpenModal;
+  var _useLayer = useLayer({
+      isOpen: showTooltip,
+      auto: true,
+      placement: 'right-end',
+      triggerOffset: 16
+    }),
+    triggerProps = _useLayer.triggerProps,
+    layerProps = _useLayer.layerProps,
+    renderLayer = _useLayer.renderLayer,
+    arrowProps = _useLayer.arrowProps;
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    url = _useState8[0],
+    setUrl = _useState8[1];
+  useEffect(function () {
+    var _viewHandler$uiState$;
+    if (viewHandler.uiState.AllConfig.arViewerIframe) return;
+    openDrawerMenu({
+      id: 'ar-qr-code',
+      mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
+      handleInternScroll: true,
+      showOverlay: true,
+      direction: 'bottom',
+      onClose: function onClose() {
+        setOpenDrawer(false);
+        viewHandler.productState.loadRTVForAr = false;
+        viewHandler.productState.setDoShowARQRCode(false);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
+      },
+      title: /*#__PURE__*/jsx(FullscreenArHeader, {}),
+      content: /*#__PURE__*/jsx(FullscreenAr, {
+        url: url,
+        isArCompatible: viewHandler.productState.isArCompatible,
+        broswerSupportAR: viewHandler.productState.browserSupportAR,
+        activateAR: viewHandler.productState.activateAR,
+        hqRenderScript: viewHandler.hqRenderScript,
+        isTablet: isTablet
+      }),
+      open: openDrawer
+    });
+  }, [openDrawer, viewHandler.productState.activateAR]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode == true) {
+      viewHandler.openARObserverConnection(function () {
+        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
+      } // request hqr onreceivehqr triggers update
+      ).then(function (url) {
+        return setUrl(url);
+      });
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode && shouldOpenModal) {
+      setOpenDrawer(true);
+    }
+  }, [viewHandler.productState.activateAR, url]);
+  useEffect(function () {
+    //start timeout for auto open the tooltip
+    if (dontOpenModal) return;
+    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
+      var _arQrCodeConfig$timeU;
+      autoCloseTimeout.current = setTimeout(function () {
+        viewHandler.productState.setArCodeWasVisibleOnce();
+        setAutoClose(true);
+        viewHandler.productState.setDoShowARQRCode(true);
+      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
+    }
+    if (!viewHandler.productState.doShowARQRCode && autoClose) {
+      setAutoClose(false);
+    }
+    //delay the state of visible so we animate the fade out
+    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
+      setTimeout(function () {
+        setTooltipVisible(viewHandler.productState.doShowARQRCode);
+      }, 200);
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  var onClick = function onClick() {
+    viewHandler.productState.setDoShowARQRCode(true);
+    var curPlannerMode = viewHandler.viewPlannerHandler.getCurPlannerViewMode();
+    if (shouldOpenModal) {
+      if (!viewHandler.productState.doShowRTV && !(curPlannerMode == 'RTViewer' || curPlannerMode == '3DCOMB')) {
+        viewHandler.setHQRenderScript(undefined);
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
+      }
+      setOpenDrawer(true);
+      viewHandler.productState.loadRTVForAr = true;
+    } else if (openAr && (curPlannerMode == 'RTViewer' || curPlannerMode == '3DCOMB')) {
+      viewHandler.productState.loadRTVForAr = true;
+      setOpenDrawer(true);
+    }
+  };
+  if (url && !openAr && dontOpenModal) {
+    return /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/jsx(QRCode, {
+        value: url,
+        size: 96,
+        onClick: function onClick() {
+          return url && window.open(url, '_blank');
+        }
+      }), ";"]
+    });
+  }
+  if (Button) {
+    return /*#__PURE__*/jsx(Button, {
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
+      id: "ar-icon"
+    }, props), {}, {
+      className: classnames(props.className),
+      onClick: onClick,
+      title: t('configurator.ar_qr_title')
+    }, triggerProps), {}, {
+      style: {
+        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV || viewHandler.productState.doShowAIRoom ? 'visible' : 'hidden'
+      }
+    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
+      arrowProps: arrowProps,
+      layerProps: layerProps,
+      autoClose: autoClose,
+      fadeIn: tooltipVisible,
+      fadeout: !viewHandler.productState.doShowARQRCode,
+      url: url
+    }))]
+  });
+};
+var ArQrCodeIcon = observer(ArQrCodeTooltip);
+
+export { ArQrCodeIcon as default };

package/build/esm/index-363f22ee.js

@@ -0,0 +1,46 @@
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { c as wcConfiguratorSettingsExpander, h as hidden, d as wcConfiguratorSettingsMaxExpander, f as wcConfiguratorSettingsMinExpander } from './index.module-2add7f3e.js';
+import classnames from 'classnames';
+import { jsxs, Fragment, 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 SettingsExpanderButtons = function SettingsExpanderButtons(props) {
+  var viewHandler = useViewHandler();
+  var hide = viewHandler.settingsState.contentItemId && viewHandler.settingsState.contentItemVisible;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [viewHandler.uiState.doShowConfSettingsExpander && !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorSettingsExpander, hide ? hidden : undefined),
+      onClick: viewHandler.uiState.onClickExpandConfigSettings
+    }), !viewHandler.uiState.isInMobileView && viewHandler.uiState.doShowConfSettingsMaxMinExpander && /*#__PURE__*/jsxs(Fragment, {
+      children: [!viewHandler.uiState.configSettingsIsMaxExpanded && /*#__PURE__*/jsx("div", {
+        className: classnames(wcConfiguratorSettingsMaxExpander, hide ? hidden : undefined),
+        onClick: viewHandler.uiState.onClickExpandMaxConfigSettings
+      }), !viewHandler.uiState.configSettingsIsMinExpanded && /*#__PURE__*/jsx("div", {
+        className: wcConfiguratorSettingsMinExpander,
+        onClick: viewHandler.uiState.onClickExpandMinConfigSettings
+      })]
+    })]
+  });
+};
+var SettingsExpanderButtons$1 = observer(SettingsExpanderButtons);
+
+export { SettingsExpanderButtons$1 as default };

package/build/esm/index-38730074.js

@@ -0,0 +1,90 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import TabGroupHorizontal from './index-277e652b.js';
+import TabGroupVertical from './index-4ba6247a.js';
+import TabSearch from './index-bf92207c.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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';
+import './index-cc7785e0.js';
+import './index-0ba10d4e.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+var wcConfiguratorSteps = "wcConfigurator-steps-1pUS0";
+var portrait = "portrait-uvNtu";
+var horizontal = "horizontal-6TCsO";
+var wcConfiguratorStepsSplit = "wcConfigurator-steps-split-ATmZ8";
+var closeRight = "close-right-rv5xk";
+var closeLeft = "close-left-S5bW1";
+var vertical = "vertical-HLAFY";
+var tabSearchVisibleClass = "tab-search-visible-class-VelST";
+var landscape = "landscape-O7G0i";
+var wcConfigCloseButton = "wcConfigCloseButton-mkHVY";
+var closeButtonHidden = "closeButtonHidden-g1FQc";
+var wcConfiguratorStepsContainer = "wcConfigurator-steps-Container-Yb9mE";
+var css_248z = ".wcConfigurator-steps-1pUS0 {\n  z-index: 1100;\n}\n\n.portrait-uvNtu.wcConfigurator-steps-1pUS0 {\n  overflow: hidden;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: var(--thirdColor);\n}\n.portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: rgba(238, 238, 238, 0.95);\n}\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n  background: var(--tabGroupBackground);\n}\n\n.horizontal-6TCsO.portrait-uvNtu.close-right-rv5xk .wcConfigurator-steps-split-ATmZ8 {\n  width: calc(100% - 3.6rem);\n}\n.horizontal-6TCsO.portrait-uvNtu.close-left-S5bW1 .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: 100%;\n  background: var(--tabGroupBackground);\n}\n\n.tab-search-visible-class-VelST.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: calc(100% - 46px);\n}\n.horizontal-6TCsO.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.wcConfigCloseButton-mkHVY {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  float: left;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n}\n.vertical-HLAFY .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: -56px;\n  left: 30px;\n}\n\n.portrait-uvNtu .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: 0;\n  margin: 10px;\n}\n\n.portrait-uvNtu.close-right-rv5xk .wcConfigCloseButton-mkHVY {\n  right: 0;\n}\n\n.portrait-uvNtu.close-left-S5bW1 .wcConfigCloseButton-mkHVY {\n  left: -50px;\n}\n\n.wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(197, 197, 197, 0.1);\n}\n\n.wcTabGroupItem-eqGtC:first-child {\n  border-radius: var(--globalBorderRadius) 0 0 var(--globalBorderRadius);\n}\n\n.portrait-uvNtu .wcTabGroupItem-eqGtC:first-child {\n  border-radius: 0px;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: var(--globalBorderRadius);\n  border-width: 0px;\n  overflow-x: auto;\n}\n\n.portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: 0px;\n  height: calc(100% - 3px);\n}\n\n.wcConfigur-xKWej .wcConfiguratorator-steps-Container-FGpNz {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n}\n\n.horizontal-6TCsO.closeButtonHidden-g1FQc .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.portrait-uvNtu .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n  overscroll-behavior: contain;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE and Edge */\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8,\n.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  overflow: auto;\n\n  /* Hide scrollbar for IE, Edge add Firefox */\n\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-Container-Yb9mE {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n  overscroll-behavior: contain;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-Container-Yb9mE {\n  width: 100%;\n  height: 100%;\n}\n\n/* Dark mode – matches backoffice */\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .horizontal-6TCsO.wcConfigurator-steps-1pUS0,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: rgb(30, 30, 30);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: rgb(30, 30, 30);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8,\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .vertical-HLAFY .wcConfigurator-Q0f5q -steps-split,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  background: rgb(20, 20, 20);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .wcConfigCloseButton-mkHVY:hover,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .wcConfigCloseButton-mkHVY:active,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(255, 255, 255, 0.08);\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "showCloseButtonInMobile", "tabSearchClass"];
+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 TabGroupContainer = function TabGroupContainer(_ref) {
+  var className = _ref.className,
+    showCloseButtonInMobile = _ref.showCloseButtonInMobile,
+    tabSearchClass = _ref.tabSearchClass,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent,
+    isMobile = _useDivaCore$state.dimensions.isMobile;
+  var closeButtonVisible = isFullscreenComponent && showCloseButtonInMobile !== 'none' && !viewHandler.uiState.isMobilePortrait || viewHandler.tabGroupState.curTabGroupType != 'vertical' && !viewHandler.uiState.ViewConfig.hideCloseButton && viewHandler.eventIsManagedByClient('onWebPlanerClose') && !((!showCloseButtonInMobile || showCloseButtonInMobile == 'none') && viewHandler.getIsInMobileView());
+  var tabSearchVisible = viewHandler.uiState.ViewConfig.tabGroupSearchVisible;
+  var tabGroupScroller = useRef(null);
+  useEffect(function () {
+    if (tabGroupScroller.current) {
+      viewHandler.tabGroupState.setTabGroupScroller(tabGroupScroller.current);
+    }
+    return function () {};
+  }, [tabGroupScroller]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className, wcConfiguratorSteps, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? horizontal : undefined, viewHandler.tabGroupState.curTabGroupType == 'vertical' ? vertical : undefined, !closeButtonVisible ? closeButtonHidden : undefined, tabSearchVisible ? tabSearchVisibleClass : undefined, isMobile ? showCloseButtonInMobile == 'left' ? closeLeft : closeRight : undefined),
+    children: [tabSearchVisible && /*#__PURE__*/jsx(TabSearch, {
+      className: tabSearchClass
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorStepsSplit),
+      ref: tabGroupScroller,
+      children: /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorStepsContainer,
+        children: [viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsx(TabGroupHorizontal, {}), viewHandler.tabGroupState.curTabGroupType == 'vertical' && /*#__PURE__*/jsx(TabGroupVertical, {})]
+      })
+    }), closeButtonVisible && /*#__PURE__*/jsx("div", {
+      className: wcConfigCloseButton,
+      title: t('configurator.ConfigClose'),
+      onClick: viewHandler.onCloseConfigurator
+    })]
+  }));
+};
+var TabGroup = observer(TabGroupContainer);
+
+export { TabGroup as default };

package/build/esm/index-3b22ad4f.js

@@ -0,0 +1,134 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-4e6b7562.js';
+import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import MetaData from './index-dd70b724.js';
+import InfoIcon from './index-f78afc73.js';
+import { jsxs, jsx } 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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var accItem = "AccItem-EuKUQ";
+var wcSize = "wcSize-vX0Fm";
+var wcSizeNormal = "wcSize-normal-bRIEC";
+var wcImage = "wcImage-ScJeM";
+var wcAccInfoContainer = "wcAccInfoContainer-eEHqy";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Wlfnh";
+var metaData = "meta-data-p5e7t";
+var wcAccSize = "wcAccSize-LdKs3";
+var css_248z = "/* Accessoires*/\n\n.AccItem-EuKUQ {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n}\n\n.AccItem-EuKUQ:hover {\n  z-index: 200;\n}\n\n.AccItem-EuKUQ .wcSize-vX0Fm {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n}\n\n.AccItem-EuKUQ .wcSize-normal-bRIEC {\n  height: 80px;\n}\n\n.AccItem-EuKUQ .wcImagePlaceHolder-t26mm {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.AccItem-EuKUQ .wcSize-normal-bRIEC .wcImage-ScJeM {\n  height: 80px;\n}\n\n.AccItem-EuKUQ .wcImage-ScJeM {\n  width: 80px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.wcAccInfoContainer-eEHqy {\n  float: left;\n  width: calc(100% - 80px);\n  position: relative;\n  height: 100%;\n}\n.AccItem-EuKUQ .wcAccInfoContainer-eEHqy {\n  width: calc(100% - 150px);\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - 12px);\n  justify-content: space-between;\n}\n\n.AccItem-EuKUQ .wcConfigurator-settings-title-Wlfnh {\n  display: -webkit-box;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  margin-top: 14px;\n  max-width: 100%;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n}\n\n.AccItem-EuKUQ .wcConfigurator-settings-title-Wlfnh.meta-data-p5e7t {\n  -webkit-line-clamp: 1;\n}\n\n.AccItem-EuKUQ .wcAccSize-LdKs3 {\n  display: -webkit-box;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  width: 100%;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 110;\n}\n@media all and (max-width: 1100px) {\n  .AccItem-EuKUQ .wcSize-normal-bRIEC {\n    height: 80px;\n  }\n\n  .AccItem-EuKUQ .wcSize-normal-bRIEC img {\n    height: 80px;\n  }\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ShelfAccessoires = function ShelfAccessoires(_ref) {
+  var _renderLayer, _item$longDescription;
+  var item = _ref.item,
+    grids = _ref.grids;
+  var viewHandler = useViewHandler();
+  var i18n = useTranslation();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    hidePrices = _useDivaCore$state.hidePrices,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnShelfAccessorie(grids, item.articleCodex, undefined, true);
+    },
+    className: accItem
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcAccInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible !== '' ? metaData : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.name
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.articleCodex), /*#__PURE__*/jsx("div", {
+          className: classnames(wcAccSize),
+          children: DivaUtils.sizeFormatter({
+            width: item.width,
+            height: item.height,
+            depth: item.depth
+          }, i18n)
+        })]
+      })]
+    }), !hidePrices && !!item.price && /*#__PURE__*/jsx(PricePreview, {
+      price: item.price,
+      style: {
+        paddingTop: 6
+      }
+    }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+      item: item,
+      style: {
+        bottom: 8,
+        right: 8
+      }
+    }, item.articleCodex), 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.name,
+      desciption: metaDataVisible,
+      image: item.image,
+      codex: item.articleCodex,
+      layerProps: layerProps
+    }, item.articleCodex)))]
+  }));
+};
+var ShelfAccessoiresOld = observer(ShelfAccessoires);
+
+export { ShelfAccessoiresOld as default };

package/build/esm/index-3bdf6f50.js

@@ -0,0 +1,47 @@
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import RoomSerious from './index-b3f79da4.js';
+import { jsx, Fragment } 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var container = "container-IUsXl";
+var css_248z = ".container-IUsXl {\n  position: absolute;\n  bottom: 0;\n  left: 0px;\n  z-index: 540;\n}\n";
+styleInject(css_248z);
+
+var RoomListSelection = function RoomListSelection(props) {
+  var viewHandler = useViewHandler();
+  var items = viewHandler.paletteViewHandler.getRoomList();
+  if (!viewHandler.uiState.ViewConfig.roomListInProduct) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    hidden: !viewHandler.settingsState.roomListInitialized,
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/jsx(RoomSerious, {
+        item: item,
+        from: viewHandler.settingsState.roomListInitialized
+      }, item.codex);
+    })
+  });
+};
+var index = observer(RoomListSelection);
+
+export { index as default };