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

package/build/esm/index-2c67b821.js

@@ -0,0 +1,159 @@
+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-4d73d4f0.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import StepInfo from './index-b7805a61.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 paletteItem = "palette-item-F-QYy";
+var wcTextBox = "wcTextBox-lKT8X";
+var headerTitle = "headerTitle-RuXs-";
+var css_248z = ".palette-item-F-QYy {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.palette-item-F-QYy > 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.palette-item-F-QYy input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.palette-item-F-QYy 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;
+  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'
+    },
+    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-2c8c3c38.js

@@ -0,0 +1,89 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-4d73d4f0.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsxs, Fragment, 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 inputBox = "input-box-NpxK9";
+var mobile = "mobile-OhbeO";
+var css_248z = ".input-box-NpxK9 {\n  width: 70px;\n  font-size: 20px;\n  height: 22px;\n}\n\n.input-box-NpxK9.mobile-OhbeO {\n  font-size: 16px;\n  height: 18px;\n  width: 50px;\n}\n";
+styleInject(css_248z);
+
+var NumberInput = function NumberInput(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useState = useState(item.numberInput),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputGotChangedByComponent = _useState4[0],
+    setInputGotChangedByComponent = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    invalidValue = _useState6[0],
+    setInvalidValue = _useState6[1];
+  useEffect(function () {
+    var _item$groups;
+    var opvItem = (_item$groups = item.groups) === null || _item$groups === void 0 || (_item$groups = _item$groups[0].items) === null || _item$groups === void 0 ? void 0 : _item$groups[0];
+    if (inputValue && opvItem && !isNaN(inputValue) && Number(opvItem.measureMinimum) <= inputValue && Number(opvItem.measureMaximum) >= inputValue) {
+      setInvalidValue(false);
+      if (inputValue !== Number(opvItem.freeText)) {
+        if (inputGotChangedByComponent) {
+          setInputGotChangedByComponent(false);
+          onRangeChange(opvItem);
+        }
+      }
+    } else {
+      setInvalidValue(true);
+    }
+  }, [inputValue]);
+  useEffect(function () {
+    setInputValue(item.numberInput);
+  }, [item]);
+  var onRangeChange = function onRangeChange(opvItem) {
+    if (inputValue) {
+      viewHandler.paletteViewHandler.onRangeClickChange(item, opvItem, inputValue.toString());
+    }
+  };
+  var onChange = function onChange(e) {
+    var newVal = Number(e.target.value);
+    if (newVal >= 0) {
+      setInputGotChangedByComponent(true);
+      setInputValue(newVal);
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [': ', /*#__PURE__*/jsx("input", {
+      className: classnames(inputBox, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      onChange: onChange,
+      style: {
+        color: invalidValue ? 'red' : undefined
+      },
+      type: "number",
+      value: inputValue
+    }), ' ', item.measureUnit]
+  });
+};
+var NumberInput$1 = observer(NumberInput);
+
+export { NumberInput$1 as default };

package/build/esm/index-2dc87917.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-4d73d4f0.js';
+import SummaryOptionTree from './index-3c1f064f.js';
+import SummaryArticles from './index-92173d66.js';
+import SettingsItemAccessoireTemplate from './index-67b19c6d.js';
+import Gallery from './index-7b03b332.js';
+import SettingsItemDefaultTemplate from './index-52694902.js';
+import Range from './index-51107611.js';
+import SettingsItemRoomTemplate from './index-d7aec500.js';
+import ViewPoint from './index-de2386c2.js';
+import NumberBox from './index-2c67b821.js';
+import PlannerSwitch from './index-105d7653.js';
+import Varaint from './index-e70caf76.js';
+import GalleryText from './index-e4911465.js';
+import 'react';
+import GalleryText2 from './index-09e20870.js';
+import FaceLift from './index-1c492d4d.js';
+import PlannerOverviewItem from './index-743847c4.js';
+import Article from './index-a3d1afbf.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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 'react-laag';
+import './index.module-7065928a.js';
+import './index-901fbdba.js';
+import './index-21ea8346.js';
+import './index-28858186.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index.module-2b84c236.js';
+import './index-b7805a61.js';
+import './index-7e7bd4f4.js';
+import './index-1bdd1e0d.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+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 itemPaletteTypeComponentMap = {
+  ART: Article,
+  ART_2: FaceLift,
+  'PLANNER_2.0': PlannerOverviewItem,
+  PLANNERSWITCH: PlannerSwitch,
+  ACC: SettingsItemAccessoireTemplate,
+  ACC_CONFIG: SettingsItemAccessoireTemplate,
+  VERY_SMALL: SettingsItemDefaultTemplate,
+  SMALL: SettingsItemDefaultTemplate,
+  GAL_GROUP_DROPDOWN: function GAL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "normalimage.png"
+    }, props));
+  },
+  GAL_SMALL_GROUP_DROPDOWN: function GAL_SMALL_GROUP_DROPDOWN(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL: Gallery,
+  GAL_SMALL: Gallery,
+  GAL_BIG: Gallery,
+  RANGE: Range,
+  NUMBER: NumberBox,
+  SLIDER: function SLIDER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE: function MULTI_TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  MULTI_TOGGLE_ROUND: function MULTI_TOGGLE_ROUND() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO: function RADIO() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  RADIO_LIST: function RADIO_LIST() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SUMMARY_ARTICLES: SummaryArticles,
+  SUMMARY_OPTIONTREE: SummaryOptionTree,
+  VARIANTS: Varaint,
+  STATICROOM: SettingsItemRoomTemplate,
+  VIEWPOINT: ViewPoint,
+  DROPDOWN_TEXT: function DROPDOWN_TEXT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DROPDOWN_IMAGE: function DROPDOWN_IMAGE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE: function TOGGLE() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_HEADER: function TOGGLE_HEADER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TOGGLE_NAME: function TOGGLE_NAME() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  DOOR_PLANNER: function DOOR_PLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  TEXTBOX: function TEXTBOX() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  SHELFPLANNER: function SHELFPLANNER() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PRODUCTS: function PRODUCTS() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  PROMOTED: function PROMOTED() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  CHECKOUT: function CHECKOUT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  STYLE_CONSULTANT: function STYLE_CONSULTANT() {
+    return /*#__PURE__*/jsx(Fragment, {});
+  },
+  GAL_TEXT_2: function GAL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT_2: function GAL_BIG_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT_2: function GAL_SMALL_TEXT_2(props) {
+    return /*#__PURE__*/jsx(GalleryText2, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_TEXT: function GAL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({}, props));
+  },
+  GAL_BIG_TEXT: function GAL_BIG_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "big"
+    }, props));
+  },
+  GAL_SMALL_TEXT: function GAL_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "small"
+    }, props));
+  },
+  GAL_VERY_SMALL_TEXT: function GAL_VERY_SMALL_TEXT(props) {
+    return /*#__PURE__*/jsx(GalleryText, _objectSpread({
+      type: "verysmall"
+    }, props));
+  }
+};
+
+export { itemPaletteTypeComponentMap as default };

package/build/esm/index-2e70d9ea.js

@@ -0,0 +1,50 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { u as useViewHandler, S as SettingsHeader } from './index-4d73d4f0.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx, Fragment } 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 '@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 SettingsHeaderContainer = function SettingsHeaderContainer(_ref) {
+  var _sort$find, _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 firstVisiblePalette = (_sort$find = _toConsumableArray(viewHandler.settingsState.itemPalettes.values()).sort(function (a, b) {
+    return a.id - b.id;
+  }).find(function (palette) {
+    return palette.visible && !palette.isHeader;
+  })) !== null && _sort$find !== void 0 ? _sort$find : headerPalette;
+  var headerStillNeeded = viewHandler.uiState.ViewConfig.headerInConfigPalette !== 'Hidden' || !firstVisiblePalette.hideHeader;
+  var showHeader = headerStillNeeded && headerPalette.configStepKey !== 'CHECKOUT' && !((_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() || ['PLANNER_2.0', 'SUMMARY', 'ACCESSOIRES', 'DoorPlanner'].includes(headerPalette.configStepKey) || headerPalette.configStepKey.startsWith('SHELFARTICLE') || viewHandler.settingsState.showTabgroupHeaderForConfigSinge);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: showHeader && /*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: isScroller,
+      isSettingsHeader: !headerPalette.isHeader,
+      item: headerPalette,
+      header: true
+    })
+  });
+};
+var SettingsHeaderContainer$1 = observer(SettingsHeaderContainer);
+
+export { SettingsHeaderContainer$1 as default };

package/build/esm/index-2f92cc5f.js

@@ -0,0 +1,70 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler, T as Toggle } from './index-4d73d4f0.js';
+import 'react';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+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 SummaryVariantButton = function SummaryVariantButton(_ref) {
+  var _variantPalette$1$gro;
+  _ref.item;
+  var viewHandler = useViewHandler();
+  var variantPalette = viewHandler.settingsState.itemPaletteArr.find(function (item) {
+    return item[1].type === 'VARIANTS' && item[1].visible;
+  });
+  if (!variantPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var variants = (_variantPalette$1$gro = variantPalette[1].groups) === null || _variantPalette$1$gro === void 0 || (_variantPalette$1$gro = _variantPalette$1$gro[0]) === null || _variantPalette$1$gro === void 0 ? void 0 : _variantPalette$1$gro.items;
+  if (!(variants !== null && variants !== void 0 && variants.length)) return /*#__PURE__*/jsx(Fragment, {});
+  var copyTableToClipboard = function copyTableToClipboard() {
+    var html = '<h3>' + viewHandler.productState.webConifguratorTitle + ' - ' + Object.values(viewHandler.settingsState.articleInfos).map(function (article) {
+      return article.name;
+    }).join(', ') + '</h3>' + '<table>' + variants.map(function (variant) {
+      if (variant.index === undefined) return '';
+      return '<tr>' + '<td>' + 'index: ' + variant.index + '</td>' + variant.variantValues.map(function (values) {
+        return (values.optionValueImage ? '<td>' + '<img src="' + values.optionValueImage + '"/>' + '</td>' : '') +
+        //::::
+        '<td>' + (values.optionName + ' (' + values.opt.substring(3) + '):') + '<br/>' + (values.optionValueName + ' (' + values.opv.substring(3) + ')') + '</td>';
+      }).join('') + '<td>' + DivaUtils.formatPrice(variant.price) + '</td>' + '</tr>';
+    }).join('') + '</table>';
+    var blob = new Blob([html], {
+      type: 'text/html'
+    });
+    navigator.clipboard.write([new ClipboardItem(_defineProperty({}, blob.type, blob))]);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: copyTableToClipboard,
+      children: "als Tabelle kopieren"
+    }), /*#__PURE__*/jsx(Toggle, {
+      height: 32,
+      handleDiameter: 22,
+      width: 60,
+      onChange: function onChange() {
+        variants[0].onToggle(true);
+        viewHandler.paletteViewHandler.updateCurPaletteData(true);
+      },
+      state: !variants.find(function (variant) {
+        return variant.disabled;
+      })
+    })]
+  });
+};
+
+export { SummaryVariantButton as default };