@crystaldesign/diva-web-planner-react 25.16.1 → 25.16.2

package/build/esm/index-9c3bd75e.js

@@ -0,0 +1,31 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-5d13e03d.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SettingsPaletteGroup = function SettingsPaletteGroup(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/Groups/PaletteGroup"
+  }));
+};
+
+export { SettingsPaletteGroup as default };

package/build/esm/index-9d1fd4cc.js

@@ -0,0 +1,40 @@
+import { s as styleInject } from './index-5d13e03d.js';
+import ProductHeader from './index-dafb928c.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';
+import './index-faf9acc7.js';
+import '@crystaldesign/content-box';
+import './useCustomDimensions-4af49204.js';
+import '@crystaldesign/content-item';
+import './index-df64aded.js';
+import 'react-countup';
+
+var productHeader = "product-header-h3vB3";
+var css_248z = ".product-header-h3vB3 * {\n  color: var(--secondaryColor) !important;\n}\n";
+styleInject(css_248z);
+
+var ProductHeaderGold = function ProductHeaderGold(props) {
+  return /*#__PURE__*/jsx(ProductHeader, {
+    productClass: productHeader
+  });
+};
+
+export { ProductHeaderGold as default };

package/build/esm/index-a068020f.js

@@ -0,0 +1,160 @@
+import { s as styleInject, u as useViewHandler } from './index-5d13e03d.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Group from './index-73c52aa7.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import StandradGroup from './index-0f19fd62.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-a2db723c.js';
+import 'sift';
+import './index-a9f73743.js';
+import './index-0d030711.js';
+import './index-d950afb7.js';
+import './index-9c3bd75e.js';
+import './index-5dc56440.js';
+import './index.module-775645ef.js';
+import './index-f59a906c.js';
+import 'react-switch';
+import './index-dcb78dac.js';
+import './index-82618639.js';
+import './index-df64aded.js';
+import 'react-countup';
+import './index-77f6c6dc.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-22a3abbd.js';
+import 'react-dropdown';
+import './index-3fdc4864.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-41c5d188.js';
+import './index-85c0f03a.js';
+import './index-c3d2fc0c.js';
+import '@crystaldesign/content-box';
+import './index-29550c9f.js';
+import './index-841c6b10.js';
+import './index-327c8486.js';
+import './index-b479fb5d.js';
+import './index-1d541499.js';
+import './index-00f88e76.js';
+import './index-a076a787.js';
+import './index-c52e4914.js';
+import './index-b7729b04.js';
+import 'react-laag';
+import './index.module-34d64822.js';
+import './index-5ac45754.js';
+import './index-d9449938.js';
+import './index-c774c7e1.js';
+import './index-1e3c3fca.js';
+import './index-2f11a23b.js';
+import './index-51e8d867.js';
+import './index.module-40951d0b.js';
+import './index-23cc185f.js';
+import './index-c6fa9656.js';
+import './index-b3001a01.js';
+import './index-2fba9ce4.js';
+import './index-9b1b4291.js';
+import './index-ed324365.js';
+import './index-e0f776ca.js';
+import './index-ef9b187a.js';
+import './index-8878758e.js';
+import './index-28113a4c.js';
+import './index-ea51025a.js';
+import './index-12b7f3df.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-1fc978dc.js';
+import 'rc-slider';
+import './index-78deb2b6.js';
+import './index-4591d783.js';
+import './index-8a13ec20.js';
+import './index-1b047648.js';
+import 'react-confetti-explosion';
+import './index-f931c26f.js';
+import './index-5ec2d38a.js';
+import './index-3254773b.js';
+import 'react-qr-code';
+import './index-c49c1cf1.js';
+import './useCustomDimensions-4af49204.js';
+import './index-70f82317.js';
+import './ussIsSticky-f5448d6f.js';
+import './index-f09e4f3f.js';
+import './index-4a906067.js';
+import './index-0c75f36c.js';
+import './index.module-58b486e7.js';
+import './index-e8b9c284.js';
+import './index-7981eccc.js';
+import './index-0457a70f.js';
+import './index-3dac51da.js';
+import 'react-collapsible';
+
+var container = "container-UypgK";
+var css_248z = ".container-UypgK {\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var PaletteGroup = function PaletteGroup(_ref) {
+  var itemPalette = _ref.itemPalette,
+    groups = _ref.groups,
+    PaletteComponent = _ref.PaletteComponent,
+    contentInnerClassName = _ref.contentInnerClassName,
+    _ref$rowCount = _ref.rowCount,
+    rowCount = _ref$rowCount === void 0 ? 12 : _ref$rowCount;
+  var viewHandler = useViewHandler();
+  if (!viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(StandradGroup, {
+    contentInnerClassName: contentInnerClassName,
+    itemPalette: itemPalette,
+    groups: groups,
+    PaletteComponent: PaletteComponent,
+    rowCount: rowCount
+  });
+  var _useDivaCore = useDivaCore(),
+    width = _useDivaCore.state.dimensions.width;
+  var itemCount = 0;
+  if (width) while (width / rowCount < 60) {
+    rowCount = rowCount - 1;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: container,
+    children: groups.map(function (group) {
+      var renderEmptyBox = false;
+      if (itemCount % rowCount === rowCount - 1 && group.items.length > 1) {
+        renderEmptyBox = true;
+        itemCount++;
+      }
+      itemCount = itemCount + group.items.length;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [renderEmptyBox && /*#__PURE__*/jsx("div", {
+          style: {
+            background: 'rgba(242, 242, 242, 0.6)',
+            width: 100 / rowCount + '%'
+          }
+        }), /*#__PURE__*/jsx(Group, {
+          PaletteComponent: PaletteComponent,
+          contentInnerClassName: contentInnerClassName,
+          paletteType: itemPalette.type,
+          group: group,
+          paletteId: itemPalette.id,
+          rowCount: rowCount
+        })]
+      });
+    })
+  });
+};
+var index = observer(PaletteGroup);
+
+export { index as default };

package/build/esm/index-a076a787.js

@@ -0,0 +1,78 @@
+import { s as styleInject, u as useViewHandler } from './index-5d13e03d.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/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';
+
+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, viewHandler.productState.priceFormat)
+    })]
+  });
+};
+var SummaryArticles = observer(Articles);
+
+export { SummaryArticles as default };

package/build/esm/index-a1b2d0c4.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-5d13e03d.js';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { w as wrapper, t as tabs, s as sel, a as selectionWrapper, b as selectionText, c as selection, T as Table } from './index-310907b8.js';
+import classnames from 'classnames';
+import properties from './CatalogProperties-51bd3a3a.js';
+import properties$1 from './ArticleProperties-fed63890.js';
+import properties$2 from './OptionProperties-863f04e2.js';
+import properties$3 from './OptionValueProperties-58fcd716.js';
+import Select from 'react-select';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-f59a906c.js';
+import 'react-switch';
+
+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 PropertiesEditor = function PropertiesEditor(props) {
+  var _catalogData$allCatal, _allArticles$find, _allOptions$find, _allOptionsValues$fin;
+  var viewHandler = useViewHandler();
+  var catalogData = viewHandler.divaWebPlanner.getCatalogData();
+  var _useState = useState('catalog'),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentProperties = _useState2[0],
+    setCurrentProperties = _useState2[1];
+  var allArticles = Object.values((_catalogData$allCatal = catalogData === null || catalogData === void 0 ? void 0 : catalogData.allCatalogArticles) !== null && _catalogData$allCatal !== void 0 ? _catalogData$allCatal : {});
+  var allOptions = catalogData === null || catalogData === void 0 ? void 0 : catalogData.getOptions();
+  var allOptionsValues = catalogData === null || catalogData === void 0 ? void 0 : catalogData.getOptionValues();
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentArticleCodex = _useState4[0],
+    setCurrentArticleCodex = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentOptionCodex = _useState6[0],
+    setCurrentOptionCodex = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    currentOptionValueCodex = _useState8[0],
+    setCurrentOptionValueCodex = _useState8[1];
+  if (!catalogData) return /*#__PURE__*/jsx(Fragment, {});
+  var dataDictionary = {
+    catalog: {
+      data: catalogData.catalogProps,
+      properties: properties
+    },
+    article: {
+      data: allArticles === null || allArticles === void 0 || (_allArticles$find = allArticles.find(function (a) {
+        return a.articleCodex === currentArticleCodex;
+      })) === null || _allArticles$find === void 0 ? void 0 : _allArticles$find.catalogArticle,
+      properties: properties$1
+    },
+    option: {
+      data: allOptions === null || allOptions === void 0 || (_allOptions$find = allOptions.find(function (o) {
+        return o.codex === currentOptionCodex;
+      })) === null || _allOptions$find === void 0 ? void 0 : _allOptions$find.opt,
+      properties: properties$2
+    },
+    optionvalue: {
+      data: allOptionsValues === null || allOptionsValues === void 0 || (_allOptionsValues$fin = allOptionsValues.find(function (o) {
+        return o.codex === currentOptionValueCodex;
+      })) === null || _allOptionsValues$fin === void 0 ? void 0 : _allOptionsValues$fin.opv,
+      properties: properties$3
+    }
+  };
+  var tabsArray = ['catalog', 'article', 'option', 'optionvalue'];
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(wrapper, props.className),
+    children: [/*#__PURE__*/jsx("div", {
+      className: tabs,
+      children: tabsArray.map(function (t) {
+        return /*#__PURE__*/jsx("div", {
+          className: classnames(currentProperties === t ? sel : undefined),
+          onClick: function onClick() {
+            return setCurrentProperties(t);
+          },
+          children: t
+        }, t);
+      })
+    }), currentProperties !== 'catalog' && /*#__PURE__*/jsxs("div", {
+      className: selectionWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: selectionText,
+        children: 'select ' + currentProperties + ':'
+      }), currentProperties === 'article' && /*#__PURE__*/jsx(Select, {
+        styles: colourStyles,
+        className: selection,
+        value: currentArticleCodex ? {
+          label: currentArticleCodex
+        } : undefined,
+        options: allArticles.map(function (a) {
+          return {
+            label: a.articleCodex
+          };
+        }),
+        onChange: function onChange(v) {
+          return setCurrentArticleCodex(v.label);
+        }
+      }), currentProperties === 'option' && /*#__PURE__*/jsx(Select, {
+        styles: colourStyles,
+        className: selection,
+        value: currentOptionCodex ? {
+          label: currentOptionCodex
+        } : undefined,
+        options: allOptions === null || allOptions === void 0 ? void 0 : allOptions.map(function (a) {
+          return {
+            label: a.codex
+          };
+        }),
+        onChange: function onChange(v) {
+          return setCurrentOptionCodex(v.label);
+        }
+      }), currentProperties === 'optionvalue' && /*#__PURE__*/jsx(Select, {
+        styles: colourStyles,
+        className: selection,
+        value: currentOptionValueCodex ? {
+          label: currentOptionValueCodex
+        } : undefined,
+        options: allOptionsValues === null || allOptionsValues === void 0 ? void 0 : allOptionsValues.map(function (a) {
+          return {
+            label: a.codex
+          };
+        }),
+        onChange: function onChange(v) {
+          return setCurrentOptionValueCodex(v.label);
+        }
+      })]
+    }), /*#__PURE__*/jsx(Table, _objectSpread(_objectSpread({}, dataDictionary[currentProperties]), {}, {
+      id: currentProperties
+    }))]
+  }));
+};
+var PropertiesEditor$1 = observer(PropertiesEditor);
+var colourStyles = {
+  control: function control(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundColor: 'white'
+    });
+  },
+  option: function option(styles, _ref) {
+    var isDisabled = _ref.isDisabled,
+      isFocused = _ref.isFocused,
+      isSelected = _ref.isSelected;
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundColor: isDisabled ? undefined : isFocused ? 'lightblue' : isSelected ? '#fff' : undefined,
+      cursor: isDisabled ? 'not-allowed' : 'default',
+      color: 'black',
+      ':active': _objectSpread({}, styles[':active'])
+    });
+  }
+};
+
+export { PropertiesEditor$1 as default };