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

package/build/esm/index-827acf02.js

@@ -0,0 +1,144 @@
+import { s as styleInject, u as useViewHandler } from './index-b7d703a6.js';
+import { useEffect } from 'react';
+import Settings from './index-bd103d62.js';
+import TabGroup from './index-c95892a4.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-af0b134f.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-43b7e2db.js';
+import './index-6e91489a.js';
+import './index-fd0cf913.js';
+import './index-91571ce5.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-eb5785f7.js';
+import 'react-laag';
+import './index-7cbf558a.js';
+import 'classnames';
+import './index-bdd01d7c.js';
+import './index-459fc9e1.js';
+import 'sift';
+import './index-9a635c2f.js';
+import './index-7788ba94.js';
+import './index-a151f61e.js';
+import './index-e0b996ce.js';
+import './index.module-44a2beee.js';
+import './index-3ff73d29.js';
+import 'react-switch';
+import './index-d34104f5.js';
+import './index-71bbb8f6.js';
+import 'react-dropdown';
+import './index-41c71f9e.js';
+import './index-04630b83.js';
+import './index-1697cc16.js';
+import './index-b3436c12.js';
+import '@crystaldesign/content-box';
+import './index-eab8fa53.js';
+import './index-a6543353.js';
+import './index-c7fd1607.js';
+import './index-85b51df0.js';
+import './index-9deb7c5a.js';
+import '@crystaldesign/products-component';
+import './index-1e74e57c.js';
+import './index-31539087.js';
+import './index-8aaf7088.js';
+import './index-1c588543.js';
+import './index-5a2ed720.js';
+import './index-e7f772b8.js';
+import './index-cd42dc47.js';
+import './index-b570e658.js';
+import './index-77fc4b6e.js';
+import './index-df5edfcd.js';
+import './index-c309ab35.js';
+import './index-cddc71ca.js';
+import './index-8db37a32.js';
+import './index.module-c68a98cf.js';
+import './index-cfb118fd.js';
+import './index-f89124a2.js';
+import './index-cd0b0e41.js';
+import './index-b6bd4cd2.js';
+import './index-8e932c3b.js';
+import './index-913d8394.js';
+import './index-9bb24364.js';
+import './index.module-5c84be4f.js';
+import './index-c07211bc.js';
+import './index-32e43c5e.js';
+import './index-483b9253.js';
+import './index-3da205a3.js';
+import './index-65a9b3af.js';
+import './index-42054f54.js';
+import './index-733e8daa.js';
+import './index-05410e54.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-828636fd.js

@@ -0,0 +1,110 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-b7d703a6.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import OptionSelector from './index-40666c79.js';
+import LayoutSelection from './index-467bc184.js';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'react-dropdown';
+import './index.module-d6de2688.js';
+import './index-1697cc16.js';
+
+var wrapper = "wrapper-XC8ci";
+var scrollable = "scrollable-Smp2u";
+var header = "header-Jz4n0";
+var container = "container-sjWkB";
+var css_248z = ".wrapper-XC8ci {\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 5px);\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n  background-color: #fff;\n}\n.scrollable-Smp2u {\n  overflow: auto;\n  left: 50px;\n}\n.header-Jz4n0 {\n  height: 8%;\n  width: 100%;\n  padding-top: 0.7%;\n  text-align: center;\n  background-color: var(--primaryColor);\n  font-size: 30px;\n  color: white;\n  font-weight: 600;\n}\n.container-sjWkB {\n  width: calc(100% - 40px);\n  margin: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\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 CatalogMakeup = function CatalogMakeup(props) {
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    origOptions = _useState2[0],
+    setOrigOptions = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOption = _useState4[0],
+    setSelectedOptions = _useState4[1];
+  var currentOption = origOptions === null || origOptions === void 0 ? void 0 : origOptions.find(function (o) {
+    return o.codex === selectedOption;
+  });
+  useEffect(function () {
+    var set = viewHandler.divaWebPlanner.actSet();
+    var options = set === null || set === void 0 ? void 0 : set.CatalogData.getOptions();
+    if (options !== null && options !== void 0 && options.length) {
+      setOrigOptions(options);
+    }
+  }, [viewHandler.settingsState.configChanged]);
+  useEffect(function () {
+    var currentOption = origOptions === null || origOptions === void 0 ? void 0 : origOptions.find(function (o) {
+      return o.codex === selectedOption;
+    });
+    if (currentOption) {
+      naviagateToOption(currentOption);
+    }
+  }, [selectedOption]);
+  var naviagateToOption = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(option) {
+      var configStep;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            configStep = viewHandler.configuratorStructureHandler.getFirstConfigStepByOptionCodex(option.codex);
+            if (!configStep) {
+              _context.next = 7;
+              break;
+            }
+            viewHandler.configuratorStructureHandler.navigateToConfigStepByConfigStepKey(configStep === null || configStep === void 0 ? void 0 : configStep.key);
+            viewHandler.updateConfiguratorState(true);
+            _context.next = 6;
+            return DivaUtils.Sleep(100);
+          case 6:
+            viewHandler.paletteViewHandler.scrollToConfigStepByPosNr(configStep.posNr, true);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function naviagateToOption(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx("a", {
+        className: header,
+        children: "CatalogMakeup"
+      }), /*#__PURE__*/jsxs("div", {
+        className: container,
+        children: [/*#__PURE__*/jsx(OptionSelector, {
+          options: origOptions,
+          optionState: [selectedOption, setSelectedOptions]
+        }), currentOption && /*#__PURE__*/jsx(LayoutSelection, {
+          option: currentOption
+        }, currentOption.codex)]
+      })]
+    })
+  }));
+};
+var CatalogMakeup$1 = observer(CatalogMakeup);
+
+export { CatalogMakeup$1 as default };

package/build/esm/index-82947ba7.js

@@ -0,0 +1,73 @@
+import { s as styleInject, u as useViewHandler } from './index-b7d703a6.js';
+import classnames from 'classnames';
+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/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 paletteItem = "PaletteItem-Y-gaJ";
+var imageWrapper = "imageWrapper-rcOF5";
+var sel = "sel-1986q";
+var imageBackground = "imageBackground-SUtlD";
+var wcImage = "wcImage-XUaTv";
+var title = "title-Cr0ha";
+var titleSel = "title-sel-8BT-F";
+var mobile = "mobile-NUDZR";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-Y-gaJ {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: -moz-min-content;\n  width: min-content;\n  height: 70px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  margin-bottom: 2px;\n  margin-left: 10px;\n}\n\n.PaletteItem-Y-gaJ:active {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-Y-gaJ:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.imageWrapper-rcOF5 {\n  border-radius: 50%;\n  border: 1px transparent solid;\n  width: 68px;\n  height: 68px;\n  transition: 0.15s ease;\n  border-style: double;\n}\n\n.sel-1986q .imageWrapper-rcOF5,\n.small-oHSfx.sel-1986q .imageWrapper-rcOF5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.imageBackground-SUtlD {\n  border-radius: 50%;\n  border: 4px white solid;\n  width: 60px;\n  height: 60px;\n  transition: 0.15s ease;\n}\n\n.sel-1986q .imageBackground-SUtlD {\n  border: 4px var(--primaryColor) solid;\n}\n\n.wcImage-XUaTv {\n  width: 100%;\n  height: 60px;\n  border-radius: 50%;\n  background-size: cover;\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\n.title-Cr0ha {\n  text-align: center;\n  margin: 16px;\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 24px;\n  z-index: 400;\n  font-weight: 600;\n  color: var(--secondaryColor);\n  font-family: var(--diva-typography-font-family);\n  margin-left: 12px;\n  text-align: left;\n  white-space: nowrap;\n  background-color: #eee;\n  border-radius: 70px;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.PaletteItem-Y-gaJ:hover .title-Cr0ha,\n.title-sel-8BT-F {\n  opacity: 1;\n}\n\n.mobile-NUDZR.PaletteItem-Y-gaJ {\n  width: 45px;\n  height: 45px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  margin-right: 12px;\n}\n.mobile-NUDZR .imageWrapper-rcOF5 {\n  width: 43px;\n  height: 43px;\n}\n\n.mobile-NUDZR .imageBackground-SUtlD {\n  width: 39px;\n  height: 39px;\n  border-width: 2px;\n}\n\n.mobile-NUDZR .wcImage-XUaTv {\n  height: 39px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  line-height: 2px;\n  font-size: 12px;\n  padding: 14px;\n  margin: 8px;\n}\n\n/* \n@media all and (max-width: 1800px) {\n  .PaletteItem {\n    width: 81px;\n    height: 81px;\n  }\n  .imageWrapper {\n    width: 79px;\n    height: 79px;\n  }\n  .imageBackground {\n    width: 71px;\n    height: 71px;\n  }\n  .wcImage {\n    height: 71px;\n  }\n  .title {\n    line-height: 81px;\n    font-size: 12px;\n  } \n}\n*/\n";
+styleInject(css_248z);
+
+var Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from,
+    isVP = _ref.isVP;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onClick = function onClick() {
+    viewHandler.productState.setRoomListExpanded(true); //reset the timeout
+    if (isVP) {
+      viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item, !!from);
+    } else {
+      viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    onClick: onClick,
+    className: classnames(paletteItem, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? sel : undefined),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(imageWrapper),
+        children: /*#__PURE__*/jsx("div", {
+          className: classnames(imageBackground),
+          children: /*#__PURE__*/jsx("div", {
+            "data-test-id": "select-room",
+            className: wcImage,
+            style: {
+              backgroundImage: "url(".concat(item.url, ")")
+            }
+          })
+        })
+      })
+    }), !isVP && /*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? titleSel : undefined, title),
+      children: t('configurator.' + item.N)
+    })]
+  });
+};
+var RoomRound = observer(Room);
+
+export { RoomRound as default };

package/build/esm/index-844d4af2.js

@@ -0,0 +1,25 @@
+import './index-b7d703a6.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+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';
+
+var PlannerUIVariant = function PlannerUIVariant() {
+  return /*#__PURE__*/jsx(DynamicMultiRender, {
+    componentName: "Product/ProductCenter/PlannerUI/PlannerUIVariants"
+  });
+};
+
+export { PlannerUIVariant as default };

package/build/esm/index-84e1e7f1.js

@@ -0,0 +1,153 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-b7d703a6.js';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import Draggable from 'react-draggable';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 wrapper = "wrapper-epfZs";
+var header = "header-GXHlA";
+var handle = "handle-wTliC";
+var closeIcon = "close-icon-L0FOF";
+var mobile = "mobile-3mXgj";
+var css_248z = ".wrapper-epfZs {\n  z-index: 1000;\n  position: absolute;\n  display: flex;\n  background: white;\n  width: 450px;\n  flex-direction: column;\n\n  color: #4f4f4f;\n  font-size: 15px;\n  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25098);\n  border-radius: 5px;\n  top: 0;\n  margin: 4px;\n}\n\n.header-GXHlA {\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  position: absolute;\n  z-index: 1100;\n}\n\n.handle-wTliC {\n  cursor: move;\n  flex-grow: 1;\n}\n\n.close-icon-L0FOF {\n  padding: 12px;\n  z-index: 1002;\n  width: -moz-max-content;\n  width: max-content;\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 28%;\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.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-L0FOF:hover {\n  background-size: 36%;\n  cursor: pointer;\n}\n\n.mobile-3mXgj {\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var ContentItemWrapper = function ContentItemWrapper(_ref) {
+  var _viewHandler$productS;
+  var id = _ref.id,
+    _ref$startPos = _ref.startPos,
+    startPos = _ref$startPos === void 0 ? 'left' : _ref$startPos,
+    noWrapper = _ref.noWrapper;
+  var _useDivaCore = useDivaCore(),
+    contentItemHandler = _useDivaCore.handler.contentItemHandler,
+    _useDivaCore$actions = _useDivaCore.actions,
+    openSideMenu = _useDivaCore$actions.openSideMenu,
+    closeSideMenu = _useDivaCore$actions.closeSideMenu;
+  var _useTranslation = useTranslation(),
+    language = _useTranslation.i18n.language;
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  useEffect(function () {
+    if (!id) return;
+    loadData();
+  }, [id]);
+  var loadData = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return contentItemHandler.getContentItem(id, language);
+          case 2:
+            data = _context.sent;
+            setData(data);
+            if (viewHandler.getIsInMobileView()) {
+              openSideMenu({
+                side: 'left',
+                onClose: function onClose() {
+                  viewHandler.settingsState.setContentItemId();
+                  closeSideMenu();
+                },
+                open: true,
+                content: /*#__PURE__*/jsx("div", {
+                  className: classnames(mobile),
+                  children: /*#__PURE__*/jsx(ContentItemComponent, {
+                    settings: {
+                      contentItems: data.content,
+                      wrapperStyle: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%'
+                      }
+                    }
+                  })
+                })
+              });
+            }
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (id === undefined) setData(undefined);
+  }, [id]);
+  if (!data) return /*#__PURE__*/jsx(Fragment, {});
+  if (viewHandler.getIsInMobileView()) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  if (noWrapper) {
+    return /*#__PURE__*/jsx(ContentItemComponent, {
+      settings: {
+        contentItems: data.content,
+        wrapperStyle: {
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: 'inherit'
+        }
+      }
+    });
+  }
+  var parentSizes = (_viewHandler$productS = viewHandler.productState.productElement) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
+  return /*#__PURE__*/jsx(Draggable, {
+    handle: ".handle",
+    bounds: "parent",
+    defaultPosition: startPos == 'right' ? {
+      x: parentSizes !== null && parentSizes !== void 0 && parentSizes.width ? (parentSizes === null || parentSizes === void 0 ? void 0 : parentSizes.width) - 508 : 0,
+      y: 0
+    } : undefined,
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      style: {
+        maxHeight: parentSizes !== null && parentSizes !== void 0 && parentSizes.height && parentSizes.height < 700 + 20 ? (parentSizes === null || parentSizes === void 0 ? void 0 : parentSizes.height) - 20 : 700
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: header,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames('handle', handle)
+        }), /*#__PURE__*/jsx("div", {
+          className: closeIcon,
+          onClick: function onClick() {
+            return viewHandler.settingsState.setContentItemId();
+          }
+        })]
+      }), /*#__PURE__*/jsx(ContentItemComponent, {
+        settings: {
+          contentItems: data.content,
+          wrapperStyle: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'inherit'
+          }
+        }
+      })]
+    })
+  });
+};
+var ContentItemWrapper$1 = observer(ContentItemWrapper);
+
+export { ContentItemWrapper$1 as default };

package/build/esm/index-858bcc93.js

@@ -0,0 +1,49 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-b7d703a6.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ArticleOverview from './index-1f0453d9.js';
+import SVGViewer from './index-14618a8e.js';
+import { jsx } from 'react/jsx-runtime';
+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.module-efad43ff.js';
+import './index.module-cbec0c38.js';
+import 'classnames';
+import './index.module-8d94dff6.js';
+import 'react-collapsible';
+import './index-a9f65195.js';
+import './index.module-da92b526.js';
+import './index-e0444e4f.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 SVGAnalyser = function SVGAnalyser(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    ChildComponent: SVGViewer,
+    settings: [{
+      key: 'SVGSOURCE',
+      name: 'SVG Source'
+    }, {
+      key: 'SVGOVERVIEW',
+      name: 'SVG Übersicht'
+    }],
+    title: 'SVG Übersicht'
+  }));
+};
+var SVGAnalyzer = observer(SVGAnalyser);
+
+export { SVGAnalyzer as default };