@crystaldesign/diva-web-planner-react 26.6.6 → 26.6.7

package/build/esm/index-59838b9b.js

@@ -0,0 +1,130 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var paletteItem = "palette-item-sUeAp";
+var container = "container-4qhuT";
+var content = "content-PlGS7";
+var labelsContainer = "labels-container-b90-e";
+var minLabel = "min-label-V6PZW";
+var maxLabel = "max-label-f0zP7";
+var sliderContainer = "slider-container-0ZpeI";
+var slider = "slider-KB5gQ";
+var wcSliderButton = "wcSliderButton-OSCAA";
+var wcSliderButtonLeft = "wcSliderButtonLeft-AUWb0";
+var wcSliderButtonRight = "wcSliderButtonRight-wCBtH";
+var css_248z = ".palette-item-sUeAp {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n  transition: all 0.15s ease;\n}\n\n.container-4qhuT {\n  display: block;\n  width: 99%;\n}\n\n.content-PlGS7 {\n  margin: 10px;\n}\n\n.labels-container-b90-e {\n  width: 100%;\n  height: 1.2rem;\n}\n\n.min-label-V6PZW {\n  position: absolute;\n  left: 10px;\n}\n\n.max-label-f0zP7 {\n  position: absolute;\n  right: 10px;\n}\n\n.slider-container-0ZpeI {\n  width: 100%;\n  height: 2rem;\n  margin-top: 12px;\n  position: relative;\n}\n\n.slider-KB5gQ {\n  -webkit-appearance: none;\n  width: calc(100% - 3rem - 4px);\n  height: 25px;\n  background: #d3d3d3;\n  outline: none;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n  border-radius: 12.5px;\n  position: absolute;\n  left: 1.5rem;\n}\n\n.slider-KB5gQ:hover {\n  opacity: 1;\n}\n\n.slider-KB5gQ::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 25px;\n  height: 25px;\n  border-radius: 12.5px;\n  background: var(--primaryColor);\n  cursor: pointer;\n}\n\n.slider-KB5gQ::-moz-range-thumb {\n  width: 25px;\n  height: 25px;\n  border-radius: 5px;\n  background: var(--primaryColor);\n  cursor: pointer;\n}\n\n.wcSliderButton-OSCAA {\n  width: 1.5rem;\n  height: 1.5rem;\n  top: 3px;\n  position: absolute;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2213%22 height%3D%2238%22 viewBox%3D%220 0 13 38%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1L0.999998 19.1818L12 37%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center center;\n}\n.wcSliderButtonLeft-AUWb0 {\n  left: 0.15rem;\n}\n.wcSliderButtonRight-wCBtH {\n  transform: rotate(180deg);\n  right: 0.15rem;\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 Range = function Range(_ref) {
+  var _palette$selectedElem;
+  var paletteId = _ref.paletteId,
+    itemP = _ref.item;
+  var item = itemP;
+  var _useState = useState(Number(item.freeText)),
+    _useState2 = _slicedToArray(_useState, 2),
+    curValue = _useState2[0],
+    setCurValue = _useState2[1];
+  var viewHandler = useViewHandler();
+  var palette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState3 = useState(palette === null || palette === void 0 || (_palette$selectedElem = palette.selectedElements) === null || _palette$selectedElem === void 0 || (_palette$selectedElem = _palette$selectedElem[0]) === null || _palette$selectedElem === void 0 ? void 0 : _palette$selectedElem.codex),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOPV = _useState4[0],
+    setSelectedOPV = _useState4[1];
+  useEffect(function () {
+    if (palette) {
+      viewHandler.settingsState.updateItemPalette(paletteId, _objectSpread(_objectSpread({}, palette), {}, {
+        numberInput: curValue,
+        measureUnit: item.measureUnit
+      }));
+    }
+  }, [curValue]);
+  useEffect(function () {
+    if (palette) {
+      var _palette$selectedElem2;
+      var codex = palette === null || palette === void 0 || (_palette$selectedElem2 = palette.selectedElements) === null || _palette$selectedElem2 === void 0 || (_palette$selectedElem2 = _palette$selectedElem2[0]) === null || _palette$selectedElem2 === void 0 ? void 0 : _palette$selectedElem2.codex;
+      if (codex && selectedOPV !== codex) {
+        setSelectedOPV(codex);
+        setCurValue(Number(item.measureMinimum));
+      } else if (palette.numberInput && palette.numberInput != curValue) {
+        setCurValue(palette.numberInput);
+      }
+    }
+  }, [palette, selectedOPV]);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(paletteItem, container),
+    children: /*#__PURE__*/jsxs("div", {
+      className: content,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: labelsContainer,
+        children: [/*#__PURE__*/jsx("a", {
+          className: minLabel,
+          children: item.measureMinimum + ' ' + item.measureUnit
+        }), /*#__PURE__*/jsx("a", {
+          className: maxLabel,
+          children: item.measureMaximum + ' ' + item.measureUnit
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(sliderContainer, 'no-swiping'),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcSliderButton, wcSliderButtonLeft),
+          onClick: function onClick() {
+            var newVal = Number(curValue) - Number(item.measureStep);
+            if (newVal < Number(item.measureMinimum)) return;
+            setCurValue(newVal);
+            viewHandler.paletteViewHandler.onRangeClickChange(palette, item, newVal.toString(), true);
+          }
+        }), /*#__PURE__*/jsx("input", {
+          type: "range",
+          min: item.measureMinimum,
+          max: item.measureMaximum,
+          step: item.measureStep,
+          value: curValue,
+          className: slider,
+          onChange: function onChange(event) {
+            return setCurValue(Number(event.target.value));
+          },
+          onMouseUp: function onMouseUp(event) {
+            return viewHandler.paletteViewHandler.onRangeClickChange(palette, item, event.target.value);
+          },
+          onTouchEnd: function onTouchEnd(event) {
+            return viewHandler.paletteViewHandler.onRangeClickChange(palette, item, event.target.value);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(wcSliderButton, wcSliderButtonRight),
+          onClick: function onClick() {
+            var newVal = Number(curValue) + Number(item.measureStep);
+            if (newVal > Number(item.measureMaximum)) return;
+            setCurValue(newVal);
+            viewHandler.paletteViewHandler.onRangeClickChange(palette, item, newVal.toString());
+          }
+        })]
+      })]
+    })
+  });
+};
+var Range$1 = observer(Range);
+
+export { Range$1 as default };

package/build/esm/index-5a01f5db.js

@@ -0,0 +1,48 @@
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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-5b581fa5.js

@@ -0,0 +1,195 @@
+import { s as styleInject } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import QRCode from 'react-qr-code';
+import classnames from 'classnames';
+import { getLogger, useTranslation } 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/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var fullscreen = "fullscreen-dVNtA";
+var errorWrapper = "error-wrapper-4Kfuq";
+var errorText = "error-text-aG0TS";
+var errorQrCodeWrapper = "error-qr-code-wrapper-WRr2H";
+var wrapper = "wrapper-uzZ9r";
+var tablet = "tablet-CPL9b";
+var textWrapper = "text-wrapper-rIzGz";
+var header = "header-sWWoX";
+var text = "text-OkwbY";
+var stepsWrapper = "steps-wrapper-4x10n";
+var stepWrapper = "step-wrapper-HY2sH";
+var stepTextWrapper = "step-text-wrapper-S-m1m";
+var stepTitle = "step-title-M7iLu";
+var stepText = "step-text-LPg7J";
+var icon = "icon-K4UgE";
+var svgIcon = "svg-icon-Ex5u5";
+var buttonWrapper = "button-wrapper-t88VM";
+var arButton = "ar-button-e122r";
+var disabled = "disabled-5mNQN";
+var qrCodeWrapper = "qr-code-wrapper-gox11";
+var loader = "loader-5y0Dw";
+var css_248z = ".fullscreen-dVNtA {\n  overflow: auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.error-wrapper-4Kfuq {\n  display: flex;\n  gap: 48px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.error-text-aG0TS {\n  max-width: 400px;\n}\n.error-qr-code-wrapper-WRr2H {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.wrapper-uzZ9r {\n  display: flex;\n  flex-direction: column;\n  margin: 8px 32px;\n  gap: 42px;\n  color: #000;\n  width: calc(100% - 64px);\n}\n\n.tablet-CPL9b .wrapper-uzZ9r {\n  gap: 64px;\n  width: auto;\n  width: initial;\n  max-width: 600px;\n}\n\n.text-wrapper-rIzGz {\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n}\n\n.header-sWWoX {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 40px;\n  height: 40px;\n}\n\n.text-OkwbY {\n  font-weight: 300;\n  font-size: 18px;\n  line-height: 130%;\n}\n\n.steps-wrapper-4x10n {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.tablet-CPL9b .steps-wrapper-4x10n {\n  gap: 32px;\n}\n\n.step-wrapper-HY2sH {\n  display: flex;\n  gap: 12px;\n}\n\n.step-text-wrapper-S-m1m {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  justify-content: center;\n}\n\n.step-title-M7iLu {\n  font-weight: 300;\n  font-size: 16px;\n  color: #7b7b7b;\n}\n\n.step-text-LPg7J {\n  font-size: 14px;\n  color: #000000;\n}\n\n.icon-K4UgE {\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  width: 56px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.svg-icon-Ex5u5 {\n  width: 50%;\n  height: 50%;\n}\n.button-wrapper-t88VM {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ar-button-e122r {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 21px;\n  gap: 10px;\n  background-color: var(--primaryColor);\n  border-radius: 3px;\n  cursor: pointer;\n  transition:\n    box-shadow 0.3s,\n    background-color 0.3s ease,\n    color 0.3s ease;\n  font-weight: 600;\n  letter-spacing: 0.8px;\n  color: #fff;\n  height: 38px;\n}\n.disabled-5mNQN {\n  cursor: wait;\n  background-color: var(--secondaryColor);\n}\n\n.ar-button-e122r:hover {\n  box-shadow: 0px 1px 4px #707070;\n}\n.ar-button-e122r.disabled-5mNQN:hover {\n  box-shadow: none;\n}\n\n.qr-code-wrapper-gox11 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: 64px;\n}\n\n.loader-5y0Dw {\n  border: 3px solid #f3f3f3;\n  border-radius: 50%;\n  border-top: 3px solid #aaa;\n  width: 25px;\n  height: 25px;\n  animation: spinner-mDqax 2s linear infinite;\n}\n\n@keyframes spinner-mDqax {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
+var CameraIcon = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0_300_30100%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_300_30100%29%22%3E%3Cpath%20d%3D%22M4.54815%2019.5C4.04302%2019.5%203.61545%2019.325%203.26545%2018.975C2.91547%2018.625%202.74048%2018.1974%202.74048%2017.6923V6.30773C2.74048%205.8026%202.91547%205.37503%203.26545%205.02503C3.61545%204.67503%204.04302%204.50003%204.54815%204.50003H15.9327C16.4378%204.50003%2016.8654%204.67503%2017.2154%205.02503C17.5654%205.37503%2017.7404%205.8026%2017.7404%206.30773V10.8847L21.2596%207.36546V16.6346L17.7404%2013.1154V17.6923C17.7404%2018.1974%2017.5654%2018.625%2017.2154%2018.975C16.8654%2019.325%2016.4378%2019.5%2015.9327%2019.5H4.54815ZM4.54815%2018H15.9327C16.0225%2018%2016.0962%2017.9712%2016.1539%2017.9135C16.2116%2017.8558%2016.2404%2017.782%2016.2404%2017.6923V6.30773C16.2404%206.21798%2016.2116%206.14426%2016.1539%206.08656C16.0962%206.02886%2016.0225%206.00001%2015.9327%206.00001H4.54815C4.4584%206.00001%204.38468%206.02886%204.32698%206.08656C4.26928%206.14426%204.24043%206.21798%204.24043%206.30773V17.6923C4.24043%2017.782%204.26928%2017.8558%204.32698%2017.9135C4.38468%2017.9712%204.4584%2018%204.54815%2018Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3Cpath%20d%3D%22M5%2011.75L8.90383%2015.6539L15.6269%208.93078L14.573%207.87695L8.90383%2013.5462L6.05383%2010.6962L5%2011.75Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var LightbulbIcon = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0_300_30110%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_300_30110%29%22%3E%3Cpath%20d%3D%22M12%2020.9422C11.5987%2020.9422%2011.2439%2020.8365%2010.9356%2020.6249C10.6272%2020.4134%2010.4115%2020.1358%2010.2884%2019.7922H9.99997C9.59101%2019.7922%209.23877%2019.6445%208.94327%2019.349C8.64776%2019.0535%208.5%2018.7012%208.5%2018.2923V15.0115C7.49103%2014.4%206.69712%2013.5801%206.11827%2012.5519C5.53942%2011.5237%205.25%2010.4231%205.25%209.25001C5.25%207.36797%205.90448%205.77246%207.21345%204.46348C8.52243%203.15451%2010.1179%202.50003%2012%202.50003C13.882%202.50003%2015.4775%203.15451%2016.7865%204.46348C18.0955%205.77246%2018.75%207.36797%2018.75%209.25001C18.75%2010.4436%2018.4605%2011.5494%2017.8817%2012.5673C17.3028%2013.5853%2016.5089%2014.4%2015.5%2015.0115V18.2923C15.5%2018.7012%2015.3522%2019.0535%2015.0567%2019.349C14.7612%2019.6445%2014.4089%2019.7922%2014%2019.7922H13.7115C13.5884%2020.1358%2013.3727%2020.4134%2013.0644%2020.6249C12.7561%2020.8365%2012.4013%2020.9422%2012%2020.9422ZM9.99997%2018.2923H14V17.3538H9.99997V18.2923ZM9.99997%2016.4692H14V15.5H9.99997V16.4692ZM9.79997%2014H11.4038V11.0885L9.26153%208.94616L10.1%208.10771L12%2010.0077L13.9%208.10771L14.7384%208.94616L12.5961%2011.0885V14H14.2C15.1%2013.5667%2015.8333%2012.9292%2016.4%2012.0875C16.9666%2011.2458%2017.25%2010.3%2017.25%209.25001C17.25%207.78334%2016.7416%206.54167%2015.725%205.52501C14.7083%204.50834%2013.4666%204.00001%2012%204.00001C10.5333%204.00001%209.29164%204.50834%208.27497%205.52501C7.25831%206.54167%206.74997%207.78334%206.74997%209.25001C6.74997%2010.3%207.03331%2011.2458%207.59997%2012.0875C8.16664%2012.9292%208.89997%2013.5667%209.79997%2014Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var ScannIcon = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.6538L6.09619%2015.75L7.16539%2014.6808L9.25004%2016.7654V12.25H10.75V16.7501L12.8192%2014.6654L13.9038%2015.75L10%2019.6538ZM4.25002%2013.9038L0.346191%2010L4.23464%206.11158L5.30384%207.18078L3.23459%209.25003H7.74999V10.75H3.24997L5.33462%2012.8192L4.25002%2013.9038ZM15.75%2013.9038L14.6808%2012.8346L16.7654%2010.75H12.25V9.25003H16.7501L14.6654%207.18078L15.75%206.09618L19.6538%2010L15.75%2013.9038ZM9.25004%207.74998V3.23458L7.16539%205.3192L6.09619%204.25L10%200.346176L13.9038%204.25L12.8346%205.3192L10.75%203.23458V7.74998H9.25004Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3C%2Fsvg%3E";
+
+var LOG = getLogger('Planner', 'WEB-PLANNER-REACT');
+var FullscreenArHeader = function FullscreenArHeader() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: header,
+    children: t('configurator.ar_qr_title')
+  });
+};
+var FullscreenAr = function FullscreenAr(_ref) {
+  var url = _ref.url,
+    isArCompatible = _ref.isArCompatible,
+    broswerSupportAR = _ref.broswerSupportAR,
+    activateAR = _ref.activateAR,
+    hqRenderScript = _ref.hqRenderScript,
+    isTablet = _ref.isTablet;
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
+  var onClick = function onClick() {
+    LOG.businessEvent('onInitARViewer', 'RealTimeViewer', 'Load AR viewer', {
+      arMedia: url,
+      hqRenderScript: hqRenderScript
+    });
+    activateAR === null || activateAR === void 0 || activateAR();
+  };
+  if (isArCompatible == false || !broswerSupportAR) {
+    return /*#__PURE__*/jsxs("div", {
+      className: errorWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: errorText,
+        dangerouslySetInnerHTML: {
+          __html: t('arviewer.failed')
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: errorQrCodeWrapper,
+        children: [" ", url && /*#__PURE__*/React.createElement(QRCode, {
+          value: url,
+          size: 220
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(fullscreen, isTablet ? tablet : undefined),
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: textWrapper,
+        children: /*#__PURE__*/jsx("div", {
+          className: text,
+          children: t('configurator.ar_qr_text')
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: stepsWrapper,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: stepWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: icon,
+            children: /*#__PURE__*/jsx("img", {
+              src: CameraIcon,
+              alt: "",
+              className: svgIcon
+            })
+          }), /*#__PURE__*/jsxs("div", {
+            className: stepTextWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: stepTitle,
+              children: t('configurator.ar_qr_step') + ' 1'
+            }), /*#__PURE__*/jsx("div", {
+              className: stepText,
+              children: t('configurator.ar_qr_step1')
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: stepWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: icon,
+            children: /*#__PURE__*/jsx("img", {
+              src: LightbulbIcon,
+              alt: "",
+              className: svgIcon
+            })
+          }), /*#__PURE__*/jsxs("div", {
+            className: stepTextWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: stepTitle,
+              children: t('configurator.ar_qr_step') + ' 2'
+            }), /*#__PURE__*/jsx("div", {
+              className: stepText,
+              children: t('configurator.ar_qr_step2')
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: stepWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: icon,
+            children: /*#__PURE__*/jsx("img", {
+              src: ScannIcon,
+              alt: "",
+              className: svgIcon
+            })
+          }), /*#__PURE__*/jsxs("div", {
+            className: stepTextWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: stepTitle,
+              children: t('configurator.ar_qr_step') + ' 3'
+            }), /*#__PURE__*/jsx("div", {
+              className: stepText,
+              children: t('configurator.ar_qr_step3')
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: buttonWrapper,
+        children: /*#__PURE__*/jsx("div", {
+          "aria-disabled": !activateAR,
+          className: classnames(arButton, !activateAR ? disabled : undefined),
+          onClick: onClick,
+          children: activateAR ? t('configurator.open_ar') : /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx("div", {
+              className: loader
+            }), t('arviewer.initializing')]
+          })
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: text,
+        children: t('configurator.ar_qr_bottom_text')
+      }), url && /*#__PURE__*/jsxs("div", {
+        className: qrCodeWrapper,
+        children: [" ", url && /*#__PURE__*/React.createElement(QRCode, {
+          value: url,
+          size: 220
+        })]
+      })]
+    })
+  });
+};
+var FullscreenAr$1 = observer(FullscreenAr);
+
+export { FullscreenArHeader, FullscreenAr$1 as default };

package/build/esm/index-5f57002d.js

@@ -0,0 +1,44 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import 'react';
+import BasketAction from './index-654b9d98.js';
+import { observer } from 'mobx-react-lite';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index.module-8f6a57d9.js';
+
+var wcCheckoutButtonText = "wcCheckoutButtonText-bETEx";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-iT78h";
+var css_248z = ".wcCheckoutButtonText-bETEx {\n  float: left;\n  margin-left: 10%;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n\n.wcCheckoutButtonPrice-iT78h {\n  float: right;\n  margin-right: 16px;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\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 BasketActionGold = function BasketActionGold(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx(BasketAction, _objectSpread(_objectSpread({}, props), {}, {
+    buttonTextClassName: wcCheckoutButtonText,
+    buttonPriceClassName: wcCheckoutButtonPrice,
+    price: viewHandler.productState.formatedCurSetPrice
+  }));
+};
+var ActionBasket = observer(BasketActionGold);
+
+export { ActionBasket as default };

package/build/esm/index-5fad9992.js

@@ -0,0 +1,80 @@
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, 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/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var container = "container-GW5iG";
+var mobile = "mobile-PkDVb";
+var image = "image-afs5h";
+var textContainer = "textContainer-eYs6D";
+var expanded = "expanded-0VaOS";
+var articleName = "articleName-YT5oo";
+var posNrContainer = "posNrContainer-sis0e";
+var posNrHeightFitter = "posNrHeightFitter-LVv74";
+var quantity = "quantity-nayMq";
+var price = "price-ZyMfu";
+var css_248z = ".container-GW5iG {\n  position: relative;\n  border-top: 1px solid #c6c6c6;\n  margin: 0 16px;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: row;\n}\n\n.container-GW5iG.mobile-PkDVb {\n  margin: 0;\n}\n\n.image-afs5h {\n  max-height: 5rem;\n  max-width: 30%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.textContainer-eYs6D {\n  position: relative;\n  height: 80px;\n  width: calc(70% - 80px);\n  overflow: auto;\n  margin-left: 16px;\n}\n.mobile-PkDVb .textContainer-eYs6D {\n  word-break: break-word;\n}\n.expanded-0VaOS .textContainer-eYs6D {\n  width: calc(50% - 80px);\n}\n\n.articleName-YT5oo {\n  font-weight: 300;\n}\n\n.posNrContainer-sis0e {\n  margin-left: 16px;\n  text-align: center;\n  height: 5rem;\n  width: calc(20% - 16px);\n  position: relative;\n}\n.posNrHeightFitter-LVv74 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n}\n\n.posNrContainer-sis0e span {\n  background: var(--thirdColor);\n  border-radius: var(--articlePosNrRadius);\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 1.27rem;\n  min-width: 1.27rem;\n  width: 2rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  text-align: center;\n  display: inline-block;\n  padding: 0 1px;\n  -webkit-text-stroke: 0.5px;\n  margin-bottom: 0.2rem;\n}\n\n.quantity-nayMq {\n  margin-left: 16px;\n  width: calc(10% - 16px);\n  height: 5rem;\n  font-style: italic;\n  font-weight: 600;\n  text-align: center;\n  line-height: 5rem;\n}\n.price-ZyMfu {\n  margin-left: 16px;\n  width: calc(20% - 16px);\n  height: 5rem;\n  font-weight: 600;\n  line-height: 5rem;\n  text-align: center;\n  white-space: nowrap;\n}\n";
+styleInject(css_248z);
+
+var Articles = function Articles(_ref) {
+  var _item$targetArticlePo;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var isExpanded = viewHandler.uiState.configSettingsIsExpanded || viewHandler.uiState.configSettingsIsMaxExpanded;
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, isExpanded ? expanded : undefined, isMobile ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("img", {
+      className: classnames(image),
+      src: item.image
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(textContainer),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(articleName),
+        children: item.title
+      }), item.description && /*#__PURE__*/jsx("span", {
+        children: item.description
+      })]
+    }), isExpanded && !isMobile && /*#__PURE__*/jsx("div", {
+      className: classnames(posNrContainer),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(posNrHeightFitter),
+        children: (_item$targetArticlePo = item.targetArticlePosNrs) === null || _item$targetArticlePo === void 0 ? void 0 : _item$targetArticlePo.map(function (posNr, key) {
+          return /*#__PURE__*/jsx("span", {
+            children: posNr
+          }, key);
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(quantity),
+      children: item.quantity + 'x'
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(price),
+      children: DivaUtils.formatPrice(item.price, viewHandler.productState.priceFormat)
+    })]
+  });
+};
+var SummaryArticles = observer(Articles);
+
+export { SummaryArticles as default };

package/build/esm/index-61e7c6fb.js

@@ -0,0 +1,56 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-8LcgO";
+var icon = "icon-TWMmb";
+var visible = "visible-RvpD0";
+var tablet = "tablet-XGdK1";
+var css_248z = ".wrapper-8LcgO {\n  position: absolute;\n  transform: translateZ(0);\n  bottom: 12px;\n  right: 12px;\n  width: 42px;\n  height: 42px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--diva-theme-palette-primary-main);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 12000;\n  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  transition:\n    opacity 1.5s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: none;\n}\n\n.wrapper-8LcgO:hover {\n  scale: 0.8;\n}\n\n.wrapper-8LcgO:focus {\n  scale: 0.9;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.icon-TWMmb {\n  width: 20px;\n  height: 20px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.visible-RvpD0 {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.vaul-dragging .wrapper-8LcgO {\n  opacity: 0;\n  transition:\n    opacity 0s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.tablet-XGdK1 {\n  bottom: 16px;\n  right: 16px;\n  width: 52px;\n  height: 52px;\n}\n\n.tablet-XGdK1 .icon-TWMmb {\n  width: 26px;\n  height: 26px;\n}\n";
+styleInject(css_248z);
+
+var NavForwardButton = function NavForwardButton(props) {
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  useEffect(function () {
+    setTimeout(function () {
+      setIsVisible(!viewHandler.actionButtonState.isOnLastStep && !viewHandler.actionButtonState.isOnFirstStepDisabled);
+    }, 400);
+  }, [viewHandler.actionButtonState.isOnLastStep, viewHandler.actionButtonState.isOnFirstStepDisabled]);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, isVisible && visible, viewHandler.uiState.isTablet ? tablet : undefined),
+    onClick: function onClick() {
+      window.lastNavigationType = 'SETTINGS_SWIPER_FORWARD_BUTTON';
+      viewHandler.actionButtonState.onClickConfiguratorSettingsForth();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: icon
+    })
+  });
+};
+var NavForwardButton$1 = observer(NavForwardButton);
+
+export { NavForwardButton$1 as default };

package/build/esm/index-6316180c.js

@@ -0,0 +1,77 @@
+import { s as styleInject, u as useViewHandler } from './index-4e6b7562.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var teaserContainer = "teaserContainer--DnKQ";
+var emoji = "emoji-R0ay8";
+var title = "title-PeINh";
+var description = "description-dcuP6";
+var button = "button-0gvSY";
+var buttonText = "buttonText-HqWTX";
+var arrow = "arrow-9YFFk";
+var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 15px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n.mobile .description-dcuP6 {\n  font-size: 13px;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var ContentItemTeaser = function ContentItemTeaser(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: teaserContainer,
+    children: [item.emoji && /*#__PURE__*/jsx("div", {
+      className: emoji,
+      children: item.emoji
+    }), /*#__PURE__*/jsx("div", {
+      className: title,
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      className: description,
+      children: item.description
+    }), /*#__PURE__*/jsxs("button", {
+      className: button,
+      onClick: function onClick() {
+        return viewHandler.settingsState.onClickContentItemId(item.id);
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        className: buttonText,
+        children: item.buttonText
+      }), /*#__PURE__*/jsx("div", {
+        className: arrow,
+        children: /*#__PURE__*/jsx("svg", {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M5 12H19M19 12L13 6M19 12L13 18",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        })
+      })]
+    })]
+  });
+};
+var ContentItemTeaser$1 = observer(ContentItemTeaser);
+
+export { ContentItemTeaser$1 as default };