@crystaldesign/diva-web-planner-react 24.13.0-rc.7 → 24.13.0-rc.8

package/build/esm/index-9fedf24e.js

@@ -0,0 +1,85 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.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-59eb0d94.js';
+import TabGroupVertical from './index-3a94ce01.js';
+import TabSearch from './index-f9957407.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 './index-77647016.js';
+import './index-65b1279e.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+var wcConfiguratorSteps = "wcConfigurator-steps-1pUS0";
+var horizontal = "horizontal-6TCsO";
+var wcConfiguratorStepsSplit = "wcConfigurator-steps-split-ATmZ8";
+var portrait = "portrait-uvNtu";
+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: 300;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: var(--thirdColor);\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.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: var(--globalBorderRadius);\n  height: 100%;\n  border-width: 0px;\n  overflow-x: auto;\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}\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}\n\n.vertical-HLAFY .wcConfigurator-steps-Container-Yb9mE {\n  width: 100%;\n  height: 100%;\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.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-a350c654.js

@@ -0,0 +1,144 @@
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { useEffect } from 'react';
+import Settings from './index-99294363.js';
+import TabGroup from './index-9fedf24e.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-4804d8a0.js';
+import { jsx, Fragment, 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/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-8f078920.js';
+import './index-5c4f322a.js';
+import './index-13235a1b.js';
+import './index-b06783a8.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-f60e005a.js';
+import 'react-laag';
+import './index-d1f22ab9.js';
+import 'classnames';
+import './index-5f2a2806.js';
+import './index-ea29a6a5.js';
+import 'sift';
+import './index-b7b52366.js';
+import './index-36b8737f.js';
+import './index-df53a144.js';
+import './index-f052ab58.js';
+import './index.module-b935be8f.js';
+import './index-be7c9c45.js';
+import 'react-switch';
+import './index-91dad7cd.js';
+import './index-4d84f110.js';
+import 'react-dropdown';
+import './index-2b8e5896.js';
+import './index-f567a210.js';
+import './index-7c0a49ff.js';
+import './index-7a0a56df.js';
+import '@crystaldesign/content-box';
+import './index-5627b24c.js';
+import './index-9da557ad.js';
+import './index-6ad5a07d.js';
+import './index-3ade1675.js';
+import './index-9b56809f.js';
+import '@crystaldesign/products-component';
+import './index-94727056.js';
+import './index-b5459cba.js';
+import './index-f65bb429.js';
+import './index-16ea62d8.js';
+import './index-f96e96f7.js';
+import './index-23c588bf.js';
+import './index-f0a839ef.js';
+import './index-527f3dd0.js';
+import './index-7d054ceb.js';
+import './index-ede9e219.js';
+import './index-bf284357.js';
+import './index-cfd8aecc.js';
+import './index-e03da047.js';
+import './index.module-066031ee.js';
+import './index-0c2ec30e.js';
+import './index-76635e2e.js';
+import './index-01d9c656.js';
+import './index-4ea13a98.js';
+import './index-446f4379.js';
+import './index-12ac87fd.js';
+import './index-83a3c172.js';
+import './index.module-06be1225.js';
+import './index-4aca1b41.js';
+import './index-5b4a087a.js';
+import './index-eb660a71.js';
+import './index-59eb0d94.js';
+import './index-77647016.js';
+import './index-3a94ce01.js';
+import './index-65b1279e.js';
+import './index-f9957407.js';
+
+var wcConfigurator = "wcConfigurator-IeI91";
+var wcConfiguratorSteps = "wc-configurator-steps-yPThi";
+var wcConfiguratorSettings = "wc-configurator-Settings-3U39-";
+var tabSearchClass = "tab-search-class-qJEaW";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-IeI91 {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\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  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n}\n\n.wcConfigurator-IeI91 *,\n.wcConfigurator-IeI91 *::before,\n.wcConfigurator-IeI91 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-yPThi {\n  border-radius: 8px 0 0 8px;\n  overflow: hidden;\n  width: 350px;\n  position: relative;\n}\n\n.wc-configurator-Settings-3U39- {\n  width: calc(100% - 350px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n\n.tab-search-class-qJEaW {\n  background-color: #0d3040;\n  padding: 12px 16px;\n  position: relative;\n  display: flex;\n}\n\n.tab-search-class-qJEaW input {\n  outline: medium none invert !important;\n  outline: initial !important;\n}\n\n.tab-search-class-qJEaW input {\n  color: #fff;\n  width: 100%;\n  background-color: #0d3040;\n  font-size: 14px;\n  border: 0px solid;\n}\n\n.tab-search-class-qJEaW div {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%23eee%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 75%;\n  width: 16px;\n  height: 16px;\n  transition: all 0.15s ease;\n  margin: 0px 3px;\n  border-radius: var(--globalBorderRadius);\n  cursor: pointer;\n}\n\n.tab-search-class-qJEaW div:hover {\n  background-size: 100%;\n}\n";
+styleInject(css_248z);
+
+var Classification = function Classification(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsx(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: wcConfigurator,
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps,
+        tabSearchClass: tabSearchClass
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+    })
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#455864',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#f4f4f4',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--primaryColor)',
+  '--foldArrowMarginRight': '16px',
+  '--configuratorActionWidthForthBackSpacer': '0.1rem',
+  '--configuratorActionForthWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--configuratorActionBackWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--itemsMargin': '0.3125rem'
+};
+var index = observer(Classification);
+
+export { index as default };

package/build/esm/index-a73f8955.js

@@ -0,0 +1,99 @@
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, 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/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcToolbarFilter = "wcToolbarFilter-Gz4PK";
+var wcPlToolIcon = "wcPlToolIcon-UBaTH";
+var wcToolbarFilterExpanded = "wcToolbarFilterExpanded-Yi0L8";
+var wcToolbarFilterMaxExpanded = "wcToolbarFilterMaxExpanded-7XK-7";
+var wcToolbarCatalogItem = "wcToolbarCatalogItem-PuT3F";
+var mobile = "mobile-Bp3bL";
+var dockL = "DockL-2XY68";
+var isActive = "is-active-Ta3Um";
+var dockLr = "DockLR-PVa10";
+var dockR = "DockR-uK2j5";
+var dockNone = "DockNone-KdE70";
+var accessoire = "Accessoire-ZN7LO";
+var css_248z = "/*DOCKFilter*/\n.wcToolbarFilter-Gz4PK {\n  margin: 0;\n  padding: 0;\n  padding: initial;\n}\n\n@media all and (max-width: 730px) and (orientation: landscape) {\n  .wcToolbarFilter-Gz4PK {\n    display: none;\n  }\n}\n\n.wcPlToolIcon-UBaTH {\n  height: 25px;\n  width: 25px;\n  background-repeat: no-repeat;\n  background-size: auto 20px;\n  display: inline-block;\n  font-size: 0;\n  text-align: center;\n  z-index: 99;\n  margin-top: 5px;\n  cursor: pointer;\n  transition: 0.35s ease;\n}\n\n.wcToolbarFilterExpanded-Yi0L8 .wcPlToolIcon-UBaTH,\n.wcToolbarFilterMaxExpanded-7XK-7 .wcPlToolIcon-UBaTH {\n  height: 30px;\n  width: 30px;\n  background-size: auto 25px;\n}\n.wcToolbarCatalogItem-PuT3F {\n  display: inline-block;\n  list-style: none outside none;\n  padding: 0 0.3em;\n  cursor: pointer;\n  height: 32px;\n}\n.mobile-Bp3bL .wcPlToolIcon-UBaTH {\n  height: 22px;\n  width: 22px;\n  background-size: auto 18px;\n}\n\n.mobile-Bp3bL .wcToolbarCatalogItem-PuT3F {\n  height: 30px;\n  padding: 0 4px;\n}\n\n.DockL-2XY68 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockL%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(45.5 45.5) rotate(180)%22%2F%3E%3Cpolygon points%3D%2235 6.5 51.13 22.63 35 38.75 35 22.63 35 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockL-2XY68.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockL%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(45.5 45.5) rotate(180)%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2235 6.5 51.13 22.63 35 38.75 35 22.63 35 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.DockLR-PVa10 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 57.25 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockLR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.62%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(57.75 45.5) rotate(180)%22%2F%3E%3Cpolygon points%3D%2216.13 38.75 0 22.63 16.13 6.5 16.13 22.63 16.13 38.75%22%2F%3E%3Cpolygon points%3D%2241.13 6.5 57.25 22.63 41.13 38.75 41.13 22.63 41.13 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockLR-PVa10.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 57.25 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockLR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.62%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22 transform%3D%22translate(57.75 45.5) rotate(180)%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2216.13 38.75 0 22.63 16.13 6.5 16.13 22.63 16.13 38.75%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2241.13 6.5 57.25 22.63 41.13 38.75 41.13 22.63 41.13 6.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.DockR-uK2j5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.12%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Cpolygon points%3D%2216.13 39.25 0 23.13 16.13 7 16.13 23.13 16.13 39.25%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockR-uK2j5.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 51.12 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockR%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%229.12%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Cpolygon class%3D%22cls-2%22 points%3D%2216.13 39.25 0 23.13 16.13 7 16.13 23.13 16.13 39.25%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.DockNone-KdE70 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 45.5 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockNone%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Crect x%3D%2211.5%22 y%3D%2211%22 width%3D%2223%22 height%3D%2223%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.DockNone-KdE70.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 45.5 45.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d3d3d3%3Bstroke%3A%23d3d3d3%3Bstroke-miterlimit%3A10%3Bstroke-width%3A7px%3B%7D.cls-2%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EDockNoneOrange%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_6%22 data-name%3D%22Ebene 6%22%3E%3Crect class%3D%22cls-1%22 x%3D%223.5%22 y%3D%223.5%22 width%3D%2238.5%22 height%3D%2238.5%22%2F%3E%3Crect class%3D%22cls-2%22 x%3D%2211.5%22 y%3D%2211%22 width%3D%2223%22 height%3D%2223%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n\n.Accessoire-ZN7LO {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 43.05 43.1%22%3E%3Ctitle%3EPlus%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_3%22 data-name%3D%22Ebene 3%22%3E%3Cpath d%3D%22M24.79%2C24.79V43.1H18.18V24.79H0V18.18H18.18V0h6.61V18.18H43.05v6.61Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n.Accessoire-ZN7LO.is-active-Ta3Um {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 43.05 43.1%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e77031%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EAddAccessoireOrange%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_2-2%22 data-name%3D%22Ebene 2%22%3E%3Cpath class%3D%22cls-1%22 d%3D%22M24.79%2C24.79V43.1H18.18V24.79H0V18.18H18.18V0h6.61V18.18H43.05v6.61Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var DockFilter = function DockFilter() {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var plannerItems = viewHandler.paletteViewHandler.plannerItems;
+  if (!plannerItems.doShowFilterTypes()) return /*#__PURE__*/jsx(Fragment, {});
+  var onSelectConfigFilter = function onSelectConfigFilter(paletteId, codex, filterType) {
+    viewHandler.paletteViewHandler.onSelectFilter(paletteId, codex, filterType);
+  };
+  return /*#__PURE__*/jsxs("ul", {
+    style: {
+      "float": viewHandler.getIsInMobileView() ? 'left' : 'none'
+    },
+    className: classnames(wcToolbarFilter, viewHandler.uiState.configSettingsIsExpanded ? wcToolbarFilterExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? wcToolbarFilterMaxExpanded : undefined, viewHandler.getIsInMobileView() ? mobile : undefined),
+    children: [viewHandler.settingsState.plannerFilter.curFilteredTypes['DockL'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockL', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockL, viewHandler.settingsState.plannerFilter.dockFilter['DockL'] ? isActive : undefined),
+        title: t('configurator.LEFT_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['DockLR'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockLR', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockLr, viewHandler.settingsState.plannerFilter.dockFilter['DockLR'] ? isActive : undefined),
+        title: t('configurator.MIDDLE_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['DockR'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockR', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockR, viewHandler.settingsState.plannerFilter.dockFilter['DockR'] ? isActive : undefined),
+        title: t('configurator.RIGHT_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['DockNone'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'DockNone', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, dockNone, viewHandler.settingsState.plannerFilter.dockFilter['DockNone'] ? isActive : undefined),
+        title: t('configurator.SOLO_ELEMENTS')
+      })
+    }), viewHandler.settingsState.plannerFilter.curFilteredTypes['Accessoire'] && /*#__PURE__*/jsx("li", {
+      className: wcToolbarCatalogItem,
+      onClick: function onClick() {
+        return onSelectConfigFilter(1, 'Accessoire', 'DockFilter');
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcPlToolIcon, accessoire, viewHandler.settingsState.plannerFilter.dockFilter['Accessoire'] ? isActive : undefined),
+        title: t('configurator.ACCESSOIRE_ELEMENTS')
+      })
+    })]
+  });
+};
+var DockFilter$1 = observer(DockFilter);
+
+export { DockFilter$1 as default };

package/build/esm/index-a850a9ea.js

@@ -0,0 +1,61 @@
+import { s as styleInject } from './index-62e351ed.js';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var shelfPlannerContainerHorizontal = "shelfPlannerContainerHorizontal-zUcmv";
+var shelfPlannerContainerVertical = "shelfPlannerContainerVertical-3jwdx";
+var accessoires = "accessoires-ExU9-";
+var expanded = "expanded-qqANx";
+var shelfGrid = "shelfGrid-VM2OD";
+var shelfGridBorder = "shelfGridBorder-DyInR";
+var shelfPlannerContainerRtv = "shelfPlannerContainerRtv-OFMK-";
+var accessoireContainer = "accessoireContainer-Ht6lL";
+var selectedElement = "selectedElement-e8fZe";
+var info = "info-Kfwx2";
+var warning = "warning-1klI4";
+var configHeaderWrapper = "config-header-wrapper-ycLDr";
+var name = "name-4YnN5";
+var closeButton = "closeButton-kL18z";
+var css_248z = ".shelfPlannerContainerHorizontal-zUcmv {\n  display: flex;\n  width: 100%;\n}\n\n.shelfPlannerContainerVertical-3jwdx {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 60%;\n}\n\n.shelfPlannerContainerVertical-3jwdx .accessoires-ExU9- {\n  width: 100%;\n  height: 60%;\n}\n\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 34%;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 40%;\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerVertical-3jwdx .shelfGrid-VM2OD {\n  width: 100%;\n  height: 40%;\n  padding: 0 0;\n  margin: 10px 0;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGridBorder-DyInR {\n  border-top: solid #c7c7c7 1px;\n  /* border-bottom: solid #c7c7c7 1px; */\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n}\n.shelfPlannerContainerVertical-3jwdx .shelfGridBorder-DyInR {\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n  display: contents;\n}\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 66%;\n}\n\n.shelfPlannerContainerVertacal-rU1lK.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9-,\n.shelfPlannerContainerHorizontal-zUcmv.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9- {\n  width: 100%;\n}\n\n.row-JYcIF:first-child {\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoireContainer-Ht6lL {\n  height: 100%;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe {\n  width: 100%;\n  height: 75px;\n  margin-bottom: 5px;\n}\n\n.info-Kfwx2 {\n  height: 75px;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe img {\n  width: 100px;\n  float: left;\n  height: 75px;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.warning-1klI4 {\n  color: red;\n  padding-bottom: 1rem;\n}\n.config-header-wrapper-ycLDr {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.name-4YnN5 {\n  font-size: 18px;\n  transition: font-size 0.3s ease;\n}\n\n.closeButton-kL18z {\n  width: 50px;\n  height: 50px;\n  background: center / 35% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 0.3s ease, background-image 0.3s ease;\n}\n\n.config-header-wrapper-ycLDr:hover .closeButton-kL18z {\n  background: center / 40% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%233f3f3f%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.config-header-wrapper-ycLDr:hover .name-4YnN5 {\n  font-size: 20px;\n}\n";
+styleInject(css_248z);
+
+var index = function index(_ref) {
+  var selAccItem = _ref.selAccItem;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: selAccItem ? /*#__PURE__*/jsxs("div", {
+      className: selectedElement,
+      children: [/*#__PURE__*/jsx("img", {
+        src: selAccItem.image
+      }), /*#__PURE__*/jsxs("div", {
+        className: info,
+        children: [t('configurator.REGALPLANER_CHOOSE_SPACE_1') + ' ', /*#__PURE__*/jsx("b", {
+          dangerouslySetInnerHTML: {
+            __html: selAccItem.name
+          }
+        }), ' ' + t('configurator.REGALPLANER_CHOOSE_SPACE_2') + ' ', /*#__PURE__*/jsx("b", {
+          children: selAccItem.cellSize
+        }), t('configurator.REGALPLANER_CHOOSE_SPACE_3')]
+      })]
+    }) : /*#__PURE__*/jsxs("div", {
+      className: selectedElement,
+      children: [/*#__PURE__*/jsx("img", {
+        src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+      }), /*#__PURE__*/jsx("div", {
+        className: info,
+        children: t('configurator.REGALPLANER_CHOOSE_FIRST_ARTICLE')
+      })]
+    })
+  });
+};
+var SelectedAcc = observer(index);
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SelectedAcc
+});
+
+export { SelectedAcc as S, shelfPlannerContainerHorizontal as a, shelfPlannerContainerVertical as b, shelfGrid as c, shelfGridBorder as d, expanded as e, accessoires as f, configHeaderWrapper as g, closeButton as h, accessoireContainer as i, index$1 as j, name as n, shelfPlannerContainerRtv as s, warning as w };

package/build/esm/index-a86358e7.js

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

package/build/esm/index-a932176f.js

@@ -0,0 +1,83 @@
+import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import 'react';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { observer } from 'mobx-react-lite';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var infoButton = "infoButton-1VGiK";
+var css_248z = ".infoButton-1VGiK {\n  line-height: 26px;\n  width: 26px;\n  height: 26px;\n  background-color: white;\n  color: var(--primaryColor);\n  text-align: center;\n  cursor: pointer;\n  border: solid 2px var(--primaryColor);\n  border-radius: 50%;\n  margin-left: 10px;\n}\n";
+styleInject(css_248z);
+
+var InfoButton = function InfoButton(_ref) {
+  var _selectedElement$grou, _selectedElement$long;
+  var selectedElement = _ref.selectedElement,
+    id = _ref.id,
+    openUrl = _ref.openUrl;
+  var viewHandler = useViewHandler();
+  var text = selectedElement ? ((_selectedElement$grou = selectedElement.groupName) !== null && _selectedElement$grou !== void 0 ? _selectedElement$grou : '') + (selectedElement.parentName ? " (".concat(selectedElement.parentName, ")") : '') + ' ' + ((_selectedElement$long = selectedElement.longDescription) !== null && _selectedElement$long !== void 0 ? _selectedElement$long : '') : '';
+  var updateInfoBox = function updateInfoBox() {
+    if (!selectedElement) return;
+    viewHandler.settingsState.updateInfoBox({
+      type: 'info',
+      content: /*#__PURE__*/jsx(ContentBoxComponent, {
+        onClose: function onClose() {
+          return viewHandler.settingsState.updateInfoBox();
+        },
+        settings: {
+          contentBoxProps: {
+            type: 'CloseButtonContainer',
+            style: {
+              background: 'transparent',
+              padding: 0
+            },
+            closeIconSize: '24px',
+            content: {
+              type: 'InfoBox',
+              imageUrl: selectedElement.image,
+              title: selectedElement.text,
+              price: selectedElement.deltaPrice,
+              text: text
+            }
+          }
+        }
+      }),
+      id: id,
+      key: selectedElement.codex
+    });
+  };
+  var onClick = function onClick() {
+    if (openUrl && selectedElement) {
+      window.open(selectedElement.url, '_blank');
+      return;
+    }
+    viewHandler.settingsState.setContentItemVisible(false);
+    var boxContent = viewHandler.settingsState.infoBoxContent;
+    if (boxContent && boxContent.id === id && boxContent.type === 'info') viewHandler.settingsState.updateInfoBox();else updateInfoBox();
+  };
+  var boxContent = viewHandler.settingsState.infoBoxContent;
+  if (boxContent && boxContent.id === id && boxContent.key !== (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.codex) && boxContent.type === 'info') {
+    updateInfoBox();
+  }
+  return /*#__PURE__*/jsx("div", {
+    title: 'Info',
+    onClick: onClick,
+    className: infoButton,
+    children: "i"
+  });
+};
+var InfoButton$1 = observer(InfoButton);
+
+export { InfoButton$1 as default };