@crystaldesign/diva-web-planner-react 24.15.0-beta.3 → 24.15.0-beta.31

package/build/esm/index-c4b4a961.js

@@ -0,0 +1,61 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-4238b6c1.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/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 'mobx-react-lite';
+
+var wrapper = "wrapper-MPQ1D";
+var searchText = "search-text-h7Q58";
+var icon = "icon-yltss";
+var css_248z = ".wrapper-MPQ1D {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n.search-text-h7Q58 {\n  width: 130px;\n  height: 30px;\n  line-height: 28px;\n  border-radius: 5px;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  background-color: #fff;\n  padding: 0 1.6rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: relative;\n  border: 0;\n}\n\n.icon-yltss {\n  width: 36px;\n  height: 36px;\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  margin-left: 12px;\n  margin-right: 12px;\n}\n";
+styleInject(css_248z);
+
+var Search = function Search(_ref) {
+  var _ref$searchState = _slicedToArray(_ref.searchState, 2),
+    search = _ref$searchState[0],
+    setSearch = _ref$searchState[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (value && value.length > 2) setSearch(value);else if ((search === null || search === void 0 ? void 0 : search.length) !== 0) {
+      setSearch(undefined);
+    }
+  }, [value]);
+  useEffect(function () {
+    if (!(search !== null && search !== void 0 && search.length)) setValue('');
+  }, [search]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("input", {
+      ref: inputRef,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      type: 'text',
+      value: value,
+      className: searchText,
+      placeholder: t('filter.global')
+    }), /*#__PURE__*/jsx("div", {
+      className: icon
+    })]
+  });
+};
+
+export { Search as default };

package/build/esm/index-c5b31a7e.js

@@ -0,0 +1,123 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcTextBoxInDialog = "wcTextBoxInDialog-cUykT";
+var wcPopupWindowContainer = "wcPopupWindowContainer-RSZGf";
+var wcClose = "wcClose-X1s6d";
+var wcSubmit = "wcSubmit-Ax0lk";
+var css_248z = ".wcTextBoxInDialog-cUykT {\n  width: 90%;\n  padding: 12px 20px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n  float: left;\n}\n\n.wcPopupWindowContainer-RSZGf {\n  letter-spacing: 0.5px;\n  -webkit-text-stroke: 0.1px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  z-index: 999;\n  width: 40em;\n  max-width: 70%;\n  max-height: 90%;\n  background-color: white;\n  padding: 1em 2em 0.5em 2em;\n  border-radius: 15px;\n  border: 1px solid #cbcbcb;\n  font-size: 14.4px;\n  color: #363636;\n  display: flex;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.wcPopupWindowContainer-RSZGf p {\n  font-size: 16px;\n  -webkit-text-stroke: 0.5px;\n}\n\n.wcPopupWindowContainer-RSZGf ul {\n  padding: 0;\n  margin: 0;\n}\n\n.wcPopupWindowContainer-RSZGf .wctooltext-G-oa5 {\n  width: calc(100% - 65px);\n  float: left;\n  padding: 8px 0 15px 10px;\n}\n\n.wcPopupWindowContainer-RSZGf li {\n  height: 40px;\n  width: 55px;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  float: left;\n  clear: both;\n  margin-bottom: 15px;\n}\n\n.wcClose-X1s6d {\n  border-radius: 20px;\n  position: absolute;\n  font-size: 22pt;\n  font-family: sans-serif;\n  font-weight: 50;\n  top: -20px;\n  right: -20px;\n  width: 40px;\n  height: 40px;\n  background-color: #fff;\n  color: #666;\n  border: 2px solid #666;\n  text-align: center;\n  padding-top: 0px;\n  content: 'X';\n}\n\n.wcClose-X1s6d:hover {\n  background-color: #aaa;\n  color: #000;\n  border: 2px solid #000;\n}\n.wcSubmit-Ax0lk {\n  border: 1px var(--secondaryColor) solid;\n  background-color: var(--secondaryColor);\n  color: #ffffff;\n  height: 41px;\n  width: 8%;\n  margin: 8px 0 7px;\n  float: right;\n  border-radius: var(--globalBorderRadius);\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 8 13.5%22 style%3D%22enable-background%3Anew 0 0 8 13.5%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M6.5%2C11.7c-0.1%2C0-0.2%2C0-0.3-0.1l-5-4.3C1.1%2C7.2%2C1%2C7.1%2C1%2C7c0-0.1%2C0.1-0.3%2C0.2-0.4l5-4.7c0.2-0.2%2C0.5-0.2%2C0.7%2C0%09%09c0.2%2C0.2%2C0.2%2C0.5%2C0%2C0.7L2.3%2C6.9l4.6%2C3.9C7%2C11%2C7.1%2C11.4%2C6.9%2C11.6C6.8%2C11.7%2C6.7%2C11.7%2C6.5%2C11.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-size: 16px;\n  transform: rotate(180deg);\n}\n";
+styleInject(css_248z);
+
+var Inputbox = function Inputbox(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var inputBox = useRef(null);
+  useEffect(function () {
+    var _viewHandler$settings, _viewHandler$settings2, _inputBox$current;
+    viewHandler.settingsState.setInputBoxValue((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.inputBoxItem) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.freeText) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : '');
+    (_inputBox$current = inputBox.current) === null || _inputBox$current === void 0 || _inputBox$current.focus();
+  }, []);
+  useEffect(function () {
+    var _viewHandler$settings3;
+    if ((_viewHandler$settings3 = viewHandler.settingsState.inputBoxItem) !== null && _viewHandler$settings3 !== void 0 && _viewHandler$settings3.freeText) {
+      viewHandler.settingsState.setInputBoxValue(viewHandler.settingsState.inputBoxItem.freeText);
+    }
+  }, [viewHandler.settingsState.inputBoxItem]);
+  if (!viewHandler.settingsState.inputBoxItem) return /*#__PURE__*/jsx(Fragment, {});
+  var title = viewHandler.settingsState.inputBoxItem.text;
+  if (title.includes(':')) title = title.slice(0, title.lastIndexOf(':'));
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!viewHandler.settingsState.inputBoxItem) {
+              _context.next = 6;
+              break;
+            }
+            viewHandler.settingsState.inputBoxItem.freeText = viewHandler.settingsState.inputBoxValue;
+            _context.next = 4;
+            return viewHandler.paletteViewHandler.clickedOnConfigPalette(viewHandler.settingsState.inputBoxItem, 'inputbox');
+          case 4:
+            viewHandler.settingsState.updateInputBoxValues(false, undefined);
+            viewHandler.uiState.setConfiguratorDisabled(false);
+          case 6:
+            if (viewHandler.settingsState.inputBoxVisible) {
+              viewHandler.uiState.setConfiguratorDisabled(true);
+            } else {
+              viewHandler.uiState.setConfiguratorDisabled(false);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var isNumberBox = !!viewHandler.settingsState.inputBoxItem.measureUnit;
+  var keyDownFunction = function keyDownFunction(e) {
+    if (!viewHandler) return;
+    if (e.key === 'Enter') {
+      onSubmit();
+      e.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxs("div", {
+      className: wcPopupWindowContainer,
+      children: [/*#__PURE__*/jsx("span", {
+        onClick: function onClick() {
+          return viewHandler.settingsState.inputBoxVisible = false;
+        },
+        className: wcClose,
+        children: "\u2716"
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/jsx("p", {
+          style: {
+            marginTop: '2px'
+          },
+          children: title
+        }), /*#__PURE__*/jsx("input", {
+          ref: inputBox,
+          onKeyDown: function onKeyDown(e) {
+            return keyDownFunction(e);
+          },
+          className: wcTextBoxInDialog,
+          type: isNumberBox ? 'number' : 'text',
+          onChange: function onChange(event) {
+            return viewHandler.settingsState.setInputBoxValue(event.target.value);
+          },
+          value: viewHandler.settingsState.inputBoxValue
+        }), /*#__PURE__*/jsx("button", {
+          className: wcSubmit,
+          onClick: onSubmit
+        })]
+      })]
+    })
+  });
+};
+var Inputbox$1 = observer(Inputbox);
+
+export { Inputbox$1 as default };

package/build/esm/index-c6e7ff31.js

@@ -0,0 +1,277 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useHover, useLayer } from 'react-laag';
+import MetaData from './index-796275b1.js';
+import GenericToolTip from './index-197e79bf.js';
+import SubTabGroup from './index-3b5ef243.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+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 './index-0f663f3c.js';
+import 'react-collapsible';
+import './index-eadd0746.js';
+import './index-0a62ea63.js';
+import 'sift';
+import './index-0e4c18f2.js';
+import './index-28e57850.js';
+import './index-7c3fd2ea.js';
+import './index-a39ff64d.js';
+import './index-43c635c5.js';
+import './index.module-fc5a5fa4.js';
+import './index-c9d64e0f.js';
+import 'react-switch';
+import './index-efc5dd21.js';
+import './index-76e80cda.js';
+import 'react-dropdown';
+import './index-f4bbad50.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-17162832.js';
+import './index-ebbb0e7e.js';
+import './index-edd299b4.js';
+import '@crystaldesign/content-box';
+import './index-0b321731.js';
+import './index-25a1df5d.js';
+import './index-e695c275.js';
+import './index-2e36cbea.js';
+import './index-956e77fb.js';
+import '@crystaldesign/product-detail-page';
+import '@crystaldesign/products-component';
+import './index-c4b4a961.js';
+import './index-27d132cf.js';
+import './index-d1584d77.js';
+import './index-731c8660.js';
+import './index-423da763.js';
+import './index-91d5eb8a.js';
+import './index-42df1486.js';
+import './index-c7960446.js';
+import './index-9e3366bc.js';
+import './index-c15bd722.js';
+import './index-56e5cc54.js';
+import './index.module-88189b53.js';
+import './index-7fe327dd.js';
+import './index-3c138b4d.js';
+import './index-e701f826.js';
+import './index-710590c2.js';
+import './index-0489077a.js';
+import './index-ef460f33.js';
+import './index-ee3c80e7.js';
+import './index.module-992ce231.js';
+import './index-32f7ee15.js';
+import './index-ec77ca4a.js';
+
+var accItem = "AccItem-2APRQ";
+var wcSize = "wcSize-dO69R";
+var wcSizeNormal = "wcSize-normal-ibUrf";
+var wcImage = "wcImage-LUYJr";
+var wcAccInfoContainer = "wcAccInfoContainer-noQuw";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-QkL6Y";
+var metaData = "meta-data-FNjdQ";
+var wcAccSize = "wcAccSize-IgCBc";
+var wcPricePreview = "wcPricePreview-hzHhw";
+var wcCtaContainer = "wcCTAContainer-gIkLT";
+var wcAccCtaMinus = "wcAccCTAMinus-juYDC";
+var wcAccCtaPlus = "wcAccCTAPlus-W-ORy";
+var disable = "disable-81BEw";
+var wcAccCtaQuantity = "wcAccCTAQuantity-PS2L0";
+var accItemLandscape = "AccItemLandscape-bJ4ph";
+var accItemPortrait = "AccItemPortrait-1gIUO";
+var css_248z = "/* Accessoires*/\n\n.AccItem-2APRQ {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  white-space: pre-line;\n}\n\n.AccItem-2APRQ:hover {\n  z-index: 200;\n}\n\n.AccItem-2APRQ .wcSize-dO69R {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n}\n\n.AccItem-2APRQ .wcSize-normal-ibUrf {\n  height: 80px;\n}\n\n.AccItem-2APRQ .wcImagePlaceHolder-o65Jq {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.AccItem-2APRQ .wcSize-normal-ibUrf .wcImage-LUYJr {\n  height: 80px;\n}\n\n.AccItem-2APRQ .wcImage-LUYJr {\n  width: 80px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.wcAccInfoContainer-noQuw {\n  float: left;\n  width: calc(100% - 203.2px);\n  position: relative;\n  height: calc(100% - 12px);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.AccItem-2APRQ .wcAccInfoContainer-noQuw {\n  width: calc(100% - 181.2px);\n}\n\n.AccItem-2APRQ .wcConfigurator-settings-title-QkL6Y {\n  display: -webkit-box;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  margin-top: 8px;\n  max-width: 100%;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n}\n\n.AccItem-2APRQ .wcConfigurator-settings-title-QkL6Y.meta-data-FNjdQ {\n  -webkit-line-clamp: 1;\n}\n\n.AccItem-2APRQ .wcAccSize-IgCBc {\n  display: -webkit-box;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  width: 100%;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 200;\n  position: relative;\n}\n\n.AccItem-2APRQ .wcPricePreview-hzHhw {\n  position: absolute;\n  right: 3.2px;\n  top: 8px;\n}\n\n@media all and (max-width: 1100px) {\n  .AccItem-2APRQ .wcSize-normal-ibUrf {\n    height: 80px;\n  }\n\n  .AccItem-2APRQ .wcSize-normal-ibUrf img {\n    height: 80px;\n  }\n}\n\n.AccItem-2APRQ .wcPricePreview-hzHhw {\n  position: absolute;\n  float: left;\n  -webkit-text-stroke: 0.4px;\n  font-size: 14.4px;\n}\n.AccItem-2APRQ .wcCTAContainer-gIkLT {\n  position: absolute;\n  bottom: 0px;\n  right: 0px;\n  width: 100px;\n  height: 32px;\n}\n\n.AccItem-2APRQ .wcCTAContainer-gIkLT {\n  font-size: 18px;\n  line-height: 20px;\n  color: var(--secondaryColor);\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC,\n.AccItem-2APRQ .wcAccCTAPlus-W-ORy {\n  font-weight: 300;\n  height: 21px;\n  width: 21px;\n  float: left;\n  background: #f2f2f2;\n  border-radius: 21px;\n  -webkit-text-stroke: 0px;\n  transition: background-color 0.15s ease;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC:hover,\n.AccItem-2APRQ .wcAccCTAPlus-W-ORy:hover {\n  background: #d9d9d9;\n  color: #424242;\n  cursor: pointer;\n}\n.AccItem-2APRQ .disable-81BEw.wcAccCTAMinus-juYDC,\n.AccItem-2APRQ .disable-81BEw.wcAccCTAPlus-W-ORy {\n  background: #f7f7f7;\n}\n.AccItem-2APRQ .disable-81BEw.wcAccCTAMinus-juYDC:hover,\n.AccItem-2APRQ .disable-81BEw.wcAccCTAPlus-W-ORy:hover {\n  background: #f7f7f7;\n  color: var(--secondaryColor);\n  cursor: inherit;\n}\n\n.AccItem-2APRQ .wcAccCTAQuantity-PS2L0 {\n  float: left;\n  width: 40px;\n  height: 16px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-text-stroke: 0.4px;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC {\n  line-height: 19px;\n}\n\n.AccItemLandscape-bJ4ph .wcCTAContainer-gIkLT {\n  font-size: 25px;\n  line-height: 40px;\n  width: 120px;\n  height: 48px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC {\n  line-height: 36px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC,\n.AccItemLandscape-bJ4ph .wcAccCTAPlus-W-ORy {\n  height: 40px;\n  width: 40px;\n  border-radius: 24px;\n}\n.AccItemLandscape-bJ4ph .wcAccInfoContainer-noQuw {\n  width: calc(100% - 243.2px);\n}\n\n.AccItemPortrait-1gIUO .wcCTAContainer-gIkLT {\n  font-size: 25px;\n  line-height: 40px;\n  width: 120px;\n  height: 48px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC {\n  line-height: 36px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC,\n.AccItemPortrait-1gIUO .wcAccCTAPlus-W-ORy {\n  height: 40px;\n  width: 40px;\n  border-radius: 24px;\n}\n.AccItemPortrait-1gIUO .wcAccInfoContainer-noQuw {\n  width: calc(100% - 243.2px);\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 AccessoiresStandard = function AccessoiresStandard(_ref) {
+  var _renderLayer;
+  var itemP = _ref.item,
+    _ref$wcAccInfoContain = _ref.wcAccInfoContainerClass,
+    wcAccInfoContainerClass = _ref$wcAccInfoContain === void 0 ? wcAccInfoContainer : _ref$wcAccInfoContain,
+    _ref$wcConfiguratorSe = _ref.wcConfiguratorSettingsTitleClass,
+    wcConfiguratorSettingsTitleClass = _ref$wcConfiguratorSe === void 0 ? wcConfiguratorSettingsTitle : _ref$wcConfiguratorSe,
+    hidePrice = _ref.hidePrice,
+    hideSize = _ref.hideSize;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    hidePrices = _useDivaCore$state.hidePrices,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var isClicked = false;
+  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || hidePrice;
+  var onPlusClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var ret;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!isClicked) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            isClicked = true;
+            _context.next = 5;
+            return viewHandler.paletteViewHandler.clickedOnAccessoirePaletteWrapper(item, 'plus');
+          case 5:
+            ret = _context.sent;
+            if (ret == 'AccessorieNoFreeSpace') {
+              viewHandler.productState.updatePlannerMsgContainer('ACCESSOIRE_MSG', true, 'INFO', 'NO_DOCKINGPOINT_FOR_ELEMENT', true);
+            }
+            if (ret == 'MaxQuantityReached') {
+              viewHandler.productState.updatePlannerMsgContainer('ACCESSOIRE_MSG', true, 'INFO', 'MAX_QUANTITY_REACHED', true);
+            }
+            isClicked = false;
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onPlusClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onMinusClick = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!isClicked) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            isClicked = true;
+            _context2.next = 5;
+            return viewHandler.paletteViewHandler.clickedOnAccessoirePaletteWrapper(item, 'minus');
+          case 5:
+            isClicked = false;
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onMinusClick() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var itemPalettesGroupedByArticles = {};
+  if (item.configStepKeys) {
+    var _loop = function _loop() {
+      var stepKey = item.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2);
+          _ref5[0];
+          var itemPalette = _ref5[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (!itemPalettesGroupedByArticles[stepKey.basketId]) itemPalettesGroupedByArticles[stepKey.basketId] = {};
+      itemPalettesGroupedByArticles[stepKey.basketId][itemPalette[0]] = itemPalette[1];
+    };
+    for (var i = 0; i < item.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+      className: classnames(accItem, viewHandler.uiState.isMobilePortrait ? accItemPortrait : undefined, viewHandler.uiState.isMobileLandscape ? accItemLandscape : undefined)
+    }, triggerProps), hoverProps), {}, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: classnames(wcSize, wcSizeNormal),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcImage),
+          onClick: onPlusClick,
+          style: {
+            backgroundImage: "url(".concat(item.image, ")")
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(wcAccInfoContainerClass),
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(wcConfiguratorSettingsTitleClass, metaDataVisible !== '' ? metaData : undefined),
+            children: item.name
+          }), /*#__PURE__*/jsx(MetaData, {
+            metaData: item.metaData,
+            visible: [metaDataVisible, setMetaDataVisible]
+          }, item.articleCodex), !hideSize && /*#__PURE__*/jsx("div", {
+            className: classnames(wcAccSize),
+            children: item.formattedSize
+          })]
+        }), !pricesAreHidden && /*#__PURE__*/jsx("div", {
+          className: classnames(wcPricePreview),
+          children: item.formattedPrice
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(wcCtaContainer),
+          children: [/*#__PURE__*/jsx("div", {
+            onClick: onMinusClick,
+            className: classnames(wcAccCtaMinus, 0 == item.actQuantity ? disable : undefined),
+            children: "-"
+          }), /*#__PURE__*/jsx("div", {
+            className: classnames(wcAccCtaQuantity),
+            children: item.actQuantity
+          }), /*#__PURE__*/jsx("div", {
+            onClick: onPlusClick,
+            className: classnames(wcAccCtaPlus, item.maxQuantity == item.actQuantity && item.maxQuantity != 0 ? disable : undefined),
+            children: "+"
+          })]
+        })]
+      })
+    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.name,
+      desciption: metaDataVisible,
+      codex: item.articleCodex,
+      pricePreviewPromise: item.pricePreviewPromise,
+      image: item.image,
+      layerProps: layerProps
+    }, item.articleCodex))), !!Object.keys(itemPalettesGroupedByArticles).length && /*#__PURE__*/jsx(SubTabGroup, {
+      itemPalettesOfArticle: itemPalettesGroupedByArticles
+    })]
+  });
+};
+var AccessoiresStandard$1 = observer(AccessoiresStandard);
+
+export { AccessoiresStandard$1 as default };

package/build/esm/index-c78f3637.js

@@ -0,0 +1,38 @@
+import { s as styleInject } from './index-4238b6c1.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var pdfButton = "pdfButton-4l4zL";
+var css_248z = ".pdfButton-4l4zL {\n  border-radius: 50%;\n  border: solid 2px var(--primaryColor);\n  width: 26px;\n  height: 26px;\n  cursor: pointer;\n  margin-left: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pdfButton-4l4zL img {\n  width: 80%;\n}\n";
+styleInject(css_248z);
+
+var pdfIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20%202H8c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm0%2014H8V4h12v12zM4%206H2v14c0%201.1.9%202%202%202h14v-2H4V6zm12%206V9c0-.55-.45-1-1-1h-2v5h2c.55%200%201-.45%201-1zm-2-3h1v3h-1V9zm4%202h1v-1h-1V9h1V8h-2v5h1zm-8%200h1c.55%200%201-.45%201-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z%22%2F%3E%3C%2Fsvg%3E";
+
+var PDFButton = function PDFButton(_ref) {
+  var pdfUrl = _ref.pdfUrl;
+  return /*#__PURE__*/jsx("div", {
+    className: pdfButton,
+    onClick: function onClick() {
+      return window.open(pdfUrl, '_blank');
+    },
+    children: /*#__PURE__*/jsx("img", {
+      src: pdfIcon
+    })
+  });
+};
+
+export { PDFButton as default };

package/build/esm/index-c7960446.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-4238b6c1.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SettingsItemDefaultTemplate = function SettingsItemDefaultTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Default"
+  }));
+};
+
+export { SettingsItemDefaultTemplate as default };

package/build/esm/index-c9d64e0f.js

@@ -0,0 +1,64 @@
+import { s as styleInject } from './index-4238b6c1.js';
+import classnames from 'classnames';
+import 'react';
+import Switch from 'react-switch';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var toggleText = "toggle-text-xzNMI";
+var yes = "yes-Rq8uh";
+var no = "no-ySZRX";
+var css_248z = ".switch-wrapper-YZN6e {\n  display: flex;\n  font-weight: 300;\n  line-height: 40px;\n  gap: 24px;\n}\n\n.toggle-text-xzNMI {\n  padding-left: 16px;\n  color: white;\n  line-height: 40px;\n  font-weight: 300;\n}\n\n.yes-Rq8uh {\n  padding-left: 16px;\n}\n\n.no-ySZRX {\n  padding-left: 4px;\n}\n";
+styleInject(css_248z);
+
+var Toggle = function Toggle(_ref) {
+  var _docStyle$getProperty;
+  var _onChange = _ref.onChange,
+    val = _ref.val,
+    state = _ref.state,
+    on = _ref.on,
+    off = _ref.off,
+    alwaysActiveColor = _ref.alwaysActiveColor,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 80 : _ref$width,
+    _ref$handleDiameter = _ref.handleDiameter,
+    handleDiameter = _ref$handleDiameter === void 0 ? 32 : _ref$handleDiameter;
+  var docStyle = getComputedStyle(document.documentElement);
+  var myVarVal = (_docStyle$getProperty = docStyle.getPropertyValue('--primaryColor')) === null || _docStyle$getProperty === void 0 ? void 0 : _docStyle$getProperty.replace(/ /g, '');
+  return /*#__PURE__*/jsx(Switch, {
+    checkedIcon: on ? /*#__PURE__*/jsx("div", {
+      className: classnames(toggleText, yes),
+      children: on
+    }) : /*#__PURE__*/jsx(Fragment, {}),
+    uncheckedIcon: off ? /*#__PURE__*/jsx("div", {
+      className: classnames(toggleText, no),
+      children: off
+    }) : /*#__PURE__*/jsx(Fragment, {}),
+    onChange: function onChange() {
+      return _onChange(val !== null && val !== void 0 ? val : !state);
+    },
+    checked: state,
+    onColor: myVarVal,
+    offColor: alwaysActiveColor ? myVarVal : '#CACACA',
+    height: height,
+    width: width,
+    handleDiameter: handleDiameter
+  });
+};
+
+export { Toggle as default };