@crystaldesign/diva-web-planner-react 24.14.0-beta.2 → 24.14.0-beta.21

package/build/esm/index-2c13407d.js

@@ -0,0 +1,120 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-2f7c236c.js';
+import { observer } from 'mobx-react-lite';
+import { useState, createElement } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-a10a7f97.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import MetaData from './index-dcbce3bf.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wrapper = "wrapper-q2VFw";
+var textWrapper = "text-wrapper-Th9kS";
+var element = "element-e6pDX";
+var elementText = "element-text-Lfswv";
+var image = "image-p37Vz";
+var hexColor = "hexColor-JQ-dp";
+var text = "text-DX9ZX";
+var deleteButton = "delete-button-sXPbV";
+var css_248z = ".wrapper-q2VFw {\n  position: relative;\n}\n\n.text-wrapper-Th9kS {\n  width: 48%;\n}\n.element-e6pDX {\n  position: relative;\n  display: flex;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 2px solid var(--primaryColor);\n  overflow: hidden;\n  cursor: pointer;\n  background-color: #fff;\n}\n\n.element-text-Lfswv {\n  border-radius: 0px;\n  border: 0px solid #fff;\n  width: calc(100% - 26px);\n  margin-top: 5px;\n  height: 64px;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: 26px;\n}\n\n.image-p37Vz {\n  width: 100%;\n  height: auto;\n}\n\n.hexColor-JQ-dp {\n  width: 100%;\n  height: 100%;\n}\n\n.text-DX9ZX {\n  line-height: 20px;\n  width: 100%;\n  font-size: 15px;\n  white-space: nowrap;\n}\n\n.delete-button-sXPbV {\n  position: absolute;\n  top: 0px;\n  right: -8px;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  background-color: red;\n  background-repeat: no-repeat;\n  background-size: 80%;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23fff%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.delete-button-sXPbV:hover {\n  cursor: pointer;\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 Item = function Item(_ref) {
+  var _renderLayer, _selectedElement$meta;
+  var selectedElement = _ref.selectedElement,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var notRelevant = selectedElement.codex.includes('OPV_NICHT_RELEVANT');
+  var isTextElement = !selectedElement.image && !selectedElement.hexColor;
+  if (notRelevant) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper, isTextElement ? textWrapper : undefined),
+    children: [/*#__PURE__*/createElement("div", _objectSpread(_objectSpread(_objectSpread({}, triggerProps), hoverProps), {}, {
+      key: selectedElement.codex,
+      className: classnames(element, isTextElement ? elementText : undefined),
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.scrollToOPV(paletteId, selectedElement.codex);
+      },
+      title: t('configurator.scroll_there', 'hier hin scrollen')
+    }), selectedElement.image ? /*#__PURE__*/jsx("img", {
+      className: image,
+      src: selectedElement.image
+    }) : selectedElement.hexColor ? /*#__PURE__*/jsx("div", {
+      className: hexColor,
+      style: {
+        backgroundColor: '#' + selectedElement.hexColor
+      }
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: text,
+        children: selectedElement.text
+      }), /*#__PURE__*/jsx(MetaData, {
+        metaData: selectedElement.metaData,
+        visible: [metaDataVisible, setMetaDataVisible]
+      }, selectedElement.codex)]
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: selectedElement.text,
+      codex: (_selectedElement$meta = selectedElement.metaData) === null || _selectedElement$meta === void 0 || (_selectedElement$meta = _selectedElement$meta.find(function (m) {
+        return m.codex === 'codex';
+      })) === null || _selectedElement$meta === void 0 ? void 0 : _selectedElement$meta.values[0],
+      image: selectedElement.image,
+      hexColor: selectedElement.hexColor,
+      layerProps: layerProps
+    }, selectedElement.codex)))), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedElement, undefined, paletteId);
+      },
+      className: deleteButton,
+      title: t('configurator.remove_selection', 'Auswahl entfernen')
+    })]
+  });
+};
+var Item$1 = observer(Item);
+
+export { Item$1 as default };

package/build/esm/index-2cd929cf.js

@@ -0,0 +1,136 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-2f7c236c.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import SettingsHeaderContainer from './index-5804f3f2.js';
+import { S as SettingsItem } from './index-11b376a4.js';
+import classnames from 'classnames';
+import TotalPrice from './index-e569733a.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-c0b9142a.js';
+import './index-f6048c00.js';
+import './index-a654d6fc.js';
+import './index-bf6bb1dd.js';
+import 'react-laag';
+import './index-2bc099f5.js';
+import 'sift';
+import './index-44b925a1.js';
+import './index-61f2f1cb.js';
+import './index-d028e33b.js';
+import './index-7380ec4b.js';
+import './index.module-4a03ac8d.js';
+import './index-2ddaa3f5.js';
+import 'react-switch';
+import './index-42bebf29.js';
+import './index-2bea5932.js';
+import 'react-dropdown';
+import './index-735403b3.js';
+import './index-a5225d49.js';
+import './index-6bc42063.js';
+import './index-dc929090.js';
+import '@crystaldesign/content-box';
+import './index-ed816afc.js';
+import './index-4b40aa9b.js';
+import './index-f7348bb1.js';
+import './index-0b6e322f.js';
+import './index-6b487ddd.js';
+import '@crystaldesign/products-component';
+import './index-cbf813c9.js';
+import './index-f981b300.js';
+import './index-e79789dd.js';
+import './index-dcbce3bf.js';
+import './index-a10a7f97.js';
+import './index-fa08ba74.js';
+import './index-88415d04.js';
+import './index-4b9eb6ad.js';
+import './index-c98eb974.js';
+import './index-1a216743.js';
+import './index-0eb2797b.js';
+import './index-83e06769.js';
+import './index-ce8b3422.js';
+import './index.module-b7e4c06a.js';
+import './index-938b9a93.js';
+import './index-b94292a7.js';
+import './index-e28eb17a.js';
+import './index-ab1ec295.js';
+import './index-65428282.js';
+import './index-a4e07ec4.js';
+import './index-2d251034.js';
+import './index.module-b5665c6e.js';
+import './index-4f8c56db.js';
+import './index-b841d8c8.js';
+
+var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
+var expanded = "expanded-r-uGX";
+var minExpanded = "minExpanded-oyaLK";
+var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n";
+styleInject(css_248z);
+
+var SettingsScroller = function SettingsScroller(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var settingsScrollerElement = useRef(null);
+  var itemPalettesArr = [];
+  var pairWithOptionsToGroup = {};
+  useEffect(function () {
+    if (settingsScrollerElement.current) {
+      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
+      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
+    }
+    return function () {};
+  }, [settingsScrollerElement]);
+  var style = {};
+  if (viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) {
+    style.height = '100%';
+  } else {
+    var _viewHandler$settings, _viewHandler$settings2;
+    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
+  }
+  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
+    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
+    var paletteId = Number(itemPalette.id);
+    var groupName = itemPalette.pairWithOptionsToGroup;
+    if (groupName && itemPalette.visible) {
+      if (!pairWithOptionsToGroup[groupName]) pairWithOptionsToGroup[groupName] = [];
+      pairWithOptionsToGroup[groupName].push(paletteId);
+    }
+    if (!itemPalette.isRenderedNotInSettingPalette) itemPalettesArr.push([paletteId, itemPalette]);
+  }
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined),
+    id: "wcConfigurator-settings-scroller",
+    ref: settingsScrollerElement,
+    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && /*#__PURE__*/jsx(SettingsHeaderContainer, {
+      isScroller: true
+    }, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsxs("div", {
+      children: [itemPalettesArr.map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          index = _ref3[0],
+          item = _ref3[1];
+        return /*#__PURE__*/jsx(SettingsItem, {
+          item: item,
+          id: index,
+          groupSize: item.pairWithOptionsToGroup ? pairWithOptionsToGroup[item.pairWithOptionsToGroup].length : undefined
+        }, index);
+      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
+    })]
+  });
+};
+var SettingsScroller$1 = observer(SettingsScroller);
+
+export { SettingsScroller$1 as default };

package/build/esm/index-2d251034.js

@@ -0,0 +1,129 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-2f7c236c.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-b5665c6e.js';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-a10a7f97.js';
+import MetaData from './index-dcbce3bf.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import InfoIcon from './index-42bebf29.js';
+import { jsxs, 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';
+
+var paletteItem = "PaletteItem-C-fa2";
+var wcVCodexText = "wcVCodexText-GN3-8";
+var sel = "sel-3ZIRz";
+var imageWrapper = "imageWrapper-QwsRE";
+var small = "small-Ynrzj";
+var wcImage = "wcImage-eveCj";
+var title = "title-mFBM6";
+var big = "big-wADuy";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-C-fa2 {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-C-fa2:active,\n.PaletteItem-C-fa2:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-GN3-8 {\n  position: absolute;\n  line-height: 104px;\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.PaletteItem-C-fa2:hover .wcVCodexText-GN3-8,\n.sel-3ZIRz .wcVCodexText-GN3-8 {\n  display: block;\n}\n\n.imageWrapper-QwsRE {\n  border-radius: 50%;\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE:hover,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-eveCj {\n  width: calc(100% - 7px);\n  aspect-ratio: 1;\n  border: 4px white solid;\n  border-radius: 50%;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.sel-3ZIRz .wcImage-eveCj,\n.small-Ynrzj.sel-3ZIRz .wcImage-eveCj {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-NBrjx {\n  width: 80px;\n  height: 80px;\n}\n\n.title-mFBM6 {\n  margin-top: 4px;\n  text-align: center;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  width: 100%;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  z-index: 400;\n}\n\n.PaletteItem-C-fa2:hover .title-mFBM6,\n.small-Ynrzj .PaletteItem-C-fa2:hover .title-mFBM6 {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  z-index: 200;\n}\n\n/* Size Small */\n\n.small-Ynrzj .wcVCodexText-GN3-8 {\n  line-height: 58px;\n  font-size: 12px;\n}\n\n.small-Ynrzj .title-mFBM6 {\n  font-size: 12px;\n  margin-top: 6px;\n  -webkit-line-clamp: 1;\n}\n/* Size very Small */\n\n.very-small-XTQPS .wcVCodexText-GN3-8 {\n  line-height: 48px;\n  font-size: 10px;\n}\n\n.very-small-XTQPS .title-mFBM6 {\n  font-size: 10px;\n  margin-top: 5px;\n  -webkit-line-clamp: 1;\n}\n\n/* Size big */\n\n.big-wADuy .wcVCodexText-GN3-8 {\n  line-height: 158px;\n  font-size: 15px;\n}\n\n.big-wADuy .title-mFBM6 {\n  font-size: 15px;\n  margin-top: 10px;\n  -webkit-line-clamp: 2;\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 Option = function Option(_ref) {
+  var _item$hexColor, _renderLayer;
+  var itemP = _ref.item,
+    type = _ref.type,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor)) {
+    isOver = hover[0] && !viewHandler.settingsState.isContentItemIdVisible(item.contentItemId);
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    id: item.codex,
+    className: classnames(type == 'small' ? small : undefined, type == 'big' ? big : undefined, paletteItem, item.sel ? sel : undefined),
+    onClick: onClick
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(imageWrapper),
+      children: [item.vCodex && /*#__PURE__*/jsx("div", {
+        className: classnames(wcVCodexText),
+        children: item.vCodex
+      }), item.image ? /*#__PURE__*/jsx("img", {
+        className: classnames(wcImage),
+        src: item.image
+      }) : /*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundColor: '#' + ((_item$hexColor = item.hexColor) !== null && _item$hexColor !== void 0 ? _item$hexColor : 'dfdfdf')
+        }
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: title,
+      dangerouslySetInnerHTML: {
+        __html: item.text
+      }
+    }), item.doShowFav && /*#__PURE__*/jsx("div", {
+      className: item.isFav ? wcFavoriteSel : wcFavorite,
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+      }
+    }), /*#__PURE__*/jsx(MetaData, {
+      style: {
+        position: 'relative',
+        "float": 'left',
+        display: 'none'
+      },
+      metaData: item.metaData,
+      visible: [metaDataVisible, setMetaDataVisible]
+    }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.text + (item.freeText ? item.freeText : ''),
+      hexColor: item.hexColor,
+      desciption: metaDataVisible,
+      image: item.image,
+      layerProps: layerProps
+    }, item.codex)))]
+  }));
+};
+var GalleryText = observer(Option);
+
+export { GalleryText as default };

package/build/esm/index-2d7c1796.js

@@ -0,0 +1,164 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-2f7c236c.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-bf22c1a8.js';
+import classnames from 'classnames';
+import properties from './CatalogProperties-f361bb52.js';
+import properties$1 from './ArticleProperties-5a332c2f.js';
+import properties$2 from './OptionProperties-f66b07d7.js';
+import properties$3 from './OptionValueProperties-96f4b10c.js';
+import Select from 'react-select';
+import { jsxs, 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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-2ddaa3f5.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];
+  var dataDictionary = {
+    catalog: {
+      data: catalogData.catalogData,
+      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-2ddaa3f5.js

@@ -0,0 +1,64 @@
+import { s as styleInject } from './index-2f7c236c.js';
+import classnames from 'classnames';
+import 'react';
+import Switch from 'react-switch';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var toggleText = "toggle-text-xzNMI";
+var yes = "yes-Rq8uh";
+var no = "no-ySZRX";
+var css_248z = ".switch-wrapper-YZN6e {\n  display: flex;\n  font-weight: 300;\n  line-height: 40px;\n  gap: 24px;\n}\n\n.toggle-text-xzNMI {\n  padding-left: 16px;\n  color: white;\n  line-height: 40px;\n  font-weight: 300;\n}\n\n.yes-Rq8uh {\n  padding-left: 16px;\n}\n\n.no-ySZRX {\n  padding-left: 4px;\n}\n";
+styleInject(css_248z);
+
+var Toggle = function Toggle(_ref) {
+  var _docStyle$getProperty;
+  var _onChange = _ref.onChange,
+    val = _ref.val,
+    state = _ref.state,
+    on = _ref.on,
+    off = _ref.off,
+    alwaysActiveColor = _ref.alwaysActiveColor,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 80 : _ref$width,
+    _ref$handleDiameter = _ref.handleDiameter,
+    handleDiameter = _ref$handleDiameter === void 0 ? 32 : _ref$handleDiameter;
+  var docStyle = getComputedStyle(document.documentElement);
+  var myVarVal = (_docStyle$getProperty = docStyle.getPropertyValue('--primaryColor')) === null || _docStyle$getProperty === void 0 ? void 0 : _docStyle$getProperty.replace(/ /g, '');
+  return /*#__PURE__*/jsx(Switch, {
+    checkedIcon: on ? /*#__PURE__*/jsx("div", {
+      className: classnames(toggleText, yes),
+      children: on
+    }) : /*#__PURE__*/jsx(Fragment, {}),
+    uncheckedIcon: off ? /*#__PURE__*/jsx("div", {
+      className: classnames(toggleText, no),
+      children: off
+    }) : /*#__PURE__*/jsx(Fragment, {}),
+    onChange: function onChange() {
+      return _onChange(val !== null && val !== void 0 ? val : !state);
+    },
+    checked: state,
+    onColor: myVarVal,
+    offColor: alwaysActiveColor ? myVarVal : '#CACACA',
+    height: height,
+    width: width,
+    handleDiameter: handleDiameter
+  });
+};
+
+export { Toggle as default };