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

package/build/esm/index-3535387d.js

@@ -0,0 +1,203 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-1282ca9e.js';
+import { useState, useEffect, Suspense } from 'react';
+import { n as notExpanded } from './index.module-28e45e49.js';
+import { s as scrollable, h as header, t as toggleWrapper, o as optionWrapper } from './index.module-fd7444f0.js';
+import { d as decision, D as DecisionVisualization } from './DecisionVizualizer-d422c73d.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import Toggle from './index-e66799e7.js';
+import AsyncRender from './index-915fdf71.js';
+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/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-json-view-lite';
+import 'react-draggable';
+import 'react-switch';
+import './index-3bedacfb.js';
+import 'react-collapsible';
+
+var _excluded = ["onMouseDown"];
+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 PartList = function PartList(_ref) {
+  var onMouseDown = _ref.onMouseDown,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDecision = _useState2[0],
+    setSelectedDecision = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    articlesList = _useState4[0],
+    setArticlesList = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showVariantsOverview = _useState6[0],
+    setShowVariantsOverview = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    allTablesOpen = _useState8[0],
+    setAllTablesOpen = _useState8[1];
+  var _useState9 = useState(true),
+    _useState10 = _slicedToArray(_useState9, 2),
+    showDiffOnly = _useState10[0],
+    setShowDiffOnly = _useState10[1];
+  var onClick = function onClick(obj) {
+    var _selectedDecision$dec, _selectedDecision$dec2;
+    var d = obj.decision;
+    var nr = d.decisionNo || d.Number;
+    if (nr == ((selectedDecision === null || selectedDecision === void 0 || (_selectedDecision$dec = selectedDecision.decision) === null || _selectedDecision$dec === void 0 ? void 0 : _selectedDecision$dec.Number) || (selectedDecision === null || selectedDecision === void 0 || (_selectedDecision$dec2 = selectedDecision.decision) === null || _selectedDecision$dec2 === void 0 ? void 0 : _selectedDecision$dec2.decisionNo))) {
+      setSelectedDecision(undefined);
+    } else setSelectedDecision(obj);
+  };
+  useEffect(function () {
+    if (showVariantsOverview) {
+      setTimeout(function () {
+        return updateVariants();
+      }, 400);
+    } else {
+      setArticlesList([{
+        snapshots: [{
+          promise: new Promise(function (r) {
+            var _viewHandler$divaWebP, _viewHandler$divaWebP2, _viewHandler$divaWebP3;
+            r({
+              articleSnapshot: (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getDivaArticles()) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {},
+              price: (_viewHandler$divaWebP2 = (_viewHandler$divaWebP3 = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP3 === void 0 ? void 0 : _viewHandler$divaWebP3.getSetPrice()) !== null && _viewHandler$divaWebP2 !== void 0 ? _viewHandler$divaWebP2 : 0
+            });
+          }),
+          title: '',
+          key: viewHandler.settingsState.configChanged.toString()
+        }]
+      }]);
+    }
+  }, [viewHandler.settingsState.configChanged, viewHandler.tabGroupState.curConfigStep]);
+  var updateVariants = function updateVariants() {
+    var snapshots = [];
+    var partlistArticlesInOverview = {};
+    var allItems = viewHandler.settingsState.itemPaletteArr.filter(function (i) {
+      return i[1].visible;
+    }).map(function (i) {
+      return {
+        items: i[1].groups.flatMap(function (g) {
+          return g.items.flatMap(function (c) {
+            return c;
+          });
+        }),
+        palette: i[1]
+      };
+    });
+    for (var i = 0; i < allItems.length; i++) {
+      var items = allItems[i].items;
+      var palette = allItems[i].palette;
+      var preparedItems = [];
+      for (var j = 0; j < items.length; j++) {
+        var item = items[j];
+        if (item.pricePreviewPromise && (item.text || item.name)) {
+          preparedItems.push({
+            promise: item.pricePreviewPromise.promise,
+            title: item.text || item.name,
+            key: palette.configStepKey
+          });
+        }
+      }
+      partlistArticlesInOverview[palette.configStepKey] = {
+        items: [],
+        totalCount: items.length
+      };
+      snapshots.push({
+        snapshots: preparedItems,
+        palette: palette
+      });
+    }
+    viewHandler.settingsState.setPartlistArticlesInOverview(partlistArticlesInOverview);
+    setArticlesList(snapshots);
+  };
+  useEffect(function () {
+    var set = viewHandler.divaWebPlanner.actSet();
+    if (set) set.logTotalStateForVariants = showVariantsOverview;
+  }, [showVariantsOverview]);
+  if (!(articlesList !== null && articlesList !== void 0 && articlesList.length)) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsxs("a", {
+      className: header,
+      onMouseDown: onMouseDown,
+      children: ['Stücklisten Übersicht', /*#__PURE__*/jsxs("div", {
+        className: toggleWrapper,
+        children: [/*#__PURE__*/jsx(Toggle, {
+          state: showVariantsOverview,
+          onChange: function onChange(val) {
+            return setShowVariantsOverview(val);
+          },
+          on: "alle",
+          off: "einzeln",
+          width: 100
+        }), showVariantsOverview && /*#__PURE__*/jsx(Toggle, {
+          state: allTablesOpen,
+          onChange: function onChange(val) {
+            return setAllTablesOpen(val);
+          },
+          on: "offen",
+          off: "zu",
+          width: 100
+        }), showVariantsOverview && /*#__PURE__*/jsx(Toggle, {
+          state: showDiffOnly,
+          onChange: function onChange(val) {
+            return setShowDiffOnly(val);
+          },
+          on: "schnittm.",
+          off: "alle",
+          width: 100
+        })]
+      })]
+    }), articlesList.map(function (a, index) {
+      var _a$palette;
+      return /*#__PURE__*/jsxs("div", {
+        className: optionWrapper,
+        children: [!!((_a$palette = a.palette) !== null && _a$palette !== void 0 && _a$palette.name) && /*#__PURE__*/jsx("div", {
+          children: a.palette.name
+        }), a.snapshots.map(function (v) {
+          return /*#__PURE__*/jsx(Suspense, {
+            children: /*#__PURE__*/jsx(AsyncRender, {
+              onClick: onClick,
+              optionSnapshot: v,
+              allOpen: allTablesOpen,
+              showDiffOnly: showDiffOnly
+            }, v.key)
+          });
+        })]
+      }, index);
+    }), selectedDecision && /*#__PURE__*/jsx("div", {
+      className: decision,
+      style: {
+        right: 0,
+        zIndex: 100
+      },
+      children: /*#__PURE__*/jsx(DecisionVisualization, {
+        decision: selectedDecision.decision,
+        matchingOptions: selectedDecision.rule
+      })
+    })]
+  }));
+};
+var PartListTable = observer(PartList);
+
+export { PartListTable as default };

package/build/esm/index-37bf0ce6.js

@@ -0,0 +1,47 @@
+import { u as useViewHandler } from './index-1282ca9e.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import NavBar from './index-649bf3ae.js';
+import { b as wcConfigurator3Dimage, d as imageCenterOrbit, e as imageCenterStatic } from './index.module-7d47810f.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+
+var Planner3DImage = function Planner3DImage(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setImage3DElement(_ref);
+    },
+    className: wcConfigurator3Dimage,
+    id: "3DImage-Container",
+    style: {
+      // backgroundImage: viewHandler.productState.RenderImageURL,
+      visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
+    },
+    children: [/*#__PURE__*/jsx(NavBar, {}), /*#__PURE__*/jsx("img", {
+      className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
+      id: "diva3dImg",
+      draggable: "false",
+      src: viewHandler.productState.diva3dImgSrc
+    })]
+  });
+};
+var Planner3DImage$1 = observer(Planner3DImage);
+
+export { Planner3DImage$1 as default };

package/build/esm/index-37ccf2f1.js

@@ -0,0 +1,312 @@
+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-1282ca9e.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-901ed0ee.js';
+import GenericToolTip from './index-57a58fe6.js';
+import SubTabGroup from './index-5466d7fb.js';
+import InfoIcon from './index-b73b0671.js';
+import PricePreview from './index-38bcbd09.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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-b9c9122a.js';
+import 'react-countup';
+import 'react-collapsible';
+import './index-459fb2f8.js';
+import './index-d84532f7.js';
+import 'sift';
+import './index-2de11734.js';
+import './index-7160e3e5.js';
+import './index-ff579656.js';
+import './index-8313d46c.js';
+import './index-45dc04b5.js';
+import './index.module-8746e900.js';
+import './index-e66799e7.js';
+import 'react-switch';
+import './index-99560938.js';
+import 'react-dropdown';
+import './index-68e87a3b.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-0f885305.js';
+import './index-bfc347b1.js';
+import './index-70b64c17.js';
+import '@crystaldesign/content-box';
+import './index-67b27c74.js';
+import './index-22a3fcec.js';
+import './index-38609004.js';
+import './index-c29c856d.js';
+import './index-263b4946.js';
+import './index-24c4fef4.js';
+import './index-596416b8.js';
+import './index-ca91aa4e.js';
+import './index-2dadb690.js';
+import './index.module-6d4cae45.js';
+import './index-0bd524e1.js';
+import './index-7c187ae4.js';
+import './index-167764bb.js';
+import './index-c21c3724.js';
+import './index-22ff8e10.js';
+import './index.module-40c7cce3.js';
+import './index-d77686fa.js';
+import './index-e1033b11.js';
+import './index-bdb8c0db.js';
+import './index-b55b7324.js';
+import './index-4316ef65.js';
+import './index-e8897322.js';
+import './index-b42e3803.js';
+import './index-405885b0.js';
+import './index-c73f12dc.js';
+import './index-aa6c7eb4.js';
+import './index-df34ac79.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-dc9ac41b.js';
+import 'rc-slider';
+import './index-fe0a4c8a.js';
+import './index-d28b9365.js';
+import './index-2d7442cc.js';
+import './index-d21a5388.js';
+import 'react-confetti-explosion';
+import './index-c8eba202.js';
+import './index-da1bd7c9.js';
+import './index-429aa728.js';
+import 'react-qr-code';
+import './index-2d40c0c9.js';
+import './useCustomDimensions-2f176227.js';
+import './index-293cc74b.js';
+import './ussIsSticky-d75ebbd7.js';
+import './index-b2bdff57.js';
+import './index-5ae2531e.js';
+import './index-28aff909.js';
+import './index.module-08105ec3.js';
+import './index-6270f27d.js';
+import './index-bc2b95a4.js';
+import './index-3b91b4df.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 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: calc(100% - 32px);\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@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 .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: 16px;\n  line-height: 30px;\n  width: 80px;\n  height: 48px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC {\n  line-height: 30px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC,\n.AccItemLandscape-bJ4ph .wcAccCTAPlus-W-ORy {\n  height: 30px;\n  width: 30px;\n  border-radius: 50%;\n}\n.AccItemLandscape-bJ4ph .wcAccInfoContainer-noQuw {\n  width: calc(100% - 192px);\n}\n\n.AccItemPortrait-1gIUO .wcCTAContainer-gIkLT {\n  font-size: 16px;\n  line-height: 30px;\n  width: 104px;\n  height: 48px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC {\n  line-height: 32px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC,\n.AccItemPortrait-1gIUO .wcAccCTAPlus-W-ORy {\n  height: 30px;\n  width: 30px;\n\n  border-radius: 50%;\n}\n.AccItemPortrait-1gIUO .wcAccInfoContainer-noQuw {\n  width: calc(100% - 192px);\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, _item$longDescription;
+  var itemP = _ref.item,
+    wrapper = _ref.wrapper,
+    _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: 1500,
+    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__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+      className: classnames(accItem, wrapper, 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
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(wcCtaContainer),
+          children: [item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+            item: item,
+            style: {
+              left: -32,
+              bottom: viewHandler.getIsInMobileView() ? 26 : 12
+            }
+          }, item.articleCodex), /*#__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: "+"
+          })]
+        })]
+      }), !pricesAreHidden && !!item.price && /*#__PURE__*/jsx(PricePreview, {
+        price: item.price,
+        style: {
+          paddingTop: 6
+        }
+      })]
+    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : 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 };