@crystaldesign/diva-web-planner-react 25.8.0-rc.9 → 25.9.0-beta.10

package/build/esm/index-95917bcd.js

@@ -0,0 +1,61 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } 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';
+import '@crystaldesign/widget-contact-form';
+
+var wcTabGroupItem = "wcTabGroupItem-TP7vT";
+var portrait = "portrait-3cTAf";
+var landscape = "landscape-6Dea8";
+var wcActiveStep = "wcActiveStep-y3S9Y";
+var wcVisitedStep = "wcVisitedStep-yDCqq";
+var wcStepNum = "wcStepNum-6FgQh";
+var css_248z = ".wcTabGroupItem-TP7vT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition:\n    background-color 0.3s ease-out,\n    color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  cursor: pointer;\n}\n.portrait-3cTAf.wcTabGroupItem-TP7vT,\n.landscape-6Dea8.wcTabGroupItem-TP7vT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-TP7vT.wcActiveStep-y3S9Y {\n  color: white;\n  background-color: var(--primaryColor);\n}\n\n.wcActiveStep-y3S9Y.wcTabGroupItem-TP7vT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcVisitedStep-yDCqq {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-yDCqq.wcTabGroupItem-TP7vT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-TP7vT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcStepNum-6FgQh {\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  margin-right: 10px;\n  margin-top: 10px;\n  border: 1px solid white;\n  background-color: white;\n  border-radius: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  color: #6f6f6f;\n}\n\n.wcActiveStep-y3S9Y .wcStepNum-6FgQh {\n  color: var(--primaryColor);\n  font-weight: 700;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%229%22 viewBox%3D%220 0 12 9%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.44531 3.49126L5.625 8.09375L10.75 0.953613%22 stroke%3D%22%236F6F6F%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  color: transparent;\n}\n.wcVisitedStep-yDCqq .wcStepNum-6FgQh:empty:before {\n  content: '\\200b';\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontalGold = function TabGroupItemHorizontalGold(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(wcTabGroupItem, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive) ? wcVisitedStep : undefined),
+    children: [/*#__PURE__*/jsx("span", {
+      className: classnames(wcStepNum),
+      children: tabGroup.posNr
+    }), t('configurator.' + tabGroup.title, tabGroup.title)]
+  });
+};
+var index = observer(TabGroupItemHorizontalGold);
+
+export { index as default };

package/build/esm/index-95fde39f.js

@@ -0,0 +1,32 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-75136b70.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';
+import '@crystaldesign/widget-contact-form';
+
+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 ProductHeader = function ProductHeader(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductHeader/ProductHeader"
+  }));
+};
+
+export { ProductHeader as default };

package/build/esm/index-964a8794.js

@@ -0,0 +1,127 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-ea337377.js';
+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';
+import '@crystaldesign/widget-contact-form';
+
+var verticalItem = "verticalItem-NmQDx";
+var wcSpan = "wcSpan-0wnmJ";
+var verticalItemPoligon = "verticalItemPoligon-M44lA";
+var wcActiveStep = "wcActiveStep-ykv3D";
+var wcVisitedStep = "wcVisitedStep-qDdfW";
+var wcStepIcon = "wcStepIcon-7hz1S";
+var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n  transition:\n    fill 0.3s ease,\n    color 0.3s ease;\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedFont, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
+styleInject(css_248z);
+
+var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
+  var _getIconOfTabGroup;
+  var tabGroup = _ref.tabGroup,
+    height = _ref.height,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
+    isFirstItem = _ref.isFirstItem,
+    isLastItem = _ref.isLastItem,
+    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
+    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
+    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
+    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
+    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
+    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
+    _ref$wcStepIconClass = _ref.wcStepIconClass,
+    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
+    lastItemDiv = _ref.lastItemDiv;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var width = 128;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  if (height < minHeight) {
+    height = minHeight;
+  }
+  var _useDivaCore = useDivaCore(),
+    baseCdnUrl = _useDivaCore.state.apiConfig.baseCdnUrl;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
+  var polygonPoints;
+  if (isFirstItem && isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
+  } else if (isFirstItem) {
+    polygonPoints = '0 ' + (height - 8) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 8) + ', ' + '64 ' + height;
+  } else if (isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + height;
+  } else {
+    polygonPoints = '0 ' + (height - 8) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 8) + ', 64 ' + height;
+  }
+  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, baseCdnUrl, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
+  var div = /*#__PURE__*/jsxs("div", {
+    "data-test-id": "tabGroupItem",
+    children: [/*#__PURE__*/jsx("div", {
+      className: wcStepIconClass,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    }), /*#__PURE__*/jsx("span", {
+      "data-test-id": "tabGroupItemTitle",
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    })]
+  });
+  if (isLastItem && lastItemDiv) {
+    div = lastItemDiv;
+  }
+  return /*#__PURE__*/jsxs("svg", {
+    "data-test-id": "tabGroupItemSvg",
+    viewBox: '0 0 ' + width + ' ' + height,
+    ref: tabGroupItemRef,
+    style: {
+      height: height + 'px',
+      minHeight: minHeight
+    },
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+    children: [/*#__PURE__*/jsx("polygon", {
+      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+      points: polygonPoints
+    }), /*#__PURE__*/jsx("foreignObject", {
+      width: "100%",
+      height: "100%",
+      style: {
+        pointerEvents: 'none'
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+        children: div
+      })
+    })]
+  });
+};
+var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
+
+export { VerticalTabGroupItemStandard$1 as default };

package/build/esm/index-96f76865.js

@@ -0,0 +1,169 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-75136b70.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-26cb5a75.js';
+import classnames from 'classnames';
+import properties from './CatalogProperties-a9c1b929.js';
+import properties$1 from './ArticleProperties-06182b9a.js';
+import properties$2 from './OptionProperties-edac5d95.js';
+import properties$3 from './OptionValueProperties-06498023.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 '@crystaldesign/widget-contact-form';
+import './index-b2c9d3f7.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 };

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

@@ -0,0 +1,57 @@
+import { u as useViewHandler } from './index-75136b70.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-b1f771d1.js';
+import IsActive from './index-e18b8b86.js';
+import { jsx, jsxs } 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 '@crystaldesign/widget-contact-form';
+
+var Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), /*#__PURE__*/jsx("div", {
+        className: wcImage,
+        style: {
+          backgroundImage: "url(".concat(item.url, ")")
+        }
+      }), /*#__PURE__*/jsx("div", {
+        className: textContainer,
+        children: /*#__PURE__*/jsx("div", {
+          className: wcConfiguratorSettingsTitle,
+          children: t('configurator.' + item.N)
+        })
+      })]
+    })
+  });
+};
+var index = observer(Room);
+
+export { index as default };

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

@@ -0,0 +1,40 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-75136b70.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import ActionNavigation from './index-db54a2f7.js';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 '@crystaldesign/widget-contact-form';
+import './index.module-b14d3bab.js';
+
+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-9b18b476.js

@@ -0,0 +1,142 @@
+import { s as styleInject, u as useViewHandler } from './index-75136b70.js';
+import { useEffect } from 'react';
+import Settings from './index-0c1d2b56.js';
+import TabGroup from './index-850b93a9.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-c33b9185.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 '@crystaldesign/widget-contact-form';
+import './index-a0c00314.js';
+import './index-f0a416a7.js';
+import './index-bc89b1bb.js';
+import './index-230ef921.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-f9e62abb.js';
+import 'react-laag';
+import './index-29fcd088.js';
+import './index-90ab7f53.js';
+import './index-b97beec7.js';
+import 'sift';
+import './index-0c4efc90.js';
+import './index-b66e2cb0.js';
+import './index-14ed4df4.js';
+import './index-70b08ed5.js';
+import './index.module-3edc0f08.js';
+import './index-b2c9d3f7.js';
+import 'react-switch';
+import './index-c84c0bf5.js';
+import './index-d71c5c4c.js';
+import './index-85d56a5f.js';
+import 'react-dropdown';
+import './index-bd8c7c36.js';
+import './index-f981c831.js';
+import './index-d67606ee.js';
+import './index-83be5767.js';
+import '@crystaldesign/content-box';
+import './index-075c9607.js';
+import './index-f0f21be7.js';
+import './index-86efa80e.js';
+import './index-df1469ac.js';
+import './index-11e69ed8.js';
+import './index-57309784.js';
+import './index-47c0af4b.js';
+import './index-bdab7c1f.js';
+import './index-30eed94c.js';
+import './index-154bb2d5.js';
+import './index-fc57e842.js';
+import './index-cba76e07.js';
+import './index-c8dd259d.js';
+import './index-d6ed725a.js';
+import './index-da73c5fd.js';
+import './index-36bfcb3e.js';
+import './index.module-b1f771d1.js';
+import './index-e18b8b86.js';
+import './index-0352368d.js';
+import './index-202dad7f.js';
+import './index-8095cf58.js';
+import './index-4b8fdbe0.js';
+import './index-21d57d53.js';
+import './index-12d8ba8a.js';
+import './index.module-4cbeb72c.js';
+import './index-9ba7616c.js';
+import './index-49630c41.js';
+import './index-000f9863.js';
+import './index-84b6ba49.js';
+import './index-3d8f99e5.js';
+import './index-56ef0a21.js';
+import './index-d13376dc.js';
+import './index-882cbf45.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}\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 = {
+  '--primaryColor': '#455864',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#f4f4f4',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--primaryColor)',
+  '--foldArrowMarginRight': '16px',
+  '--lineHeight1': '36.8px',
+  '--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 };