@crystaldesign/diva-web-planner-react 26.3.0-beta.9 → 26.4.0-beta.1

package/build/esm/index-991d617e.js

@@ -0,0 +1,205 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, P as PricePreview, S as SettingsHeader } from './index-1ad1eb2b.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import Dropdown from 'react-dropdown';
+import MobileDropdown from './index-8b8dbaa7.js';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-1ab4da24.js';
+import ReverseCheck from './index-99e2493e.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/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-5a97cd26.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+
+var iconWrapper = "icon-wrapper-uXqGb";
+var wcDropDownSelect = "wcDropDownSelect-sB9TS";
+var dropDownArea = "dropDownArea-2LjDI";
+var image = "image-Ox-79";
+var label = "label-l3TV3";
+var wrapper = "wrapper-xpzd5";
+var css_248z = ".icon-wrapper-uXqGb {\n  display: flex;\n  position: relative;\n}\n.wcDropDownSelect-sB9TS {\n  padding: 10.2px 24px 7px 16px !important;\n}\n.wcDropDownSelect-sB9TS {\n  height: 39px;\n  padding: 8px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  letter-spacing: 0pt;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -16px center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 24px;\n  transition:\n    box-shadow 0.5s,\n    border-color 0.25s ease-in-out;\n\n  font-weight: 300;\n}\n\n.wcDropDownSelect-sB9TS > div > div {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.dropDownArea-2LjDI {\n  max-height: 520px;\n\n  right: 0;\n  width: 100%;\n  min-width: 150px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n\n.dropDownArea-2LjDI .dropOption-lwWxd {\n  white-space: nowrap;\n}\n\n.row-fy2V4 {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-KdLW7 {\n  text-align: right;\n  padding-bottom: 9px;\n  padding-top: 9px;\n}\n\n.colum-yG36- {\n  width: 50%;\n  margin: 15px;\n}\n\n.image-Ox-79 {\n  width: 45%;\n}\n\n.label-l3TV3 {\n  position: relative;\n  padding-right: 64px;\n}\n\n.wrapper-xpzd5 .Dropdown-root {\n  position: relative;\n}\n\n.wrapper-xpzd5 .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 2px 24px 2px 10px;\n  transition: all 200ms ease;\n  background-color: #fff;\n  border-radius: var(--globalBorderRadius);\n  font-size: 14px;\n}\n\n.mobile-XuD0m .Dropdown-control {\n  font-size: 12px;\n}\n\n.tablet-yL-Pt .Dropdown-control {\n  font-size: 15px;\n}\n\n.wrapper-xpzd5 .Dropdown-control:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n}\n\n.wrapper-xpzd5 .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 8px;\n  top: 15px;\n  width: 0;\n}\n\n.wrapper-xpzd5 .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n.wrapper-xpzd5 .Dropdown-menu {\n  background-color: white;\n  box-sizing: border-box;\n  border: 1px solid #ddd;\n  margin-top: -1px;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1100;\n  -webkit-overflow-scrolling: touch;\n}\n\n.wrapper-xpzd5 .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n.wrapper-xpzd5 .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n.wrapper-xpzd5 .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n.wrapper-xpzd5 .Dropdown-option:hover {\n  background-color: #f2f9fc;\n}\n\n.wrapper-xpzd5 .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n.wrapper-xpzd5 .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
+styleInject(css_248z);
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var DropDowmText = function DropDowmText(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    actValue = _useState2[0],
+    setActValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    allItems = _useState4[0],
+    setAllItems = _useState4[1];
+  var _useState5 = useState(undefined),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sel = _useState6[0],
+    setSel = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    mobileOptions = _useState8[0],
+    setMobileOptions = _useState8[1];
+  var _useState9 = useState(undefined),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedMobileOption = _useState10[0],
+    setSelectedMobileOption = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    options = _useState12[0],
+    setOptions = _useState12[1];
+  var _useState13 = useState(undefined),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selOption = _useState14[0],
+    setSelOption = _useState14[1];
+  useEffect(function () {
+    var allItemsP = item.groups.flatMap(function (group) {
+      return group.items;
+    });
+    var items = allItemsP;
+    setAllItems(items);
+    var sel = items.find(function (item) {
+      return item.sel;
+    });
+    if (actValue !== (sel === null || sel === void 0 ? void 0 : sel.text)) setActValue(sel === null || sel === void 0 ? void 0 : sel.text);
+    setSel(sel);
+  }, [item]);
+  var onChange = function onChange(val) {
+    setActValue(val.value);
+  };
+  var onChangeMobile = function onChangeMobile(e) {
+    setActValue(e.target.value);
+  };
+  useEffect(function () {
+    var val = allItems.find(function (item) {
+      return item.codex == actValue;
+    });
+    if (val) {
+      setSelOption({
+        label: /*#__PURE__*/jsx("div", {
+          className: label,
+          children: val.text
+        }),
+        value: val.codex
+      });
+      viewHandler.paletteViewHandler.clickedOnConfigPalette(val, undefined, paletteId);
+    }
+  }, [actValue]);
+  useEffect(function () {
+    var mobileOptions = [];
+    var selectedMobileOption = undefined;
+    var opts = [];
+    var _iterator = _createForOfIteratorHelper(allItems),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _item = _step.value;
+        mobileOptions.push({
+          text: _item.text,
+          codex: _item.codex
+        });
+        var option = {
+          label: /*#__PURE__*/jsxs("div", {
+            className: label,
+            children: [_item.text, _item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+              asyncPricePreview: _item.pricePreviewPromise,
+              sel: _item.sel
+            }), _item.checkForReversingChanges !== undefined && /*#__PURE__*/jsx(ReverseCheck, {
+              item: _item,
+              paletteId: paletteId
+            })]
+          }),
+          text: _item.text,
+          value: _item.codex
+        };
+        if (_item.sel) {
+          setSelOption(option);
+          selectedMobileOption = _item.codex;
+        }
+        opts.push(option);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    setOptions(opts);
+    setMobileOptions(mobileOptions);
+    setSelectedMobileOption(selectedMobileOption);
+  }, [allItems]);
+  var paletteIsLastPalette = false;
+  if (paletteId) {
+    var nextPalette = viewHandler.settingsState.itemPalettes.get(paletteId + 1);
+    if (!(nextPalette !== null && nextPalette !== void 0 && nextPalette.visible)) {
+      paletteIsLastPalette = true;
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    className: wrapper,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: iconWrapper,
+      children: [/*#__PURE__*/jsx(SettingsHeader, {
+        isInScroller: true,
+        isSettingsHeader: false,
+        item: item
+      }), ((_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement[0].contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+        item: item.selectedElements[0],
+        style: {
+          position: 'relative',
+          bottom: -16
+        }
+      }, item.selectedElements[0].codex)]
+    }), isMobile ? /*#__PURE__*/jsx(MobileDropdown, {
+      id: 'wcConfigurator-mobiledropdown-' + item.id,
+      onChange: onChangeMobile,
+      mobileOptions: mobileOptions,
+      selectedOption: selectedMobileOption
+    }) : /*#__PURE__*/jsx(Dropdown, {
+      className: 'wcConfigurator-dropdown-' + item.id,
+      controlClassName: wcDropDownSelect,
+      menuClassName: dropDownArea,
+      options: options,
+      value: selOption,
+      onChange: onChange
+    }), item.type == 'DROPDOWN_IMAGE' && (sel === null || sel === void 0 ? void 0 : sel.image) && /*#__PURE__*/jsx("img", {
+      className: image,
+      src: sel.image.replace('_gal.', '.')
+    }), paletteIsLastPalette && /*#__PURE__*/jsx("div", {
+      style: {
+        height: options.length * 32 + 10
+      }
+    })]
+  });
+};
+var index = observer(DropDowmText);
+
+export { index as default };

package/build/esm/index-997bccf4.js

@@ -0,0 +1,96 @@
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import ProductRoomList from './index-bc5344dd.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wcNav3DToolbar = "wc_Nav3DToolbar-dFNdl";
+var wrapper = "wrapper-AVxdB";
+var wcZoomIn = "wcZoomIn-Zt83g";
+var wcZoomOut = "wcZoomOut-sVnrQ";
+var wcFullScreen = "wcFullScreen-YrF3k";
+var wcReset = "wcReset-b3nN-";
+var wc3DDimLine = "wc3DDimLine-qXO6b";
+var css_248z = ".wc_Nav3DToolbar-dFNdl {\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 400;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.wrapper-AVxdB {\n  background: rgba(254, 254, 254, 0.9);\n  height: 20px;\n  margin-right: 5px;\n  display: flex;\n  flex-direction: row;\n  line-height: 24px;\n\n  padding: 0.6rem 0.5rem 0.9rem 0.5rem;\n}\n.wrapper-AVxdB:hover {\n  background: #fefefe;\n  color: var(--primaryColor);\n  cursor: pointer;\n  box-shadow: var(--boxShadowHover);\n}\n.wc_Nav3DToolbar-dFNdl .wrapper-AVxdB div {\n  width: 25.6px;\n  height: 25.6px;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center center;\n  transition: background-color 0.15s ease;\n}\n\n/*------------------------Nav Icons--------------------------------------*/\n\n/* pfister */\n.wcZoomIn-Zt83g {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2226%22 height%3D%2224%22 viewBox%3D%220 0 26 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9.13434 17.3731C13.8328 17.3731 17.6417 13.6079 17.6417 8.96328C17.6417 4.31867 13.8328 0.553467 9.13434 0.553467C4.43584 0.553467 0.626953 4.31867 0.626953 8.96328C0.626953 13.6079 4.43584 17.3731 9.13434 17.3731Z%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22%2F%3E%3Cpath d%3D%22M24.868 22.6179L15.6235 14.5441%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M4.56201 8.96326H13.7097%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M9.13379 4.44189V13.4847%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomOut-sVnrQ {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.69615 16.6951C12.9919 16.6951 16.4743 13.2526 16.4743 9.00611C16.4743 4.75961 12.9919 1.31714 8.69615 1.31714C4.40038 1.31714 0.917969 4.75961 0.917969 9.00611C0.917969 13.2526 4.40038 16.6951 8.69615 16.6951Z%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22%2F%3E%3Cpath d%3D%22M23.0816 21.4903L14.6631 14.1379%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M4.51465 9.0061H12.8783%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcFullScreen-YrF3k {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2221%22 viewBox%3D%220 0 20 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg clip-path%3D%22url(%23clip0)%22%3E%3Cpath d%3D%22M19.5811 10.3625V16.9734C19.5811 18.5633 18.4933 19.9023 17.2381 19.9023H2.76106C1.42215 19.9023 0.417969 18.5633 0.417969 16.9734V3.75162C0.417969 2.16167 1.50583 0.822754 2.76106 0.822754H9.87404%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M19.5813 0.822754L10.46 9.94409%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M13.7236 0.822754H19.5814V6.59681%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id%3D%22clip0%22%3E%3Crect width%3D%2220%22 height%3D%2220%22 fill%3D%22white%22 transform%3D%22translate(0 0.404297)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");\n}\n\n.wcReset-b3nN- {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2225%22 height%3D%2221%22 viewBox%3D%220 0 25 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg clip-path%3D%22url(%23clip0)%22%3E%3Cpath d%3D%22M4.3782 14.1701C3.9275 13.2399 3.70215 12.0771 3.70215 10.9143C3.70215 5.68177 7.75849 1.49573 12.8289 1.49573C14.181 1.49573 15.5331 1.84456 16.6599 2.42596%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M20.7159 6.14685C21.5047 7.5422 21.9554 9.17011 21.9554 10.9143C21.9554 16.1469 17.899 20.3329 12.8286 20.3329C10.9131 20.3329 9.1103 19.7515 7.64551 18.5887%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22%2F%3E%3Cpath d%3D%22M19.1387 9.05387L20.4908 5.44922L23.9837 6.84457%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M6.0681 11.2632L4.60331 14.8678L1.11035 13.2399%22 stroke%3D%22%236F6F6F%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id%3D%22clip0%22%3E%3Crect width%3D%2224%22 height%3D%2220%22 fill%3D%22white%22 transform%3D%22translate(0.546875 0.914307)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");\n}\n\n.wc3DDimLine-qXO6b {\n  width: 32px !important;\n  height: 30px !important;\n  margin-top: -3px !important;\n  margin-left: -5px !important;\n  margin-right: -5px !important;\n}\n\n.wc3DDimLine-qXO6b {\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 15 12%22 style%3D%22enable-background%3Anew 0 0 15 12%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3Anone%3B %7D%09.st1%7Bfill%3A%237E7E7E%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M14.8%2C1.3c0-0.6-0.5-1.2-1.2-1.2H1.4c-0.6%2C0-1.2%2C0.5-1.2%2C1.2v9.4c0%2C0.6%2C0.5%2C1.2%2C1.2%2C1.2h12.2%09c0.6%2C0%2C1.2-0.5%2C1.2-1.2C14.8%2C10.7%2C14.8%2C1.3%2C14.8%2C1.3z%22%2F%3E%3Cg%3E%09%3Cpath class%3D%22st1%22 d%3D%22M12.9%2C2.9c-0.1%2C0-0.2%2C0.1-0.2%2C0.2v5.8c0%2C0.1%2C0.1%2C0.2%2C0.2%2C0.2S13%2C9%2C13%2C8.9V3.1C13%2C3%2C12.9%2C2.9%2C12.9%2C2.9z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M2.1%2C2.9C2.1%2C2.9%2C2%2C3%2C2%2C3.1v5.8C2%2C9%2C2.1%2C9.1%2C2.1%2C9.1c0.1%2C0%2C0.2-0.1%2C0.2-0.2V3.1C2.3%2C3%2C2.2%2C2.9%2C2.1%2C2.9z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M10.3%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0C10.1%2C5%2C10%2C5%2C10%2C5.1v0.8H5V5.1C5%2C5%2C4.9%2C5%2C4.9%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0l-1.5%2C1%09%09c0%2C0-0.1%2C0.1-0.1%2C0.1c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1l1.5%2C1c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0C4.9%2C7.1%2C5%2C7.1%2C5%2C7V6.2H10V7c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1%09%09c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0l1.5-1c0%2C0%2C0.1-0.1%2C0.1-0.1c0-0.1%2C0-0.1-0.1-0.1L10.3%2C4.9z M4.6%2C6.7L3.6%2C6l1-0.6V6.7z M10.4%2C6.7%09%09V5.4l1%2C0.6L10.4%2C6.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var NavBar = function NavBar(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcNav3DToolbar),
+      children: [!viewHandler.productState.plannerRenderingIsStaticBG && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: wrapper,
+          onClick: function onClick() {
+            return viewHandler.productState.onNav3DMenuSelect('Nav3DViews');
+          },
+          children: /*#__PURE__*/jsx("div", {
+            className: wcReset,
+            title: t('configurator.NAV3DVIEWS_TT')
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: wrapper,
+          onClick: function onClick() {
+            return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomIn');
+          },
+          children: /*#__PURE__*/jsx("div", {
+            className: wcZoomIn,
+            title: t('configurator.NAV3DZOOMIN_TT')
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: wrapper,
+          onClick: function onClick() {
+            return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomOut');
+          },
+          children: /*#__PURE__*/jsx("div", {
+            className: wcZoomOut,
+            title: t('configurator.NAV3DZOOMOUT_TT')
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: wrapper,
+        onClick: function onClick() {
+          return viewHandler.productState.onNav3DMenuSelect('Nav3DDimLine');
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: wc3DDimLine,
+          title: t('configurator.NAV3DDIMLINE_TT')
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: wrapper,
+        onClick: function onClick() {
+          return viewHandler.productState.onNav3DMenuSelect('Nav3DFullScreen');
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: wcFullScreen,
+          title: t('configurator.NAV3DFULLSCREEN_TT')
+        })
+      })]
+    }), /*#__PURE__*/jsx(ProductRoomList, {})]
+  });
+};
+var index = observer(NavBar);
+
+export { index as default };

package/build/esm/index-999d0cb1.js

@@ -0,0 +1,173 @@
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import { useEffect } from 'react';
+import Settings from './index-92ab2c15.js';
+import TabGroup from './index-0e3f307c.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-6f5a925c.js';
+import { jsx, Fragment, jsxs } 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';
+import './index-4941cf24.js';
+import './index-2de7c8a1.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-72a997f5.js';
+import './index-a974091f.js';
+import './index-967b3d49.js';
+import 'sift';
+import './index-63c2feb3.js';
+import './index-ac6d3069.js';
+import './index-f55f19ad.js';
+import './index-805f7b92.js';
+import './index.module-94546f1e.js';
+import './index-1ab4da24.js';
+import './index-99e2493e.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-3fdf0b16.js';
+import 'react-dropdown';
+import './index-4b4c2ec4.js';
+import './index-142e1d7f.js';
+import './index-5a97cd26.js';
+import './index-f231bf02.js';
+import '@crystaldesign/content-box';
+import './index-2d58dbfd.js';
+import './index-d362300e.js';
+import './index-b769f30b.js';
+import './index-25ef0f48.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-3e464da5.js';
+import './index-c2588a60.js';
+import './index-7351a5cb.js';
+import './index-432eb9e2.js';
+import './index-c50e6878.js';
+import './index-41ecd5d0.js';
+import './index-a96e74f2.js';
+import 'react-laag';
+import './index.module-9bb6f869.js';
+import './index-0a30ab08.js';
+import './index-55aaebf4.js';
+import './index-3c662f4d.js';
+import './index-02ed878f.js';
+import './index-ed5d9fe7.js';
+import './index.module-3dcfe445.js';
+import './index-f7e9ec09.js';
+import './index-2b9d752a.js';
+import './index-ad48ec5a.js';
+import './index-5dc885de.js';
+import './index-63be2002.js';
+import './index-73109d21.js';
+import './index-7d969ff1.js';
+import './index-097014b9.js';
+import './index-0692f5bb.js';
+import './index-0ccd98fa.js';
+import './index-0c727a6a.js';
+import './index-95e7abd3.js';
+import './index-f271a367.js';
+import 'rc-slider';
+import './index-ae897d4f.js';
+import './index-8407edca.js';
+import './index-8f96c581.js';
+import './index-63299575.js';
+import './index-b73d1758.js';
+import 'react-confetti-explosion';
+import './index-ed48acae.js';
+import './index-097c5352.js';
+import './index-87bbcc18.js';
+import 'react-qr-code';
+import './index-a10fb8b0.js';
+import './useCustomDimensions-0a75fd35.js';
+import './index-b426aeb9.js';
+import './ussIsSticky-d04d9077.js';
+import './index-2feffe41.js';
+import './index-69ac1dd6.js';
+import './index-91706965.js';
+import './index.module-db94087a.js';
+import './index-9c2c0896.js';
+import './index-fb4d56f0.js';
+import './index-f97f8a09.js';
+import './index-37e18874.js';
+import './index-59feb61c.js';
+import './index-2ca10590.js';
+import './index.module-5f838b7e.js';
+import './index-9ba7f82a.js';
+import './index-ff15e677.js';
+import './index-53661fa9.js';
+import './index-faabda0a.js';
+import '@mui/material';
+import './index-d7c39c02.js';
+import './index-f6cb0b62.js';
+import './index-44765cb1.js';
+import './index-808bdb7c.js';
+import './index-d715f450.js';
+
+var wcConfigurator = "wcConfigurator-IeI91";
+var wcConfiguratorSteps = "wc-configurator-steps-yPThi";
+var wcConfiguratorSettings = "wc-configurator-Settings-3U39-";
+var tabSearchClass = "tab-search-class-qJEaW";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-IeI91 {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n\n  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-IeI91 *,\n.wcConfigurator-IeI91 *::before,\n.wcConfigurator-IeI91 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-yPThi {\n  border-radius: 8px 0 0 8px;\n  overflow: hidden;\n  width: 350px;\n  position: relative;\n}\n\n.wc-configurator-Settings-3U39- {\n  width: calc(100% - 350px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n\n.tab-search-class-qJEaW {\n  background-color: #0d3040;\n  padding: 12px 16px;\n  position: relative;\n  display: flex;\n}\n\n.tab-search-class-qJEaW input {\n  outline: medium none invert !important;\n  outline: initial !important;\n}\n\n.tab-search-class-qJEaW input {\n  color: #fff;\n  width: 100%;\n  background-color: #0d3040;\n  font-size: 14px;\n  border: 0px solid;\n}\n\n.tab-search-class-qJEaW div {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%23eee%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 75%;\n  width: 16px;\n  height: 16px;\n  transition: all 0.15s ease;\n  margin: 0px 3px;\n  border-radius: var(--globalBorderRadius);\n  cursor: pointer;\n}\n\n.tab-search-class-qJEaW div:hover {\n  background-size: 100%;\n}\n";
+styleInject(css_248z);
+
+var Classification = function Classification(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: wcConfigurator,
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps,
+        tabSearchClass: tabSearchClass
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+    })
+  });
+};
+var cssVariables = {
+  '--settingsBackgroundColor': '#f4f4f4',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--primaryColor': '#455864',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--tabGroupBackground': 'var(--primaryColor)',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)'
+};
+var index = observer(Classification);
+
+export { index as default };

package/build/esm/index-99e2493e.js

@@ -0,0 +1,150 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import BlockIcon from '@mui/icons-material/Block';
+import WarningIcon from '@mui/icons-material/Warning';
+import { getLogger, useTranslation } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var reverseCheck = "reverse-check-mDnz6";
+var blocked = "blocked-bCo2n";
+var blockedClickable = "blocked-clickable-ffLmm";
+var loading = "loading-eIRqF";
+var spinner = "spinner-ibEoI";
+var blockedIcon = "blocked-icon-uGIFB";
+var warningIcon = "warning-icon-EEpQ2";
+var warningContainer = "warning-container-ELvdO";
+var css_248z = ".reverse-check-mDnz6 {\n  background-color: rgba(238,238,238,0.93333);\n  position: absolute;\n  padding: 2px 6px;\n  font-size: 12px;\n  height: 100%;\n  width: 100%;\n  line-height: 50%;\n  top: 0;\n  left: 0;\n  white-space: nowrap;\n  z-index: 1000;\n}\n\n.blocked-bCo2n {\n  background-color: rgba(255, 255, 255, 0.7);\n  -webkit-backdrop-filter: blur(1px);\n          backdrop-filter: blur(1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  pointer-events: none;\n}\n\n.blocked-clickable-ffLmm {\n  pointer-events: auto;\n}\n\n.loading-eIRqF {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: wait;\n  pointer-events: auto;\n}\n\n.spinner-ibEoI {\n  width: 20px;\n  height: 20px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  border-top-color: #555;\n  animation: spinner-ibEoI 1s linear infinite;\n}\n\n.blocked-icon-uGIFB {\n  font-size: 32px !important;\n}\n\n.blocked-icon-uGIFB {\n  color: #d32f2f;\n}\n\n.warning-icon-EEpQ2 {\n  font-size: 20px !important;\n}\n\n.warning-icon-EEpQ2 {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  color: #ed6c02;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.warning-container-ELvdO {\n  background-color: transparent;\n  pointer-events: auto;\n  cursor: pointer;\n}\n\n@keyframes spinner-ibEoI {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
+var LOG = getLogger('Planner', 'ReverseCheck');
+var ReverseCheck = function ReverseCheck(_ref) {
+  var item = _ref.item,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var reversingCheckPromise = item.pricePreviewPromise !== undefined ? item.pricePreviewPromise : undefined;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading$1 = _useState4[0],
+    setLoading = _useState4[1];
+  useEffect(function () {
+    var isMounted = true;
+    if (reversingCheckPromise) {
+      setLoading(true);
+      reversingCheckPromise.promise.then(function (result) {
+        if (isMounted) {
+          setData(result.reversingCheck);
+        }
+      })["catch"](function (error) {
+        LOG.error(new DivaError('Error loading reversing check:', {
+          cause: error
+        }));
+      })["finally"](function () {
+        if (isMounted) {
+          setLoading(false);
+        }
+      });
+    } else {
+      setData(null);
+    }
+    return function () {
+      isMounted = false;
+    };
+  }, [reversingCheckPromise]);
+  var handleBlockedClick = function handleBlockedClick(e) {
+    var _viewHandler$actions;
+    e.stopPropagation();
+    var variantValuesText = Object.values((data === null || data === void 0 ? void 0 : data.reversingVariantValues) || {}).map(function (v) {
+      return v.label;
+    }).join(', ');
+    (_viewHandler$actions = viewHandler.actions) === null || _viewHandler$actions === void 0 || _viewHandler$actions.openModal({
+      title: t('configurator.reverseCheck.blocked.title'),
+      text: t('configurator.reverseCheck.blocked.text', {
+        options: variantValuesText
+      }),
+      accept: false,
+      reject: true,
+      rejectByIcon: true
+    });
+  };
+  var handleWarningClick = function handleWarningClick(e) {
+    var _viewHandler$actions2;
+    e.stopPropagation();
+    var variantValuesText = Object.values((data === null || data === void 0 ? void 0 : data.reversingVariantValues) || {}).map(function (v) {
+      return v.label;
+    }).join(', ');
+    (_viewHandler$actions2 = viewHandler.actions) === null || _viewHandler$actions2 === void 0 || _viewHandler$actions2.openModal({
+      title: t('configurator.reverseCheck.warning.title'),
+      text: t('configurator.reverseCheck.warning.text', {
+        options: variantValuesText
+      }),
+      accept: true,
+      reject: true,
+      callback: function callback(accepted) {
+        if (accepted) {
+          viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+        }
+      }
+    });
+  };
+  if (!reversingCheckPromise) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  if (loading$1) {
+    return /*#__PURE__*/jsx("div", {
+      className: classnames(reverseCheck, loading),
+      children: /*#__PURE__*/jsx("div", {
+        className: spinner
+      })
+    });
+  }
+  if (!data || !data.hasReversingChanges) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  if (data.checkingForReversingChanges === 'BLOCK') {
+    return /*#__PURE__*/jsx("div", {
+      className: classnames(reverseCheck, blocked, blockedClickable),
+      onClick: handleBlockedClick,
+      children: /*#__PURE__*/jsx(BlockIcon, {
+        className: blockedIcon,
+        id: "blocked-icon"
+      })
+    });
+  }
+  if (data.checkingForReversingChanges === 'WARN') {
+    return /*#__PURE__*/jsx("div", {
+      className: classnames(reverseCheck, warningContainer),
+      onClick: handleWarningClick,
+      children: /*#__PURE__*/jsx(WarningIcon, {
+        className: warningIcon
+      })
+    });
+  }
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+
+export { ReverseCheck as default };