@crystaldesign/diva-web-planner-react 24.11.0 → 24.11.1

package/build/esm/index-46f51d6f.js

@@ -1,213 +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-ceac7152.js';
-import React, { useState, useEffect, Suspense } from 'react';
-import { observer } from 'mobx-react-lite';
-import sift from 'sift';
-import TextBox from './index-7ccc65da.js';
-import ItemVariant from './index-89cbbf70.js';
-import SettingsPaletteGroup from './index-89d06f11.js';
-import ToggleOption from './index-1e8b8742.js';
-import GroupDropdown from './index-9792f929.js';
-import PromotedProducts from './index-7d3f6ebe.js';
-import ToggleName from './index-bcea3f10.js';
-import ProductList from './index-afb5fb5d.js';
-import itemPaletteTypeComponentMap from './index-a2341787.js';
-import ItemWrapper from './index-61e1a114.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-29a35559.js');
-});
-var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-8fc51f02.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 ? 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 gridItemSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
-  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-    gridItemSize = '240px';
-  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
-    gridItemSize = 'calc(100% - 20px)';
-  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
-    gridItemSize = '100px';
-  } else if (item.type == 'ACC') {
-    if (settingsSizes.sizeAccessoires) {
-      gridItemSize = settingsSizes.sizeAccessoires;
-    }
-  } else if (item.type == 'ACC_CONFIG') {
-    gridItemSize = '100%';
-  } else if (item.type.startsWith('GAL_SMALL')) {
-    gridItemSize = '60px';
-  } else if (item.type == 'RANGE') {
-    gridItemSize = '100%';
-  } else if (item.type == 'GAL') {
-    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
-    gridItemSize = (_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') {
-    gridItemSize = '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
-    gridItemSize = '120px';
-  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
-    gridItemSize = '120px';
-  } else if (item.type === 'VERY_SMALL') {
-    gridItemSize = '48%';
-  } else if (item.type === 'GAL_TEXT') {
-    gridItemSize = '100px';
-  } else if (item.type === 'GAL_BIG_TEXT') {
-    gridItemSize = '120px';
-  } else if (item.type === 'GAL_SMALL_TEXT') {
-    gridItemSize = '70px';
-  }
-  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
-  switch (item.type) {
-    case 'TOGGLE':
-      return /*#__PURE__*/jsx(ToggleOption, {
-        item: item,
-        paletteId: item.id
-      });
-    case 'TOGGLE_NAME':
-      return /*#__PURE__*/jsx(ToggleName, {
-        item: item,
-        paletteId: item.id
-      });
-    case 'TEXTBOX':
-      return /*#__PURE__*/jsx(TextBox, {
-        item: item,
-        paletteId: item.id
-      });
-    case 'DROPDOWN_TEXT':
-    case 'DROPDOWN_IMAGE':
-      return /*#__PURE__*/jsx(ItemVariant, {
-        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, {
-          item: item,
-          id: item.id,
-          style: {
-            '--gridSize': gridItemSize,
-            '--gridGap': gridGap
-          }
-        }, 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, {
-        gridGap: gridGap,
-        gridItemSize: gridItemSize,
-        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, {
-        gridGap: gridGap,
-        gridItemSize: gridItemSize,
-        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-470d4669.js

@@ -1,164 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-ceac7152.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-5773de2c.js';
-import classnames from 'classnames';
-import properties from './CatalogProperties-862d2c79.js';
-import properties$1 from './ArticleProperties-ad4aaabc.js';
-import properties$2 from './OptionProperties-950b94a1.js';
-import properties$3 from './OptionValueProperties-18877433.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-a6a32ebd.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-493d8c54.js

@@ -1,27 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-ceac7152.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-4948eafa.js

@@ -1,110 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-ceac7152.js';
-import QRCode from 'react-qr-code';
-import { observer } from 'mobx-react-lite';
-import React, { useRef, useEffect } from 'react';
-import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import { Arrow } from 'react-laag';
-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/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 wrapper = "wrapper-E7OAf";
-var qrCodeWrapper = "qr-code-wrapper-I0N1r";
-var textWrapper = "text-wrapper-HcIJv";
-var header = "header-TxcNf";
-var text = "text-5GiNL";
-var closeIcon = "close-icon-SiRMa";
-var doneBar = "doneBar-7QqkY";
-var css_248z = ".wrapper-E7OAf {\n  background: #ffffff;\n  border-radius: 3px;\n  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));\n  display: flex;\n  padding: 22px;\n  gap: 12px;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out;\n}\n\n.qr-code-wrapper-I0N1r {\n  width: 96px;\n  height: 96px;\n}\n\n.text-wrapper-HcIJv {\n  display: flex;\n  flex-direction: column;\n  color: #000000;\n  width: 220px;\n  gap: 8px;\n}\n\n.header-TxcNf {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 17px;\n  line-height: 19px;\n}\n\n.text-5GiNL {\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 130%;\n}\n\n.close-icon-SiRMa {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 42px;\n  height: 42px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 80%;\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%3Cmask id%3D%22mask0_332_143%22 style%3D%22mask-type%3Aalpha%22 maskUnits%3D%22userSpaceOnUse%22 x%3D%220%22 y%3D%220%22 width%3D%2224%22 height%3D%2224%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg mask%3D%22url(%23mask0_332_143)%22%3E%3Cpath d%3D%22M8.22749 16.8365L7.16406 15.7731L10.9372 12L7.16406 8.2519L8.22749 7.18848L12.0006 10.9616L15.7487 7.18848L16.8121 8.2519L13.039 12L16.8121 15.7731L15.7487 16.8365L12.0006 13.0634L8.22749 16.8365Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-SiRMa:hover {\n  background-size: 90%;\n}\n.doneBar-7QqkY {\n  background: var(--secondaryColor);\n  height: 3px;\n  border-radius: 0 2px 2px 0;\n  animation-name: example-saRWU;\n  animation-timing-function: linear;\n  transition: width 0s ease-in;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n@keyframes example-saRWU {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\n  }\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 ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
-  var _viewHandler$getViewC, _theme$typography;
-  var layerProps = _ref.layerProps,
-    arrowProps = _ref.arrowProps,
-    autoClose = _ref.autoClose,
-    fadeIn = _ref.fadeIn,
-    fadeout = _ref.fadeout,
-    url = _ref.url;
-  var viewHandler = useViewHandler();
-  var arQrCodeConfig = (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.enableAR;
-  var AUTOHIDE_SEC = typeof arQrCodeConfig !== 'boolean' && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.timeUnitAutohide ? arQrCodeConfig.timeUnitAutohide : 6;
-  var _useDivaCore = useDivaCore(),
-    theme = _useDivaCore.state.theme;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var autoCloseTimeout = useRef();
-  useEffect(function () {
-    //if opend automatically close after AUTOHIDE_SEC the tooltip again
-    if (autoClose) {
-      autoCloseTimeout.current = setTimeout(function () {
-        return viewHandler.productState.setDoShowARQRCode(false);
-      }, AUTOHIDE_SEC * 1000);
-    }
-    return function () {
-      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
-    };
-  }, []);
-
-  //clear autoclose when user interacts with button
-  useEffect(function () {
-    if (!viewHandler.productState.doShowARQRCode) {
-      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
-    } else viewHandler.productState.setArCodeWasVisibleOnce();
-  }, [viewHandler.productState.doShowARQRCode]);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, layerProps), {}, {
-    className: wrapper,
-    style: _objectSpread(_objectSpread({
-      opacity: fadeout ? 0 : fadeIn ? 1 : undefined
-    }, layerProps.style), {}, {
-      zIndex: 1000005
-    }),
-    children: [/*#__PURE__*/jsx("div", {
-      className: qrCodeWrapper,
-      children: url && /*#__PURE__*/React.createElement(QRCode, {
-        value: url,
-        size: 96,
-        onClick: function onClick() {
-          return url && window.open(url, '_blank');
-        }
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: textWrapper,
-      style: {
-        fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        className: header,
-        children: t('configurator.ar_qr_title')
-      }), /*#__PURE__*/jsx("div", {
-        className: text,
-        children: t('configurator.ar_qr_text')
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: closeIcon,
-      onClick: function onClick() {
-        return viewHandler.productState.setDoShowARQRCode(false);
-      }
-    }), /*#__PURE__*/jsx(Arrow, _objectSpread({}, arrowProps)), autoClose && /*#__PURE__*/jsx("div", {
-      className: doneBar,
-      style: {
-        animationDuration: AUTOHIDE_SEC + 's'
-      }
-    })]
-  }));
-};
-var Tooltip = observer(ArQrCodeTooltip);
-
-export { Tooltip as default };

package/build/esm/index-499b06bd.js

@@ -1,78 +0,0 @@
-import { s as styleInject } from './index-ceac7152.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import { useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
-import { jsx, jsxs, 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 '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-
-var row = "row-aKbIG";
-var rowPaddingTop = "row-padding-top-SRH2s";
-var rowPaddingTopArticle = "row-padding-top-article-Iwelk";
-var columnLeft = "column-left-jSCha";
-var columnRight = "column-right-rkkBn";
-var columnRightRed = "column-right-red-Lmt65";
-var columnOption = "column-option-2v7Hm";
-var columnPartlist = "column-partlist-0LS9Z";
-var codexes = "codexes--r2fL";
-var tabGroup = "tab-group-an6TP";
-var css_248z = ".row-aKbIG {\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  font-weight: 300;\n  padding-right: 0.9375rem;\n  padding-left: 0.9375rem;\n  display: flow-root;\n  color: #404040;\n}\n.row-padding-top-SRH2s {\n  padding-top: 8px;\n}\n\n.row-padding-top-article-Iwelk {\n  padding-top: 1rem;\n}\n\n.column-left-jSCha {\n  float: left;\n}\n.column-left-jSCha a {\n  color: var(--primaryColor);\n}\n.column-right-rkkBn {\n  float: right;\n  text-align: right;\n}\n\n.column-right-red-Lmt65 {\n  color: var(--primaryColor);\n}\n.column-option-2v7Hm {\n  font-size: 0.8125rem;\n  font-weight: normal;\n  line-height: 1.1;\n}\n.column-partlist-0LS9Z {\n  max-width: 70%;\n}\n\n.codexes--r2fL {\n  font-style: italic;\n}\n\n.tab-group-an6TP {\n  border-bottom: 1px solid var(--primaryColor);\n  font-size: 1.125rem;\n  margin: 1.5rem 0 0 0;\n  color: var(--primaryColor);\n  padding: 0;\n  text-align: left;\n  text-transform: capitalize;\n  font-weight: 300;\n}\n";
-styleInject(css_248z);
-
-var OptiontreeSerious = function OptiontreeSerious(_ref) {
-  var itemP = _ref.item;
-  var _useDivaCore = useDivaCore(),
-    hidePrices = _useDivaCore.state.hidePrices;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var item = itemP;
-  if (item.isTabGroup) {
-    return /*#__PURE__*/jsx("div", {
-      className: tabGroup,
-      children: item.title
-    });
-  }
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [item.isPartlistArticle && /*#__PURE__*/jsxs("div", {
-      className: classnames(row, rowPaddingTopArticle),
-      children: [/*#__PURE__*/jsx("span", {
-        className: classnames(columnPartlist, columnLeft),
-        children: item.title
-      }), /*#__PURE__*/jsx("span", {
-        className: classnames(columnRight),
-        children: (item.quantity && item.quantity > 1 ? '(x' + item.quantity + ') ' : '') + (!hidePrices && item.price ? DivaUtils.formatPrice(item.price) : '')
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: classnames(row, item.isPartlistArticle ? rowPaddingTop : undefined),
-      children: [/*#__PURE__*/jsxs("span", {
-        className: classnames(columnOption, columnLeft),
-        children: [item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("a", {
-            children: item.size && item.size !== '' ? t('configurator.size') : item.description
-          }), ": ", item.size]
-        }), !item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("a", {
-            children: item.title
-          }), item.description && ': ' + item.description]
-        })]
-      }), /*#__PURE__*/jsx("span", {
-        className: classnames(columnOption, columnRight, columnRightRed, codexes),
-        children: item.codex
-      })]
-    })]
-  });
-};
-var index = observer(OptiontreeSerious);
-
-export { index as default };