@crystaldesign/diva-web-planner-react 24.13.0-rc.1 → 24.13.0-rc.11

package/build/esm/index-80635175.js

@@ -0,0 +1,131 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-ce87f7de.js';
+import { useState, useEffect } from 'react';
+import Toggle from './index-49d3d9e9.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var wrapper = "wrapper-i5mp2";
+var tabs = "tabs-byZxq";
+var sel = "sel-J1it3";
+var selectionWrapper = "selection-wrapper-BVO4h";
+var selectionText = "selection-text-gO6Tv";
+var selection = "selection-ZoepK";
+var css_248z$1 = ".wrapper-i5mp2 {\n  background-color: rgba(244, 244, 244, 0.8);\n  position: absolute;\n  margin-left: 50px;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.tabs-byZxq {\n  margin: 32px;\n  font-size: 22px;\n  display: flex;\n  gap: 32px;\n}\n\n.tabs-byZxq div {\n  cursor: pointer;\n}\n\n.tabs-byZxq div:hover,\n.sel-J1it3 {\n  border-bottom: var(--primaryColor) 2px solid;\n}\n\n.selection-wrapper-BVO4h {\n  display: flex;\n  position: relative;\n  margin: 8px 32px;\n}\n\n.selection-text-gO6Tv {\n  width: 160px;\n  line-height: 38px;\n}\n.selection-ZoepK {\n  flex-grow: 1;\n}\n\n.selection-wrapper-BVO4h input {\n  flex-grow: 1;\n}\n";
+styleInject(css_248z$1);
+
+var tableWrapper = "table-wrapper-NEM-p";
+var tableCss = "table-css-Qbpn7";
+var css_248z = ".table-wrapper-NEM-p {\n  margin: 16px;\n  overflow: auto;\n  height: calc(100% - 120px);\n}\n.table-css-Qbpn7 {\n}\n.table-css-Qbpn7 td {\n  border: 1px solid black;\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 Table = function Table(_ref) {
+  var properties = _ref.properties,
+    data = _ref.data,
+    id = _ref.id;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    overwrittenProps = _useState2[0],
+    setOverwrittenProps = _useState2[1];
+  var _useState3 = useState(properties),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredProperties = _useState4[0],
+    setFilteredProperties = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchText = _useState6[0],
+    setSearchText = _useState6[1];
+  useEffect(function () {
+    if (searchText) {
+      setFilteredProperties(properties.filter(function (p) {
+        return p.codex.toLocaleLowerCase().includes(searchText === null || searchText === void 0 ? void 0 : searchText.toLocaleLowerCase()) || p.type.toLocaleLowerCase().includes(searchText === null || searchText === void 0 ? void 0 : searchText.toLocaleLowerCase());
+      }));
+    } else {
+      setFilteredProperties(properties);
+    }
+  }, [searchText]);
+  useEffect(function () {
+    setSearchText('');
+    setFilteredProperties(properties);
+  }, [id]);
+  var onClick = function onClick(key, newVal, type) {
+    var newVals = _objectSpread({}, overwrittenProps);
+    if (!data) return;
+    newVals[key] = newVal;
+    if (type == 'Array') {
+      data[key] = newVal === null || newVal === void 0 ? void 0 : newVal.split(';');
+    } else {
+      data[key] = newVal;
+    }
+    setOverwrittenProps(newVals);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: selectionWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: selectionText,
+        children: "Suche:"
+      }), /*#__PURE__*/jsx("input", {
+        type: "text",
+        value: searchText,
+        onChange: function onChange(e) {
+          var _e$target;
+          return setSearchText((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+        }
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: tableWrapper,
+      children: /*#__PURE__*/jsxs("table", {
+        className: tableCss,
+        children: [/*#__PURE__*/jsx("th", {
+          children: "CODEX"
+        }), /*#__PURE__*/jsx("th", {
+          children: "Beschreibung"
+        }), /*#__PURE__*/jsx("th", {
+          children: "Type"
+        }), /*#__PURE__*/jsx("th", {
+          children: "edit"
+        }), filteredProperties.map(function (p) {
+          var _overwrittenProps$p$c, _overwrittenProps$p$c2, _overwrittenProps$p$c3;
+          return /*#__PURE__*/jsxs("tr", {
+            children: [/*#__PURE__*/jsx("td", {
+              children: p.codex
+            }), /*#__PURE__*/jsx("td", {
+              children: p.desc
+            }), /*#__PURE__*/jsx("td", {
+              children: p.type
+            }), /*#__PURE__*/jsxs("td", {
+              children: [p.type == 'boolean' && /*#__PURE__*/jsx(Toggle, {
+                state: (_overwrittenProps$p$c = overwrittenProps[p.catalogKey]) !== null && _overwrittenProps$p$c !== void 0 ? _overwrittenProps$p$c : data === null || data === void 0 ? void 0 : data[p.catalogKey],
+                onChange: function onChange(val) {
+                  return onClick(p.catalogKey, val, p.type);
+                }
+              }), (p.type == 'string' || p.type == 'Array') && /*#__PURE__*/jsx("input", {
+                value: (_overwrittenProps$p$c2 = overwrittenProps[p.catalogKey]) !== null && _overwrittenProps$p$c2 !== void 0 ? _overwrittenProps$p$c2 : data === null || data === void 0 ? void 0 : data[p.catalogKey],
+                onChange: function onChange(e) {
+                  return onClick(p.catalogKey, e.target.value, p.type);
+                },
+                type: "text"
+              }), p.type == 'number' && /*#__PURE__*/jsx("input", {
+                value: (_overwrittenProps$p$c3 = overwrittenProps[p.catalogKey]) !== null && _overwrittenProps$p$c3 !== void 0 ? _overwrittenProps$p$c3 : data === null || data === void 0 ? void 0 : data[p.catalogKey],
+                onChange: function onChange(e) {
+                  return onClick(p.catalogKey, e.target.value, p.type);
+                },
+                type: "number"
+              })]
+            })]
+          }, p.codex);
+        })]
+      })
+    })]
+  });
+};
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Table
+});
+
+export { Table as T, selectionWrapper as a, selectionText as b, selection as c, index as i, sel as s, tabs as t, wrapper as w };

package/build/esm/index-82025d3e.js

@@ -0,0 +1,43 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-ce87f7de.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-e82d5a29.js';
+import PriceSumm from './index-d2b225be.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 'classnames';
+
+var backOverwrite = "back-overwrite--AJgH";
+var forthOverwrite = "forth-overwrite-l0e3R";
+var actionNavigationClass = "action-navigation-class-jX4Hl";
+var css_248z = ".back-overwrite--AJgH,\n.forth-overwrite-l0e3R {\n  border: 1px #262626 solid !important;\n  background-color: var(--thirdColor) !important;\n  color: #262626 !important;\n  font-weight: 700 !important;\n}\n\n.back-overwrite--AJgH,\n.forth-overwrite-l0e3R {\n  cursor: pointer;\n}\n\n.action-navigation-class-jX4Hl {\n  height: 100%;\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 ActionNavigationRalph = function ActionNavigationRalph(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [!viewHandler.getIsInMobileView() && /*#__PURE__*/jsx(PriceSumm, {}), /*#__PURE__*/jsx(ActionNavigation, {
+      className: viewHandler.getIsInMobileView() ? actionNavigationClass : undefined,
+      showBackButtonText: true,
+      forthOverwrite: forthOverwrite,
+      backOverwrite: backOverwrite
+    })]
+  }));
+};
+var index = observer(ActionNavigationRalph);
+
+export { index as default };

package/build/esm/index-83917cdf.js

@@ -0,0 +1,120 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-ce87f7de.js';
+import { observer } from 'mobx-react-lite';
+import { useState, createElement } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-4791c330.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import MetaData from './index-2fd411f3.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wrapper = "wrapper-q2VFw";
+var textWrapper = "text-wrapper-Th9kS";
+var element = "element-e6pDX";
+var elementText = "element-text-Lfswv";
+var image = "image-p37Vz";
+var hexColor = "hexColor-JQ-dp";
+var text = "text-DX9ZX";
+var deleteButton = "delete-button-sXPbV";
+var css_248z = ".wrapper-q2VFw {\n  position: relative;\n}\n\n.text-wrapper-Th9kS {\n  width: 48%;\n}\n.element-e6pDX {\n  position: relative;\n  display: flex;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 2px solid var(--primaryColor);\n  overflow: hidden;\n  cursor: pointer;\n  background-color: #fff;\n}\n\n.element-text-Lfswv {\n  border-radius: 0px;\n  border: 0px solid #fff;\n  width: calc(100% - 26px);\n  margin-top: 5px;\n  height: 64px;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: 26px;\n}\n\n.image-p37Vz {\n  width: 100%;\n  height: auto;\n}\n\n.hexColor-JQ-dp {\n  width: 100%;\n  height: 100%;\n}\n\n.text-DX9ZX {\n  line-height: 20px;\n  width: 100%;\n  font-size: 15px;\n  white-space: nowrap;\n}\n\n.delete-button-sXPbV {\n  position: absolute;\n  top: 0px;\n  right: -8px;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  background-color: red;\n  background-repeat: no-repeat;\n  background-size: 80%;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23fff%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.delete-button-sXPbV:hover {\n  cursor: pointer;\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 Item = function Item(_ref) {
+  var _renderLayer, _selectedElement$meta;
+  var selectedElement = _ref.selectedElement,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _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: 600,
+    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;
+  }
+  var notRelevant = selectedElement.codex.includes('OPV_NICHT_RELEVANT');
+  var isTextElement = !selectedElement.image && !selectedElement.hexColor;
+  if (notRelevant) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, isTextElement ? textWrapper : undefined),
+    children: [/*#__PURE__*/createElement("div", _objectSpread(_objectSpread(_objectSpread({}, triggerProps), hoverProps), {}, {
+      key: selectedElement.codex,
+      className: classnames(element, isTextElement ? elementText : undefined),
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.scrollToOPV(paletteId, selectedElement.codex);
+      },
+      title: t('configurator.scroll_there', 'hier hin scrollen')
+    }), selectedElement.image ? /*#__PURE__*/jsx("img", {
+      className: image,
+      src: selectedElement.image
+    }) : selectedElement.hexColor ? /*#__PURE__*/jsx("div", {
+      className: hexColor,
+      style: {
+        backgroundColor: '#' + selectedElement.hexColor
+      }
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: text,
+        children: selectedElement.text
+      }), /*#__PURE__*/jsx(MetaData, {
+        metaData: selectedElement.metaData,
+        visible: [metaDataVisible, setMetaDataVisible]
+      }, selectedElement.codex)]
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: selectedElement.text,
+      codex: (_selectedElement$meta = selectedElement.metaData) === null || _selectedElement$meta === void 0 || (_selectedElement$meta = _selectedElement$meta.find(function (m) {
+        return m.codex === 'codex';
+      })) === null || _selectedElement$meta === void 0 ? void 0 : _selectedElement$meta.values[0],
+      image: selectedElement.image,
+      hexColor: selectedElement.hexColor,
+      layerProps: layerProps
+    }, selectedElement.codex)))), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedElement, undefined, paletteId);
+      },
+      className: deleteButton,
+      title: t('configurator.remove_selection', 'Auswahl entfernen')
+    })]
+  });
+};
+var Item$1 = observer(Item);
+
+export { Item$1 as default };

package/build/esm/index-841420a5.js

@@ -0,0 +1,43 @@
+import './index-ce87f7de.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@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 RotationCounterClockwise = function RotationCounterClockwise(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.rotation.rotCounterClock, plannerUIProps.classes.buttonGeneral),
+    children: item.posNr
+  });
+};
+var RotationCounterClockwise$1 = observer(RotationCounterClockwise);
+
+export { RotationCounterClockwise$1 as default };

package/build/esm/index-8458683f.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-ce87f7de.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 SummaryOptionTree = function SummaryOptionTree(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Summary/OptionTree"
+  }));
+};
+
+export { SummaryOptionTree as default };

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

@@ -0,0 +1,150 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-ce87f7de.js';
+import SettingsHeader from './index-1a256308.js';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import Dropdown from 'react-dropdown';
+import MobileDropdown from './index-18c8fda6.js';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-db9a16bf.js';
+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/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-5864e079.js';
+import 'classnames';
+
+var wrapper = "wrapper-xpzd5";
+var wcDropDownSelect = "wcDropDownSelect-sB9TS";
+var dropDownArea = "dropDownArea-2LjDI";
+var image = "image-Ox-79";
+var css_248z = ".wrapper-xpzd5 {\n  display: flex;\n  position: relative;\n}\n.wcDropDownSelect-sB9TS {\n  padding: 10.2px 24px 7px 16px !important;\n}\n.wcDropDownSelect-sB9TS {\n  height: 39px;\n  padding: 8px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  letter-spacing: 0pt;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -16px center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 24px;\n  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;\n\n  font-weight: 300;\n}\n\n.wcDropDownSelect-sB9TS > div > div {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.dropDownArea-2LjDI {\n  max-height: 520px;\n\n  right: 0;\n  width: 100%;\n  min-width: 150px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n\n.dropDownArea-2LjDI .dropOption-lwWxd {\n  white-space: nowrap;\n}\n\n.row-fy2V4 {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-KdLW7 {\n  text-align: right;\n  padding-bottom: 9px;\n  padding-top: 9px;\n}\n\n.colum-yG36- {\n  width: 50%;\n  margin: 15px;\n}\n\n.dropDownArea-2LjDI .deltaPrice-rxxE7 {\n  right: 16px;\n}\n\n.image-Ox-79 {\n  width: 45%;\n}\n";
+styleInject(css_248z);
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var DropDowmText = function DropDowmText(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  var allItemsP = item.groups.flatMap(function (group) {
+    return group.items;
+  });
+  var allItems = allItemsP;
+  var sel = allItems.find(function (item) {
+    return item.sel;
+  });
+  var options = [];
+  var selOption = undefined;
+  var onChange = function onChange(val) {
+    setActValue(val.value);
+  };
+  var mobileOptions = [];
+  var selectedMobileOption = undefined;
+  var onChangeMobile = function onChangeMobile(e) {
+    setActValue(e.target.value);
+  };
+  var _useState = useState(sel === null || sel === void 0 ? void 0 : sel.text),
+    _useState2 = _slicedToArray(_useState, 2),
+    actValue = _useState2[0],
+    setActValue = _useState2[1];
+  useEffect(function () {
+    var val = allItems.find(function (item) {
+      return item.codex == actValue;
+    });
+    if (val) viewHandler.paletteViewHandler.clickedOnConfigPalette(val, undefined, paletteId);
+  }, [actValue]);
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsHidden) setActValue(undefined);
+  }, [viewHandler.uiState.configSettingsIsHidden]);
+  var _iterator = _createForOfIteratorHelper(allItems),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item = _step.value;
+      mobileOptions.push({
+        text: _item.text,
+        codex: _item.codex,
+        price: _item.deltaPrice !== undefined && _item.deltaPrice !== 0 ? DivaUtils.formatPrice(Math.abs(_item.deltaPrice)) : undefined
+      });
+      var option = {
+        label: /*#__PURE__*/jsxs("div", {
+          children: [_item.text, _item.deltaPrice !== undefined && _item.deltaPrice !== 0 && /*#__PURE__*/jsx("span", {
+            children: (_item.deltaPrice > 0 ? ' + ' : ' - ') + DivaUtils.formatPrice(Math.abs(_item.deltaPrice))
+          })]
+        }),
+        text: _item.text,
+        value: _item.codex
+      };
+      if (_item.sel) {
+        selOption = option;
+        selectedMobileOption = _item.codex;
+      }
+      options.push(option);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var paletteIsLastPalette = false;
+  if (paletteId) {
+    var nextPalette = viewHandler.settingsState.itemPalettes.get(paletteId + 1);
+    if (!(nextPalette !== null && nextPalette !== void 0 && nextPalette.visible)) {
+      paletteIsLastPalette = true;
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx(SettingsHeader, {
+        isInScroller: true,
+        isSettingsHeader: false,
+        item: item
+      }), ((_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement[0].contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+        item: item.selectedElements[0],
+        style: {
+          position: 'relative',
+          bottom: -16
+        }
+      })]
+    }), isMobile ? /*#__PURE__*/jsx(MobileDropdown, {
+      id: 'wcConfigurator-mobiledropdown-' + item.id,
+      onChange: onChangeMobile,
+      mobileOptions: mobileOptions,
+      selectedOption: selectedMobileOption
+    }) : /*#__PURE__*/jsx(Dropdown, {
+      className: 'wcConfigurator-dropdown-' + item.id,
+      controlClassName: wcDropDownSelect,
+      menuClassName: dropDownArea,
+      options: options,
+      value: selOption,
+      onChange: onChange
+    }), item.type == 'DROPDOWN_IMAGE' && (sel === null || sel === void 0 ? void 0 : sel.image) && /*#__PURE__*/jsx("img", {
+      className: image,
+      src: sel.image.replace('_gal.', '.')
+    }), paletteIsLastPalette && /*#__PURE__*/jsx("div", {
+      style: {
+        height: options.length * 32 + 10
+      }
+    })]
+  });
+};
+var index = observer(DropDowmText);
+
+export { index as default };

package/build/esm/index-86efc801.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-ce87f7de.js';
+import 'react';
+import classnames from 'classnames';
+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';
+import 'mobx-react-lite';
+
+var verticalItem = "verticalItem-EHV6R";
+var openClass = "open-class-cQobQ";
+var visited = "visited-ecPKp";
+var arrow = "arrow-hUG12";
+var css_248z = ".verticalItem-EHV6R {\n  font-size: 12px;\n  padding: 12px 16px;\n  width: calc(100% - 32px);\n  color: #fff;\n  position: relative;\n  cursor: pointer;\n  background-color: #2e4351;\n  display: flex;\n  justify-content: space-between;\n  line-height: 20px;\n  border-bottom: #fdfdfd 1px solid;\n  transition: border 0.3s ease;\n}\n.open-class-cQobQ.verticalItem-EHV6R {\n  border-bottom: none;\n}\n\n.visited-ecPKp {\n  background-color: #142a37;\n}\n\n.arrow-hUG12 {\n  width: 8px;\n  height: 20px;\n  margin-right: 6px;\n  background: center / 100% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  transition: transform 0.3s ease;\n}\n\n.open-class-cQobQ .arrow-hUG12 {\n  transform: rotate(90deg);\n}\n";
+styleInject(css_248z);
+
+var Header = function Header(_ref) {
+  var tabGroup = _ref.tabGroup,
+    open = _ref.open;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(verticalItem, viewHandler.tabGroupAlreadyVisited(tabGroup) ? visited : undefined, open ? openClass : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(arrow)
+    })]
+  });
+};
+
+export { Header as default };

package/build/esm/index-86fbea86.js

@@ -0,0 +1,68 @@
+import { s as styleInject, u as useViewHandler } from './index-ce87f7de.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { DivaUtils } 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 priceWrapper = "price-wrapper-MHpbZ";
+var right = "right-YJreA";
+var additionalPrice = "additional-price-JRJRa";
+var css_248z = ".price-wrapper-MHpbZ {\n  padding-top: 0px;\n  width: 90%;\n  margin-left: 4%;\n  height: 100%;\n  background-color: white;\n  padding-left: 5px;\n  padding-right: 5px;\n  overflow: auto;\n}\n.right-YJreA {\n  float: right;\n}\n.additional-price-JRJRa {\n  max-width: 400px;\n  margin: 0;\n  margin: initial;\n  display: inline;\n}\n";
+styleInject(css_248z);
+
+var Price = function Price() {
+  var _articles$viewHandler, _prices$BasePrices;
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  if (!articles) return /*#__PURE__*/jsx(Fragment, {});
+  var article = (_articles$viewHandler = articles[viewHandler.settingsState.getSelectedBasketIds[0]]) !== null && _articles$viewHandler !== void 0 ? _articles$viewHandler : articles[Object.keys(articles)[0]];
+  var prices = article === null || article === void 0 ? void 0 : article.getConfigPriceData(article.getVariantBasketData());
+  if (prices === undefined) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: priceWrapper,
+    children: [/*#__PURE__*/jsx("a", {
+      children: "Configurations Preise:"
+    }), /*#__PURE__*/jsx("br", {}), prices.AdditionalPrices.map(function (AdditionalPrice) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("p", {
+          className: additionalPrice,
+          children: AdditionalPrice.Title
+        }), /*#__PURE__*/jsx("a", {
+          className: right,
+          children: DivaUtils.formatPrice(AdditionalPrice.Price)
+        }), /*#__PURE__*/jsx("br", {})]
+      });
+    }), /*#__PURE__*/jsx("hr", {}), (_prices$BasePrices = prices.BasePrices) === null || _prices$BasePrices === void 0 ? void 0 : _prices$BasePrices.map(function (p) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("a", {
+          children: ["Basispreis: ", p.BasePriceTitle]
+        }), /*#__PURE__*/jsx("a", {
+          className: right,
+          children: p.BasePrice ? DivaUtils.formatPrice(p.BasePrice) : 'nicht Definiert'
+        }), /*#__PURE__*/jsx("br", {})]
+      });
+    }), /*#__PURE__*/jsx("hr", {}), /*#__PURE__*/jsx("a", {
+      children: "Berechneter Preis: "
+    }), /*#__PURE__*/jsx("a", {
+      className: right,
+      children: DivaUtils.formatPrice(article.calcPrice())
+    }), /*#__PURE__*/jsx("hr", {}), article.hasPartlistArticle && /*#__PURE__*/jsx(Fragment, {
+      children: "Katalog hat St\xFCcklisten Artikel! genaue Preise sind dort Sichtbar"
+    })]
+  });
+};
+var Price$1 = observer(Price);
+
+export { Price$1 as default };