@crystaldesign/diva-web-planner-react 25.13.0-beta.21 → 25.13.0-beta.23

package/build/esm/index-67e570fd.js

@@ -0,0 +1,99 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-f895d7dd.js';
+import { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import Draggable from 'react-draggable';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Move3DGrid = function Move3DGrid(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+  var mouseDownDetected = false;
+  var viewHandler = useViewHandler();
+  var onStartDragging = function onStartDragging(e) {
+    mouseDownDetected = true;
+    if (e.type == 'mousedown') {
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    } else if (e.type == 'touchstart') {
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    }
+  };
+  var onDragging = function onDragging(e) {
+    if (mouseDownDetected && !isDragging) {
+      var _item$onDragStartFunc;
+      setIsDragging(true);
+      //TODO START DRAGGINGitem.onDragStartFunction(item.setId, item.elementId);
+      (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+    } else if (isDragging) {
+      var _viewHandler$productS, _viewHandler$productS2;
+      var boundingLeft = (_viewHandler$productS = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS !== void 0 && _viewHandler$productS.getBoundingClientRect().left ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().left : 0;
+      var boundingTop = (_viewHandler$productS2 = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS2 !== void 0 && _viewHandler$productS2.getBoundingClientRect().top ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().top : 0;
+      if (e.type == 'mousemove') {
+        var _item$onDragMoveFunct;
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - boundingLeft, e.clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      } else if (e.type == 'touchmove') {
+        var _item$onDragMoveFunct2;
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - boundingLeft, e.touches[0].clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+    }
+    mouseDownDetected = false;
+  };
+  var onDragEnd = function onDragEnd(e) {
+    if (isDragging) {
+      var _item$onDragEndFuncti;
+      setIsDragging(false);
+      (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+    }
+    mouseDownDetected = false;
+  };
+  return /*#__PURE__*/jsx(Draggable, {
+    handle: ".handle3DMove",
+    nodeRef: draggable,
+    onStart: function onStart(e) {
+      onStartDragging(e);
+    },
+    onDrag: function onDrag(e) {
+      onDragging(e);
+    },
+    onStop: function onStop(e) {
+      onDragEnd();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      ref: draggable,
+      style: {
+        visibility: isDragging ? 'hidden' : 'visible',
+        left: item.position.x + 'px',
+        top: item.position.y + 'px'
+      },
+      className: classnames('handle3DMove', plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.move3DGrid.move3DGrid)
+    })
+  });
+};
+
+export { Move3DGrid as default };

package/build/esm/index-6808756a.js

@@ -0,0 +1,31 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-f895d7dd.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+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 SettingsItemDefaultTemplate = function SettingsItemDefaultTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Default"
+  }));
+};
+
+export { SettingsItemDefaultTemplate as default };

package/build/esm/index-682ce193.js

@@ -0,0 +1,65 @@
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.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/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var header = "header-88iFZ";
+var wrapper = "wrapper-zFPaP";
+var title = "title-Mime-";
+var sel = "sel--F5X-";
+var collapseArrow = "collapseArrow-iq67x";
+var open = "open-t8G5n";
+var mobile = "mobile-Ksq3e";
+var css_248z = ".header-88iFZ {\n  height: 48px;\n  position: relative;\n  background-color: #f8f8f8;\n  border-bottom: 2px solid #f0f0f0;\n}\n\n.wrapper-zFPaP {\n  margin-left: 16px;\n  margin-right: 16px;\n  display: flex;\n}\n.title-Mime- {\n  padding: 11px;\n  font-weight: 100;\n  font-size: 18px;\n  position: relative;\n}\n\ntitle:hover,\n.sel--F5X- {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.title-Mime-::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  height: 3px;\n  left: 50%;\n  bottom: 0;\n  background-color: var(--diva-theme-palette-primary-main);\n  transition: all ease-in-out 0.2s;\n}\n.title-Mime-:hover::after,\n.sel--F5X-::after {\n  width: 100%;\n  left: 0;\n}\n\n.collapseArrow-iq67x {\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 16.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%22960px%22 height%3D%22560px%22 viewBox%3D%220 0 960 560%22 enable-background%3D%22new 0 0 960 560%22 xml%3Aspace%3D%22preserve%22%3E%3Cg id%3D%22Rounded_Rectangle_33_copy_4_1_%22%3E%09%3Cpath d%3D%22M480%2C344.181L268.869%2C131.889c-15.756-15.859-41.3-15.859-57.054%2C0c-15.754%2C15.857-15.754%2C41.57%2C0%2C57.431l237.632%2C238.937%09%09c8.395%2C8.451%2C19.562%2C12.254%2C30.553%2C11.698c10.993%2C0.556%2C22.159-3.247%2C30.555-11.698l237.631-238.937%09%09c15.756-15.86%2C15.756-41.571%2C0-57.431s-41.299-15.859-57.051%2C0L480%2C344.181z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transform: rotate(90deg);\n  transition: all 0.35s ease;\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  right: 8px;\n  top: 5px;\n}\n.open-t8G5n .collapseArrow-iq67x {\n  transform: rotate(0deg);\n}\n\n.header-88iFZ.mobile-Ksq3e {\n  height: 38px;\n}\n\n.mobile-Ksq3e .title-Mime- {\n  padding: 8px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n.mobile-Ksq3e .collapseArrow-iq67x {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  right: 8px;\n  top: 0px;\n}\n";
+styleInject(css_248z);
+
+var SubTabGroupHeader = function SubTabGroupHeader(_ref) {
+  var openState = _ref.openState,
+    curState = _ref.curState,
+    tabs = _ref.tabs;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    onClick: function onClick() {
+      return openState[1](!openState[0]);
+    },
+    className: classnames(header, openState[0] ? open : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: tabs.map(function (b, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: classnames(title, curState[0] === b && openState[0] ? sel : undefined),
+          onClick: function onClick(e) {
+            curState[1](b);
+            if (!openState[0]) openState[1](true);
+            e.stopPropagation();
+          },
+          children: [b === 'ALL' && tabs.length !== 1 && t('configurator.config_all'), tabs.length === 1 && t('configurator.config_accessoire'), tabs.length > 1 && b !== 'ALL' && index + '.']
+        }, b);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(collapseArrow)
+    })]
+  });
+};
+var SubTabGroupHeader$1 = observer(SubTabGroupHeader);
+
+export { SubTabGroupHeader$1 as default };

package/build/esm/index-68aad8c2.js

@@ -0,0 +1,87 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var inputBox = "input-box-NpxK9";
+var mobile = "mobile-OhbeO";
+var css_248z = ".input-box-NpxK9 {\n  width: 70px;\n  font-size: 20px;\n  height: 22px;\n}\n\n.input-box-NpxK9.mobile-OhbeO {\n  font-size: 16px;\n  height: 18px;\n  width: 50px;\n}\n";
+styleInject(css_248z);
+
+var NumberInput = function NumberInput(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useState = useState(item.numberInput),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputGotChangedByComponent = _useState4[0],
+    setInputGotChangedByComponent = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    invalidValue = _useState6[0],
+    setInvalidValue = _useState6[1];
+  useEffect(function () {
+    var _item$groups;
+    var opvItem = (_item$groups = item.groups) === null || _item$groups === void 0 || (_item$groups = _item$groups[0].items) === null || _item$groups === void 0 ? void 0 : _item$groups[0];
+    if (inputValue && opvItem && !isNaN(inputValue) && Number(opvItem.measureMinimum) <= inputValue && Number(opvItem.measureMaximum) >= inputValue) {
+      setInvalidValue(false);
+      if (inputValue !== Number(opvItem.freeText)) {
+        if (inputGotChangedByComponent) {
+          setInputGotChangedByComponent(false);
+          onRangeChange(opvItem);
+        }
+      }
+    } else {
+      setInvalidValue(true);
+    }
+  }, [inputValue]);
+  useEffect(function () {
+    setInputValue(item.numberInput);
+  }, [item]);
+  var onRangeChange = function onRangeChange(opvItem) {
+    if (inputValue) {
+      viewHandler.paletteViewHandler.onRangeClickChange(item, opvItem, inputValue.toString());
+    }
+  };
+  var onChange = function onChange(e) {
+    var newVal = Number(e.target.value);
+    if (newVal >= 0) {
+      setInputGotChangedByComponent(true);
+      setInputValue(newVal);
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [': ', /*#__PURE__*/jsx("input", {
+      className: classnames(inputBox, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      onChange: onChange,
+      style: {
+        color: invalidValue ? 'red' : undefined
+      },
+      type: "number",
+      value: inputValue
+    }), ' ', item.measureUnit]
+  });
+};
+var NumberInput$1 = observer(NumberInput);
+
+export { NumberInput$1 as default };

package/build/esm/index-68b21ac2.js

@@ -0,0 +1,139 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f895d7dd.js';
+import classnames from 'classnames';
+import { useHover, useLayer } from 'react-laag';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import MetaData from './index-7d1aace9.js';
+import GenericToolTip from './index-239e18f6.js';
+import InfoIcon from './index-6791a979.js';
+import PricePreview from './index-0f3649e7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-b37e7e23.js';
+import 'react-countup';
+
+var articleItem = "article-item-i3J2S";
+var sel = "sel-3vhEw";
+var replacemode = "replacemode-XssaJ";
+var wcArticleInfoContainer = "wcArticleInfoContainer-6umFd";
+var pricesAreHiddenClass = "pricesAreHiddenClass-5i5mY";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-C-sNn";
+var wcConfiguratorSettingsTitleSingleLine = "wcConfigurator-settings-title-single-line-xIggU";
+var wcSize = "wcSize-DKVv4";
+var wcSizeNormal = "wcSize-normal-H7PI-";
+var wcImage = "wcImage-bSQnw";
+var wcArticleSize = "wcArticleSize-FGDRM";
+var css_248z = "/*Planner*/\n\n.article-item-i3J2S {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  white-space: pre-line;\n  border: 3px solid transparent;\n  border: 3px solid var(--optionItemBorderColor, transparent);\n}\n.sel-3vhEw {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderSelColor, var(--primaryColor));\n}\n\n.article-item-i3J2S:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.article-item-i3J2S.replacemode-XssaJ:hover {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderHoverColor, var(--primaryColor));\n}\n\n.article-item-i3J2S:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.wcArticleInfoContainer-6umFd {\n  display: flex;\n  float: left;\n  margin-top: 8px;\n  margin-left: 8px;\n  height: calc(100% - 14px);\n  max-width: calc(100% - 171.2px);\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.pricesAreHiddenClass-5i5mY .wcArticleInfoContainer-6umFd {\n  max-width: calc(100% - 100px);\n}\n\n.article-item-i3J2S .wcConfigurator-settings-title-C-sNn {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  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.article-item-i3J2S .wcConfigurator-settings-title-single-line-xIggU {\n  -webkit-line-clamp: 1;\n}\n.article-item-i3J2S .wcSize-DKVv4 {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\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.article-item-i3J2S .wcSize-DKVv4.wcSize-normal-H7PI- {\n  max-height: 74px;\n}\n\n.article-item-i3J2S .wcImagePlaceHolder-KQO1T {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.article-item-i3J2S .wcImage-bSQnw {\n  width: 74px;\n  height: 74px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  margin-left: 3.2px;\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  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.article-item-i3J2S .wcArticleSize-FGDRM {\n  bottom: 8px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  z-index: 50;\n\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.article-item-i3J2S .wcArticleSize-FGDRM:hover {\n  overflow: visible;\n}\n@media all and (max-width: 1100px) {\n  .article-item-i3J2S .wcSize-normal-H7PI- {\n    height: 96px;\n  }\n\n  .article-item-i3J2S .wcConfigurator-settings-title-C-sNn {\n    -webkit-line-clamp: 2;\n  }\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Article = function Article(_ref) {
+  var _renderLayer, _item$longDescription;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet,
+    hidePrices = _useDivaCore$state.hidePrices;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || !item.price;
+  var isInReplaceMode = viewHandler.settingsState.plannerReplaceMode && !(paletteId == 1 && viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    className: classnames(articleItem, pricesAreHidden ? pricesAreHiddenClass : undefined, 'wcConfigurator_Article', item.sel ? sel : undefined, isInReplaceMode ? replacemode : undefined),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnPlannerPalette(item, paletteId);
+    }
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.image, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcArticleInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible ? wcConfiguratorSettingsTitleSingleLine : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.title
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+          text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.title,
+          desciption: metaDataVisible,
+          codex: item.articleCodex,
+          image: item.image,
+          layerProps: layerProps,
+          price: item.price
+        }, item.codex))), /*#__PURE__*/jsx("div", {
+          className: classnames(wcArticleSize),
+          children: item.sizeInfo
+        })]
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item,
+        style: {
+          bottom: 8
+        }
+      }, item.articleCodex)]
+    }), !pricesAreHidden && /*#__PURE__*/jsx(PricePreview, {
+      price: item.price,
+      style: {
+        right: -3,
+        top: -3,
+        paddingTop: 6
+      }
+    })]
+  }));
+};
+var Article$1 = observer(Article);
+
+export { Article$1 as default };

package/build/esm/index-69d84c10.js

@@ -0,0 +1,85 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-f895d7dd.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var wrapper = "wrapper-Y-d99";
+var toggleSwitch = "toggle-switch-Mhnmc";
+var switchSelection = "switch-selection-WpDtT";
+var switchLabel = "switch-label-KDRkk";
+var sel = "sel-0rh79";
+var css_248z = ".wrapper-Y-d99 {\n  height: 36px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #eaeaea;\n  border-radius: 6px;\n}\n.toggle-switch-Mhnmc {\n  height: calc(100% - 6px);\n  width: calc(100% - 6px);\n  border-radius: 3px;\n  box-sizing: content-box;\n  box-sizing: initial;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.switch-selection-WpDtT {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  height: 30px;\n  background-color: #fff;\n  border-radius: 3px;\n  transition: left 0.25s ease-out;\n}\n\n.switch-label-KDRkk {\n  position: relative;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  line-height: 22px;\n  height: 20px;\n  width: calc(100% - 8px);\n  padding: 6px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.6);\n  text-align: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  transition:\n    color 0.2s ease-out,\n    font-weight 0.2s ease-out;\n}\n\n.sel-0rh79 {\n  font-weight: 300;\n  color: #000;\n}\n";
+styleInject(css_248z);
+
+var MultiToggleSwitch = function MultiToggleSwitch(_ref) {
+  var values = _ref.values,
+    _ref$state = _slicedToArray(_ref.state, 2),
+    selected = _ref$state[0],
+    setSelected = _ref$state[1],
+    round = _ref.round;
+  var widthPercentage = 100 / values.length;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    texts = _useState2[0],
+    setTexts = _useState2[1];
+  useEffect(function () {
+    if (!values.some(function (v) {
+      return !v.endsWith('cm');
+    })) {
+      setTexts(values.map(function (v, i) {
+        return v.replace('cm', '') + (i == values.length - 1 ? 'cm' : '');
+      }));
+    } else {
+      setTexts(values);
+    }
+  }, [values]);
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    style: {
+      borderRadius: round ? '100px' : undefined
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: toggleSwitch,
+      children: [texts.map(function (val, index) {
+        return /*#__PURE__*/jsx("div", {
+          style: {
+            width: widthPercentage + '%'
+          },
+          children: /*#__PURE__*/jsx("label", {
+            onClick: function onClick() {
+              return setSelected(index);
+            },
+            className: classnames(switchLabel, selected === index && sel),
+            children: val
+          })
+        }, index);
+      }), /*#__PURE__*/jsx("div", {
+        className: switchSelection,
+        style: {
+          left: selected / values.length * 100 + '%',
+          width: widthPercentage + '%',
+          borderRadius: round ? '100px' : undefined
+        }
+      })]
+    })
+  });
+};
+
+export { MultiToggleSwitch as default };