@crystaldesign/diva-web-planner-react 24.12.0 → 24.12.1

package/build/esm/index-28f79766.js

@@ -0,0 +1,46 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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 container = "container-LyqYI";
+var hidden = "hidden-TqWZg";
+var notHidden = "not-hidden-Wbdom";
+var text = "text-022qF";
+var css_248z = ".container-LyqYI {\r\n  bottom: 0px;\r\n  left: 0px;\r\n  position: absolute;\r\n  z-index: 1000;\r\n  margin-left: 30px;\r\n  margin-bottom: 20px;\r\n  opacity: 1;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.hidden-TqWZg {\r\n  opacity: 0;\r\n}\r\n\r\n.not-hidden-Wbdom {\r\n  transition: opacity 0.5s;\r\n}\r\n.text-022qF {\r\n  margin-left: 10px;\r\n  font-size: 13px;\r\n}\r\n";
+styleInject(css_248z);
+
+var RotateIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M16.48%202.52c3.27%201.55%205.61%204.72%205.97%208.48h1.5C23.44%204.84%2018.29%200%2012%200l-.66.03%203.81%203.81%201.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12%200L1.75%208.11c-.59.59-.59%201.54%200%202.12l12.02%2012.02c.59.59%201.54.59%202.12%200l6.36-6.36c.59-.59.59-1.54%200-2.12L10.23%201.75zm4.6%2019.44L2.81%209.17l6.36-6.36%2012.02%2012.02-6.36%206.36zm-7.31.29C4.25%2019.94%201.91%2016.76%201.55%2013H.05C.56%2019.16%205.71%2024%2012%2024l.66-.03-3.81-3.81-1.33%201.32z%22%2F%3E%3C%2Fsvg%3E";
+
+var RotateInfo = function RotateInfo(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (viewHandler.uiState.ViewConfig.landscapeProductNotFullscreen || !viewHandler.uiState.isMobileLandscape || viewHandler.uiState.isMobilePortrait || viewHandler.uiState.ViewConfig.disableLandscape) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, !viewHandler.productState.orbitHidden ? hidden : notHidden),
+    children: [/*#__PURE__*/jsx("img", {
+      src: RotateIcon
+    }), /*#__PURE__*/jsx("div", {
+      className: text,
+      children: t('configurator.rotate_mobile')
+    })]
+  });
+};
+var RotateInfo$1 = observer(RotateInfo);
+
+export { RotateInfo$1 as default };

package/build/esm/index-290af97c.js

@@ -0,0 +1,144 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import { useEffect } from 'react';
+import Settings from './index-19008c8c.js';
+import TabGroup from './index-418359c4.js';
+import { observer } from 'mobx-react-lite';
+import Inputbox from './index-f21bc2b5.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 './index-8d1d697a.js';
+import './index-ca0e4969.js';
+import './index-053d32e4.js';
+import './index-0b2690bb.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-327cd278.js';
+import 'react-laag';
+import './index-68f24f4a.js';
+import 'classnames';
+import './index-87812dfe.js';
+import './index-a8f4c6d0.js';
+import 'sift';
+import './index-c84e2c9d.js';
+import './index-2ce21b8e.js';
+import './index-a638b452.js';
+import './index-339fe263.js';
+import './index.module-0c3a1f94.js';
+import './index-caa33034.js';
+import 'react-switch';
+import './index-55f945c0.js';
+import './index-a8d969d8.js';
+import 'react-dropdown';
+import './index-7dbf560b.js';
+import './index-abcc0f82.js';
+import './index-b34188dc.js';
+import './index-63cce023.js';
+import '@crystaldesign/content-box';
+import './index-2f1a0e04.js';
+import './index-972a9fb1.js';
+import './index-b5b683b5.js';
+import './index-4f5189b5.js';
+import './index-8161d3d2.js';
+import '@crystaldesign/products-component';
+import './index-0f8e2602.js';
+import './index-f5a4b8a0.js';
+import './index-bd162ad8.js';
+import './index-e4dd8413.js';
+import './index-2b309493.js';
+import './index-ef85426a.js';
+import './index-6891af5f.js';
+import './index-48a8a155.js';
+import './index-1a28e9b5.js';
+import './index-1bb9122f.js';
+import './index-473e0393.js';
+import './index-a76c6752.js';
+import './index-89cc3b90.js';
+import './index.module-d4c0130b.js';
+import './index-783af724.js';
+import './index-eefd4032.js';
+import './index-770767c2.js';
+import './index-7cab0762.js';
+import './index-b5e6499c.js';
+import './index-7531df3b.js';
+import './index-f214f28a.js';
+import './index.module-cb0c03a2.js';
+import './index-fde74907.js';
+import './index-9b97271d.js';
+import './index-0668dc6a.js';
+import './index-fc98f1f4.js';
+import './index-91f2928f.js';
+import './index-c6729434.js';
+import './index-786d8f5e.js';
+import './index-f903b11e.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 {\r\n  margin: 0;\r\n  overscroll-behavior-x: none;\r\n}\r\n\r\n.wcConfigurator-IeI91 {\r\n  position: relative;\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  font-family: var(--diva-typography-font-family);\r\n  font-weight: 100;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-touch-callout: none; /* iOS Safari */\r\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\r\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\r\n  user-select: none; /* Non-prefixed version, currently*/\r\n\r\n  position: relative;\r\n  height: 100%;\r\n  width: 100%;\r\n  display: flex;\r\n}\r\n\r\n.wcConfigurator-IeI91 *,\r\n.wcConfigurator-IeI91 *::before,\r\n.wcConfigurator-IeI91 *::after {\r\n  box-sizing: content-box;\r\n  box-sizing: initial;\r\n}\r\n\r\n.wc-configurator-steps-yPThi {\r\n  border-radius: 8px 0 0 8px;\r\n  overflow: hidden;\r\n  width: 350px;\r\n  position: relative;\r\n}\r\n\r\n.wc-configurator-Settings-3U39- {\r\n  width: calc(100% - 350px);\r\n  position: relative;\r\n  border-right: 1px solid #e6e6e6;\r\n}\r\n\r\n::-webkit-scrollbar {\r\n  width: 5px;\r\n  height: 5px;\r\n}\r\n::-webkit-scrollbar-track {\r\n  background: #dfdfdf;\r\n  border-radius: 3px;\r\n}\r\n::-webkit-scrollbar-thumb {\r\n  background: #b1b1b1;\r\n  border-radius: 3px;\r\n}\r\n\r\n.tab-search-class-qJEaW {\r\n  background-color: #0d3040;\r\n  padding: 12px 16px;\r\n  position: relative;\r\n  display: flex;\r\n}\r\n\r\n.tab-search-class-qJEaW input {\r\n  outline: medium none invert !important;\r\n  outline: initial !important;\r\n}\r\n\r\n.tab-search-class-qJEaW input {\r\n  color: #fff;\r\n  width: 100%;\r\n  background-color: #0d3040;\r\n  font-size: 14px;\r\n  border: 0px solid;\r\n}\r\n\r\n.tab-search-class-qJEaW div {\r\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%0D%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%23eee%22 stroke-linecap%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E%0D\");\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  background-size: 75%;\r\n  width: 16px;\r\n  height: 16px;\r\n  transition: all 0.15s ease;\r\n  margin: 0px 3px;\r\n  border-radius: var(--globalBorderRadius);\r\n  cursor: pointer;\r\n}\r\n\r\n.tab-search-class-qJEaW div:hover {\r\n  background-size: 100%;\r\n}\r\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',
+  '--configuratorActionWidthForthBackSpacer': '0.1rem',
+  '--configuratorActionForthWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--configuratorActionBackWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--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)',
+  '--itemsMargin': '0.3125rem'
+};
+var index = observer(Classification);
+
+export { index as default };

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

@@ -0,0 +1,73 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-945074f1.js';
+import DivaUtils from '@crystaldesign/diva-utils';
+import 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+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 '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var wcGalleryTooltip = "wcGalleryTooltip-eM-oy";
+var hexColor = "hexColor-XaOK4";
+var textClass = "text-class-6-Jq8";
+var descClass = "desc-class-KzLCw";
+var priceClass = "price-class-wkXc-";
+var css_248z = ".wcGalleryTooltip-eM-oy {\r\n  display: block;\r\n  background-color: rgba(242, 242, 242, 0.9);\r\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\r\n  border-radius: var(--globalBorderRadius);\r\n  height: -moz-fit-content;\r\n  height: fit-content;\r\n  width: 320px;\r\n  padding-bottom: 12px;\r\n}\r\n.wcGalleryTooltip-eM-oy img,\r\n.hexColor-XaOK4 {\r\n  width: 90%;\r\n  max-height: 77%;\r\n  margin: 5% 5% 0 5%;\r\n  -o-object-fit: scale-down;\r\n     object-fit: scale-down;\r\n  -o-object-position: center center;\r\n     object-position: center center;\r\n}\r\n\r\n.hexColor-XaOK4 {\r\n  height: 260px;\r\n}\r\n\r\n.wcGalleryTooltip-eM-oy {\r\n  font-family: var(--diva-typography-font-family);\r\n  font-weight: 100;\r\n  letter-spacing: 0.5px;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-stroke: 0.1px;\r\n  z-index: 2147483650;\r\n}\r\n\r\n.text-class-6-Jq8 {\r\n  padding: 5px 20px 2px 20px;\r\n}\r\n\r\n.desc-class-KzLCw {\r\n  font-size: 13px;\r\n  line-height: 16px;\r\n  color: var(--secondaryColor);\r\n  padding: 5px 20px 2px 20px;\r\n}\r\n\r\n.price-class-wkXc- {\r\n  padding: 0px 20px;\r\n}\r\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 GenericToolTip = function GenericToolTip(_ref) {
+  var _theme$typography;
+  var image = _ref.image,
+    text = _ref.text,
+    desciption = _ref.desciption,
+    codex = _ref.codex,
+    price = _ref.price,
+    hexColor$1 = _ref.hexColor,
+    layerProps = _ref.layerProps;
+  var imageSrc = image === null || image === void 0 ? void 0 : image.replace('_gal', '').replace('_low', '');
+  var _useDivaCore = useDivaCore(),
+    theme = _useDivaCore.state.theme;
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: wcGalleryTooltip
+  }, layerProps), {}, {
+    style: _objectSpread(_objectSpread({}, {
+      fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
+    }), layerProps.style),
+    children: [imageSrc ? /*#__PURE__*/jsx("img", {
+      src: imageSrc,
+      alt: text
+    }) : !!hexColor$1 ? /*#__PURE__*/jsx("div", {
+      className: hexColor,
+      style: {
+        backgroundColor: '#' + hexColor$1
+      }
+    }) : /*#__PURE__*/jsx(Fragment, {}), /*#__PURE__*/jsx("div", {
+      className: textClass,
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    }), desciption && /*#__PURE__*/jsx("div", {
+      className: descClass,
+      children: desciption
+    }), codex && /*#__PURE__*/jsx("div", {
+      className: descClass,
+      children: codex
+    }), !!price && /*#__PURE__*/jsx("div", {
+      className: priceClass,
+      children: DivaUtils.formatPrice(price)
+    })]
+  }));
+};
+
+export { GenericToolTip as default };

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

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-945074f1.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+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 ItemVariant = function ItemVariant(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/HeaderAndOption/DropDownText"
+  }));
+};
+
+export { ItemVariant as default };

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

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { 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/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';
+
+var imageItem = "image-item-NA3C7";
+var sel = "sel-gUlno";
+var css_248z = ".image-item-NA3C7 {\r\n  width: 30px;\r\n  height: 30px;\r\n  border-radius: 50%;\r\n  background-position: center;\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  border: solid #f0f0f0 var(--galleryItemBorder);\r\n  margin: 10px 0;\r\n}\r\n\r\n.sel-gUlno {\r\n  margin: 8px 0;\r\n\r\n  border: solid var(--secondaryColor) 4px;\r\n}\r\n";
+styleInject(css_248z);
+
+var FilterItem = function FilterItem(_ref) {
+  var _viewHandler$settings;
+  var item = _ref.item,
+    id = _ref.id;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  return /*#__PURE__*/jsx("span", {
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.onSelectFilter(id, item.text, 'RAL');
+    },
+    style: {
+      backgroundColor: item.rgb
+    },
+    className: classnames(imageItem, actValue === item.text ? sel : undefined)
+  });
+};
+var FilterItem$1 = observer(FilterItem);
+
+export { FilterItem$1 as default };

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

@@ -0,0 +1,127 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import { useState } from 'react';
+import { useHover, useLayer } from 'react-laag';
+import { observer } from 'mobx-react-lite';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-cb0c03a2.js';
+import classnames from 'classnames';
+import IsActive from './index-783af724.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import GenericToolTip from './index-2b309493.js';
+import InfoIcon from './index-55f945c0.js';
+import { jsxs, Fragment, 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-WUuXa";
+var wcSize = "wcSize-eyEDf";
+var wcSizeGallery = "wcSize-gallery-l2o6z";
+var sel = "sel-1MlhE";
+var wcVCodexTextWrapper = "wcVCodexTextWrapper-B9kjy";
+var wcVCodexText = "wcVCodexText-l-tMp";
+var wcGallery = "wcGallery-jbfei";
+var hexColor = "hexColor-otBJT";
+var css_248z = ".PaletteItem-WUuXa .wcSize-eyEDf.wcSize-gallery-l2o6z {\r\n  width: 100%;\r\n  background: transparent;\r\n  position: relative;\r\n  border-radius: var(--globalBorderRadius);\r\n  display: flex;\r\n}\r\n.PaletteItem-WUuXa {\r\n  --galleryItemSelBorder: var(--galleryItemBorder);\r\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderColor);\r\n}\r\n.PaletteItem-WUuXa:hover {\r\n  --galleryItemSelBorder: var(--galleryItemBorder);\r\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderHoverColor);\r\n  box-shadow: var(--gallerySelectedBoxShadow);\r\n}\r\n\r\n.PaletteItem-WUuXa.sel-1MlhE {\r\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderSelColor);\r\n  box-shadow: var(--gallerySelectedBoxShadow);\r\n}\r\n\r\n.wcVCodexTextWrapper-B9kjy {\r\n  width: 100%;\r\n  height: 100%;\r\n  position: absolute;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.wcVCodexText-l-tMp {\r\n  width: 100%;\r\n  font-size: 18px;\r\n  text-shadow: 3px 4px 15px rgba(0,0,0,0.6);\r\n  color: white;\r\n  display: none;\r\n  text-align: center;\r\n  word-break: break-all;\r\n}\r\n\r\n.PaletteItem-WUuXa:hover .wcVCodexText-l-tMp,\r\n.sel-1MlhE .wcVCodexText-l-tMp {\r\n  display: block;\r\n}\r\n\r\n.PaletteItem-WUuXa.wcGallery-jbfei {\r\n  display: block;\r\n  background: transparent;\r\n  margin: 0;\r\n  margin: initial;\r\n  position: relative;\r\n  float: left;\r\n  border-radius: var(--galleryItemRadius);\r\n  z-index: 100;\r\n  cursor: pointer;\r\n  width: 100%;\r\n}\r\n\r\n.PaletteItem-WUuXa.wcGallery-jbfei img {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: var(--galleryItemRadius);\r\n  aspect-ratio: 1 / 1;\r\n  -webkit-touch-callout: none;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  user-select: none;\r\n  user-select: none;\r\n  -moz-user-select: none;\r\n  -webkit-user-drag: none;\r\n  -webkit-user-select: none;\r\n  -ms-user-select: none;\r\n}\r\n.hexColor-otBJT {\r\n  width: 80px;\r\n  height: 80px;\r\n}\r\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 Gallery = function Gallery(_ref) {
+  var _item$freeText, _renderLayer;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? /*#__PURE__*/jsx(IsActive, {
+      listenToGalleryVariables: true
+    }) : _ref$isActive;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var onClick = function onClick() {
+    if (item.doShowFav) {
+      viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+    }
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0];
+    _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 && (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(Fragment, {
+    children: [/*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+      style: style,
+      id: item.codex,
+      "data-test-id": "plannerPaletteItem",
+      className: classnames(paletteItem, wcGallery, item.sel ? sel : undefined),
+      onClick: onClick
+    }, triggerProps), hoverProps), {}, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: classnames(wcSize, wcSizeGallery),
+        children: [!item.doShowFav && item.sel && isActive !== undefined && isActive, item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+          item: item
+        }), (viewHandler.getViewConfig().showVCodexInGallery && item.vCodex || item.freeText) && /*#__PURE__*/jsx("div", {
+          className: wcVCodexTextWrapper,
+          children: /*#__PURE__*/jsx("div", {
+            className: classnames(wcVCodexText),
+            children: (_item$freeText = item.freeText) !== null && _item$freeText !== void 0 ? _item$freeText : item.vCodex
+          })
+        }), item.image ? /*#__PURE__*/jsx("img", {
+          src: item.image
+        }) : item.hexColor ? /*#__PURE__*/jsx("div", {
+          className: hexColor,
+          style: {
+            backgroundColor: '#' + item.hexColor
+          }
+        }) : /*#__PURE__*/jsx(Fragment, {}), item.doShowFav && /*#__PURE__*/jsx("div", {
+          className: item.isFav ? wcFavoriteSel : wcFavorite
+        })]
+      })
+    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: /*'RAL: ' + item.rals?.[0] + '     ' +*/item.text,
+      desciption: metaDataVisible,
+      price: item.deltaPrice,
+      image: item.image,
+      layerProps: layerProps,
+      hexColor: item.hexColor
+    }, item.codex)))]
+  });
+};
+var index = observer(Gallery);
+
+export { index as default };

package/build/esm/index-32098881.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-945074f1.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+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 PlannerMsgContainer = function PlannerMsgContainer(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/PlannerMsgContainer"
+  }));
+};
+
+export { PlannerMsgContainer as default };

package/build/esm/index-327cd278.js

@@ -0,0 +1,76 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useHover, useLayer } from 'react-laag';
+import SettingsPosNrToolTip from './index-68f24f4a.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var wcConfiguratorSettingsHeaderActElements = "wcConfigurator-settings-header-act-elements-f-VVv";
+var isActive = "isActive-mWaAC";
+var allIsActive = "allIsActive-iSz9H";
+var isSelectable = "isSelectable-FBPGm";
+var small = "small-xZ6Og";
+var css_248z = ".wcConfigurator-settings-header-act-elements-f-VVv {\r\n  font-family: var(--diva-typography-font-family);\r\n  font-weight: 100;\r\n  display: flex;\r\n  gap: 3px;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  font-size: 16px;\r\n  line-height: 18px;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-font-smoothing: antialiased;\r\n  color: var(--secondaryColor);\r\n  overflow: hidden;\r\n  margin: 1.6px 16px 0 16px;\r\n  padding-top: 7px;\r\n  padding-bottom: 7px;\r\n  order: 2;\r\n  max-width: 40%;\r\n  position: relative;\r\n  /* background: #f2f2f2; */\r\n  /* border: 1px solid #f2f2f2; */\r\n  border-radius: 5px;\r\n  text-align: right;\r\n  min-height: 25px;\r\n}\r\n\r\n.wcConfig-qK8qq {\r\n  display: -webkit-box;\r\n  max-height: 608px;\r\n  -webkit-line-clamp: 15;\r\n  overflow: auto;\r\n  box-shadow: var(--boxShadowHover);\r\n  z-index: 930;\r\n  text-align: left;\r\n}\r\n\r\n.wcConfigurator-settings-header-hideConfSettings-72pdt {\r\n  display: none;\r\n}\r\n\r\n.wcConfigurator-settings-header-act-elements-f-VVv span {\r\n  border-radius: var(--articlePosNrRadius);\r\n  font-size: var(--articlePosNrFontSize);\r\n  line-height: var(--articlePosNrSize);\r\n  min-width: var(--articlePosNrSize);\r\n  width: -moz-fit-content;\r\n  width: fit-content;\r\n  text-align: center;\r\n  display: inline-block;\r\n  margin: 0 1px;\r\n}\r\n\r\n.wcConfigurator-settings-header-act-elements-f-VVv span:hover {\r\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\r\n  transition: box-shadow 0.45s ease;\r\n}\r\n.wcConfigurator-settings-header-act-elements-f-VVv span.isActive-mWaAC {\r\n  color: white;\r\n  background: var(--primaryColor);\r\n  font-size: calc(var(--articlePosNrFontSize) + 1.6px);\r\n  line-height: calc(var(--articlePosNrSize) + 1.6px);\r\n  min-width: calc(var(--articlePosNrSize) + 3.2px);\r\n  -webkit-text-stroke: 0.4px;\r\n}\r\n.wcConfigurator-settings-header-act-elements-f-VVv span.allIsActive-iSz9H {\r\n  color: white;\r\n  background: var(--primaryColor);\r\n}\r\n\r\n.wcConfigurator-settings-header-act-elements-f-VVv span.isSelectable-FBPGm {\r\n  color: var(--secondaryColor);\r\n  background: var(--thirdColor);\r\n}\r\n\r\n.wcConfigurator-settings-header-act-elements-f-VVv span.small-xZ6Og,\r\n.wcConfigurator-settings-header-act-elements-f-VVv span.small-xZ6Og.isActive-mWaAC {\r\n  font-size: calc(var(--articlePosNrFontSize) - 4.6px);\r\n}\r\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 SettingsPosNr = function SettingsPosNr(_ref) {
+  var _renderLayer;
+  var id = _ref.id,
+    allAreActive = _ref.allAreActive;
+  var viewHandler = useViewHandler();
+  var article = viewHandler.settingsState.articleInfos[id];
+  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) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("span", _objectSpread(_objectSpread(_objectSpread({
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.articleInfoSelected(Number(id));
+      },
+      id: "ArticleInfo",
+      className: classnames(allAreActive ? allIsActive : article.isActive ? isActive : isSelectable, article.posNr.toString().length > 2 ? small : undefined)
+    }, triggerProps), hoverProps), {}, {
+      children: article.posNr
+    }), id), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(SettingsPosNrToolTip, {
+      article: article,
+      layerProps: layerProps
+    })))]
+  });
+};
+var SettingsPosNr$1 = observer(SettingsPosNr);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SettingsPosNr$1
+});
+
+export { SettingsPosNr$1 as S, index as i, wcConfiguratorSettingsHeaderActElements as w };