@crystaldesign/diva-web-planner-react 26.3.0-beta.45 → 26.3.0-beta.47

package/build/esm/index-326ac842.js

@@ -0,0 +1,68 @@
+import { u as useViewHandler } from './index-1ad1eb2b.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import ConfigStep from './index-b26182bf.js';
+import Header from './index-69195f54.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var VerticalTabGroupItemClassification = function VerticalTabGroupItemClassification(_ref) {
+  var tabGroup = _ref.tabGroup;
+    _ref.height;
+    _ref.minHeight;
+  var viewHandler = useViewHandler();
+  var tabGroupItemRef = useRef(null);
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var configSteps = Array.from(tabGroup.options.values()).map(function (o) {
+    return Array.from(o.configSteps.values()).map(function (s) {
+      return {
+        configStep: s,
+        option: o
+      };
+    });
+  }).flat();
+  return /*#__PURE__*/jsx("div", {
+    ref: tabGroupItemRef,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      open: true,
+      easing: "ease",
+      trigger: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: false
+      }),
+      triggerWhenOpen: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: true
+      }),
+      children: configSteps.map(function (step) {
+        return /*#__PURE__*/jsx(ConfigStep, {
+          step: step
+        }, step.configStep.key);
+      })
+    })
+  });
+};
+var index = observer(VerticalTabGroupItemClassification);
+
+export { index as default };

package/build/esm/index-35858235.js

@@ -0,0 +1,66 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject } from './index-1ad1eb2b.js';
+import 'react';
+import SettingsItemHeader from './index-0d6a5a89.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-deccfa7f.js';
+import './index-4b4c2ec4.js';
+import './index-142e1d7f.js';
+import 'react-dropdown';
+import './index-5a97cd26.js';
+import './index-f231bf02.js';
+import '@crystaldesign/content-box';
+import './index-2d58dbfd.js';
+import './index-d362300e.js';
+import './index-4194e8b2.js';
+import './index-c0a6914d.js';
+import './index-e2172fb2.js';
+import './index-b217f031.js';
+import './index-bf2654dd.js';
+import './index-cce3644c.js';
+import './index-8e56365d.js';
+import 'react-laag';
+import './index-73109d21.js';
+import './index-1ab4da24.js';
+import './index-0e7ca5ae.js';
+import './index-9a123878.js';
+import 'swiper/react';
+import './index-02fd4318.js';
+import './ussIsSticky-d04d9077.js';
+
+var settingsHeaderContainer = "settingsHeaderContainer-ywbxo";
+var settingsHeaderTitle = "settingsHeaderTitle-AeKfm";
+var css_248z = ".settingsHeaderContainer-ywbxo {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.settingsHeaderContainer-ywbxo {\n  position: relative;\n  width: 100%;\n  border-bottom: 1px solid #e6e6e6;\n  width: calc(100% - 32px);\n  margin-top: 12px;\n  height: -moz-fit-content;\n  height: fit-content;\n  padding-bottom: 16px;\n  display: flow-root;\n  --infoIconSize: 24px;\n}\n\n.settingsHeaderTitle-AeKfm {\n  font-size: 26px;\n  margin: 6px 0 0 0;\n  width: auto;\n  font-weight: 300;\n  line-height: 24px;\n  -webkit-font-smoothing: antialiased;\n  color: var(--secondaryColor);\n  float: left;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\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 SettingsItemHeaderSerious = function SettingsItemHeaderSerious(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(SettingsItemHeader, _objectSpread(_objectSpread({}, props), {}, {
+    titleClass: settingsHeaderTitle,
+    containerClass: settingsHeaderContainer
+  }));
+};
+
+export { SettingsItemHeaderSerious as default };

package/build/esm/index-37e18874.js

@@ -0,0 +1,186 @@
+import { s as styleInject, u as useViewHandler, _ as _onClickCheckout } from './index-1ad1eb2b.js';
+import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var container = "container-jVXha";
+var headline = "headline-wXulF";
+var subheadline = "subheadline-dAJ7Z";
+var dealerCard = "dealerCard-WsUAS";
+var dealerImage = "dealerImage-Wd3ix";
+var dealerContent = "dealerContent-Se-R3";
+var dealerName = "dealerName-z85PP";
+var dealerDescription = "dealerDescription-wPDsN";
+var infoBlock = "infoBlock-i-S-s";
+var contactList = "contactList-vdVHd";
+var contactItem = "contactItem-g32vy";
+var contactIcon = "contactIcon-gLhAV";
+var ctaButton = "ctaButton-0BeyQ";
+var ctaSubtext = "ctaSubtext-ScjcP";
+var css_248z = ".container-jVXha {\n  padding: 16px 0;\n  border-top: 1px solid #e8e3da;\n  border-top: 1px solid var(--galleryItemBorderColor, #e8e3da);\n}\n\n.headline-wXulF {\n  font-size: 18px;\n  font-weight: 300;\n  line-height: 1.3;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 8px;\n}\n\n.subheadline-dAJ7Z {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 16px;\n}\n\n.dealerCard-WsUAS {\n  overflow: hidden;\n  border-radius: var(--buttons-border-radius);\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  background: var(--settingsBackgroundColor);\n  margin-bottom: 16px;\n}\n\n.dealerImage-Wd3ix {\n  overflow: hidden;\n  aspect-ratio: 16 / 10;\n}\n\n.dealerImage-Wd3ix img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  -o-object-position: top center;\n     object-position: top center;\n}\n\n.dealerContent-Se-R3 {\n  padding: 16px;\n}\n\n.dealerName-z85PP {\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 4px;\n}\n\n.dealerDescription-wPDsN {\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 12px;\n}\n\n.infoBlock-i-S-s {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin-bottom: 12px;\n  white-space: pre-line;\n}\n\n.contactList-vdVHd {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  border-top: 1px solid #e8e3da;\n  border-top: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  padding-top: 12px;\n}\n\n.contactItem-g32vy {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.contactItem-g32vy a {\n  color: var(--diva-theme-palette-text-secondary);\n  text-decoration: none;\n}\n\n.contactItem-g32vy a:hover {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.contactIcon-gLhAV {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: 2px;\n  opacity: 0.6;\n}\n\n.ctaButton-0BeyQ {\n  width: calc(100% - 48px);\n  padding: 14px 24px;\n  font-size: 14px;\n  font-weight: 300;\n  color: #fff;\n  color: var(--diva-theme-palette-primary-contrast-text, #fff);\n  background: var(--diva-theme-palette-primary-main);\n  border: none;\n  border-radius: var(--buttons-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition:\n    background 0.2s,\n    box-shadow 0.2s;\n}\n\n.ctaButton-0BeyQ:hover {\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.ctaSubtext-ScjcP {\n  font-size: 12px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  text-align: center;\n  margin: 8px 0 0;\n}\n";
+styleInject(css_248z);
+
+var AppointmentPreview = function AppointmentPreview() {
+  var _contactData$contactP, _contactData$contactP2, _contactData$contactP3;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var organization = viewHandler.uiState.organization;
+  var contactData = useMemo(function () {
+    var data = organization === null || organization === void 0 ? void 0 : organization.additionalContactData;
+    if (!data) return undefined;
+    var arr = Array.isArray(data) ? data : [data];
+    return arr[0];
+  }, [organization === null || organization === void 0 ? void 0 : organization.additionalContactData]);
+  var appointmentButton = useMemo(function () {
+    var config = viewHandler.uiState.checkoutConfig;
+    if (!(config !== null && config !== void 0 && config.buttons)) return undefined;
+    return config.buttons.find(function (b) {
+      return b.type === 'APPOINTMENT';
+    });
+  }, [viewHandler.uiState.checkoutConfig]);
+  var handleCtaClick = function handleCtaClick() {
+    if (appointmentButton) {
+      var _appointmentButton$in;
+      _onClickCheckout(appointmentButton, viewHandler, (_appointmentButton$in = appointmentButton.index) !== null && _appointmentButton$in !== void 0 ? _appointmentButton$in : 0, t, undefined, undefined);
+    }
+  };
+  if (!contactData) return null;
+  var hasContactInfo = contactData.street || contactData.zipCode || contactData.city || contactData.phone || contactData.email;
+  if (!hasContactInfo && !contactData.description && !contactData.info && !contactData.contactPersonName && !contactData.contactPersonImage) return null;
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/jsx("h3", {
+      className: headline,
+      children: t('checkout.appointment.preview.headline', 'Persönliche Beratung vereinbaren')
+    }), /*#__PURE__*/jsx("p", {
+      className: subheadline,
+      children: t('checkout.appointment.preview.subheadline', 'Gemeinsam finalisieren wir Ihre Planung mit einem Experten vor Ort.')
+    }), /*#__PURE__*/jsxs("div", {
+      className: dealerCard,
+      children: [((_contactData$contactP = contactData.contactPersonImage) === null || _contactData$contactP === void 0 ? void 0 : _contactData$contactP.url) && /*#__PURE__*/jsx("div", {
+        className: dealerImage,
+        children: /*#__PURE__*/jsx("img", {
+          src: contactData.contactPersonImage.url,
+          alt: (_contactData$contactP2 = contactData.contactPersonName) !== null && _contactData$contactP2 !== void 0 ? _contactData$contactP2 : ''
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: dealerContent,
+        children: [(contactData.contactPersonName || contactData.description) && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("h4", {
+            className: dealerName,
+            children: (_contactData$contactP3 = contactData.contactPersonName) !== null && _contactData$contactP3 !== void 0 ? _contactData$contactP3 : contactData.description
+          }), (contactData.street || contactData.city) && /*#__PURE__*/jsx("p", {
+            className: dealerDescription,
+            children: [contactData.street, [contactData.zipCode, contactData.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')
+          })]
+        }), contactData.info && /*#__PURE__*/jsx("div", {
+          className: infoBlock,
+          children: contactData.info
+        }), /*#__PURE__*/jsxs("div", {
+          className: contactList,
+          children: [(contactData.street || contactData.zipCode || contactData.city) && /*#__PURE__*/jsxs("a", {
+            className: contactItem,
+            href: "https://www.google.com/maps/search/?api=1&query=".concat(encodeURIComponent([contactData.street, contactData.zipCode, contactData.city].filter(Boolean).join(', '))),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [/*#__PURE__*/jsx("path", {
+                d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
+              }), /*#__PURE__*/jsx("circle", {
+                cx: "12",
+                cy: "10",
+                r: "3"
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [contactData.street && /*#__PURE__*/jsx("div", {
+                children: contactData.street
+              }), (contactData.zipCode || contactData.city) && /*#__PURE__*/jsx("div", {
+                children: [contactData.zipCode, contactData.city].filter(Boolean).join(' ')
+              })]
+            })]
+          }), contactData.phone && /*#__PURE__*/jsxs("div", {
+            className: contactItem,
+            children: [/*#__PURE__*/jsx("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /*#__PURE__*/jsx("path", {
+                d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+              })
+            }), /*#__PURE__*/jsx("a", {
+              href: "tel:".concat(contactData.phone.replace(/\s/g, '')),
+              children: contactData.phone
+            })]
+          }), contactData.email && /*#__PURE__*/jsxs("div", {
+            className: contactItem,
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [/*#__PURE__*/jsx("path", {
+                d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+              }), /*#__PURE__*/jsx("path", {
+                d: "M22 6l-10 7L2 6"
+              })]
+            }), /*#__PURE__*/jsx("a", {
+              href: "mailto:".concat(contactData.email),
+              children: contactData.email
+            })]
+          })]
+        })]
+      })]
+    }), appointmentButton && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("button", {
+        type: "button",
+        className: ctaButton,
+        onClick: handleCtaClick,
+        children: [t('checkout.appointment.preview.cta', 'Persönliche Beratung vereinbaren'), /*#__PURE__*/jsx("svg", {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M5 12h14M12 5l7 7-7 7"
+          })
+        })]
+      }), /*#__PURE__*/jsx("p", {
+        className: ctaSubtext,
+        children: t('checkout.appointment.preview.ctaSubtext', 'Gemeinsam finalisieren wir Ihre Planung.')
+      })]
+    })]
+  });
+};
+var AppointmentPreview$1 = observer(AppointmentPreview);
+
+export { AppointmentPreview$1 as default };

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

@@ -0,0 +1,190 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ToolContainer from './index-a017e5ef.js';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, Fragment, 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import 'react-dom';
+import './index-0cf58865.js';
+import 'react-rnd';
+
+var container = "container-43rJg";
+var item = "item-JRY9h";
+var itemActive = "itemActive-t605y";
+var badge = "badge-5hKWt";
+var badgeError = "badgeError-9Bm52";
+var badgeWarning = "badgeWarning-OJfXJ";
+var css_248z = ".container-43rJg {\n  display: flex;\n  height: 42px;\n  gap: 12px;\n  justify-content: flex-start;\n  align-items: center;\n  overflow-x: auto;\n  overflow-y: hidden;\n  min-width: 0;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1500;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n  border-top: 1px solid #e6e6e6;\n  background-color: #f3f3f3;\n}\n\n.item-JRY9h {\n  cursor: pointer;\n  min-width: 80px;\n  flex-shrink: 0;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  text-align: center;\n  border-radius: 4px;\n  border-radius: var(--globalBorderRadius, 4px);\n  transition: background-color 0.15s ease;\n}\n\n.item-JRY9h:hover {\n  background-color: #e8e8e8;\n}\n\n.item-JRY9h.focus-visible-3dEl- {\n  outline: 2px solid #df2927;\n  outline: 2px solid var(--primaryColor, #df2927);\n  outline-offset: 2px;\n}\n\n.item-JRY9h.focus-visible-3dEl- {\n  outline: 2px solid #df2927;\n  outline: 2px solid #df2927;\n  outline: 2px solid var(--primaryColor, #df2927);\n  outline-offset: 2px;\n}\n\n.item-JRY9h:focus-visible {\n  outline: 2px solid #df2927;\n  outline: 2px solid var(--primaryColor, #df2927);\n  outline-offset: 2px;\n}\n\n.itemActive-t605y {\n  background-color: #e0e0e0;\n  font-weight: 600;\n}\n\n.itemActive-t605y:hover {\n  background-color: #d5d5d5;\n}\n\n.badge-5hKWt {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  margin-left: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  border-radius: 9px;\n}\n\n.badgeError-9Bm52 {\n  background-color: #e53e3e;\n}\n\n.badgeWarning-OJfXJ {\n  background-color: #d69e2e;\n}\n\n/* Dark mode – matches backoffice */\n.darkmode .container-43rJg,\nbody.darkmode .container-43rJg {\n  background-color: rgb(20, 20, 20);\n  border-top-color: rgba(255, 255, 255, 0.12);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n  color: rgb(255, 255, 255);\n}\n\n.darkmode .item-JRY9h:hover,\nbody.darkmode .item-JRY9h:hover {\n  background-color: rgba(255, 255, 255, 0.08);\n}\n\n.darkmode .itemActive-t605y,\nbody.darkmode .itemActive-t605y {\n  background-color: rgba(255, 255, 255, 0.12);\n}\n\n.darkmode .itemActive-t605y:hover,\nbody.darkmode .itemActive-t605y:hover {\n  background-color: rgba(255, 255, 255, 0.16);\n}\n";
+styleInject(css_248z);
+
+var Toolbar = function Toolbar(_props) {
+  var _viewHandler$divaWebP, _viewHandler$divaWebP2, _viewHandler$divaWebP3, _viewHandler$productS;
+  var viewHandler = useViewHandler();
+  var articles = (_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner) === null || _viewHandler$divaWebP2 === void 0 || (_viewHandler$divaWebP3 = _viewHandler$divaWebP2.getDivaArticles) === null || _viewHandler$divaWebP3 === void 0 ? void 0 : _viewHandler$divaWebP3.call(_viewHandler$divaWebP2, undefined, true)) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {};
+  var dataCreationIssues = Object.values(articles).flatMap(function (a) {
+    var _a$dataCreationErrors;
+    return (_a$dataCreationErrors = a.dataCreationErrors) !== null && _a$dataCreationErrors !== void 0 ? _a$dataCreationErrors : [];
+  });
+  var errorCount = dataCreationIssues.filter(function (e) {
+    var _e$severity;
+    return ((_e$severity = e.severity) !== null && _e$severity !== void 0 ? _e$severity : 'error') === 'error';
+  }).length;
+  var warningCount = dataCreationIssues.filter(function (e) {
+    return e.severity === 'warning';
+  }).length + viewHandler.productState.plannerMessagesArr.filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      item = _ref2[1];
+    return item.type === 'WARNING';
+  }).length;
+  var infoCount = viewHandler.productState.plannerMessagesArr.filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      item = _ref4[1];
+    return item.type === 'INFO';
+  }).length;
+  var _useDivaCore = useDivaCore(),
+    wwsClient = _useDivaCore.state.organization.settings.wwsClient;
+  var toggleWindow = function toggleWindow(type) {
+    if (viewHandler.wysiwygDebugState.activeWysiwygWindows.has(type)) {
+      viewHandler.wysiwygDebugState.removeWysiwygWindow(type);
+    } else {
+      viewHandler.wysiwygDebugState.addWysiwygWindow(type);
+    }
+  };
+  var isActive = function isActive(type) {
+    return viewHandler.wysiwygDebugState.activeWysiwygWindows.has(type);
+  };
+  var handleInspectViewChange = function handleInspectViewChange() {
+    var newValue = !viewHandler.wysiwygDebugState.wysiwygInspectView;
+    viewHandler.wysiwygDebugState.setWysiwygInspectView(newValue);
+    var actSet = viewHandler.divaWebPlanner.actSet();
+    if (actSet) actSet.inspectMode = newValue;
+    viewHandler.divaWebPlanner.updateConfiguratorStructureOfActSet();
+    viewHandler.paletteViewHandler.updateCurPaletteData(true);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ToolContainer, {}), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsx("div", {
+        className: item,
+        children: DivaUtils.formatPrice((_viewHandler$productS = viewHandler.productState.formatedTotalPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0, viewHandler.productState.priceFormat)
+      }), /*#__PURE__*/jsx("div", {
+        className: viewHandler.wysiwygDebugState.wysiwygInspectView ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: handleInspectViewChange,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && handleInspectViewChange();
+        },
+        children: "Inspect"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PartList') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PartList');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PartList');
+        },
+        children: "St\xFCckliste"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PriceAnalyzer') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PriceAnalyzer');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PriceAnalyzer');
+        },
+        children: "Preise"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PriceList') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PriceList');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PriceList');
+        },
+        children: "Preisliste"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('DecisionAnalyzer') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('DecisionAnalyzer');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('DecisionAnalyzer');
+        },
+        children: "Decisions"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('OptionTreeTable') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('OptionTreeTable');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('OptionTreeTable');
+        },
+        children: "Option Tree"
+      }), /*#__PURE__*/jsxs("div", {
+        className: isActive('ErrorWarningOverview') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('ErrorWarningOverview');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('ErrorWarningOverview');
+        },
+        children: ["Errors & Warnings", errorCount > 0 && /*#__PURE__*/jsx("span", {
+          className: "".concat(badge, " ").concat(badgeError),
+          children: errorCount
+        }), warningCount > 0 && /*#__PURE__*/jsx("span", {
+          className: "".concat(badge, " ").concat(badgeWarning),
+          children: warningCount
+        }), errorCount === 0 && warningCount === 0 && infoCount > 0 && /*#__PURE__*/jsx("span", {
+          className: "".concat(badge, " ").concat(badgeWarning),
+          children: infoCount
+        })]
+      }), wwsClient === 'Pfister' && /*#__PURE__*/jsx("div", {
+        className: isActive('ekText') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('ekText');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('ekText');
+        },
+        children: "Ek Text"
+      })]
+    })]
+  });
+};
+var Toolbar$1 = observer(Toolbar);
+
+export { Toolbar$1 as default };

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

@@ -0,0 +1,130 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
+import 'react-switch';
+import 'react-countup';
+
+var paletteItem = "palette-item-sUeAp";
+var container = "container-4qhuT";
+var content = "content-PlGS7";
+var labelsContainer = "labels-container-b90-e";
+var minLabel = "min-label-V6PZW";
+var maxLabel = "max-label-f0zP7";
+var sliderContainer = "slider-container-0ZpeI";
+var slider = "slider-KB5gQ";
+var wcSliderButton = "wcSliderButton-OSCAA";
+var wcSliderButtonLeft = "wcSliderButtonLeft-AUWb0";
+var wcSliderButtonRight = "wcSliderButtonRight-wCBtH";
+var css_248z = ".palette-item-sUeAp {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n  transition: all 0.15s ease;\n}\n\n.container-4qhuT {\n  display: block;\n  width: 99%;\n}\n\n.content-PlGS7 {\n  margin: 10px;\n}\n\n.labels-container-b90-e {\n  width: 100%;\n  height: 1.2rem;\n}\n\n.min-label-V6PZW {\n  position: absolute;\n  left: 10px;\n}\n\n.max-label-f0zP7 {\n  position: absolute;\n  right: 10px;\n}\n\n.slider-container-0ZpeI {\n  width: 100%;\n  height: 2rem;\n  margin-top: 12px;\n  position: relative;\n}\n\n.slider-KB5gQ {\n  -webkit-appearance: none;\n  width: calc(100% - 3rem - 4px);\n  height: 25px;\n  background: #d3d3d3;\n  outline: none;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n  border-radius: 12.5px;\n  position: absolute;\n  left: 1.5rem;\n}\n\n.slider-KB5gQ:hover {\n  opacity: 1;\n}\n\n.slider-KB5gQ::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 25px;\n  height: 25px;\n  border-radius: 12.5px;\n  background: var(--primaryColor);\n  cursor: pointer;\n}\n\n.slider-KB5gQ::-moz-range-thumb {\n  width: 25px;\n  height: 25px;\n  border-radius: 5px;\n  background: var(--primaryColor);\n  cursor: pointer;\n}\n\n.wcSliderButton-OSCAA {\n  width: 1.5rem;\n  height: 1.5rem;\n  top: 3px;\n  position: absolute;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2213%22 height%3D%2238%22 viewBox%3D%220 0 13 38%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1L0.999998 19.1818L12 37%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center center;\n}\n.wcSliderButtonLeft-AUWb0 {\n  left: 0.15rem;\n}\n.wcSliderButtonRight-wCBtH {\n  transform: rotate(180deg);\n  right: 0.15rem;\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 Range = function Range(_ref) {
+  var _palette$selectedElem;
+  var paletteId = _ref.paletteId,
+    itemP = _ref.item;
+  var item = itemP;
+  var _useState = useState(Number(item.freeText)),
+    _useState2 = _slicedToArray(_useState, 2),
+    curValue = _useState2[0],
+    setCurValue = _useState2[1];
+  var viewHandler = useViewHandler();
+  var palette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState3 = useState(palette === null || palette === void 0 || (_palette$selectedElem = palette.selectedElements) === null || _palette$selectedElem === void 0 || (_palette$selectedElem = _palette$selectedElem[0]) === null || _palette$selectedElem === void 0 ? void 0 : _palette$selectedElem.codex),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOPV = _useState4[0],
+    setSelectedOPV = _useState4[1];
+  useEffect(function () {
+    if (palette) {
+      viewHandler.settingsState.updateItemPalette(paletteId, _objectSpread(_objectSpread({}, palette), {}, {
+        numberInput: curValue,
+        measureUnit: item.measureUnit
+      }));
+    }
+  }, [curValue]);
+  useEffect(function () {
+    if (palette) {
+      var _palette$selectedElem2;
+      var codex = palette === null || palette === void 0 || (_palette$selectedElem2 = palette.selectedElements) === null || _palette$selectedElem2 === void 0 || (_palette$selectedElem2 = _palette$selectedElem2[0]) === null || _palette$selectedElem2 === void 0 ? void 0 : _palette$selectedElem2.codex;
+      if (codex && selectedOPV !== codex) {
+        setSelectedOPV(codex);
+        setCurValue(Number(item.measureMinimum));
+      } else if (palette.numberInput && palette.numberInput != curValue) {
+        setCurValue(palette.numberInput);
+      }
+    }
+  }, [palette, selectedOPV]);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(paletteItem, container),
+    children: /*#__PURE__*/jsxs("div", {
+      className: content,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: labelsContainer,
+        children: [/*#__PURE__*/jsx("a", {
+          className: minLabel,
+          children: item.measureMinimum + ' ' + item.measureUnit
+        }), /*#__PURE__*/jsx("a", {
+          className: maxLabel,
+          children: item.measureMaximum + ' ' + item.measureUnit
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(sliderContainer, 'no-swiping'),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcSliderButton, wcSliderButtonLeft),
+          onClick: function onClick() {
+            var newVal = Number(curValue) - Number(item.measureStep);
+            if (newVal < Number(item.measureMinimum)) return;
+            setCurValue(newVal);
+            viewHandler.paletteViewHandler.onRangeClickChange(palette, item, newVal.toString(), true);
+          }
+        }), /*#__PURE__*/jsx("input", {
+          type: "range",
+          min: item.measureMinimum,
+          max: item.measureMaximum,
+          step: item.measureStep,
+          value: curValue,
+          className: slider,
+          onChange: function onChange(event) {
+            return setCurValue(Number(event.target.value));
+          },
+          onMouseUp: function onMouseUp(event) {
+            return viewHandler.paletteViewHandler.onRangeClickChange(palette, item, event.target.value);
+          },
+          onTouchEnd: function onTouchEnd(event) {
+            return viewHandler.paletteViewHandler.onRangeClickChange(palette, item, event.target.value);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(wcSliderButton, wcSliderButtonRight),
+          onClick: function onClick() {
+            var newVal = Number(curValue) + Number(item.measureStep);
+            if (newVal > Number(item.measureMaximum)) return;
+            setCurValue(newVal);
+            viewHandler.paletteViewHandler.onRangeClickChange(palette, item, newVal.toString());
+          }
+        })]
+      })]
+    })
+  });
+};
+var Range$1 = observer(Range);
+
+export { Range$1 as default };