@crystaldesign/diva-web-planner-react 26.2.4-rc.1 → 26.2.4

package/build/esm/index-c7b18900.js

@@ -0,0 +1,157 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-e815b8fc.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import StepInfo from './index-749946a5.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/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';
+
+var paletteItem = "palette-item-F-QYy";
+var wcTextBox = "wcTextBox-lKT8X";
+var headerTitle = "headerTitle-RuXs-";
+var css_248z = ".palette-item-F-QYy {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.palette-item-F-QYy > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.palette-item-F-QYy input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.palette-item-F-QYy input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
+styleInject(css_248z);
+
+var NumberBox = function NumberBox(_ref) {
+  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var throttleRef = useRef(null);
+  var viewHandler = useViewHandler();
+  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    userInFocus = _useState2[0],
+    setUserInFocus = _useState2[1];
+  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var isDefined = true;
+  if (itemPalette) {
+    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
+    if (step) isDefined = step.configStep.isDefined;
+  }
+  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target$value;
+      var value;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
+            if (!e.target.value.endsWith('.')) {
+              _context.next = 4;
+              break;
+            }
+            setValue(e.target.value);
+            return _context.abrupt("return");
+          case 4:
+            value = value.replace(/[^0-9.,]/g, '');
+            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');
+
+            //delay logic update for 500ms
+            if (throttleRef.current) clearTimeout(throttleRef.current);
+            throttleRef.current = setTimeout(function () {
+              return updateLogic(value);
+            }, 500);
+            setValue(value);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var updateLogic = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!itemPalette) {
+              _context2.next = 3;
+              break;
+            }
+            _context2.next = 3;
+            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateLogic(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var _itemPalette$selected2, _itemPalette$selected3;
+    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
+  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      if (itemPalette) itemPalette.htmlRef = _ref4;
+    },
+    style: {
+      display: 'block'
+    },
+    children: [itemPalette && /*#__PURE__*/jsx("div", {
+      className: headerTitle,
+      children: itemPalette.name
+    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
+      stepInfo: itemPalette.info
+    }), /*#__PURE__*/jsx("div", {
+      className: paletteItem,
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          margin: '5px'
+        },
+        children: /*#__PURE__*/jsx("input", {
+          onBlur: function onBlur() {
+            setUserInFocus(false);
+          },
+          onFocus: function onFocus() {
+            var _itemPalette$info2;
+            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
+          },
+          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
+          lang: "en-150",
+          className: wcTextBox,
+          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
+          onChange: handleChange,
+          step: "0.01",
+          onKeyDown: function onKeyDown(e) {
+            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
+              e.preventDefault();
+            }
+          },
+          value: value,
+          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
+        })
+      })
+    })]
+  });
+};
+var NumberBox$1 = observer(NumberBox);
+
+export { NumberBox$1 as default };

package/build/esm/index-cab4174c.js

@@ -0,0 +1,41 @@
+import { s as styleInject, u as useViewHandler } from './index-e815b8fc.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var wcAccCtaMinus = "wcAccCTAMinus-Y6GAJ";
+var css_248z = ".wcAccCTAMinus-Y6GAJ {\n  font-weight: 300;\n  font-size: 18px;\n  height: 22px;\n  width: 22px;\n  float: left;\n  background: #f2f2f2;\n  border-radius: 19.008px;\n  -webkit-text-stroke: 0px;\n  transition: background-color 0.15s ease;\n  text-align: center;\n  float: right;\n  cursor: pointer;\n}\n\n.wcAccCTAMinus-Y6GAJ:hover {\n  background: #d9d9d9;\n  color: #424242;\n}\n\n.wcAccCTAMinus-Y6GAJ {\n  line-height: 21px;\n}\n";
+styleInject(css_248z);
+
+var ShelfDeleteButton = function ShelfDeleteButton(_ref) {
+  var index = _ref.index,
+    grid = _ref.grid;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick(e) {
+      viewHandler.paletteViewHandler.clickDeleteAccessorieOnShelfPlanner(grid, index);
+      e.stopPropagation();
+    },
+    className: wcAccCtaMinus,
+    children: "-"
+  });
+};
+
+export { ShelfDeleteButton as default };

package/build/esm/index-cceffa55.js

@@ -0,0 +1,184 @@
+import { s as styleInject, u as useViewHandler } from './index-e815b8fc.js';
+import { useEffect } from 'react';
+import Inputbox from './index-bb975075.js';
+import { cssVariables } from './index-0536b607.js';
+import Product from './index-53d8d99a.js';
+import Settings from './index-2bc55f88.js';
+import TabGroup from './index-d83fcf68.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-1be8f401.js';
+import './index-3d28830e.js';
+import 'react-switch';
+import 'react-dropdown';
+import './index-6e8f914d.js';
+import './index-4da5f779.js';
+import './index-ebba14ad.js';
+import './index-f9c1cca4.js';
+import './index-d1a99d36.js';
+import './index.module-d20b20ba.js';
+import './index-2366b525.js';
+import './index-3b1b87d6.js';
+import './index-e42cfc87.js';
+import './index-5482ca93.js';
+import './index-63ed31c0.js';
+import './index-1b4efd3a.js';
+import './index-315635a6.js';
+import './index-764bd46b.js';
+import './index-6119f60d.js';
+import 'react-laag';
+import './index-5b09bfad.js';
+import 'react-qr-code';
+import './index-6664c168.js';
+import './index-f9be2a43.js';
+import './index-6e270973.js';
+import './index-86acea84.js';
+import '@crystaldesign/content-item';
+import './index-f65d2c0d.js';
+import './index-8e16ae22.js';
+import './index-5e76f38f.js';
+import './index-cf8dd2d2.js';
+import './index-7664770f.js';
+import './index-c5bba644.js';
+import 'sift';
+import './index-55710373.js';
+import './index-04a9ca91.js';
+import './index-8308a036.js';
+import './index-932222c8.js';
+import './index.module-e1a0a018.js';
+import './index-7f0a7579.js';
+import './index-d4172f2f.js';
+import './index-70f9a426.js';
+import 'react-countup';
+import './index-f82a47d6.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-ceb7a40c.js';
+import './index-43af35b5.js';
+import './index-129b2ad1.js';
+import './index-3a144f88.js';
+import './index-fed1fa05.js';
+import '@crystaldesign/content-box';
+import './index-868f4df7.js';
+import './index-d707732b.js';
+import './index-a967299b.js';
+import './index-da52946e.js';
+import './index-9d04251a.js';
+import './index-c53a1854.js';
+import './index-0d8e652a.js';
+import './index-04a97b8d.js';
+import './index-789d1aea.js';
+import './index.module-ca4b70c5.js';
+import './index-99e6abf8.js';
+import './index-0672091f.js';
+import './index-d9d167fe.js';
+import './index-0da579a8.js';
+import './index-99b8db8e.js';
+import './index-24d5b4e2.js';
+import './index.module-03cc0da9.js';
+import './index-c7b18900.js';
+import './index-749946a5.js';
+import './index-a859866e.js';
+import './index-d006bf89.js';
+import './index-80559d41.js';
+import './index-a080dcca.js';
+import './index-e2576c8b.js';
+import './index-4ecba8f3.js';
+import './index-4790ecfe.js';
+import './index-61d2815b.js';
+import './index-ab0e22f9.js';
+import './index-716a2653.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-aaebeb2a.js';
+import 'rc-slider';
+import './index-f0eb445e.js';
+import './index-35865b1e.js';
+import './index-7484b63b.js';
+import './index-8b813967.js';
+import './index-76b9c5c8.js';
+import 'react-confetti-explosion';
+import './index-1d1fa1bf.js';
+import './useCustomDimensions-51111c48.js';
+import './index-ad86e614.js';
+import './ussIsSticky-5c908886.js';
+import './index-05396ae7.js';
+import './index-6e08abd0.js';
+import './index-38385bfe.js';
+import './index.module-fdcce2a0.js';
+import './index-8afacceb.js';
+import './index-b827ef83.js';
+import './index-76623f11.js';
+import './index-d3c754f3.js';
+import './index-9443fb33.js';
+import './index.module-bb99c281.js';
+import './index-3910a7fe.js';
+import './index-bfa1f358.js';
+import './index-187657b3.js';
+import './index-6816db9f.js';
+import '@mui/material';
+import './index-c09180f5.js';
+import './index-f9e5b0f4.js';
+import './index-d9925522.js';
+import './index-4b9c6258.js';
+import './index-df8c7b69.js';
+
+var wcConfigurator = "wcConfigurator-VvOGT";
+var wcConfiguratorSteps = "wc-configurator-steps-CYXm7";
+var wcConfiguratorProduct = "wc-configurator-product-Z3rOO";
+var productList = "product-list-18YTy";
+var wcConfiguratorSettings = "wc-configurator-Settings-On8Ph";
+var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-VvOGT {\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}\n\n.wcConfigurator-VvOGT *,\n.wcConfigurator-VvOGT *::before,\n.wcConfigurator-VvOGT *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-CYXm7 {\n  width: 75px;\n  position: relative;\n}\n.wc-configurator-product-Z3rOO {\n  overflow: auto !important;\n}\n.wc-configurator-product-Z3rOO {\n  width: calc(100% - 501px);\n  position: relative;\n}\n.wc-configurator-product-Z3rOO.product-list-18YTy {\n  display: none;\n}\n\n.wc-configurator-Settings-On8Ph.product-list-18YTy {\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n}\n\n.wc-configurator-Settings-On8Ph {\n  width: 426px;\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";
+styleInject(css_248z);
+
+var Serious = function Serious(props) {
+  var _viewHandler$tabGroup;
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  var currentIsProductList = ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'PRODUCTS';
+  return /*#__PURE__*/jsxs(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(Product, {
+        className: classnames(wcConfiguratorProduct, currentIsProductList ? productList : undefined),
+        contentItemStartPos: "left"
+      }), /*#__PURE__*/jsx(Settings, {
+        className: classnames(wcConfiguratorSettings, currentIsProductList ? productList : undefined)
+      }), /*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps
+      })]
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var index = observer(Serious);
+
+export { index as default };

package/build/esm/index-cdfa0881.js

@@ -0,0 +1,70 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-e815b8fc.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import ConceptGallery from './index-97934f14.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/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 'swiper/react';
+import 'swiper/modules';
+import './index-9847251f.js';
+import './index-7f0a7579.js';
+import 'react-collapsible';
+import './index-ba4ed92c.js';
+import './index-f49b5785.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 ConceptFilter = function ConceptFilter(_ref) {
+  var additionalGroupFilter = _ref.additionalGroupFilter,
+    paletteId = _ref.paletteId;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    genericConceptItems = _useState2[0],
+    setGenericConceptItems = _useState2[1];
+  var palette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  useEffect(function () {
+    var _palette$conceptFilte;
+    var selected = (_palette$conceptFilte = palette === null || palette === void 0 ? void 0 : palette.conceptFilterValue) !== null && _palette$conceptFilte !== void 0 ? _palette$conceptFilte : '';
+    var newGenericConceptItems = additionalGroupFilter.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        onClick: function onClick() {
+          viewHandler.paletteViewHandler.onSelectFilter(paletteId, selected == item.key ? '' : item.key, 'CONCEPT');
+        },
+        selected: selected === item.key
+      });
+    });
+    setGenericConceptItems(newGenericConceptItems);
+  }, [additionalGroupFilter, palette]);
+  var bannerTitle = t('configurator.conceptFilter.infoTitle');
+  var bannerText = t('configurator.conceptFilter.infoText');
+  return /*#__PURE__*/jsx(ConceptGallery, {
+    genericConceptItems: genericConceptItems,
+    onClose: function onClose() {
+      return viewHandler.paletteViewHandler.onSelectFilter(paletteId, '', 'CONCEPT');
+    },
+    bannerTitle: bannerTitle,
+    bannerText: bannerText
+  });
+};
+var index = observer(ConceptFilter);
+
+export { index as default };