@crystaldesign/diva-web-planner-react 25.1.0-rc.9 → 25.1.1-rc.0

package/build/esm/index-c74e1c62.js

@@ -0,0 +1,62 @@
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import SettingsHeader from './index-c3d717e0.js';
+import SettingsConfigSingle from './index-0cb3a804.js';
+import SettingsPosNr from './index-7c4bfb77.js';
+import classnames from 'classnames';
+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 '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-bc30214d.js';
+import 'react-laag';
+import './index-f66089b1.js';
+
+var wcConfiguratorSettingsFoldConfSettings = "wcConfigurator-settings-FoldConfSettings-hZych";
+var landscape = "landscape-LFbXM";
+var css_248z = ".wcConfigurator-settings-header-9tt3R .wcConfigurator-settings-header-act-elements-38jiy {\n  max-width: 80%;\n  margin-left: 16px;\n  margin-right: 0px;\n  -webkit-line-clamp: 1;\n  display: -webkit-inline-box;\n  float: left;\n}\n\n.wcConfigurator-settings-FoldConfSettings-hZych {\n  display: block;\n  position: absolute;\n  right: 0px;\n  z-index: 700;\n  width: 16px;\n  height: 32px;\n  padding-top: 9.6px;\n  margin-right: var(--foldArrowMarginRight);\n\n  transition: all 0.35s ease;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M14.729 1.25L8.30043 9.25L1.229 1.25%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-position: center center;\n  background-size: contain;\n}\n\n.wcConfigurator-settings-header-9tt3R .wcConfigurator-settings-header-act-elements-38jiy {\n  max-width: 83%;\n  margin-right: 24px;\n  margin-left: 0px;\n  margin-top: 14.4px;\n  -webkit-line-clamp: 1;\n  display: -webkit-inline-box;\n  float: right;\n}\n\n.landscape-LFbXM .wcConfigurator-settings-FoldConfSettings-hZych {\n  display: block;\n  position: absolute;\n  width: 16px;\n  right: 0px;\n  height: 32px;\n  padding-top: 9.6px;\n  margin-right: 16px;\n  transition: all 0.35s ease;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M14.729 1.25L8.30043 9.25L1.229 1.25%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-position: center center;\n  background-size: contain;\n  cursor: pointer;\n  z-index: 700;\n}\n";
+styleInject(css_248z);
+
+var SettingsHeaderContainer = function SettingsHeaderContainer(_ref) {
+  var _headerPalette$type, _headerPalette$type2;
+  var _ref$isScroller = _ref.isScroller,
+    isScroller = _ref$isScroller === void 0 ? false : _ref$isScroller;
+  var viewHandler = useViewHandler();
+  var headerPalette = viewHandler.settingsState.itemPalettes.get(1);
+  if (!headerPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var showHeader = viewHandler.uiState.ViewConfig.headerInConfigPalette !== 'Hidden' && !((_headerPalette$type = headerPalette.type) !== null && _headerPalette$type !== void 0 && _headerPalette$type.startsWith('PRODUCTS')) && !((_headerPalette$type2 = headerPalette.type) !== null && _headerPalette$type2 !== void 0 && _headerPalette$type2.startsWith('PROMOTED')) && (!viewHandler.getIsInMobileView() || !viewHandler.uiState.ViewConfig.hideTopHeaderInMobile);
+  return /*#__PURE__*/jsxs("header", {
+    ref: function ref(_ref2) {
+      return viewHandler.settingsState.setHeaderElement(_ref2);
+    },
+    className: classnames(viewHandler.uiState.isMobileLandscape ? landscape : undefined),
+    children: [!viewHandler.uiState.ViewConfig.hideMobileFolder && !viewHandler.uiState.configSettingsIsHidden && viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+      className: wcConfiguratorSettingsFoldConfSettings,
+      id: "btnFoldDown",
+      onClick: function onClick() {
+        return viewHandler.uiState.onClickHideConfigSettings();
+      }
+    }), showHeader && /*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: isScroller,
+      isSettingsHeader: !headerPalette.isHeader,
+      item: headerPalette,
+      specialElement1: viewHandler.settingsState.doShowActElementInfo && !viewHandler.uiState.ViewConfig.hideElementInfo ? /*#__PURE__*/jsx(SettingsPosNr, {}) : undefined,
+      specialElement2: viewHandler.settingsState.doShowConfigSingle ? /*#__PURE__*/jsx(SettingsConfigSingle, {}) : undefined
+    })]
+  });
+};
+var SettingsHeaderContainer$1 = observer(SettingsHeaderContainer);
+
+export { SettingsHeaderContainer$1 as default };

package/build/esm/index-c876fa50.js

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

package/build/esm/index-c9375c92.js

@@ -0,0 +1,40 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject } from './index-f3774fc8.js';
+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/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var wcFoldArrow = "wcFoldArrow-sIgSx";
+var wcCancelArrow = "wcCancelArrow-PZ86-";
+var wcOpenArrow = "wcOpenArrow-TZzZy";
+var wcClosedArrow = "wcClosedArrow-fWMiX";
+var css_248z = ".wcFoldArrow-sIgSx {\n  transition: transform 0.35s ease, width 0.5s ease, height 0.5s ease;\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  background-size: contain;\n  right: 10px;\n  top: 8px;\n  width: 12px;\n  height: 12px;\n  transform: rotateZ(0deg);\n}\n.wcCancelArrow-PZ86- {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcCancelArrow-PZ86-:hover {\n  transform: rotateZ(90deg);\n}\n\n.wcOpenArrow-TZzZy {\n  transform: rotateZ(180deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcClosedArrow-fWMiX {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["onClick", "iconAsDelete", "open"];
+var Arrow = function Arrow(_ref) {
+  var onClick = _ref.onClick,
+    iconAsDelete = _ref.iconAsDelete,
+    open = _ref.open,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("span", {
+    onClick: onClick,
+    onTouchEnd: onClick,
+    className: classnames(wcFoldArrow, iconAsDelete ? wcCancelArrow : undefined, !iconAsDelete ? open ? wcOpenArrow : wcClosedArrow : undefined, props.className)
+  });
+};
+
+export { Arrow as default };

package/build/esm/index-cd6ef9be.js

@@ -0,0 +1,157 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import StepInfo from './index-0cb6d603.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/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 'classnames';
+
+var paletteItem = "PaletteItem-hu6tC";
+var wcTextBox = "wcTextBox-lKT8X";
+var headerTitle = "headerTitle-RuXs-";
+var css_248z = ".PaletteItem-hu6tC {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.PaletteItem-hu6tC > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.PaletteItem-hu6tC input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.PaletteItem-hu6tC input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
+styleInject(css_248z);
+
+var NumberBox = function NumberBox(_ref) {
+  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId,
+    groupSize = _ref.groupSize;
+  var item = itemP;
+  var throttleRef = useRef(null);
+  var viewHandler = useViewHandler();
+  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    userInFocus = _useState2[0],
+    setUserInFocus = _useState2[1];
+  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var isDefined = true;
+  if (itemPalette) {
+    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
+    if (step) isDefined = step.configStep.isDefined;
+  }
+  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target$value;
+      var value;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
+            if (!e.target.value.endsWith('.')) {
+              _context.next = 4;
+              break;
+            }
+            setValue(e.target.value);
+            return _context.abrupt("return");
+          case 4:
+            value = value.replace(/[^0-9.,]/g, '');
+            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');
+
+            //delay logic update for 500ms
+            if (throttleRef.current) clearTimeout(throttleRef.current);
+            throttleRef.current = setTimeout(function () {
+              return updateLogic(value);
+            }, 500);
+            setValue(value);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var updateLogic = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!itemPalette) {
+              _context2.next = 3;
+              break;
+            }
+            _context2.next = 3;
+            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateLogic(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var _itemPalette$selected2, _itemPalette$selected3;
+    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
+  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      if (itemPalette) itemPalette.htmlRef = _ref4;
+    },
+    style: {
+      display: 'block',
+      width: groupSize ? 100 / groupSize + '%' : undefined,
+      "float": groupSize ? 'left' : undefined
+    },
+    children: [itemPalette && /*#__PURE__*/jsx("div", {
+      className: headerTitle,
+      children: itemPalette.name
+    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
+      stepInfo: itemPalette.info
+    }), /*#__PURE__*/jsx("div", {
+      className: paletteItem,
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          margin: '5px'
+        },
+        children: /*#__PURE__*/jsx("input", {
+          onBlur: function onBlur() {
+            setUserInFocus(false);
+          },
+          onFocus: function onFocus() {
+            var _itemPalette$info2;
+            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
+          },
+          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
+          lang: "en-150",
+          className: wcTextBox,
+          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
+          onChange: handleChange,
+          step: "0.01",
+          onKeyDown: function onKeyDown(e) {
+            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
+              e.preventDefault();
+            }
+          },
+          value: value,
+          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
+        })
+      })
+    })]
+  });
+};
+var NumberBox$1 = observer(NumberBox);
+
+export { NumberBox$1 as default };

package/build/esm/index-cd9a06ae.js

@@ -0,0 +1,164 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef, useEffect } from 'react';
+import { useLayer } from 'react-laag';
+import Tooltip from './index-abfee5f6.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import FullscreenAr from './index-16a97a06.js';
+import { jsx, jsxs, Fragment } 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 'react-qr-code';
+
+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(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    openModal = _useDivaCore.actions.openModal,
+    _useDivaCore$state = _useDivaCore.state,
+    isMobile = _useDivaCore$state.isMobile,
+    isTablet = _useDivaCore$state.dimensions.isTablet;
+  //tooltip is going to close itself by timer
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoClose = _useState2[0],
+    setAutoClose = _useState2[1];
+  var autoCloseTimeout = useRef();
+  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
+  var openAr = isMobile || isTablet;
+
+  //for fade animation
+  var _useState3 = useState(viewHandler.productState.arCodeWasVisibleOnce),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVisible = _useState4[0],
+    setTooltipVisible = _useState4[1];
+  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible;
+  var _useLayer = useLayer({
+      isOpen: showTooltip,
+      auto: true,
+      placement: 'right-end',
+      triggerOffset: 16
+    }),
+    triggerProps = _useLayer.triggerProps,
+    layerProps = _useLayer.layerProps,
+    renderLayer = _useLayer.renderLayer,
+    arrowProps = _useLayer.arrowProps;
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    url = _useState6[0],
+    setUrl = _useState6[1];
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode == true) {
+      viewHandler.openARObserverConnection(function () {
+        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
+      } // request hqr onreceivehqr triggers update
+      ).then(function (url) {
+        return setUrl(url);
+      });
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode && openAr) openModal({
+      content: /*#__PURE__*/jsx(FullscreenAr, {
+        url: url,
+        isArCompatible: viewHandler.productState.isArCompatible,
+        broswerSupportAR: viewHandler.productState.browserSupportAR,
+        activateAR: viewHandler.productState.activateAR
+      }),
+      fullscreen: true,
+      rejectByIcon: true,
+      dontRenderForm: true,
+      callback: function callback(value) {
+        if (!value) {
+          viewHandler.productState.setDoShowARQRCode(false);
+          viewHandler.productState.loadRTVForAr = false;
+          viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : '3D');
+        }
+      }
+    });
+  }, [viewHandler.productState.activateAR, url]);
+  useEffect(function () {
+    //start timeout for auto open the tooltip
+    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
+      var _arQrCodeConfig$timeU;
+      autoCloseTimeout.current = setTimeout(function () {
+        viewHandler.productState.setArCodeWasVisibleOnce();
+        setAutoClose(true);
+        viewHandler.productState.setDoShowARQRCode(true);
+      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
+    }
+    if (!viewHandler.productState.doShowARQRCode && autoClose) {
+      setAutoClose(false);
+    }
+    //delay the state of visible so we animate the fade out
+    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
+      setTimeout(function () {
+        setTooltipVisible(viewHandler.productState.doShowARQRCode);
+      }, 200);
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  var onClick = function onClick() {
+    viewHandler.productState.setDoShowARQRCode(true);
+    if (openAr) {
+      if (!viewHandler.productState.doShowRTV) {
+        viewHandler.productState.loadRTVForAr = true;
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
+      }
+      openModal({
+        content: /*#__PURE__*/jsx(FullscreenAr, {
+          url: url,
+          isArCompatible: viewHandler.productState.isArCompatible,
+          broswerSupportAR: viewHandler.productState.browserSupportAR,
+          activateAR: viewHandler.productState.activateAR
+        }),
+        fullscreen: true,
+        dontRenderForm: true,
+        rejectByIcon: true,
+        callback: function callback(value) {
+          if (!value) {
+            viewHandler.productState.loadRTVForAr = false;
+            viewHandler.productState.setDoShowARQRCode(false);
+            viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : '3D');
+          }
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
+      id: "ar-icon"
+    }, props), {}, {
+      className: classnames(props.className),
+      onClick: onClick,
+      title: t('configurator.ar_qr_title')
+    }, triggerProps), {}, {
+      style: {
+        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV ? 'visible' : 'hidden'
+      }
+    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
+      arrowProps: arrowProps,
+      layerProps: layerProps,
+      autoClose: autoClose,
+      fadeIn: tooltipVisible,
+      fadeout: !viewHandler.productState.doShowARQRCode,
+      url: url
+    }))]
+  });
+};
+var ArQrCodeIcon = observer(ArQrCodeTooltip);
+
+export { ArQrCodeIcon as default };

package/build/esm/index-cdc56232.js

@@ -0,0 +1,40 @@
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var logo = "logo-h99KB";
+var mobile = "mobile-W86xf";
+var hidden = "hidden-uMA1f";
+var notHidden = "not-hidden-88ft-";
+var landscape = "landscape-gPEyU";
+var css_248z = ".logo-h99KB {\n  right: 0px;\n  bottom: 0px;\n  position: absolute;\n  z-index: 600;\n  opacity: 1;\n  max-width: 30%;\n  max-height: 64px;\n  margin-bottom: 16px;\n  margin-right: 20px;\n}\n\n.mobile-W86xf {\n  right: auto;\n  right: initial;\n  left: 0px;\n  bottom: 36px;\n  margin-bottom: 10px;\n  margin-right: 0;\n  margin-right: initial;\n  margin-left: 20px;\n  max-height: 50px;\n}\n\n.hidden-uMA1f {\n  opacity: 0;\n}\n\n.not-hidden-88ft- {\n  transition: opacity 0.5s;\n}\n\n.landscape-gPEyU.logo-h99KB {\n  opacity: 0;\n}\n";
+styleInject(css_248z);
+
+var Logo = function Logo(props) {
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    logoUrl = _useDivaCore.state.organization.logoUrl;
+  if (!viewHandler.uiState.isInMobileView && !viewHandler.uiState.ViewConfig.showLogoInProductDesktop || !viewHandler.uiState.ViewConfig.showLogoInProduct || !logoUrl) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("img", {
+    className: classnames(logo, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.productState.orbitHidden ? notHidden : hidden, viewHandler.uiState.isMobileLandscape ? landscape : undefined),
+    src: logoUrl
+  });
+};
+var Logo$1 = observer(Logo);
+
+export { Logo$1 as default };

package/build/esm/index-ceb55947.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-f3774fc8.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 {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f0f0f0 var(--galleryItemBorder);\n  margin: 10px 0;\n}\n\n.sel-gUlno {\n  margin: 8px 0;\n\n  border: solid var(--secondaryColor) 4px;\n}\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-d212a45d.js

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