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

package/build/esm/index-da7dd5e3.js

@@ -0,0 +1,76 @@
+import { s as styleInject, u as useViewHandler } from './index-33475a0e.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var container = "container-GW5iG";
+var mobile = "mobile-PkDVb";
+var image = "image-afs5h";
+var textContainer = "textContainer-eYs6D";
+var expanded = "expanded-0VaOS";
+var articleName = "articleName-YT5oo";
+var posNrContainer = "posNrContainer-sis0e";
+var posNrHeightFitter = "posNrHeightFitter-LVv74";
+var quantity = "quantity-nayMq";
+var price = "price-ZyMfu";
+var css_248z = ".container-GW5iG {\n  position: relative;\n  border-top: 1px solid #c6c6c6;\n  margin: 0 16px;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: row;\n}\n\n.container-GW5iG.mobile-PkDVb {\n  margin: 0;\n}\n\n.image-afs5h {\n  max-height: 5rem;\n  max-width: 30%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.textContainer-eYs6D {\n  position: relative;\n  height: 80px;\n  width: calc(70% - 80px);\n  overflow: auto;\n  margin-left: 16px;\n}\n.mobile-PkDVb .textContainer-eYs6D {\n  word-break: break-word;\n}\n.expanded-0VaOS .textContainer-eYs6D {\n  width: calc(50% - 80px);\n}\n\n.articleName-YT5oo {\n  font-weight: 300;\n}\n\n.posNrContainer-sis0e {\n  margin-left: 16px;\n  text-align: center;\n  height: 5rem;\n  width: calc(20% - 16px);\n  position: relative;\n}\n.posNrHeightFitter-LVv74 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n}\n\n.posNrContainer-sis0e span {\n  background: var(--thirdColor);\n  border-radius: var(--articlePosNrRadius);\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 1.27rem;\n  min-width: 1.27rem;\n  width: 2rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  text-align: center;\n  display: inline-block;\n  padding: 0 1px;\n  -webkit-text-stroke: 0.5px;\n  margin-bottom: 0.2rem;\n}\n\n.quantity-nayMq {\n  margin-left: 16px;\n  width: calc(10% - 16px);\n  height: 5rem;\n  font-style: italic;\n  font-weight: 600;\n  text-align: center;\n  line-height: 5rem;\n}\n.price-ZyMfu {\n  margin-left: 16px;\n  width: calc(20% - 16px);\n  height: 5rem;\n  font-weight: 600;\n  line-height: 5rem;\n  text-align: center;\n  white-space: nowrap;\n}\n";
+styleInject(css_248z);
+
+var Articles = function Articles(_ref) {
+  var _item$targetArticlePo;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var isExpanded = viewHandler.uiState.configSettingsIsExpanded || viewHandler.uiState.configSettingsIsMaxExpanded;
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, isExpanded ? expanded : undefined, isMobile ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("img", {
+      className: classnames(image),
+      src: item.image
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(textContainer),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(articleName),
+        children: item.title
+      }), item.description && /*#__PURE__*/jsx("span", {
+        children: item.description
+      })]
+    }), isExpanded && !isMobile && /*#__PURE__*/jsx("div", {
+      className: classnames(posNrContainer),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(posNrHeightFitter),
+        children: (_item$targetArticlePo = item.targetArticlePosNrs) === null || _item$targetArticlePo === void 0 ? void 0 : _item$targetArticlePo.map(function (posNr, key) {
+          return /*#__PURE__*/jsx("span", {
+            children: posNr
+          }, key);
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(quantity),
+      children: item.quantity + 'x'
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(price),
+      children: DivaUtils.formatPrice(item.price)
+    })]
+  });
+};
+var SummaryArticles = observer(Articles);
+
+export { SummaryArticles as default };

package/build/esm/index-deb21562.js

@@ -0,0 +1,96 @@
+import { s as styleInject, u as useViewHandler } from './index-33475a0e.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import PlannerMsgItem from './index-e6610bb7.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wcPlannerMsgContainerParent = "wcPlanner_MsgContainerParent-WfaBR";
+var expanded = "expanded-U8H0E";
+var wcPlannerMsgContainer = "wcPlanner_MsgContainer-pAU-r";
+var wcPlannerInfoContainer = "wcPlanner_InfoContainer-31NTl";
+var wcPlannerWarningContainer = "wcPlanner_WarningContainer-iDg2J";
+var wcPlannerMsgImg = "wcPlanner_msgImg-QHnJP";
+var wcPlannerInfoImg = "wcPlanner_InfoImg-E-1pp";
+var wcPlannerWarningImg = "wcPlanner_WarningImg-Jbeq8";
+var wcPlannerMsgText = "wcPlanner_MsgText-JYxg8";
+var wcPlannerWarningText = "wcPlanner_WarningText-byrqX";
+var wcPlannerInfoText = "wcPlanner_InfoText-qP0nc";
+var wcClose = "wcClose-zokxf";
+var wcPlannerInfoContainerCollapsed = "wcPlanner_InfoContainerCollapsed-6uydm";
+var css_248z = ".wcPlanner_MsgContainerParent-WfaBR {\n  position: absolute;\n  top: 9%;\n  left: 50%;\n  max-width: 80%;\n  z-index: 101;\n}\n\n.expanded-U8H0E.wcPlanner_MsgContainerParent-WfaBR {\n  left: 27%;\n  max-width: 30%;\n}\n.wcPlanner_MsgContainer-pAU-r {\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 35px;\n  transform: translate(-50%, 0);\n  background-color: rgba(255, 255, 255, 0.7);\n  padding: 1.2rem;\n  padding-right: calc(1.2rem + 20px); /* Safari, Chrome and Opera > 12.1 */ /* Firefox < 16 */ /* Internet Explorer */ /* Opera < 12.1 */\n  animation: fadein-3hKT0 0.5s;\n}\n\n.wcPlanner_MsgContainer_Hide-d6Efu {\n  animation: cssAnimation-PxysF 5s forwards;\n}\n\n@keyframes fadein-3hKT0 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Firefox < 16 */\n\n/* Safari, Chrome and Opera > 12.1 */\n\n/* Internet Explorer */\n\n/* Opera < 12.1 */\n@keyframes cssAnimation-PxysF {\n  0% {\n    opacity: 1;\n  }\n  90% {\n    opacity: 0.8;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.wcPlanner_InfoContainer-31NTl {\n  border: 1px solid #3792cb;\n  float: left;\n}\n.wcPlanner_WarningContainer-iDg2J {\n  margin-bottom: 16px;\n  border: 1px solid #dfdfdf;\n}\n\n.wcPlanner_msgImg-QHnJP {\n  height: 30px;\n  width: 30px;\n  background-repeat: no-repeat;\n  background-size: contain;\n  top: calc(50% - 15px);\n  left: 10px;\n  position: absolute;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2226%22 height%3D%2226%22 viewBox%3D%220 0 26 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2213.0412%22 cy%3D%2213.2417%22 r%3D%2211.7995%22 stroke%3D%22%23A81E1E%22%2F%3E%3Cpath d%3D%22M13.041 14.9186L13.041 7.09164%22 stroke%3D%22%23A81E1E%22 stroke-linecap%3D%22round%22%2F%3E%3Ccircle cx%3D%2213.0409%22 cy%3D%2218.6145%22 r%3D%220.77696%22 transform%3D%22rotate(-180 13.0409 18.6145)%22 fill%3D%22%23A81E1E%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcPlanner_InfoImg-E-1pp {\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 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_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 viewBox%3D%220 0 26 26%22 style%3D%22enable-background%3Anew 0 0 26 26%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3Anone%3Bstroke%3A%23000000%3B%7D%09.st1%7Bfill%3Anone%3Bstroke%3A%23000000%3Bstroke-linecap%3Around%3B%7D%3C%2Fstyle%3E%3Ccircle class%3D%22st0%22 cx%3D%2213%22 cy%3D%2213.2%22 r%3D%2211.8%22%2F%3E%3Cpath class%3D%22st1%22 d%3D%22M13%2C11.6v7.8%22%2F%3E%3Ccircle cx%3D%2213%22 cy%3D%227.9%22 r%3D%220.8%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcPlanner_WarningImg-Jbeq8 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2226%22 height%3D%2226%22 viewBox%3D%220 0 26 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2213.0412%22 cy%3D%2213.2417%22 r%3D%2211.7995%22 stroke%3D%22%23A81E1E%22%2F%3E%3Cpath d%3D%22M13.041 14.9186L13.041 7.09164%22 stroke%3D%22%23A81E1E%22 stroke-linecap%3D%22round%22%2F%3E%3Ccircle cx%3D%2213.0409%22 cy%3D%2218.6145%22 r%3D%220.77696%22 transform%3D%22rotate(-180 13.0409 18.6145)%22 fill%3D%22%23A81E1E%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcPlanner_MsgText-JYxg8 {\n  font-size: 17px;\n  line-height: 20px;\n  word-break: break-word;\n  margin-left: 30px;\n  -webkit-text-stroke: 0.3px;\n  max-height: 200px;\n  overflow: auto;\n}\n\n.wcConfigurator-is-mobile-landscape--lWJs .wcPlanner_MsgText-JYxg8,\n.wcConfigurator-is-mobile-portrait-ipbTW .wcPlanner_MsgText-JYxg8 {\n  max-height: 70px;\n  overflow: auto;\n}\n\n.wcPlanner_WarningText-byrqX {\n  color: var(--primaryColor);\n}\n.wcPlanner_InfoText-qP0nc {\n  color: black;\n}\n\n.wcPlanner_MsgContainerParent-WfaBR .wcClose-zokxf {\n  position: absolute;\n  top: 20px;\n  right: 10px;\n  color: #747474;\n  width: 20px;\n  height: calc(100% - 40px);\n  cursor: pointer;\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-position: center center;\n  background-size: 70%;\n}\n\n.wcPlanner_InfoContainerCollapsed-6uydm .wcClose-zokxf {\n  transform: rotate(180deg);\n}\n\n.wcPlanner_InfoContainerCollapsed-6uydm {\n  width: 10px;\n}\n\n.wcPlanner_InfoContainerCollapsed-6uydm .wcPlanner_InfoText-qP0nc {\n  display: none;\n}\n\n/* pfister style */\n.wcPlanner_MsgContainerParent-WfaBR .wcClose-zokxf {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+var PlannerMsgContainer = function PlannerMsgContainer(_ref) {
+  var _ref$wcPlannerMsgCont = _ref.wcPlannerMsgContainerParentClass,
+    wcPlannerMsgContainerParentClass = _ref$wcPlannerMsgCont === void 0 ? wcPlannerMsgContainerParent : _ref$wcPlannerMsgCont,
+    _ref$wcPlannerMsgCont2 = _ref.wcPlannerMsgContainerClass,
+    wcPlannerMsgContainerClass = _ref$wcPlannerMsgCont2 === void 0 ? wcPlannerMsgContainer : _ref$wcPlannerMsgCont2,
+    _ref$wcPlannerWarning = _ref.wcPlannerWarningContainerClass,
+    wcPlannerWarningContainerClass = _ref$wcPlannerWarning === void 0 ? wcPlannerWarningContainer : _ref$wcPlannerWarning,
+    _ref$wcPlannerInfoCon = _ref.wcPlannerInfoContainerClass,
+    wcPlannerInfoContainerClass = _ref$wcPlannerInfoCon === void 0 ? wcPlannerInfoContainer : _ref$wcPlannerInfoCon,
+    _ref$wcPlannerInfoCon2 = _ref.wcPlannerInfoContainerCollapsedClass,
+    wcPlannerInfoContainerCollapsedClass = _ref$wcPlannerInfoCon2 === void 0 ? wcPlannerInfoContainerCollapsed : _ref$wcPlannerInfoCon2,
+    _ref$wcPlannerMsgImgC = _ref.wcPlannerMsgImgClass,
+    wcPlannerMsgImgClass = _ref$wcPlannerMsgImgC === void 0 ? wcPlannerMsgImg : _ref$wcPlannerMsgImgC,
+    _ref$wcPlannerMsgText = _ref.wcPlannerMsgTextClass,
+    wcPlannerMsgTextClass = _ref$wcPlannerMsgText === void 0 ? wcPlannerMsgText : _ref$wcPlannerMsgText,
+    _ref$wcPlannerWarning2 = _ref.wcPlannerWarningImgClass,
+    wcPlannerWarningImgClass = _ref$wcPlannerWarning2 === void 0 ? wcPlannerWarningImg : _ref$wcPlannerWarning2,
+    _ref$wcPlannerInfoImg = _ref.wcPlannerInfoImgClass,
+    wcPlannerInfoImgClass = _ref$wcPlannerInfoImg === void 0 ? wcPlannerInfoImg : _ref$wcPlannerInfoImg,
+    _ref$wcPlannerWarning3 = _ref.wcPlannerWarningTextClass,
+    wcPlannerWarningTextClass = _ref$wcPlannerWarning3 === void 0 ? wcPlannerWarningText : _ref$wcPlannerWarning3,
+    _ref$wcPlannerInfoTex = _ref.wcPlannerInfoTextClass,
+    wcPlannerInfoTextClass = _ref$wcPlannerInfoTex === void 0 ? wcPlannerInfoText : _ref$wcPlannerInfoTex,
+    _ref$wcCloseClass = _ref.wcCloseClass,
+    wcCloseClass = _ref$wcCloseClass === void 0 ? wcClose : _ref$wcCloseClass,
+    _ref$wcCloseButtonCla = _ref.wcCloseButtonClass,
+    wcCloseButtonClass = _ref$wcCloseButtonCla === void 0 ? '' : _ref$wcCloseButtonCla,
+    _ref$landscapeClass = _ref.landscapeClass,
+    landscapeClass = _ref$landscapeClass === void 0 ? '' : _ref$landscapeClass,
+    _ref$portraitClass = _ref.portraitClass,
+    portraitClass = _ref$portraitClass === void 0 ? '' : _ref$portraitClass,
+    _ref$expandedClass = _ref.expandedClass,
+    expandedClass = _ref$expandedClass === void 0 ? expanded : _ref$expandedClass;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcPlannerMsgContainerParentClass, viewHandler.uiState.configSettingsIsExpanded ? expandedClass : undefined, viewHandler.uiState.isMobileLandscape ? landscapeClass : undefined, viewHandler.uiState.isMobilePortrait ? portraitClass : undefined),
+    children: viewHandler.productState.plannerMessagesArr.map(function (item) {
+      return /*#__PURE__*/jsx(PlannerMsgItem, {
+        wcPlannerMsgContainer: wcPlannerMsgContainerClass,
+        wcPlannerWarningContainer: wcPlannerWarningContainerClass,
+        wcPlannerInfoContainer: wcPlannerInfoContainerClass,
+        wcPlannerInfoContainerCollapsed: wcPlannerInfoContainerCollapsedClass,
+        wcPlannerMsgImg: wcPlannerMsgImgClass,
+        wcPlannerMsgText: wcPlannerMsgTextClass,
+        wcPlannerWarningImg: wcPlannerWarningImgClass,
+        wcPlannerInfoImg: wcPlannerInfoImgClass,
+        wcPlannerWarningText: wcPlannerWarningTextClass,
+        wcPlannerInfoText: wcPlannerInfoTextClass,
+        wcClose: wcCloseClass,
+        wcCloseButton: wcCloseButtonClass,
+        item: item[1],
+        codex: item[0]
+      }, item[0]);
+    })
+  });
+};
+var index = observer(PlannerMsgContainer);
+
+export { index as default };

package/build/esm/index-e01b157e.js

@@ -0,0 +1,87 @@
+import { s as styleInject, u as useViewHandler } from './index-33475a0e.js';
+import 'react';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { observer } from 'mobx-react-lite';
+import FilterItem from './index-8b05873e.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'classnames';
+
+var colorFilterIcon = "data:image/jpeg;base64,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";
+
+var container = "container-UEbzL";
+var colorFilter = "colorFilter-CK-4p";
+var deselectColor = "deselectColor-vefuo";
+var css_248z = ".container-UEbzL {\n  position: relative;\n}\n\n.colorFilter-CK-4p {\n  border-radius: 50%;\n  border: solid 2px var(--secondaryColor);\n  width: 26px;\n  height: 26px;\n  cursor: pointer;\n}\n\n.deselectColor-vefuo {\n  position: absolute;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%226%22 height%3D%226%22 viewBox%3D%220 0 6 6%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M5 1L3 3M3 3L5 5M3 3L1 5M3 3L1 1%22 stroke%3D%22white%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: var(--secondaryColor);\n  border-radius: 50%;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 70%;\n  width: 12px;\n  height: 12px;\n}\n";
+styleInject(css_248z);
+
+var SlideFilter = function SlideFilter(_ref) {
+  var _viewHandler$settings;
+  var visibleColorItems = _ref.visibleColorItems,
+    id = _ref.id,
+    deleteCurValue = _ref.deleteCurValue;
+  var viewHandler = useViewHandler();
+  var contents = visibleColorItems.map(function (item) {
+    return {
+      swiperSlideStyle: {
+        backgroundColor: 'transparent',
+        width: 60
+      },
+      content: /*#__PURE__*/jsx(FilterItem, {
+        id: id,
+        item: item
+      })
+    };
+  });
+  var jsXFilter = /*#__PURE__*/jsx(ContentBoxComponent, {
+    settings: {
+      contentBoxProps: {
+        type: 'SliderContainer',
+        sliderType: 'slideX',
+        resistanceRatio: 0,
+        height: 'auto',
+        slidesPerView: 7,
+        contents: contents,
+        centeredSlides: true
+
+        // autoPlay: 3,
+      }
+    }
+  });
+  var onClick = function onClick() {
+    var boxContent = viewHandler.settingsState.infoBoxContent;
+    if (boxContent && boxContent.id === id && boxContent.type === 'filter') viewHandler.settingsState.updateInfoBox();else viewHandler.settingsState.updateInfoBox({
+      type: 'filter',
+      id: id,
+      content: jsXFilter
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    "data-test-id": "slide-filter",
+    children: [((_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue) && /*#__PURE__*/jsx("div", {
+      className: deselectColor,
+      onClick: deleteCurValue
+    }), /*#__PURE__*/jsx("img", {
+      className: colorFilter,
+      src: colorFilterIcon,
+      onClick: onClick
+    })]
+  });
+};
+var SlideFilter$1 = observer(SlideFilter);
+
+export { SlideFilter$1 as default };

package/build/esm/index-e1223a06.js

@@ -0,0 +1,36 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-33475a0e.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-f3f75b04.js';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var font = "font-pqTkf";
+var css_248z = ".font-pqTkf {\n  font-weight: 300;\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 ActionNavigationBlue = function ActionNavigationBlue(props) {
+  return /*#__PURE__*/jsx(ActionNavigation, _objectSpread(_objectSpread({}, props), {}, {
+    showNextButtonIcon: true,
+    className: classnames(font, props.className)
+  }));
+};
+var index = observer(ActionNavigationBlue);
+
+export { index as default };

package/build/esm/index-e1b9e037.js

@@ -0,0 +1,186 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-33475a0e.js';
+import 'react';
+import { s as shelfPlannerContainerRtv, a as shelfPlannerContainerHorizontal, b as shelfPlannerContainerVertical, e as expanded, c as shelfGrid, d as shelfGridBorder, w as warning, f as accessoires, g as configHeaderWrapper, h as closeButton, n as name, S as SelectedAcc, i as accessoireContainer } from './index-24974a85.js';
+import { S as SettingsItem, c as collapsableInner } from './index-7d12b748.js';
+import ShelfAccessoires from './index-1b1d74be.js';
+import ShelfAccessoiresOld from './index-86238f89.js';
+import GridList from './index-27336068.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'sift';
+import './index-02e4764e.js';
+import './index-a3189f35.js';
+import './index-c27e927f.js';
+import './index-956ff8ae.js';
+import './index-756a9918.js';
+import './index.module-a22cc527.js';
+import './index-02a14dba.js';
+import 'react-switch';
+import './index-f417a8af.js';
+import './index-82e69b7e.js';
+import './index-7e7f1097.js';
+import 'react-dropdown';
+import './index-341167de.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-8817c067.js';
+import './index-e62bc8ef.js';
+import './index-e01b157e.js';
+import '@crystaldesign/content-box';
+import './index-8b05873e.js';
+import './index-a1f4a57a.js';
+import './index-4573fa51.js';
+import './index-cd92984a.js';
+import './index-9dad5521.js';
+import './index-487e5ee8.js';
+import 'react-laag';
+import './index-b6a643e6.js';
+import './index-c2b89133.js';
+import './index-eee13bd9.js';
+import './index-da7dd5e3.js';
+import './index-5be85750.js';
+import './index-57fd24f3.js';
+import './index-6c2964d1.js';
+import './index-fb30f3f3.js';
+import './index-18c2845f.js';
+import './index-812f5a9d.js';
+import './index.module-394f8847.js';
+import './index-1ba5aae4.js';
+import './index-775b3efa.js';
+import './index-e8e5b484.js';
+import './index-15cb2e18.js';
+import './index-8f56ef95.js';
+import './index-a246aa28.js';
+import './index-b370ce8f.js';
+import './index.module-00a09e35.js';
+import './index-363edd52.js';
+import './index-773a0040.js';
+import 'react-beautiful-dnd';
+import './index-96190fe5.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ShelfPlanner = function ShelfPlanner(_ref) {
+  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3, _viewHandler$settings4, _item$shelfPlannerGri, _item$shelfPlannerGri2, _item$shelfPlannerGri3, _filteredGroups$0$ite, _filteredGroups$, _selAccItem, _selAccItem2;
+  var item = _ref.item,
+    style = _ref.style,
+    filteredGroups = _ref.filteredGroups;
+  var viewHandler = useViewHandler();
+  var height = ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) - 10;
+  var width = ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().width) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) - 16;
+  var grid = (_item$shelfPlannerGri = item === null || item === void 0 || (_item$shelfPlannerGri2 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri2 === void 0 ? void 0 : _item$shelfPlannerGri2.find(function (g) {
+    return g.ActAccessoire;
+  })) !== null && _item$shelfPlannerGri !== void 0 ? _item$shelfPlannerGri : item === null || item === void 0 || (_item$shelfPlannerGri3 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri3 === void 0 ? void 0 : _item$shelfPlannerGri3[0];
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var items = (_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : [];
+  var selAcc = grid.ActAccessoire;
+  var selAccItem = undefined;
+  if (selAcc) {
+    selAccItem = items.find(function (item) {
+      return item.articleCodex == selAcc;
+    });
+  }
+  var requiredWarning = grid.getRequiredWarning(viewHandler.configState.lang);
+  var palettesOfSelectedAcc = [];
+  if ((_selAccItem = selAccItem) !== null && _selAccItem !== void 0 && (_selAccItem = _selAccItem.configStepKeys) !== null && _selAccItem !== void 0 && _selAccItem.length) {
+    var _loop = function _loop() {
+      var stepKey = selAccItem.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2);
+          _ref3[0];
+          var itemPalette = _ref3[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (viewHandler.settingsState.selectedShelfAccessoire == stepKey.basketId) palettesOfSelectedAcc.push(itemPalette[1]);
+    };
+    for (var i = 0; i < selAccItem.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      return item.htmlRef = _ref4;
+    },
+    className: classnames(viewHandler.productState.shelfPlannerRTV ? shelfPlannerContainerRtv : undefined, grid.Direction == 'horizontal' ? shelfPlannerContainerHorizontal : shelfPlannerContainerVertical, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    style: _objectSpread({
+      height: height
+    }, style),
+    children: [!viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx("div", {
+      className: shelfGrid,
+      children: /*#__PURE__*/jsx("div", {
+        className: shelfGridBorder,
+        children: /*#__PURE__*/jsx(GridList, {
+          item: item,
+          direction: grid.Direction,
+          width: width,
+          height: height - 16 - 16
+        })
+      })
+    }), requiredWarning && /*#__PURE__*/jsx("div", {
+      className: warning,
+      dangerouslySetInnerHTML: {
+        __html: requiredWarning
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: accessoires,
+      children: [!!palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: configHeaderWrapper,
+          onClick: function onClick() {
+            return viewHandler.paletteViewHandler.setSelectedShelfAccessoire();
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: closeButton
+          }), /*#__PURE__*/jsx("div", {
+            className: name,
+            children: (_selAccItem2 = selAccItem) === null || _selAccItem2 === void 0 ? void 0 : _selAccItem2.name
+          })]
+        }), palettesOfSelectedAcc.map(function (item, index) {
+          return /*#__PURE__*/jsx(SettingsItem, {
+            item: item,
+            id: item.id
+          }, index);
+        })]
+      }), !palettesOfSelectedAcc.length && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(SelectedAcc, {
+          selAccItem: selAccItem
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(accessoireContainer, collapsableInner),
+          style: {
+            height: grid.Direction == 'horizontal' ? height - 80 : ''
+          },
+          children: items.map(function (acc, key) {
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoires, {
+                grids: item.shelfPlannerGrids,
+                item: acc,
+                sel: acc.articleCodex == selAcc
+              }, key), !viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoiresOld, {
+                grids: item.shelfPlannerGrids,
+                item: acc
+              }, key)]
+            });
+          })
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ShelfPlanner);
+
+export { index as default };

package/build/esm/index-e2555826.js

@@ -0,0 +1,50 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-33475a0e.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ArticleOverview from './index-e89ca23f.js';
+import SVGViewer from './index-a1b35ae3.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import './index.module-50a2520a.js';
+import './index.module-b22fd441.js';
+import 'classnames';
+import './index.module-71a3c36f.js';
+import 'react-collapsible';
+import './index-9b435704.js';
+import './index.module-d35c705b.js';
+import './index-a4920970.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SVGAnalyser = function SVGAnalyser(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    ChildComponent: SVGViewer,
+    settings: [{
+      key: 'SVGSOURCE',
+      name: 'SVG Source'
+    }, {
+      key: 'SVGOVERVIEW',
+      name: 'SVG Übersicht'
+    }],
+    title: 'SVG Übersicht'
+  }));
+};
+var SVGAnalyzer = observer(SVGAnalyser);
+
+export { SVGAnalyzer as default };

package/build/esm/index-e30b5292.js

@@ -0,0 +1,83 @@
+import { s as styleInject, u as useViewHandler } from './index-33475a0e.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var wcConfiguratorProductFooter = "wcConfigurator-product-footer-ygF4L";
+var portrait = "portrait-FCw3Q";
+var settingsHidden = "settings-hidden-PBWln";
+var landscape = "landscape-KhTSA";
+var expanded = "expanded-pQR-c";
+var wcButton = "wcButton-s5DtR";
+var sel = "sel-1Qm3v";
+var wcViewAs = "wc_ViewAs-y1Kh8";
+var css_248z = "/* footer */\n\n.wcConfigurator-product-footer-ygF4L {\n  text-align: center;\n  z-index: 350;\n}\n\n.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.portrait-FCw3Q.wcConfigurator-product-footer-ygF4L {\n  display: none;\n}\n\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  display: block;\n  height: 40px;\n}\n\n.portrait-FCw3Q.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  bottom: 0px;\n}\n\n.landscape-KhTSA.wcConfigurator-product-footer-ygF4L {\n  display: none;\n}\n\n.landscape-KhTSA.settings-hidden-PBWln.wcConfigurator-product-footer-ygF4L {\n  position: absolute;\n  display: block;\n  bottom: 0;\n  height: 40px;\n}\n\n.expanded-pQR-c.wcConfigurator-product-footer-ygF4L {\n  left: 20%;\n  transform: translate(-40%, 0);\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v,\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:hover {\n  background: var(--secondaryColor);\n  color: white;\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:active,\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR.sel-1Qm3v:active {\n  background: #616161;\n  color: white;\n}\n\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR {\n  background: white;\n  border: 1px solid var(--secondaryColor);\n\n  box-sizing: border-box;\n  -webkit-text-stroke: 0.6px;\n  min-width: 160px;\n  width: auto;\n  height: 38.4px;\n  line-height: 35.8px;\n  color: var(--secondaryColor);\n  border-right: 0px;\n  border-radius: 0px 0px 0px 0px;\n}\n.wcConfigurator-product-footer-ygF4L .wcButton-s5DtR:hover {\n  color: var(--secondaryColor);\n  background: white;\n  box-shadow: var(--boxShadowHover);\n}\n\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:last-child {\n  border-top-right-radius: var(--globalBorderRadius);\n  border-bottom-right-radius: var(--globalBorderRadius);\n  border-right: 1px solid var(--secondaryColor);\n}\n\n.wc_ViewAs-y1Kh8 .wcButton-s5DtR:first-child {\n  border-top-left-radius: var(--globalBorderRadius);\n  border-bottom-left-radius: var(--globalBorderRadius);\n}\n\n/* ViewAs  */\n.wc_ViewAs-y1Kh8 {\n  text-align: center;\n  z-index: 10;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  list-style: none;\n  white-space: nowrap;\n  display: inline-flex;\n  flex-direction: row;\n  vertical-align: middle;\n  position: relative;\n  flex-wrap: nowrap;\n}\n\n.wc_ViewAs-y1Kh8 li {\n  display: block;\n  float: left;\n}\n";
+styleInject(css_248z);
+
+var ProductFooter = function ProductFooter(props) {
+  var _viewHandler$divaWebP, _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderings = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getAlternateRenderingsForSummary()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : [];
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorProductFooter, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: wcViewAs,
+      children: [viewHandler.productState.allow3DComb && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShow3DComb ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('3DCOMB');
+        },
+        children: t('configurator.Foto')
+      }), viewHandler.productState.allowRendering && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("li", {
+          className: classnames(wcButton, viewHandler.productState.doShowRenderImage && viewHandler.productState.curAlternateRendering === undefined ? sel : undefined),
+          onClick: function onClick() {
+            return viewHandler.productState.onChangePlannerView('3D');
+          },
+          children: t('configurator.Foto')
+        }), ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'SUMMARY' && renderings.map(function (rendering) {
+          var _viewHandler$productS;
+          return /*#__PURE__*/jsx("li", {
+            className: classnames(wcButton, viewHandler.productState.doShowRenderImage && ((_viewHandler$productS = viewHandler.productState.curAlternateRendering) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.imageCodex) === rendering.imageCodex ? sel : undefined),
+            onClick: function onClick() {
+              return viewHandler.productState.onChangePlannerView('3D', rendering);
+            },
+            children: rendering.title
+          });
+        })]
+      }), viewHandler.productState.allowGrid && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowGrid ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('2D');
+        },
+        children: t('configurator.Grundriss')
+      }), viewHandler.productState.allowRTV && /*#__PURE__*/jsx("li", {
+        className: classnames(wcButton, viewHandler.productState.doShowRTV ? sel : undefined),
+        onClick: function onClick() {
+          return viewHandler.productState.onChangePlannerView('RTV');
+        },
+        children: t('configurator.RTV')
+      })]
+    })
+  });
+};
+var index = observer(ProductFooter);
+
+export { index as default };