@crystaldesign/diva-web-planner-react 26.7.0-rc.8 → 26.7.0

package/build/esm/index-73c74737.js

@@ -0,0 +1,208 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-55508962.js';
+import 'react';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import ShelfDeleteButton from './index-2dbccaad.js';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } 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';
+
+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 GridList = function GridList(_ref) {
+  var _item$shelfPlannerGri;
+  var item = _ref.item,
+    height = _ref.height;
+    _ref.width;
+    var direction = _ref.direction;
+  var grid = (_item$shelfPlannerGri = item.shelfPlannerGrids) === null || _item$shelfPlannerGri === void 0 ? void 0 : _item$shelfPlannerGri[0];
+  var viewHandler = useViewHandler();
+  if (!grid) return /*#__PURE__*/jsx(Fragment, {});
+  var itemHeight = height / grid.Cells.length;
+  var cells = [];
+  var lastInUse = -1;
+  var onBoardNameAdded = false;
+  var lastWasDisabled = false;
+  for (var i = 0; i < grid.Cells.length; i++) {
+    var cell = grid.Cells[i];
+    if (cell.IsDisabled) {
+      // contiguous disabled cells get merged into one striped block, non-contiguous zones stay separate
+      if (lastWasDisabled) {
+        cells[0].heightCount++;
+      } else {
+        cells.splice(0, 0, {
+          heightCount: 1,
+          inUse: cell.InUse,
+          index: cell.Index,
+          type: undefined,
+          isDisabled: true,
+          isRequired: cell.IsRequired,
+          onlyPlaceHolder: cell.OnlyPlaceHolder,
+          noMove: cell.NoMove,
+          noDelete: cell.NoDelete
+        });
+      }
+      lastWasDisabled = true;
+      lastInUse = -1;
+      continue;
+    }
+    lastWasDisabled = false;
+    if (cell.InUse == -1) {
+      cells.splice(0, 0, {
+        heightCount: 1,
+        inUse: cell.InUse,
+        index: cell.Index,
+        type: undefined,
+        isDisabled: cell.IsDisabled,
+        isRequired: cell.IsRequired,
+        onlyPlaceHolder: cell.OnlyPlaceHolder,
+        noMove: cell.NoMove,
+        noDelete: cell.NoDelete
+      });
+    } else if (lastInUse != cell.InUse && lastInUse != cell.OnBoard) {
+      var _cell$Article, _cell$Article2;
+      lastInUse = cell.InUse;
+      onBoardNameAdded = false;
+      cells.splice(0, 0, {
+        heightCount: 1,
+        inUse: cell.InUse,
+        index: cell.Index,
+        type: cell.Type,
+        isDisabled: cell.IsDisabled,
+        isRequired: cell.IsRequired,
+        articleText: (_cell$Article = cell.Article) === null || _cell$Article === void 0 ? void 0 : _cell$Article.name,
+        onlyPlaceHolder: cell.OnlyPlaceHolder,
+        noMove: cell.NoMove,
+        noDelete: cell.NoDelete,
+        basketId: (_cell$Article2 = cell.Article) === null || _cell$Article2 === void 0 ? void 0 : _cell$Article2.basketId
+      });
+    } else {
+      var foundCell = cells.find(function (cell) {
+        return cell.inUse == lastInUse;
+      });
+      if (foundCell) {
+        if (lastInUse === cell.OnBoard && !onBoardNameAdded) {
+          var _cell$Article3;
+          onBoardNameAdded = true;
+          foundCell.articleText = ((_cell$Article3 = cell.Article) === null || _cell$Article3 === void 0 ? void 0 : _cell$Article3.name) + '<br/>&<br/>' + foundCell.articleText;
+          foundCell.onBoard = true;
+        }
+        foundCell.heightCount++;
+      }
+    }
+  }
+  var onDragEnd = function onDragEnd(result) {
+    if (!result.destination) return;
+    var sourceIndex = cells[result.source.index].index;
+    var destinationIndex = cells[result.destination.index].index;
+    if (sourceIndex != destinationIndex) viewHandler.paletteViewHandler.shelfItemMoved(grid, sourceIndex, destinationIndex);
+  };
+  var getItemStyle = function getItemStyle(isDragging, draggableStyle, item, showNumber) {
+    if (direction == 'horizontal') {
+      return getItemStyleHorizontal(isDragging, draggableStyle, item, showNumber);
+    } else {
+      return getItemStyleVertical(isDragging, draggableStyle, item);
+    }
+  };
+  var getItemStyleVertical = function getItemStyleVertical(isDragging, draggableStyle, item) {
+    return _objectSpread({
+      userSelect: 'none',
+      width: 'calc(' + 100 * (item.heightCount / grid.Cells.length) + '% - 1px)',
+      wordBreak: 'break-word',
+      height: '100%',
+      marginRight: '1px',
+      background: item.isRequired ? '#FFEBEB' : item.inUse == -1 ? 'none' : isDragging ? 'grey' : 'lightgrey',
+      backgroundImage: item.isDisabled && 'linear-gradient(45deg, #ffffff  25%, #c7c7c7 25%, #c7c7c7 50%, #ffffff  50%, #ffffff  75%, #c7c7c7 75%, #c7c7c7 100%)',
+      backgroundSize: item.isDisabled && '28.28px 28.28px',
+      "float": 'left',
+      borderRight: item.inUse == -1 ? '1px solid lightgrey' : 'none',
+      boxSizing: 'border-box'
+    }, draggableStyle);
+  };
+  var getItemStyleHorizontal = function getItemStyleHorizontal(isDragging, draggableStyle, item, showNumber) {
+    return _objectSpread({
+      userSelect: 'none',
+      height: itemHeight * item.heightCount - 1,
+      marginBottom: '1px',
+      fontSize: item.inUse === -1 ? '12px' : undefined,
+      lineHeight: item.inUse === -1 ? '2px' : undefined,
+      background: item.isRequired ? '#FFEBEB' : item.inUse === -1 ? 'none' : isDragging ? 'grey' : 'lightgrey',
+      backgroundImage: item.isDisabled && 'linear-gradient(45deg, #ffffff  25%, #c7c7c7 25%, #c7c7c7 50%, #ffffff  50%, #ffffff  75%, #c7c7c7 75%, #c7c7c7 100%)',
+      backgroundSize: item.isDisabled && '28.28px 28.28px',
+      borderBottom: item.inUse == -1 ? showNumber ? '1px solid #B5B5B5' : '1px solid lightgrey' : 'none',
+      boxSizing: 'border-box'
+    }, draggableStyle);
+  };
+  var getTextStyle = function getTextStyle() {
+    if (direction == 'vertikal') {
+      return {
+        maxHeight: 'calc(100% - 22px)',
+        overflow: 'auto'
+      };
+    }
+    return {};
+  };
+  return /*#__PURE__*/jsx(DragDropContext, {
+    onDragEnd: onDragEnd,
+    children: /*#__PURE__*/jsx(Droppable, {
+      droppableId: "droppable",
+      direction: direction == 'vertikal' ? 'horizontal' : 'vertical',
+      children: function children(provided, snapshot) {
+        return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, provided.droppableProps), {}, {
+          ref: provided.innerRef,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          children: [cells.map(function (item, index) {
+            return /*#__PURE__*/jsx(Draggable, {
+              index: index,
+              isDragDisabled: item.inUse == -1 || item.isDisabled || item.noMove,
+              draggableId: index.toString(),
+              children: function children(provided, snapshot) {
+                return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+                  onClick: function onClick() {
+                    viewHandler.paletteViewHandler.setSelectedShelfAccessoire(item.basketId);
+                    viewHandler.paletteViewHandler.clickAddAccessorieOnShelfPlanner(grid, item.index);
+                  },
+                  ref: provided.innerRef
+                }, provided.draggableProps), provided.dragHandleProps), {}, {
+                  style: getItemStyle(snapshot.isDragging, provided.draggableProps.style, item, item.index % 5 === 0 && !!index),
+                  children: [!!item.articleText && /*#__PURE__*/jsx("div", {
+                    style: getTextStyle(),
+                    dangerouslySetInnerHTML: {
+                      __html: item.articleText
+                    }
+                  }), item.inUse == -1 && item.index % 5 === 0 && !!index && direction == 'horizontal' && item.index, (item.inUse > -1 && !item.noDelete && !item.isDisabled || item.onBoard) && /*#__PURE__*/jsx(ShelfDeleteButton, {
+                    grid: grid,
+                    index: item.inUse
+                  })]
+                }));
+              }
+            }, index);
+          }), provided.placeholder]
+        }));
+      }
+    })
+  });
+};
+var GridList$1 = observer(GridList);
+
+export { GridList$1 as default };

package/build/esm/index-73f1f21f.js

@@ -0,0 +1,74 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-55508962.js';
+import { useState, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var metaData = "meta-data-kJbmQ";
+var css_248z = ".meta-data-kJbmQ {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: var(--secondaryColor);\n  width: 100%;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .meta-data-kJbmQ {\n  color: #fff;\n}\n";
+styleInject(css_248z);
+
+var MetaData = function MetaData(_ref) {
+  var style = _ref.style,
+    metaData$1 = _ref.metaData,
+    _ref$visible = _ref.visible,
+    _ref$visible2 = _ref$visible === void 0 ? useState('') : _ref$visible,
+    _ref$visible3 = _slicedToArray(_ref$visible2, 2),
+    metaDataVisible = _ref$visible3[0],
+    setMetaDataVisible = _ref$visible3[1];
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var displayMetaDatas = viewHandler.getViewConfig().displayMetaDatas;
+  var firstItem = metaData$1 === null || metaData$1 === void 0 ? void 0 : metaData$1.find(function (data) {
+    return displayMetaDatas === null || displayMetaDatas === void 0 ? void 0 : displayMetaDatas.includes(data.codex);
+  });
+  useEffect(function () {
+    if (!firstItem) return;
+    var textTmp = '';
+    for (var i = 0; i < firstItem.values.length; i++) {
+      if (textTmp !== '') textTmp = textTmp + ', ';
+      var _loop = function _loop(j) {
+        var data = metaData$1 === null || metaData$1 === void 0 ? void 0 : metaData$1.find(function (data) {
+          return data.codex === displayMetaDatas[j];
+        });
+        if (!data) return 1; // continue
+        if (textTmp !== '') textTmp = textTmp + ' ';
+        textTmp = textTmp + (data.name ? data.name + ': ' : '') + data.values[i];
+      };
+      for (var j = 0; j < displayMetaDatas.length; j++) {
+        if (_loop(j)) continue;
+      }
+    }
+    setText(textTmp);
+    setMetaDataVisible(textTmp);
+  }, []);
+  if (!metaDataVisible) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    style: style,
+    className: metaData,
+    children: text
+  });
+};
+
+export { MetaData as default };

package/build/esm/index-74c8ea08.js

@@ -0,0 +1,58 @@
+import { u as useViewHandler } from './index-55508962.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-6af42ed3.js';
+import IsActive from './index-b53199b9.js';
+import { jsx, jsxs } 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 Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), /*#__PURE__*/jsx("div", {
+        className: wcImage,
+        style: {
+          backgroundImage: "url(".concat(item.url, ")")
+        }
+      }), /*#__PURE__*/jsx("div", {
+        className: textContainer,
+        children: /*#__PURE__*/jsx("div", {
+          className: wcConfiguratorSettingsTitle,
+          children: t('configurator.' + item.N)
+        })
+      })]
+    })
+  });
+};
+var index = observer(Room);
+
+export { index as default };

package/build/esm/index-7947f2d1.js

@@ -0,0 +1,168 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-55508962.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-PiHd4";
+var title = "title-50yik";
+var text = "text-LbROy";
+var progressText = "progressText-NTSPw";
+var progressBar = "progressBar-M9LH7";
+var progressFill = "progressFill-2bm6H";
+var css_248z = ".wrapper-PiHd4 {\n  text-align: center;\n  color: #2a4b63;\n  color: var(--infoBannerColor, #2a4b63);\n  width: calc(100% - 42px);\n  padding: 12px 16px;\n  background-color: #f5f9fc;\n  background-color: var(--infoBannerBackground, #f5f9fc);\n  border-radius: 8px;\n}\n\n.title-50yik {\n  font-weight: bold;\n  font-size: 17px;\n  margin-bottom: 4px;\n}\n\n.text-LbROy {\n  font-size: 14px;\n  margin-bottom: 8px;\n}\n\n.progressText-NTSPw {\n  font-size: 13px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-weight: 500;\n}\n\n.progressBar-M9LH7 {\n  width: 100%;\n  height: 8px;\n  background-color: #e0e0e0;\n  background-color: var(--infoBannerProgressBarBackground, #e0e0e0);\n  border-radius: 4px;\n  overflow: hidden;\n  margin-top: 8px;\n}\n\n.progressFill-2bm6H {\n  height: 100%;\n  transition:\n    width 4s ease,\n    background-color 0.3s ease;\n  border-radius: 4px;\n}\n\n.mobile .title-50yik {\n  font-size: 1em;\n}\n\n.mobile .wrapper-PiHd4 {\n  font-size: 0.9em;\n}\n";
+styleInject(css_248z);
+
+var InfoBanner = function InfoBanner(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    user = _useDivaCore.state.user;
+
+  // State variables
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    totalLimit = _useState2[0],
+    setTotalLimit = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    usedCount = _useState4[0],
+    setUsedCount = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    progressPercent = _useState6[0],
+    setProgressPercent = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    bannerText = _useState8[0],
+    setBannerText = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    usageText = _useState10[0],
+    setUsageText = _useState10[1];
+
+  // Determine if user is anonymous (no user object)
+  var isAnonymous = !user;
+
+  // Get usage budget and limit status from AI state
+  var usageBudget = viewHandler.aiState.usageBudget;
+  var timeframeLimitReached = viewHandler.aiState.isTimeframeLimitReached;
+  var isIpLimitOnly = viewHandler.aiState.isIpLimitOnly;
+  var hasViolations = viewHandler.aiState.hasViolations;
+  var organizationAISettings = viewHandler.settingsState.organizationAISettings;
+
+  // Effect to calculate and update all state values
+  useEffect(function () {
+    // Calculate values
+    var newTotalLimit = 0;
+    var newUsedCount = 0;
+    var newIsLimitReached = false;
+    if (usageBudget) {
+      newTotalLimit = usageBudget.total;
+      newUsedCount = usageBudget.used;
+      newIsLimitReached = !!viewHandler.aiState.isTimeframeLimitReached;
+    } else if (isAnonymous) {
+      // Fallback to organization settings if no usage limits loaded
+      var anonymousLimit = (organizationAISettings === null || organizationAISettings === void 0 ? void 0 : organizationAISettings.anonymousDailyIPLimit) || 2;
+      newTotalLimit = anonymousLimit;
+      newUsedCount = 0;
+    }
+
+    // Update state values
+    setTotalLimit(newTotalLimit);
+    setUsedCount(newUsedCount);
+
+    // Calculate progress percentage for the bar
+    var newProgressPercent = newTotalLimit > 0 ? (newUsedCount + (viewHandler.aiState.isAnyGenerationInProgress ? 1 : 0)) / newTotalLimit * 100 : 0;
+    setProgressPercent(newProgressPercent);
+
+    // Determine banner text
+    var newBannerText = '';
+    var newUsageText = '';
+    newUsageText = t('configurator.roomRendering.anonymousBanner.used');
+    if (newIsLimitReached) {
+      if (isIpLimitOnly) {
+        // Only IP limit reached - can be bypassed with lead key
+        // If lead key is active, don't show the lead key bonus
+        if (organizationAISettings !== null && organizationAISettings !== void 0 && organizationAISettings.leadRewardBonus && !(usageBudget !== null && usageBudget !== void 0 && usageBudget.leadKeyActive)) {
+          newBannerText = t('configurator.roomRendering.anonymousBanner.ipLimitReachedWithLeadKey', {
+            leadRewardBonus: organizationAISettings.leadRewardBonus
+          });
+        } else {
+          newBannerText = t('configurator.roomRendering.anonymousBanner.ipLimitReached');
+        }
+      } else if (timeframeLimitReached) {
+        switch (timeframeLimitReached) {
+          case 'daily':
+            newBannerText = t('configurator.roomRendering.banner.dailyLimitReached');
+            break;
+          case 'weekly':
+            newBannerText = t('configurator.roomRendering.banner.weeklyLimitReached');
+            break;
+          case 'monthly':
+            newBannerText = t('configurator.roomRendering.banner.monthlyLimitReached');
+            break;
+        }
+      }
+    } else {
+      newBannerText = t('configurator.roomRendering.infoText');
+    }
+    setBannerText(newBannerText);
+    setUsageText(newUsageText);
+  }, [usageBudget, isAnonymous, isIpLimitOnly, hasViolations, timeframeLimitReached, organizationAISettings, viewHandler.aiState.isAnyGenerationInProgress]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      className: title,
+      children: t('configurator.roomRendering.infoTitle')
+    }), /*#__PURE__*/jsx("div", {
+      className: text,
+      children: bannerText
+    }), (!timeframeLimitReached || timeframeLimitReached == 'daily') && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: progressText,
+        children: [/*#__PURE__*/jsx("div", {
+          children: usageText
+        }), /*#__PURE__*/jsxs("div", {
+          children: [usedCount, " / ", totalLimit]
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: progressBar,
+        style: {
+          marginTop: '8px'
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: progressFill,
+          style: {
+            width: "".concat(progressPercent, "%"),
+            backgroundColor: progressPercent > 99 ? 'var(--infoBannerProgressFillHigh, #d32f2f)' : progressPercent > 60 ? 'var(--infoBannerProgressFillMedium, #f57c00)' : 'var(--infoBannerProgressFillLow, #4caf50)'
+          }
+        })
+      })]
+    })]
+  });
+};
+var InfoBanner$1 = observer(InfoBanner);
+
+export { InfoBanner$1 as default };

package/build/esm/index-7ba12b82.js

@@ -0,0 +1,126 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import './index-55508962.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Outline = function Outline(_ref) {
+  var _item$size, _item$size2;
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState(item.position.x),
+    _useState4 = _slicedToArray(_useState3, 2),
+    posX = _useState4[0],
+    setPosX = _useState4[1];
+  var _useState5 = useState(item.position.y),
+    _useState6 = _slicedToArray(_useState5, 2),
+    posY = _useState6[0],
+    setPosY = _useState6[1];
+  var mouseDownDetected = false;
+
+  //LOG.log("Set outline UI x: " + posX + ", y: " + posY);
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    },
+    onTouchStart: function onTouchStart(e) {
+      if (e.touches.length != 1) return;
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc;
+        setIsDragging(true);
+        (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - mousePosOnScreenLastFrame.x, e.clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onTouchMove: function onTouchMove(e) {
+      if (e.touches.length != 1) return;
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc2;
+        setIsDragging(true);
+        (_item$onDragStartFunc2 = item.onDragStartFunction) === null || _item$onDragStartFunc2 === void 0 || _item$onDragStartFunc2.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct2;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - mousePosOnScreenLastFrame.x, e.touches[0].clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.touches[0].clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.touches[0].clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onMouseUp: function onMouseUp() {
+      if (isDragging) {
+        var _item$onDragEndFuncti;
+        setIsDragging(false);
+        (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd() {
+      if (isDragging) {
+        var _item$onDragEndFuncti2;
+        setIsDragging(false);
+        (_item$onDragEndFuncti2 = item.onDragEndFunction) === null || _item$onDragEndFuncti2 === void 0 || _item$onDragEndFuncti2.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    style: {
+      left: posX + 'px',
+      top: posY + 'px',
+      width: (item === null || item === void 0 || (_item$size = item.size) === null || _item$size === void 0 ? void 0 : _item$size.x) + 'px',
+      height: (item === null || item === void 0 || (_item$size2 = item.size) === null || _item$size2 === void 0 ? void 0 : _item$size2.y) + 'px',
+      transform: 'rotate(' + (item === null || item === void 0 ? void 0 : item.rotOfElement) + 'deg)'
+    },
+    className: classnames(isDragging ? plannerUIProps.classes.outline.outline2D.draggableActive : undefined, item.elemState == 'selected' ? plannerUIProps.classes.outline.outline2D.draggable : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.outline.outline2D.selectable : undefined)
+  });
+};
+var Outline$1 = observer(Outline);
+
+export { Outline$1 as default };