@crystaldesign/diva-web-planner-react 26.7.0-rc.7 → 26.7.0-rc.9

package/build/esm/index-4fc3796a.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-2a04e43a.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+
+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 SettingsPaletteGroup = function SettingsPaletteGroup(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/Groups/PaletteGroup"
+  }));
+};
+
+export { SettingsPaletteGroup as default };

package/build/esm/index-5279fb47.js

@@ -0,0 +1,108 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-2a04e43a.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import ConfettiExplosion from 'react-confetti-explosion';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+
+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 bigExplodeProps = {
+  force: 0.6,
+  duration: 5000,
+  particleCount: 200,
+  floorHeight: 1600,
+  floorWidth: 1600
+};
+var ConfettiInSummary = function ConfettiInSummary(props) {
+  var _theme$palette$primar, _theme$palette, _theme$palette$primar2, _theme$palette2, _theme$palette$primar3, _theme$palette3;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    theme = _useDivaCore.state.theme;
+  var delay = viewHandler.getViewConfig().navigateMobileSwiper && viewHandler.getIsInMobileView();
+  var _useState = useState(!delay),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  useEffect(function () {
+    if (!delay) return;
+    setTimeout(function () {
+      setVisible(true);
+    }, 300);
+  }, []);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldShowConfetti = _useState4[0],
+    setShouldShowConfetti = _useState4[1];
+  useEffect(function () {
+    var _viewHandler$uiState$, _viewHandler$uiState$2;
+    var confettiCooldownInHours = (_viewHandler$uiState$ = (_viewHandler$uiState$2 = viewHandler.uiState.ViewConfig.showConfettiInSummary) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.confettiCooldownInHours) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : 0;
+
+    //handeling strict mode
+    if (localStorage.getItem('lastConfettiSessionId') === DivaUtils.SessionId && localStorage.getItem('lastConfettiChange') == viewHandler.settingsState.configChanged.toString()) return;
+    if (confettiCooldownInHours > 0) {
+      var lastConfettiTime = localStorage.getItem('lastConfettiTime');
+      if (lastConfettiTime) {
+        var diff = Date.now() - Number(lastConfettiTime);
+        if (diff < confettiCooldownInHours * 60 * 60 * 1000) {
+          setShouldShowConfetti(false);
+          return;
+        }
+      }
+      // Set the timestamp only when we're actually going to show confetti
+      localStorage.setItem('lastConfettiTime', Date.now().toString());
+      localStorage.setItem('lastConfettiChange', viewHandler.settingsState.configChanged.toString());
+      setShouldShowConfetti(true);
+      return;
+    }
+
+    // Session-based logic (confettiCooldownInHours == 0)
+
+    if (localStorage.getItem('lastConfettiSessionId') === DivaUtils.SessionId) {
+      setShouldShowConfetti(false);
+      return;
+    }
+    // Set the session ID only when we're actually going to show confetti
+    localStorage.setItem('lastConfettiSessionId', DivaUtils.SessionId);
+    localStorage.setItem('lastConfettiChange', viewHandler.settingsState.configChanged.toString());
+    setShouldShowConfetti(true);
+  }, []);
+  if (!viewHandler.uiState.ViewConfig.showConfettiInSummary) return /*#__PURE__*/jsx(Fragment, {});
+  if (!shouldShowConfetti) return /*#__PURE__*/jsx(Fragment, {});
+  if (!viewHandler.isParentViewVisible) return /*#__PURE__*/jsx(Fragment, {});
+  var confettiProps = viewHandler.uiState.ViewConfig.showConfettiInSummary.confettiProps;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%'
+    },
+    children: visible && /*#__PURE__*/jsx(ConfettiExplosion, _objectSpread(_objectSpread(_objectSpread({
+      zIndex: 1000001
+    }, bigExplodeProps), confettiProps !== null && confettiProps !== void 0 ? confettiProps : {}), {}, {
+      colors: [(_theme$palette$primar = (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.primary) === null || _theme$palette === void 0 ? void 0 : _theme$palette.main) !== null && _theme$palette$primar !== void 0 ? _theme$palette$primar : '', (_theme$palette$primar2 = (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 || (_theme$palette2 = _theme$palette2.primary) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.dark) !== null && _theme$palette$primar2 !== void 0 ? _theme$palette$primar2 : '', (_theme$palette$primar3 = (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.primary) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.light) !== null && _theme$palette$primar3 !== void 0 ? _theme$palette$primar3 : '']
+    }))
+  });
+};
+var ConfettiInSummary$1 = observer(ConfettiInSummary);
+
+export { ConfettiInSummary$1 as default };

package/build/esm/index-52ac045b.js

@@ -0,0 +1,77 @@
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 teaserContainer = "teaserContainer--DnKQ";
+var emoji = "emoji-R0ay8";
+var title = "title-PeINh";
+var description = "description-dcuP6";
+var button = "button-0gvSY";
+var buttonText = "buttonText-HqWTX";
+var arrow = "arrow-9YFFk";
+var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 15px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n.mobile .description-dcuP6 {\n  font-size: 13px;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var ContentItemTeaser = function ContentItemTeaser(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: teaserContainer,
+    children: [item.emoji && /*#__PURE__*/jsx("div", {
+      className: emoji,
+      children: item.emoji
+    }), /*#__PURE__*/jsx("div", {
+      className: title,
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      className: description,
+      children: item.description
+    }), /*#__PURE__*/jsxs("button", {
+      className: button,
+      onClick: function onClick() {
+        return viewHandler.settingsState.onClickContentItemId(item.id);
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        className: buttonText,
+        children: item.buttonText
+      }), /*#__PURE__*/jsx("div", {
+        className: arrow,
+        children: /*#__PURE__*/jsx("svg", {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M5 12H19M19 12L13 6M19 12L13 18",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        })
+      })]
+    })]
+  });
+};
+var ContentItemTeaser$1 = observer(ContentItemTeaser);
+
+export { ContentItemTeaser$1 as default };

package/build/esm/index-53bf6623.js

@@ -0,0 +1,145 @@
+import { s as styleInject } from './index-2a04e43a.js';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getKey } from './index-48efc6ff.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+import 'sift';
+import './index-1fa73fb8.js';
+import './index-2d2d2431.js';
+import './index-4fc3796a.js';
+import './index-e11d0c6e.js';
+import './index.module-e403d21f.js';
+import './index-f5d4f1c5.js';
+import './index-f6870a49.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-7536d002.js';
+import 'react-dropdown';
+import './index-d2a91e70.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-17cc643d.js';
+import './index-ed03d390.js';
+import './index-346f109f.js';
+import '@crystaldesign/content-box';
+import './index-f9a110fe.js';
+import './index-f281fab5.js';
+import './index-af530b8e.js';
+import './index-9cf0f255.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-561cb8bc.js';
+import './index-622d2f18.js';
+import './index-d36bc5e4.js';
+import './index-5cfd2f4f.js';
+import './index-f6c9850b.js';
+import './index-55105a3e.js';
+import './index-152c53e6.js';
+import 'react-laag';
+import './index.module-c4a06a9f.js';
+import './index-a3c77564.js';
+import './index-81938dc2.js';
+import './index-7974fc02.js';
+import './index-2ca021f4.js';
+import './index-d7cdb94e.js';
+import './index.module-2c07ccb5.js';
+import './index-b8c241a3.js';
+import './index-a422385b.js';
+import './index-19c1368a.js';
+import './index-4953f1f6.js';
+import './index-4b230f94.js';
+import './index-ef005904.js';
+import './index-f8dbc204.js';
+import './index-38d7a702.js';
+import './index-eb0f660b.js';
+import './index-a4767a74.js';
+import './index-7f9b794d.js';
+import './index-03f86982.js';
+import './index-9e44e103.js';
+import 'rc-slider';
+import './index-a52fd6a3.js';
+import './index-64a7e78e.js';
+import './index-04847887.js';
+import './index-72a54d79.js';
+import './index-5279fb47.js';
+import 'react-confetti-explosion';
+import './index-8abbaf37.js';
+import './index-5a195e83.js';
+import './index-3627081b.js';
+import 'react-qr-code';
+import './index-701c1cca.js';
+import './useCustomDimensions-dd45806d.js';
+import './index-5a39a0b2.js';
+import './ussIsSticky-287a90a0.js';
+import './index-015ad3bc.js';
+import './index-a63be589.js';
+import './index-4e3e77ad.js';
+import './index.module-cca52a67.js';
+import './index-ba342957.js';
+import './index-4529202e.js';
+import './index-bb3c4c85.js';
+import './index-dade0892.js';
+
+var container = "container-UuJhj";
+var title = "title-f6urG";
+var css_248z = ".container-UuJhj {\n  display: flex !important;\n  flex-wrap: wrap !important;\n  flex-direction: column !important;\n  margin-bottom: 3px !important;\n  background: rgba(242, 242, 242, 0.6) !important;\n  padding-top: 5px !important;\n}\n\n.title-f6urG {\n  padding-top: 3px;\n  text-align: center;\n  white-space: nowrap;\n  overflow: visible;\n  font-size: 12px;\n  color: #4b4b4b;\n  width: 100%;\n  overflow: visible;\n  height: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  z-index: 100;\n}\n";
+styleInject(css_248z);
+
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    PaletteComponent = _ref.PaletteComponent,
+    paletteId = _ref.paletteId,
+    rowCount = _ref.rowCount,
+    paletteType = _ref.paletteType,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var items = group.items;
+  var name = group.name !== 'none' ? group.name : t('configurator.other');
+  return /*#__PURE__*/jsx(Fragment, {
+    children: items.map(function (item, i) {
+      return /*#__PURE__*/jsxs("div", {
+        className: classnames(container, contentInnerClassName),
+        style: {
+          width: 'calc(' + 100 / rowCount + '%' + (i === 0 ? ' - 3px' : '') + ' - 5px)',
+          borderRadius: i === items.length - 1 && i === 0 ? '8px' : i === 0 ? '8px 0px 0px 8px' : i === items.length - 1 ? '0px 8px 8px 0px' : undefined,
+          marginLeft: i === 0 ? 3 : undefined,
+          paddingRight: '5px'
+        },
+        children: [/*#__PURE__*/jsx(PaletteComponent, {
+          paletteId: paletteId,
+          item: item,
+          paletteType: paletteType,
+          style: {
+            '--galleryItemRowCount': '1',
+            '--galleryItemRowCountSmall': '1',
+            paddingTop: 'unset'
+          }
+        }, getKey(item)), /*#__PURE__*/jsx("span", {
+          className: title,
+          children: i === 0 ? name : ''
+        })]
+      });
+    })
+  });
+};
+
+export { Group as default };

package/build/esm/index-54c3ebe8.js

@@ -0,0 +1,53 @@
+import { c as usePlannerUIHandler } from './index-2a04e43a.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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 AVR = function AVR(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  var rotation = (item.rotOfElement ? item.rotOfElement : 0) + (item.iconRotDeg ? item.iconRotDeg : 0);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, undefined);
+    },
+    style: {
+      left: rect.left + 'px',
+      top: rect.top + 'px',
+      transform: 'rotate(' + rotation + 'deg)'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.dockingPoint.AVR.avr, iconIsSelected ? plannerUIProps.classes.dockingPoint.AVR.avrSel : undefined),
+    children: item.posNr
+  });
+};
+var AVR$1 = observer(AVR);
+
+export { AVR$1 as default };

package/build/esm/index-55105a3e.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-2a04e43a.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+
+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 SettingsItemAccessoireTemplate = function SettingsItemAccessoireTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Accessoires"
+  }));
+};
+
+export { SettingsItemAccessoireTemplate as default };

package/build/esm/index-570e3804.js

@@ -0,0 +1,67 @@
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 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: var(--diva-theme-palette-primary-light);\n  border-bottom: 2px solid var(--diva-theme-palette-primary-main);\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\n.title-Mime-: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 };