@crystaldesign/diva-web-planner-react 25.4.0-beta.8 → 25.4.0-rc.0

package/build/esm/index-81112a46.js

@@ -1,230 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-18f7cf20.js';
-import React, { useState, useEffect, Suspense } from 'react';
-import { observer } from 'mobx-react-lite';
-import sift from 'sift';
-import TextBox from './index-42733f61.js';
-import ItemVariant from './index-a2fd2147.js';
-import SettingsPaletteGroup from './index-7751c02e.js';
-import ToggleOption from './index-2a58e3a6.js';
-import GroupDropdown from './index-3e08163e.js';
-import PromotedProducts from './index-1352f559.js';
-import ToggleName from './index-767e49c8.js';
-import itemPaletteTypeComponentMap from './index-b78ac848.js';
-import ItemWrapper from './index-8793821f.js';
-import Checkout from './index-8e60a91b.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-var collapsableInner = "collapsable-inner-YPvJa";
-var css_248z = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\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 ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-235f06b8.js');
-});
-var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-bd9b73a1.js');
-});
-var ProductList = /*#__PURE__*/React.lazy(function () {
-  return import('./index-980c4f86.js');
-});
-var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
-  var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
-  var item = _ref.item,
-    groupSize = _ref.groupSize;
-  var viewHandler = useViewHandler();
-  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
-  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    filteredGroups = _useState2[0],
-    setFilteredGroups = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filteredGroupsWithEmptyGroups = _useState4[0],
-    setFilteredGroupsWithEmptyGroups = _useState4[1];
-  useEffect(function () {
-    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
-      return _objectSpread(_objectSpread({}, group), {}, {
-        items: item.currentItemsFilter && item.type !== 'PLANNERSWITCH' ? group.items.filter(sift(item.currentItemsFilter)) : group.items
-      });
-    });
-    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
-      return group.items.length > 0;
-    });
-    if (filteredGroups.length > 0) {
-      filteredGroupsWithEmptyGroups = filteredGroups;
-    }
-    setFilteredGroups(filteredGroups);
-    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
-  }, [item, viewHandler.settingsState.itemPalettes]);
-  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
-  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
-
-  //this code now sets a css variable within a specific palette to define the grid items size and gird gap
-  //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
-  //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
-  var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
-  var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
-  var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
-  var infoIconSize = undefined;
-  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-    gridSize = '240px';
-  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
-    gridSize = 'calc(100% - 20px)';
-  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
-    gridSize = '100px';
-  } else if (item.type == 'ACC') {
-    if (settingsSizes.sizeAccessoires) {
-      gridSize = settingsSizes.sizeAccessoires;
-    }
-  } else if (item.type == 'ACC_CONFIG') {
-    gridSize = '100%';
-  } else if (item.type.startsWith('GAL_SMALL')) {
-    gridSize = '60px';
-  } else if (item.type == 'RANGE') {
-    gridSize = '100%';
-  } else if (item.type == 'GAL') {
-    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
-    gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
-    gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
-  } else if (item.type === 'PLANNERSWITCH') {
-    gridSize = '170px';
-  } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
-    //for the usecase of schlaraffia in mobile
-    //TODO for refactorig this should be done nicer
-    gridSize = '120px';
-  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
-    gridSize = '120px';
-  } else if (item.type === 'VERY_SMALL') {
-    gridSize = '48%';
-  } else if (item.type === 'GAL_TEXT') {
-    gridSize = '100px';
-  } else if (item.type === 'GAL_BIG_TEXT') {
-    gridSize = '120px';
-  } else if (item.type === 'GAL_SMALL_TEXT') {
-    gridSize = '70px';
-  }
-  if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
-    infoIconSize = '20px';
-  }
-  var variables = _objectSpread({
-    '--gridSize': gridSize,
-    '--gridGap': gridGap
-  }, infoIconSize ? {
-    '--infoIconSize': infoIconSize
-  } : {});
-  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
-  switch (item.type) {
-    case 'CHECKOUT':
-      return /*#__PURE__*/jsx(Checkout, {
-        viewHandler: viewHandler
-      });
-    case 'TOGGLE':
-      return /*#__PURE__*/jsx(ToggleOption, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TOGGLE_NAME':
-      return /*#__PURE__*/jsx(ToggleName, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TEXTBOX':
-      return /*#__PURE__*/jsx(TextBox, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'DROPDOWN_TEXT':
-    case 'DROPDOWN_IMAGE':
-      return /*#__PURE__*/jsx(ItemVariant, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'NUMBER':
-      return /*#__PURE__*/jsx(PaletteComponent, {
-        paletteId: item.id,
-        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
-        groupSize: groupSize
-      }, item.id + item.configStepKey);
-    case 'SHELFPLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(ShelfPlanner, {
-          filteredGroups: filteredGroups,
-          item: item,
-          id: item.id,
-          style: variables
-        }, item.id)
-      });
-    case 'PRODUCTS':
-      return /*#__PURE__*/jsx(ProductList, {
-        item: item
-      });
-    case 'PROMOTED':
-      return /*#__PURE__*/jsx(PromotedProducts, {
-        item: item
-      });
-    case 'DOOR_PLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(DoorPlanner, {
-          item: item
-        })
-      });
-    case 'GAL_GROUP_DROPDOWN':
-    case 'GAL_SMALL_GROUP_DROPDOWN':
-      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
-        item: item,
-        PaletteComponent: PaletteComponent,
-        filteredGroups: filteredGroupsWithEmptyGroups,
-        id: item.id,
-        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
-        contentInnerClassName: innerGridClass
-      }, item.configStepKey);
-      return /*#__PURE__*/jsx(ItemWrapper, {
-        style: variables,
-        item: item,
-        children: childGroup
-      });
-    default:
-      var children;
-      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
-        className: innerGridClass,
-        children: filteredGroups.map(function (group) {
-          return group.items.map(function (paletteItem, i) {
-            return /*#__PURE__*/jsx(PaletteComponent, {
-              paletteType: item.type,
-              paletteId: item.id,
-              item: paletteItem
-            }, i);
-          });
-        })
-      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
-        groups: filteredGroups,
-        contentInnerClassName: innerGridClass,
-        itemPalette: item,
-        PaletteComponent: PaletteComponent
-      });
-      return /*#__PURE__*/jsx(ItemWrapper, {
-        style: variables,
-        item: item,
-        children: children
-      });
-  }
-};
-var SettingsItem = observer(SettingsPaletteItem);
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': SettingsItem
-});
-
-export { SettingsItem as S, collapsableInner as c, index as i };

package/build/esm/index-822efc7f.js

@@ -1,160 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { u as useViewHandler } from './index-18f7cf20.js';
-import { toJS } from 'mobx';
-import { useState } from 'react';
-import { h as header } from './index.module-e304c09b.js';
-import { c as collapsibleHeader, d as dpArrow, b as dArrow, e as boxes, f as box, g as boxSelected, h as boxImage, j as jsonSelection, i as jsonSelected } from './index.module-d05f4df7.js';
-import { observer } from 'mobx-react-lite';
-import classnames from 'classnames';
-import { n as notExpanded } from './index.module-79888996.js';
-import Collapsible from 'react-collapsible';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import 'react-dynamic-multi-render';
-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 '@crystaldesign/web-planner-logic';
-import '@crystaldesign/widget-contact-form';
-
-var arrow = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23FFFFFF%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C0h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpolygon%20points%3D%226.23%2C20.23%208%2C22%2018%2C12%208%2C2%206.23%2C3.77%2014.46%2C12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
-
-var _excluded = ["settings", "title", "ChildComponent"];
-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 ArticleOverview = function ArticleOverview(_ref) {
-  var _viewHandler$divaWebP;
-  var settings = _ref.settings,
-    title = _ref.title,
-    ChildComponent = _ref.ChildComponent,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var viewHandler = useViewHandler();
-  viewHandler.tabGroupState.allTabGroups;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    jsonSize = _useState2[0],
-    setJsonSize = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedBox = _useState4[0],
-    setSelectedBox = _useState4[1];
-  var _useState5 = useState(settings[0].key),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedJson = _useState6[0],
-    setSelectedJson = _useState6[1];
-  var articlesLoaded = viewHandler.divaWebPlanner.getDivaArticles();
-  (_viewHandler$divaWebP = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.configTree;
-  if (!articlesLoaded) return /*#__PURE__*/jsx(Fragment, {});
-  var articles = Object.values(articlesLoaded);
-  var filteredArticles = articles.filter(function (article) {
-    return article.hasCatalogPlannerArticle;
-  });
-  var plannerArticles = filteredArticles.map(function (article) {
-    return article.catalogArticle.catalogPlannerArticle;
-  });
-  var CollapsibleProps = {
-    open: true,
-    easing: 'ease-in',
-    transitionTime: 200
-  };
-  var json = {};
-  if (selectedJson === 'OPTIONSTATES') {
-    var variantValues = articles.map(function (article) {
-      return article.VariantValues;
-    });
-    json = variantValues[selectedBox];
-  }
-  if (selectedJson === 'DECISIONS') {
-    json = JSON.parse(JSON.stringify(toJS(articles.map(function (article) {
-      return article.decisions;
-    }))));
-  }
-  if (selectedJson === 'CONFIGTREE') {
-    json = {}; //JSON.parse(JSON.stringify(configTree));
-  }
-  if (selectedJson === 'J3D') {
-    var _articles$selectedBox, _articles$selectedBox2;
-    json = articles !== null && articles !== void 0 && (_articles$selectedBox = articles[selectedBox]) !== null && _articles$selectedBox !== void 0 && _articles$selectedBox.j3D ? JSON.parse(JSON.stringify(articles === null || articles === void 0 || (_articles$selectedBox2 = articles[selectedBox]) === null || _articles$selectedBox2 === void 0 ? void 0 : _articles$selectedBox2.j3D)) : {};
-  }
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
-      className: classnames(props.className, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
-      style: {
-        zIndex: 700
-      },
-      children: [/*#__PURE__*/jsx("a", {
-        className: header,
-        children: title
-      }), /*#__PURE__*/jsx(Collapsible, _objectSpread(_objectSpread({
-        trigger: /*#__PURE__*/jsx("div", {
-          className: collapsibleHeader,
-          children: /*#__PURE__*/jsx("img", {
-            src: arrow,
-            className: dpArrow
-          })
-        }),
-        onClose: function onClose() {
-          return setJsonSize(!jsonSize);
-        },
-        onOpen: function onOpen() {
-          return setJsonSize(!jsonSize);
-        },
-        triggerWhenOpen: /*#__PURE__*/jsxs("div", {
-          className: collapsibleHeader,
-          children: [" ", /*#__PURE__*/jsx("img", {
-            src: arrow,
-            className: dArrow
-          })]
-        })
-      }, CollapsibleProps), {}, {
-        children: /*#__PURE__*/jsx("div", {
-          className: boxes,
-          children: articles.map(function (article, index) {
-            return /*#__PURE__*/jsxs("div", {
-              className: classnames(box, index === selectedBox ? boxSelected : undefined),
-              onClick: function onClick() {
-                setSelectedBox(index);
-              },
-              children: [/*#__PURE__*/jsx("img", {
-                src: article.imageUrl,
-                className: boxImage
-              }), /*#__PURE__*/jsx("p", {
-                children: article.posNr
-              }), /*#__PURE__*/jsx("p", {
-                children: article.name
-              }), /*#__PURE__*/jsx("p", {
-                children: article.basketId
-              })]
-            }, article.basketId);
-          })
-        })
-      })), /*#__PURE__*/jsx("div", {
-        className: jsonSelection,
-        children: settings.map(function (setting, index) {
-          return /*#__PURE__*/jsx("button", {
-            onClick: function onClick() {
-              return setSelectedJson(setting.key);
-            },
-            className: selectedJson === setting.key ? jsonSelected : undefined,
-            children: setting.name
-          }, setting.key);
-        })
-      }), /*#__PURE__*/jsx(ChildComponent, _objectSpread(_objectSpread({}, props), {}, {
-        json: json,
-        selectedJson: selectedJson,
-        isExpanded: jsonSize,
-        plannerArticles: plannerArticles,
-        curBox: selectedBox,
-        divaArticles: articles
-      }))]
-    }))
-  });
-};
-var ArticleOverview$1 = observer(ArticleOverview);
-
-export { ArticleOverview$1 as default };

package/build/esm/index-82e92fd9.js

@@ -1,97 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-18f7cf20.js';
-import 'react';
-import { useTranslation } from '@crystaldesign/diva-core';
-import { observer } from 'mobx-react-lite';
-import ArQrCodeIcon from './index-4903ed24.js';
-import ProductRoomList from './index-1560a013.js';
-import { jsxs, Fragment, 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 '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import '@crystaldesign/widget-contact-form';
-import 'react-laag';
-import './index-30a73b2a.js';
-import 'react-qr-code';
-import 'classnames';
-import './index-236b036d.js';
-
-var wcNav3DToolbar = "wc_Nav3DToolbar-NM2CK";
-var wcZoomIn = "wcZoomIn-7oss5";
-var wcZoomOut = "wcZoomOut-4EF8K";
-var wcViews = "wcViews-k2gyz";
-var wc3DDimLine = "wc3DDimLine-ERDw2";
-var wcFullScreen = "wcFullScreen-FuayU";
-var wc3DGridPlannerMode = "wc3DGridPlannerMode-2fAed";
-var css_248z = ".wc_Nav3DToolbar-NM2CK {\n  display: inline;\n  z-index: 601;\n  margin: 0;\n  position: absolute;\n  bottom: 60px;\n  left: -1.6rem;\n}\n\n.wc_Nav3DToolbar-NM2CK li {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto 8px auto;\n  display: block;\n  background-color: rgba(223, 223, 223, 0.8);\n  background-repeat: no-repeat;\n  background-position: center center;\n  border-radius: 50%;\n  transition: background-color 0.15s ease;\n  cursor: pointer;\n}\n\n.wc_Nav3DToolbar-NM2CK li:hover {\n  background-color: rgba(210, 210, 210, 0.8);\n}\n.wc_Nav3DToolbar-NM2CK li:active {\n  background-color: rgba(197, 197, 197, 0.8);\n}\n\n/*------------------------Nav Icons--------------------------------------*/\n\n/* standard */\n\n.wcZoomIn-7oss5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M25.7363 24.7891L29.9993 28.1047%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.7896 19.6841H23.58%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.686 15.7891L19.686 23.5795%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2219.5786%22 cy%3D%2219.5786%22 r%3D%227.57858%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomIn-7oss5:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M25.7363 24.7891L29.9993 28.1047%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.7896 19.6841H23.58%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.686 15.7891L19.686 23.5795%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2219.5786%22 cy%3D%2219.5786%22 r%3D%227.57858%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomOut-4EF8K {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M24.7362 24.7889L28.9991 28.1045M15.0002 19.9999H22.7907M26.1572 19.5786C26.1572 23.7641 22.7641 27.1572 18.5786 27.1572C14.393 27.1572 11 23.7641 11 19.5786C11 15.393 14.393 12 18.5786 12C22.7641 12 26.1572 15.393 26.1572 19.5786Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomOut-4EF8K:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M24.7362 24.7889L28.9991 28.1045M15.0002 19.9999H22.7907M26.1572 19.5786C26.1572 23.7641 22.7641 27.1572 18.5786 27.1572C14.393 27.1572 11 23.7641 11 19.5786C11 15.393 14.393 12 18.5786 12C22.7641 12 26.1572 15.393 26.1572 19.5786Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcViews-k2gyz {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M11 14.3811L20 19.0909M11 14.3811L20 10L29 14.3811M11 14.3811V25.0649L20 30M20 19.0909L29 14.3811M20 19.0909V30M29 14.3811V25.0649L20 30%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcViews-k2gyz:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M11 14.3811L20 19.0909M11 14.3811L20 10L29 14.3811M11 14.3811V25.0649L20 30M20 19.0909L29 14.3811M20 19.0909V30M29 14.3811V25.0649L20 30%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wc3DDimLine-ERDw2 {\n  background-color: #f5f5f5 !important;\n}\n.wc3DDimLine-ERDw2 {\n  background-size: 80%;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 15 12%22 style%3D%22enable-background%3Anew 0 0 15 12%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3Anone%3B %7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M14.8%2C1.3c0-0.6-0.5-1.2-1.2-1.2H1.4c-0.6%2C0-1.2%2C0.5-1.2%2C1.2v9.4c0%2C0.6%2C0.5%2C1.2%2C1.2%2C1.2h12.2%09c0.6%2C0%2C1.2-0.5%2C1.2-1.2C14.8%2C10.7%2C14.8%2C1.3%2C14.8%2C1.3z%22%2F%3E%3Cg%3E%09%3Cpath stroke%3D%22%234B4B4B%22 stroke-width%3D%220.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 d%3D%22M12.9%2C2.9c-0.1%2C0-0.2%2C0.1-0.2%2C0.2v5.8c0%2C0.1%2C0.1%2C0.2%2C0.2%2C0.2S13%2C9%2C13%2C8.9V3.1C13%2C3%2C12.9%2C2.9%2C12.9%2C2.9z%22%2F%3E%09%3Cpath stroke%3D%22%234B4B4B%22 stroke-width%3D%220.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 d%3D%22M2.1%2C2.9C2.1%2C2.9%2C2%2C3%2C2%2C3.1v5.8C2%2C9%2C2.1%2C9.1%2C2.1%2C9.1c0.1%2C0%2C0.2-0.1%2C0.2-0.2V3.1C2.3%2C3%2C2.2%2C2.9%2C2.1%2C2.9z%22%2F%3E%09%3Cpath stroke%3D%22%234B4B4B%22 stroke-width%3D%220.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 d%3D%22M10.3%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0C10.1%2C5%2C10%2C5%2C10%2C5.1v0.8H5V5.1C5%2C5%2C4.9%2C5%2C4.9%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0l-1.5%2C1%09%09c0%2C0-0.1%2C0.1-0.1%2C0.1c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1l1.5%2C1c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0C4.9%2C7.1%2C5%2C7.1%2C5%2C7V6.2H10V7c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1%09%09c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0l1.5-1c0%2C0%2C0.1-0.1%2C0.1-0.1c0-0.1%2C0-0.1-0.1-0.1L10.3%2C4.9z M4.6%2C6.7L3.6%2C6l1-0.6V6.7z M10.4%2C6.7%09%09V5.4l1%2C0.6L10.4%2C6.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n@media (hover: hover) {\n  .wc3DDimLine-ERDw2:hover {\n    background-color: #c4c4c4 !important;\n  }\n}\n\n.wc3DDimLine-ERDw2:active {\n  background-color: #c4c4c4 !important;\n}\n.portrait-Znfkx.wc_Nav3DToolbar-NM2CK li.wc3DDimLine-ERDw2 {\n  display: block;\n}\n\n.wc_Nav3DToolbar-NM2CK .wcFullScreen-FuayU {\n  background-size: 55%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #f5f5f5;\n}\n.wcFullScreen-FuayU:hover {\n  background-color: #c4c4c4;\n}\n\n.diva-pseudo-fullscreen .wc_Nav3DToolbar-NM2CK .wcFullScreen-FuayU {\n  display: none;\n}\n.wc_Nav3DToolbar-NM2CK li.wc3DGridPlannerMode-2fAed {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2231%22 height%3D%2231%22 viewBox%3D%220 0 31 31%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M5.24023 19.5242L2.10094 15.7308L5.24023 12.1436%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M2.18441 15.7428L11.2067 15.7428%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M25.759 11.759L28.8983 15.5525L25.759 19.1397%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M28.8989 15.5395L19.7925 15.5395%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.3847 25.9001L15.5912 29.0393L12.004 25.9001%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.5917 29.0395L15.6033 19.9331%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M11.6175 5.38248L15.411 2.24319L18.9982 5.38248%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.4106 2.24438L15.3991 11.3508%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: var(--primaryColor);\n  width: 55px;\n  height: 55px;\n  cursor: pointer;\n  padding: 0;\n  cursor: pointer;\n}\n\n.wc_Nav3DToolbar-NM2CK.portrait-Znfkx li.wc3DGridPlannerMode-2fAed {\n  width: 48px;\n  height: 48px;\n}\n\n.ar-absolute-IJps2#ar-icon {\n  position: absolute;\n  left: 12px;\n  bottom: 64px;\n  z-index: 1000;\n  width: 48px;\n  height: 48px;\n}\n\n#ar-icon {\n  width: 55px;\n  height: 55px;\n  cursor: pointer;\n  padding: 0;\n  border-radius: 50%;\n  background-size: 70%;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3Csvg viewBox%3D%220 0 30 30%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M 17.88 1.861 L 14.94 0.471 C 14.79 0.401 14.62 0.401 14.47 0.471 L 11.52 1.861 C 11.1 2.061 10.91 2.571 11.11 2.991 C 11.25 3.301 11.56 3.481 11.88 3.481 C 12 3.481 12.12 3.451 12.24 3.401 L 13.85 2.641 L 13.85 4.711 C 13.85 5.181 14.23 5.561 14.7 5.561 C 15.17 5.561 15.55 5.181 15.55 4.711 L 15.55 2.641 L 17.16 3.401 C 17.58 3.601 18.09 3.421 18.29 2.991 C 18.49 2.561 18.31 2.061 17.88 1.861 Z M 17.161 7.591 L 14.701 8.751 L 12.241 7.591 C 11.821 7.391 11.311 7.571 11.111 8.001 C 10.911 8.421 11.091 8.931 11.521 9.131 L 13.821 10.211 C 13.821 10.231 13.816 10.248 13.811 10.266 C 13.806 10.283 13.801 10.301 13.801 10.321 L 13.801 12.401 C 13.801 12.871 14.181 13.251 14.651 13.251 C 15.121 13.251 15.501 12.871 15.501 12.401 L 15.501 10.321 C 15.501 10.311 15.498 10.301 15.496 10.291 C 15.493 10.281 15.491 10.271 15.491 10.261 L 17.891 9.131 C 18.311 8.931 18.501 8.421 18.301 8.001 C 18.091 7.581 17.581 7.391 17.161 7.591 Z M 21.051 3.421 L 23.681 4.681 C 23.881 4.771 24.001 4.971 24.001 5.181 L 24.001 8.211 C 24.001 8.681 23.621 9.061 23.151 9.061 C 22.681 9.061 22.301 8.681 22.301 8.211 L 22.301 7.091 L 20.911 7.741 C 20.791 7.791 20.671 7.821 20.551 7.821 C 20.231 7.821 19.921 7.641 19.781 7.331 C 19.581 6.911 19.771 6.401 20.191 6.201 L 21.571 5.551 L 20.321 4.951 C 19.901 4.751 19.721 4.241 19.921 3.821 C 20.121 3.401 20.631 3.221 21.051 3.421 Z M 9.21 6.201 L 7.83 5.551 L 9.08 4.951 C 9.5 4.751 9.68 4.241 9.48 3.821 C 9.28 3.391 8.77 3.211 8.35 3.421 L 5.72 4.681 C 5.52 4.771 5.4 4.971 5.4 5.181 L 5.4 8.201 C 5.4 8.671 5.78 9.051 6.25 9.051 C 6.72 9.051 7.1 8.681 7.1 8.211 L 7.1 7.081 L 8.49 7.731 C 8.61 7.791 8.73 7.821 8.85 7.821 C 9.17 7.821 9.48 7.641 9.62 7.331 C 9.821 6.911 9.64 6.401 9.21 6.201 Z M 22.301 13.081 C 22.301 12.611 22.681 12.231 23.151 12.231 C 23.621 12.231 24.001 12.611 24.011 13.081 L 24.011 16.101 C 24.011 16.321 23.881 16.521 23.691 16.611 L 21.061 17.871 C 20.941 17.921 20.811 17.951 20.691 17.951 C 20.371 17.951 20.071 17.771 19.921 17.471 C 19.721 17.051 19.901 16.541 20.321 16.341 L 21.571 15.741 L 20.191 15.091 C 19.761 14.891 19.581 14.391 19.781 13.961 C 19.981 13.531 20.491 13.351 20.911 13.551 L 22.301 14.201 L 22.301 13.081 Z M 9.62 13.951 C 9.42 13.531 8.91 13.341 8.49 13.541 L 7.1 14.201 L 7.1 13.081 C 7.1 12.611 6.72 12.231 6.25 12.231 C 5.78 12.231 5.4 12.611 5.4 13.081 L 5.4 16.111 C 5.4 16.321 5.52 16.521 5.71 16.611 L 8.34 17.871 C 8.46 17.931 8.58 17.951 8.71 17.951 C 9.03 17.951 9.33 17.771 9.48 17.471 C 9.68 17.051 9.5 16.541 9.08 16.341 L 7.83 15.741 L 9.21 15.091 C 9.64 14.891 9.821 14.381 9.62 13.951 Z M 15.551 18.511 L 17.161 17.751 C 17.581 17.551 18.091 17.731 18.291 18.161 C 18.491 18.581 18.301 19.091 17.881 19.291 L 14.941 20.671 C 14.791 20.741 14.611 20.741 14.461 20.671 L 11.521 19.291 C 11.091 19.091 10.911 18.581 11.111 18.161 C 11.311 17.731 11.821 17.551 12.241 17.751 L 13.851 18.511 L 13.851 16.441 C 13.851 15.971 14.231 15.591 14.701 15.591 C 15.171 15.591 15.551 15.971 15.551 16.441 L 15.551 18.511 Z%22 fill%3D%22white%22%2F%3E  %3Ctext style%3D%22fill%3A rgb(255%2C 255%2C 255)%3B font-family%3A Arial%2C sans-serif%3B font-size%3A 10px%3B font-weight%3A 700%3B letter-spacing%3A 1.9px%3B word-spacing%3A -6.7px%3B white-space%3A pre%3B%22 x%3D%227.235%22 y%3D%2228.446%22%3EAR%3C%2Ftext%3E%3C%2Fsvg%3E\");\n  background-color: var(--primaryColor);\n  background-repeat: no-repeat;\n  background-position: center center;\n  display: block;\n  transition: background-color 0.15s ease;\n}\n\ndiv .portrait-Znfkx.wc_Nav3DToolbar-NM2CK #ar-icon {\n  display: block;\n}\n";
-styleInject(css_248z);
-
-var NavBar = function NavBar() {
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("ul", {
-      id: "navBarControls",
-      className: wcNav3DToolbar,
-      children: [(viewHandler.productState.doShowNav3D || viewHandler.productState.doShowNav3DCOMB) && !viewHandler.productState.roomListExpanded && !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs(Fragment, {
-        children: [viewHandler.productState.doShow3DZoom && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("li", {
-            id: "nav3DZoomIn",
-            onClick: function onClick() {
-              return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomIn');
-            },
-            className: wcZoomIn,
-            title: t('configurator.NAV3DZOOMIN_TT')
-          }), /*#__PURE__*/jsx("li", {
-            id: "nav3DZoomOut",
-            onClick: function onClick() {
-              return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomOut');
-            },
-            className: wcZoomOut,
-            title: t('configurator.NAV3DZOOMOUT_TT')
-          })]
-        }), /*#__PURE__*/jsx("li", {
-          id: "nav3DViews",
-          onClick: function onClick() {
-            return viewHandler.productState.onNav3DMenuSelect('Nav3DViews');
-          },
-          className: wcViews,
-          title: t('configurator.NAV3DVIEWS_TT')
-        }), /*#__PURE__*/jsx("li", {
-          id: "nav3DFullScreen",
-          onClick: function onClick() {
-            return viewHandler.productState.onNav3DMenuSelect('Nav3DFullScreen');
-          },
-          className: wcFullScreen,
-          title: t('configurator.NAV3DFULLSCREEN_TT')
-        }), viewHandler.productState.doEnableToShow3DDimensionLines && /*#__PURE__*/jsx("li", {
-          id: "nav3DDimLine",
-          onClick: function onClick() {
-            return viewHandler.productState.onNav3DMenuSelect('Nav3DDimLine');
-          },
-          className: wc3DDimLine,
-          title: t('configurator.NAV3DDIMLINE_TT')
-        }), viewHandler.productState.doShowNav3DPlannerMode && viewHandler.tabGroupState.hasPlanner && /*#__PURE__*/jsx("li", {
-          id: "nav3DPlannerMode",
-          onClick: function onClick() {
-            return viewHandler.productState.onNav3DMenuSelect('Nav3DPlannerMode');
-          },
-          className: wc3DGridPlannerMode,
-          title: t('configurator.NAV3DPLANNERMODE_TT')
-        }), viewHandler.productState.allowQRCodeAR && /*#__PURE__*/jsx(ArQrCodeIcon, {})]
-      }), !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(ProductRoomList, {})]
-    }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(ProductRoomList, {})]
-  });
-};
-var index = observer(NavBar);
-
-export { index as default };

package/build/esm/index-85b8153b.js

@@ -1,133 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-18f7cf20.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-57b914b7.js';
-import classnames from 'classnames';
-import IsActive from './index-341a3791.js';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import GenericToolTip from './index-ef12aacd.js';
-import InfoIcon from './index-c2ce216e.js';
-import PricePreview from './index-ce2674b6.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';
-import '@crystaldesign/widget-contact-form';
-
-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 {\n  width: 100%;\n  background: transparent;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n  display: flex;\n}\n.PaletteItem-WUuXa {\n  --galleryItemSelBorder: var(--galleryItemBorder);\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderColor);\n}\n.PaletteItem-WUuXa:hover {\n  --galleryItemSelBorder: var(--galleryItemBorder);\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderHoverColor);\n  box-shadow: var(--gallerySelectedBoxShadow);\n}\n\n.PaletteItem-WUuXa.sel-1MlhE {\n  border: var(--galleryItemBorder) solid var(--galleryItemBorderSelColor);\n  box-shadow: var(--gallerySelectedBoxShadow);\n}\n\n.wcVCodexTextWrapper-B9kjy {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.wcVCodexText-l-tMp {\n  width: 100%;\n  font-size: 18px;\n  text-shadow: 3px 4px 15px rgba(0,0,0,0.6);\n  color: white;\n  display: none;\n  text-align: center;\n  word-break: break-all;\n}\n\n.PaletteItem-WUuXa:hover .wcVCodexText-l-tMp,\n.sel-1MlhE .wcVCodexText-l-tMp {\n  display: block;\n}\n\n.PaletteItem-WUuXa.wcGallery-jbfei {\n  display: block;\n  background: transparent;\n  margin: 0;\n  margin: initial;\n  position: relative;\n  float: left;\n  border-radius: var(--galleryItemRadius);\n  z-index: 100;\n  cursor: pointer;\n  width: 100%;\n}\n\n.PaletteItem-WUuXa.wcGallery-jbfei img {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--galleryItemRadius);\n  aspect-ratio: 1 / 1;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\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.hexColor-otBJT {\n  width: 80px;\n  height: 80px;\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 Gallery = function Gallery(_ref) {
-  var _item$freeText, _renderLayer;
-  var itemP = _ref.item,
-    hidePricePreview = _ref.hidePricePreview,
-    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) && !item.contentItemId) {
-    isOver = hover[0];
-    hoverProps = hover[1];
-    triggerProps = tooltip.triggerProps;
-    layerProps = tooltip.layerProps;
-    renderLayer = tooltip.renderLayer;
-  }
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("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
-        }, item.codex), (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
-        })]
-      }), !hidePricePreview && item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
-        asyncPricePreview: item.pricePreviewPromise,
-        sel: item.sel
-      })]
-    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
-      text: /*'RAL: ' + item.rals?.[0] + '     ' +*/item.text,
-      desciption: metaDataVisible,
-      image: item.image,
-      layerProps: layerProps,
-      pricePreviewPromise: item.pricePreviewPromise,
-      hexColor: item.hexColor
-    }, item.codex)))]
-  });
-};
-var index = observer(Gallery);
-
-export { index as default };